Apply new eslint rules; default to prettier for styling

resources/scripts/components/server/features/Features.tsx

@@ -2,18 +2,20 @@ import React, { useMemo } from 'react';
 import features from './index';
 import { getObjectKeys } from '@/lib/objects';
 
-type ListItems = [ string, React.ComponentType ][];
+type ListItems = [string, React.ComponentType][];
 
 export default ({ enabled }: { enabled: string[] }) => {
     const mapped: ListItems = useMemo(() => {
         return getObjectKeys(features)
-            .filter(key => enabled.map((v) => v.toLowerCase()).includes(key.toLowerCase()))
-            .reduce((arr, key) => [ ...arr, [ key, features[key] ] ], [] as ListItems);
-    }, [ enabled ]);
+            .filter((key) => enabled.map((v) => v.toLowerCase()).includes(key.toLowerCase()))
+            .reduce((arr, key) => [...arr, [key, features[key]]], [] as ListItems);
+    }, [enabled]);
 
     return (
         <React.Suspense fallback={null}>
-            {mapped.map(([ key, Component ]) => <Component key={key}/>)}
+            {mapped.map(([key, Component]) => (
+                <Component key={key} />
+            ))}
         </React.Suspense>
     );
 };

resources/scripts/components/server/features/GSLTokenModalFeature.tsx

@@ -15,24 +15,21 @@ interface Values {
 }
 
 const GSLTokenModalFeature = () => {
-    const [ visible, setVisible ] = useState(false);
-    const [ loading, setLoading ] = useState(false);
+    const [visible, setVisible] = useState(false);
+    const [loading, setLoading] = useState(false);
 
-    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
-    const status = ServerContext.useStoreState(state => state.status.value);
+    const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
+    const status = ServerContext.useStoreState((state) => state.status.value);
     const { clearFlashes, clearAndAddHttpError } = useFlash();
-    const { connected, instance } = ServerContext.useStoreState(state => state.socket);
+    const { connected, instance } = ServerContext.useStoreState((state) => state.socket);
 
     useEffect(() => {
         if (!connected || !instance || status === 'running') return;
 
-        const errors = [
-            '(gsl token expired)',
-            '(account not found)',
-        ];
+        const errors = ['(gsl token expired)', '(account not found)'];
 
         const listener = (line: string) => {
-            if (errors.some(p => line.toLowerCase().includes(p))) {
+            if (errors.some((p) => line.toLowerCase().includes(p))) {
                 setVisible(true);
             }
         };
@@ -42,7 +39,7 @@ const GSLTokenModalFeature = () => {
         return () => {
             instance.removeListener(SocketEvent.CONSOLE_OUTPUT, listener);
         };
-    }, [ connected, instance, status ]);
+    }, [connected, instance, status]);
 
     const updateGSLToken = (values: Values) => {
         setLoading(true);
@@ -57,7 +54,7 @@ const GSLTokenModalFeature = () => {
                 setLoading(false);
                 setVisible(false);
             })
-            .catch(error => {
+            .catch((error) => {
                 console.error(error);
                 clearAndAddHttpError({ key: 'feature:gslToken', error });
             })
@@ -69,16 +66,23 @@ const GSLTokenModalFeature = () => {
     }, []);
 
     return (
-        <Formik
-            onSubmit={updateGSLToken}
-            initialValues={{ gslToken: '' }}
-        >
-            <Modal visible={visible} onDismissed={() => setVisible(false)} closeOnBackground={false} showSpinnerOverlay={loading}>
-                <FlashMessageRender key={'feature:gslToken'} css={tw`mb-4`}/>
+        <Formik onSubmit={updateGSLToken} initialValues={{ gslToken: '' }}>
+            <Modal
+                visible={visible}
+                onDismissed={() => setVisible(false)}
+                closeOnBackground={false}
+                showSpinnerOverlay={loading}
+            >
+                <FlashMessageRender key={'feature:gslToken'} css={tw`mb-4`} />
                 <Form>
                     <h2 css={tw`text-2xl mb-4 text-neutral-100`}>Invalid GSL token!</h2>
-                    <p css={tw`mt-4`}>It seems like your Gameserver Login Token (GSL token) is invalid or has expired.</p>
-                    <p css={tw`mt-4`}>You can either generate a new one and enter it below or leave the field blank to remove it completely.</p>
+                    <p css={tw`mt-4`}>
+                        It seems like your Gameserver Login Token (GSL token) is invalid or has expired.
+                    </p>
+                    <p css={tw`mt-4`}>
+                        You can either generate a new one and enter it below or leave the field blank to remove it
+                        completely.
+                    </p>
                     <div css={tw`sm:flex items-center mt-4`}>
                         <Field
                             name={'gslToken'}

resources/scripts/components/server/features/JavaVersionModalFeature.tsx

@@ -22,14 +22,14 @@ const MATCH_ERRORS = [
 ];
 
 const JavaVersionModalFeature = () => {
-    const [ visible, setVisible ] = useState(false);
-    const [ loading, setLoading ] = useState(false);
-    const [ selectedVersion, setSelectedVersion ] = useState('');
+    const [visible, setVisible] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [selectedVersion, setSelectedVersion] = useState('');
 
-    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
-    const status = ServerContext.useStoreState(state => state.status.value);
+    const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
+    const status = ServerContext.useStoreState((state) => state.status.value);
     const { clearFlashes, clearAndAddHttpError } = useFlash();
-    const { instance } = ServerContext.useStoreState(state => state.socket);
+    const { instance } = ServerContext.useStoreState((state) => state.socket);
 
     const { data, isValidating, mutate } = getServerStartup(uuid, null, { revalidateOnMount: false });
 
@@ -39,12 +39,12 @@ const JavaVersionModalFeature = () => {
         mutate().then((value) => {
             setSelectedVersion(Object.keys(value?.dockerImages || [])[0] || '');
         });
-    }, [ visible ]);
+    }, [visible]);
 
     useWebsocketEvent(SocketEvent.CONSOLE_OUTPUT, (data) => {
         if (status === 'running') return;
 
-        if (MATCH_ERRORS.some(p => data.toLowerCase().includes(p.toLowerCase()))) {
+        if (MATCH_ERRORS.some((p) => data.toLowerCase().includes(p.toLowerCase()))) {
             setVisible(true);
         }
     });
@@ -60,7 +60,7 @@ const JavaVersionModalFeature = () => {
                 }
                 setVisible(false);
             })
-            .catch(error => clearAndAddHttpError({ key: 'feature:javaVersion', error }))
+            .catch((error) => clearAndAddHttpError({ key: 'feature:javaVersion', error }))
             .then(() => setLoading(false));
     };
 
@@ -75,7 +75,7 @@ const JavaVersionModalFeature = () => {
             closeOnBackground={false}
             showSpinnerOverlay={loading}
         >
-            <FlashMessageRender key={'feature:javaVersion'} css={tw`mb-4`}/>
+            <FlashMessageRender key={'feature:javaVersion'} css={tw`mb-4`} />
             <h2 css={tw`text-2xl mb-4 text-neutral-100`}>Unsupported Java Version</h2>
             <p css={tw`mt-4`}>
                 This server is currently running an unsupported version of Java and cannot be started.
@@ -86,13 +86,16 @@ const JavaVersionModalFeature = () => {
             <Can action={'startup.docker-image'}>
                 <div css={tw`mt-4`}>
                     <InputSpinner visible={!data || isValidating}>
-                        <Select disabled={!data} onChange={e => setSelectedVersion(e.target.value)}>
-                            {!data
-                                ? <option disabled/>
-                                : Object.keys((data.dockerImages)).map((key) => (
-                                    <option key={key} value={data.dockerImages[key]}>{key}</option>
+                        <Select disabled={!data} onChange={(e) => setSelectedVersion(e.target.value)}>
+                            {!data ? (
+                                <option disabled />
+                            ) : (
+                                Object.keys(data.dockerImages).map((key) => (
+                                    <option key={key} value={data.dockerImages[key]}>
+                                        {key}
+                                    </option>
                                 ))
-                            }
+                            )}
                         </Select>
                     </InputSpinner>
                 </div>

resources/scripts/components/server/features/PIDLimitModalFeature.tsx

@@ -11,13 +11,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 
 const PIDLimitModalFeature = () => {
-    const [ visible, setVisible ] = useState(false);
-    const [ loading ] = useState(false);
+    const [visible, setVisible] = useState(false);
+    const [loading] = useState(false);
 
-    const status = ServerContext.useStoreState(state => state.status.value);
+    const status = ServerContext.useStoreState((state) => state.status.value);
     const { clearFlashes } = useFlash();
-    const { connected, instance } = ServerContext.useStoreState(state => state.socket);
-    const isAdmin = useStoreState(state => state.user.data!.rootAdmin);
+    const { connected, instance } = ServerContext.useStoreState((state) => state.socket);
+    const isAdmin = useStoreState((state) => state.user.data!.rootAdmin);
 
     useEffect(() => {
         if (!connected || !instance || status === 'running') return;
@@ -32,7 +32,7 @@ const PIDLimitModalFeature = () => {
         ];
 
         const listener = (line: string) => {
-            if (errors.some(p => line.toLowerCase().includes(p))) {
+            if (errors.some((p) => line.toLowerCase().includes(p))) {
                 setVisible(true);
             }
         };
@@ -42,45 +42,63 @@ const PIDLimitModalFeature = () => {
         return () => {
             instance.removeListener(SocketEvent.CONSOLE_OUTPUT, listener);
         };
-    }, [ connected, instance, status ]);
+    }, [connected, instance, status]);
 
     useEffect(() => {
         clearFlashes('feature:pidLimit');
     }, []);
 
     return (
-        <Modal visible={visible} onDismissed={() => setVisible(false)} closeOnBackground={false} showSpinnerOverlay={loading}>
+        <Modal
+            visible={visible}
+            onDismissed={() => setVisible(false)}
+            closeOnBackground={false}
+            showSpinnerOverlay={loading}
+        >
             <FlashMessageRender key={'feature:pidLimit'} css={tw`mb-4`} />
-            {isAdmin ?
+            {isAdmin ? (
                 <>
                     <div css={tw`mt-4 sm:flex items-center`}>
-                        <FontAwesomeIcon css={tw`pr-4`} icon={faExclamationTriangle} color={'orange'} size={'4x'}/>
+                        <FontAwesomeIcon css={tw`pr-4`} icon={faExclamationTriangle} color={'orange'} size={'4x'} />
                         <h2 css={tw`text-2xl mb-4 text-neutral-100 `}>Memory or process limit reached...</h2>
                     </div>
                     <p css={tw`mt-4`}>This server has reached the maximum process or memory limit.</p>
-                    <p css={tw`mt-4`}>Increasing <code css={tw`font-mono bg-neutral-900`}>container_pid_limit</code> in the wings configuration, <code css={tw`font-mono bg-neutral-900`}>config.yml</code>, might help resolve this issue.</p>
-                    <p css={tw`mt-4`}><b>Note: Wings must be restarted for the configuration file changes to take effect</b></p>
+                    <p css={tw`mt-4`}>
+                        Increasing <code css={tw`font-mono bg-neutral-900`}>container_pid_limit</code> in the wings
+                        configuration, <code css={tw`font-mono bg-neutral-900`}>config.yml</code>, might help resolve
+                        this issue.
+                    </p>
+                    <p css={tw`mt-4`}>
+                        <b>Note: Wings must be restarted for the configuration file changes to take effect</b>
+                    </p>
                     <div css={tw`mt-8 sm:flex items-center justify-end`}>
                         <Button onClick={() => setVisible(false)} css={tw`w-full sm:w-auto border-transparent`}>
                             Close
                         </Button>
                     </div>
                 </>
-                :
+            ) : (
                 <>
                     <div css={tw`mt-4 sm:flex items-center`}>
-                        <FontAwesomeIcon css={tw`pr-4`} icon={faExclamationTriangle} color={'orange'} size={'4x'}/>
+                        <FontAwesomeIcon css={tw`pr-4`} icon={faExclamationTriangle} color={'orange'} size={'4x'} />
                         <h2 css={tw`text-2xl mb-4 text-neutral-100`}>Possible resource limit reached...</h2>
                     </div>
-                    <p css={tw`mt-4`}>This server is attempting to use more resources than allocated. Please contact the administrator and give them the error below.</p>
-                    <p css={tw`mt-4`}><code css={tw`font-mono bg-neutral-900`}>pthread_create failed, Possibly out of memory or process/resource limits reached</code></p>
+                    <p css={tw`mt-4`}>
+                        This server is attempting to use more resources than allocated. Please contact the administrator
+                        and give them the error below.
+                    </p>
+                    <p css={tw`mt-4`}>
+                        <code css={tw`font-mono bg-neutral-900`}>
+                            pthread_create failed, Possibly out of memory or process/resource limits reached
+                        </code>
+                    </p>
                     <div css={tw`mt-8 sm:flex items-center justify-end`}>
                         <Button onClick={() => setVisible(false)} css={tw`w-full sm:w-auto border-transparent`}>
                             Close
                         </Button>
                     </div>
                 </>
-            }
+            )}
         </Modal>
     );
 };

resources/scripts/components/server/features/SteamDiskSpaceFeature.tsx

@@ -9,24 +9,21 @@ import { SocketEvent } from '@/components/server/events';
 import { useStoreState } from 'easy-peasy';
 
 const SteamDiskSpaceFeature = () => {
-    const [ visible, setVisible ] = useState(false);
-    const [ loading ] = useState(false);
+    const [visible, setVisible] = useState(false);
+    const [loading] = useState(false);
 
-    const status = ServerContext.useStoreState(state => state.status.value);
+    const status = ServerContext.useStoreState((state) => state.status.value);
     const { clearFlashes } = useFlash();
-    const { connected, instance } = ServerContext.useStoreState(state => state.socket);
-    const isAdmin = useStoreState(state => state.user.data!.rootAdmin);
+    const { connected, instance } = ServerContext.useStoreState((state) => state.socket);
+    const isAdmin = useStoreState((state) => state.user.data!.rootAdmin);
 
     useEffect(() => {
         if (!connected || !instance || status === 'running') return;
 
-        const errors = [
-            'steamcmd needs 250mb of free disk space to update',
-            '0x202 after update job',
-        ];
+        const errors = ['steamcmd needs 250mb of free disk space to update', '0x202 after update job'];
 
         const listener = (line: string) => {
-            if (errors.some(p => line.toLowerCase().includes(p))) {
+            if (errors.some((p) => line.toLowerCase().includes(p))) {
                 setVisible(true);
             }
         };
@@ -36,41 +33,56 @@ const SteamDiskSpaceFeature = () => {
         return () => {
             instance.removeListener(SocketEvent.CONSOLE_OUTPUT, listener);
         };
-    }, [ connected, instance, status ]);
+    }, [connected, instance, status]);
 
     useEffect(() => {
         clearFlashes('feature:steamDiskSpace');
     }, []);
 
     return (
-        <Modal visible={visible} onDismissed={() => setVisible(false)} closeOnBackground={false} showSpinnerOverlay={loading}>
+        <Modal
+            visible={visible}
+            onDismissed={() => setVisible(false)}
+            closeOnBackground={false}
+            showSpinnerOverlay={loading}
+        >
             <FlashMessageRender key={'feature:steamDiskSpace'} css={tw`mb-4`} />
-            {isAdmin ?
+            {isAdmin ? (
                 <>
                     <div css={tw`mt-4 sm:flex items-center`}>
                         <h2 css={tw`text-2xl mb-4 text-neutral-100 `}>Out of available disk space...</h2>
                     </div>
-                    <p css={tw`mt-4`}>This server has run out of available disk space and cannot complete the install or update process.</p>
-                    <p css={tw`mt-4`}>Ensure the machine has enough disk space by typing <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>df -h</code> on the machine hosting this server. Delete files or increase the available disk space to resolve the issue.</p>
+                    <p css={tw`mt-4`}>
+                        This server has run out of available disk space and cannot complete the install or update
+                        process.
+                    </p>
+                    <p css={tw`mt-4`}>
+                        Ensure the machine has enough disk space by typing{' '}
+                        <code css={tw`font-mono bg-neutral-900 rounded py-1 px-2`}>df -h</code> on the machine hosting
+                        this server. Delete files or increase the available disk space to resolve the issue.
+                    </p>
                     <div css={tw`mt-8 sm:flex items-center justify-end`}>
                         <Button onClick={() => setVisible(false)} css={tw`w-full sm:w-auto border-transparent`}>
                             Close
                         </Button>
                     </div>
                 </>
-                :
+            ) : (
                 <>
                     <div css={tw`mt-4 sm:flex items-center`}>
                         <h2 css={tw`text-2xl mb-4 text-neutral-100`}>Out of available disk space...</h2>
                     </div>
-                    <p css={tw`mt-4`}>This server has run out of available disk space and cannot complete the install or update process. Please get in touch with the administrator(s) and inform them of disk space issues.</p>
+                    <p css={tw`mt-4`}>
+                        This server has run out of available disk space and cannot complete the install or update
+                        process. Please get in touch with the administrator(s) and inform them of disk space issues.
+                    </p>
                     <div css={tw`mt-8 sm:flex items-center justify-end`}>
                         <Button onClick={() => setVisible(false)} css={tw`w-full sm:w-auto border-transparent`}>
                             Close
                         </Button>
                     </div>
                 </>
-            }
+            )}
         </Modal>
     );
 };

resources/scripts/components/server/features/eula/EulaModalFeature.tsx

@@ -9,13 +9,13 @@ import useFlash from '@/plugins/useFlash';
 import { SocketEvent, SocketRequest } from '@/components/server/events';
 
 const EulaModalFeature = () => {
-    const [ visible, setVisible ] = useState(false);
-    const [ loading, setLoading ] = useState(false);
+    const [visible, setVisible] = useState(false);
+    const [loading, setLoading] = useState(false);
 
-    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
-    const status = ServerContext.useStoreState(state => state.status.value);
+    const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
+    const status = ServerContext.useStoreState((state) => state.status.value);
     const { clearFlashes, clearAndAddHttpError } = useFlash();
-    const { connected, instance } = ServerContext.useStoreState(state => state.socket);
+    const { connected, instance } = ServerContext.useStoreState((state) => state.socket);
 
     useEffect(() => {
         if (!connected || !instance || status === 'running') return;
@@ -31,7 +31,7 @@ const EulaModalFeature = () => {
         return () => {
             instance.removeListener(SocketEvent.CONSOLE_OUTPUT, listener);
         };
-    }, [ connected, instance, status ]);
+    }, [connected, instance, status]);
 
     const onAcceptEULA = () => {
         setLoading(true);
@@ -46,7 +46,7 @@ const EulaModalFeature = () => {
                 setLoading(false);
                 setVisible(false);
             })
-            .catch(error => {
+            .catch((error) => {
                 console.error(error);
                 clearAndAddHttpError({ key: 'feature:eula', error });
             })
@@ -58,26 +58,32 @@ const EulaModalFeature = () => {
     }, []);
 
     return (
-        <Modal visible={visible} onDismissed={() => setVisible(false)} closeOnBackground={false} showSpinnerOverlay={loading}>
-            <FlashMessageRender key={'feature:eula'} css={tw`mb-4`}/>
+        <Modal
+            visible={visible}
+            onDismissed={() => setVisible(false)}
+            closeOnBackground={false}
+            showSpinnerOverlay={loading}
+        >
+            <FlashMessageRender key={'feature:eula'} css={tw`mb-4`} />
             <h2 css={tw`text-2xl mb-4 text-neutral-100`}>Accept Minecraft&reg; EULA</h2>
             <p css={tw`text-neutral-200`}>
-                    By pressing {'"I Accept"'} below you are indicating your agreement to the&nbsp;
+                By pressing {'"I Accept"'} below you are indicating your agreement to the&nbsp;
                 <a
                     target={'_blank'}
                     css={tw`text-primary-300 underline transition-colors duration-150 hover:text-primary-400`}
                     rel={'noreferrer noopener'}
-                    href="https://account.mojang.com/documents/minecraft_eula"
+                    href='https://account.mojang.com/documents/minecraft_eula'
                 >
-                        Minecraft&reg; EULA
-                </a>.
+                    Minecraft&reg; EULA
+                </a>
+                .
             </p>
             <div css={tw`mt-8 sm:flex items-center justify-end`}>
                 <Button isSecondary onClick={() => setVisible(false)} css={tw`w-full sm:w-auto border-transparent`}>
-                        Cancel
+                    Cancel
                 </Button>
                 <Button onClick={onAcceptEULA} css={tw`mt-4 sm:mt-0 sm:ml-4 w-full sm:w-auto`}>
-                        I Accept
+                    I Accept
                 </Button>
             </div>
         </Modal>