Apply new eslint rules; default to prettier for styling

resources/scripts/components/server/files/UploadButton.tsx

@@ -15,28 +15,36 @@ import { WithClassname } from '@/components/types';
 import Portal from '@/components/elements/Portal';
 
 const InnerContainer = styled.div`
-  max-width: 600px;
-  ${tw`bg-black w-full border-4 border-primary-500 border-dashed rounded p-10 mx-10`}
+    max-width: 600px;
+    ${tw`bg-black w-full border-4 border-primary-500 border-dashed rounded p-10 mx-10`}
 `;
 
 export default ({ className }: WithClassname) => {
     const fileUploadInput = useRef<HTMLInputElement>(null);
-    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
-    const [ visible, setVisible ] = useState(false);
-    const [ loading, setLoading ] = useState(false);
+    const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
+    const [visible, setVisible] = useState(false);
+    const [loading, setLoading] = useState(false);
     const { mutate } = useFileManagerSwr();
     const { clearFlashes, clearAndAddHttpError } = useFlash();
-    const directory = ServerContext.useStoreState(state => state.files.directory);
+    const directory = ServerContext.useStoreState((state) => state.files.directory);
 
-    useEventListener('dragenter', e => {
-        e.stopPropagation();
-        setVisible(true);
-    }, true);
+    useEventListener(
+        'dragenter',
+        (e) => {
+            e.stopPropagation();
+            setVisible(true);
+        },
+        true
+    );
 
-    useEventListener('dragexit', e => {
-        e.stopPropagation();
-        setVisible(false);
-    }, true);
+    useEventListener(
+        'dragexit',
+        (e) => {
+            e.stopPropagation();
+            setVisible(false);
+        },
+        true
+    );
 
     useEffect(() => {
         if (!visible) return;
@@ -47,22 +55,24 @@ export default ({ className }: WithClassname) => {
         return () => {
             window.removeEventListener('keydown', hide);
         };
-    }, [ visible ]);
+    }, [visible]);
 
     const onFileSubmission = (files: FileList) => {
         const form = new FormData();
-        Array.from(files).forEach(file => form.append('files', file));
+        Array.from(files).forEach((file) => form.append('files', file));
 
         setLoading(true);
         clearFlashes('files');
         getFileUploadUrl(uuid)
-            .then(url => axios.post(`${url}&directory=${directory}`, form, {
-                headers: {
-                    'Content-Type': 'multipart/form-data',
-                },
-            }))
+            .then((url) =>
+                axios.post(`${url}&directory=${directory}`, form, {
+                    headers: {
+                        'Content-Type': 'multipart/form-data',
+                    },
+                })
+            )
             .then(() => mutate())
-            .catch(error => {
+            .catch((error) => {
                 console.error(error);
                 clearAndAddHttpError({ error, key: 'files' });
             })
@@ -73,17 +83,11 @@ export default ({ className }: WithClassname) => {
     return (
         <>
             <Portal>
-                <Fade
-                    appear
-                    in={visible}
-                    timeout={75}
-                    key={'upload_modal_mask'}
-                    unmountOnExit
-                >
+                <Fade appear in={visible} timeout={75} key={'upload_modal_mask'} unmountOnExit>
                     <ModalMask
                         onClick={() => setVisible(false)}
-                        onDragOver={e => e.preventDefault()}
-                        onDrop={e => {
+                        onDragOver={(e) => e.preventDefault()}
+                        onDrop={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
 
@@ -95,20 +99,18 @@ export default ({ className }: WithClassname) => {
                     >
                         <div css={tw`w-full flex items-center justify-center`} style={{ pointerEvents: 'none' }}>
                             <InnerContainer>
-                                <p css={tw`text-lg text-neutral-200 text-center`}>
-                                    Drag and drop files to upload.
-                                </p>
+                                <p css={tw`text-lg text-neutral-200 text-center`}>Drag and drop files to upload.</p>
                             </InnerContainer>
                         </div>
                     </ModalMask>
                 </Fade>
-                <SpinnerOverlay visible={loading} size={'large'} fixed/>
+                <SpinnerOverlay visible={loading} size={'large'} fixed />
             </Portal>
             <input
                 type={'file'}
                 ref={fileUploadInput}
                 css={tw`hidden`}
-                onChange={e => {
+                onChange={(e) => {
                     if (!e.currentTarget.files) return;
 
                     onFileSubmission(e.currentTarget.files);
@@ -120,9 +122,7 @@ export default ({ className }: WithClassname) => {
             <Button
                 className={className}
                 onClick={() => {
-                    fileUploadInput.current
-                        ? fileUploadInput.current.click()
-                        : setVisible(true);
+                    fileUploadInput.current ? fileUploadInput.current.click() : setVisible(true);
                 }}
             >
                 Upload