forked from fvzy/pterodactylthemes
-
Notifications
You must be signed in to change notification settings - Fork 1
/
FetchButton.tsx
96 lines (88 loc) · 3.55 KB
/
FetchButton.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import React, { useEffect, useState } from 'react';
import Modal from '@/components/elements/Modal';
import { ServerContext } from '@/state/server';
import { Form, Formik, FormikHelpers } from 'formik';
import Field from '@/components/elements/Field';
import { join } from 'path';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
import useFlash from '@/plugins/useFlash';
import { WithClassname } from '@/components/types';
import FlashMessageRender from '@/components/FlashMessageRender';
import { object, string } from 'yup';
import http from '@/api/http';
interface Values {
url: string;
}
const schema = object().shape({
url: string().required('A valid URL must be provided.'),
});
export default ({ className }: WithClassname) => {
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { clearFlashes, clearAndAddHttpError } = useFlash();
const [ visible, setVisible ] = useState(false);
const directory = ServerContext.useStoreState(state => state.files.directory);
useEffect(() => {
if (!visible) return;
return () => {
clearFlashes('files:fetch-modal');
};
}, [ visible ]);
const submit = ({ url }: Values, { setSubmitting }: FormikHelpers<Values>) => {
setSubmitting(true);
http.post(`/api/client/servers/${uuid}/files/pull`, { directory: '/', url })
.then(function () {
setSubmitting(false);
setVisible(false);
})
.catch(function (error) {
setSubmitting(false);
clearAndAddHttpError({ key: 'files:fetch-modal', error });
})
.then(() => window.location.reload());
};
return (
<>
<Formik
onSubmit={submit}
validationSchema={schema}
initialValues={{ url: '' }}
>
{({ resetForm, isSubmitting, values }) => (
<Modal
visible={visible}
dismissable={!isSubmitting}
showSpinnerOverlay={isSubmitting}
onDismissed={() => {
setVisible(false);
resetForm();
}}
>
<FlashMessageRender key={'files:fetch-modal'}/>
<Form css={tw`m-0`}>
<Field
autoFocus
id={'url'}
name={'url'}
label={'File URL'}
/>
<p css={tw`text-xs mt-2 text-neutral-400 break-all`}>
<span css={tw`text-neutral-200`}>This file will be fetched to</span>
/home/container/
{join(directory).replace(/^(\.\.\/|\/)+/, '')}
</p>
<div css={tw`flex justify-end`}>
<Button css={tw`mt-8`}>
Fetch
</Button>
</div>
</Form>
</Modal>
)}
</Formik>
<Button isSecondary onClick={() => setVisible(true)} className={className}>
Upload From Url
</Button>
</>
);
};