fix remaining eslint error

.eslintrc.js

@@ -45,6 +45,11 @@ module.exports = {
     rules: {
         eqeqeq: 'error',
         'prettier/prettier': ['error', prettier],
+        // TypeScript can infer this significantly better than eslint ever can.
+        'react/prop-types': 0,
+        'react/display-name': 0,
+        '@typescript-eslint/no-explicit-any': 0,
+        '@typescript-eslint/no-non-null-assertion': 0,
         // This setup is required to avoid a spam of errors when running eslint about React being
         // used before it is defined.
         //

resources/scripts/components/NavigationBar.tsx

@@ -40,7 +40,7 @@ export default () => {
     const onTriggerLogout = () => {
         setIsLoggingOut(true);
         http.post('/auth/logout').finally(() => {
-            // @ts-ignore
+            // @ts-expect-error this is valid
             window.location = '/';
         });
     };

resources/scripts/components/auth/LoginCheckpointContainer.tsx

@@ -77,7 +77,7 @@ const EnhancedForm = withFormik<Props, Values>({
         loginCheckpoint(location.state?.token || '', code, recoveryCode)
             .then((response) => {
                 if (response.complete) {
-                    // @ts-ignore
+                    // @ts-expect-error this is valid
                     window.location = response.intended || '/';
                     return;
                 }

resources/scripts/components/auth/LoginContainer.tsx

@@ -46,7 +46,7 @@ const LoginContainer = ({ history }: RouteComponentProps) => {
         login({ ...values, recaptchaData: token })
             .then((response) => {
                 if (response.complete) {
-                    // @ts-ignore
+                    // @ts-expect-error this is valid
                     window.location = response.intended || '/';
                     return;
                 }

resources/scripts/components/auth/ResetPasswordContainer.tsx

@@ -33,7 +33,7 @@ export default ({ match, location }: RouteComponentProps<{ token: string }>) =>
         clearFlashes();
         performPasswordReset(email, { token: match.params.token, password, passwordConfirmation })
             .then(() => {
-                // @ts-ignore
+                // @ts-expect-error this is valid
                 window.location = '/';
             })
             .catch((error) => {
@@ -57,7 +57,7 @@ export default ({ match, location }: RouteComponentProps<{ token: string }>) =>
                     .min(8, 'Your new password should be at least 8 characters in length.'),
                 passwordConfirmation: string()
                     .required('Your new password does not match.')
-                    // @ts-ignore
+                    // @ts-expect-error this is valid
                     .oneOf([ref('password'), null], 'Your new password does not match.'),
             })}
         >

resources/scripts/components/dashboard/ServerRow.tsx

@@ -47,8 +47,10 @@ const StatusIndicatorBox = styled(GreyRowBox)<{ $status: ServerPowerState | unde
     }
 `;
 
+type Timer = ReturnType<typeof setInterval>;
+
 export default ({ server, className }: { server: Server; className?: string }) => {
-    const interval = useRef<number>(null);
+    const interval = useRef<Timer>(null) as React.MutableRefObject<Timer>;
     const [isSuspended, setIsSuspended] = useState(server.status === 'suspended');
     const [stats, setStats] = useState<ServerStats | null>(null);
 
@@ -67,7 +69,6 @@ export default ({ server, className }: { server: Server; className?: string }) =
         if (isSuspended) return;
 
         getStats().then(() => {
-            // @ts-ignore
             interval.current = setInterval(() => getStats(), 30000);
         });
 

resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx

@@ -40,7 +40,7 @@ export default () => {
         clearFlashes('account:password');
         updateAccountPassword({ ...values })
             .then(() => {
-                // @ts-ignore
+                // @ts-expect-error this is valid
                 window.location = '/auth/login';
             })
             .catch((error) =>

resources/scripts/components/elements/CodemirrorEditor.tsx

@@ -169,8 +169,7 @@ export default ({ style, initialContent, filename, mode, fetchContent, onContent
             autocorrect: false,
             autocapitalize: false,
             lint: false,
-            // This property is actually used, the d.ts file for CodeMirror is incorrect.
+            // @ts-expect-error this property is actually used, the d.ts file for CodeMirror is incorrect.
-            // @ts-ignore
             autoCloseBrackets: true,
             matchBrackets: true,
             gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],

resources/scripts/components/elements/Icon.tsx

@@ -9,9 +9,7 @@ interface Props {
 }
 
 const Icon = ({ icon, className, style }: Props) => {
-    let [width, height, , , paths] = icon.icon;
+    const [width, height, , , paths] = icon.icon;
-
-    paths = Array.isArray(paths) ? paths : [paths];
 
     return (
         <svg
@@ -21,7 +19,7 @@ const Icon = ({ icon, className, style }: Props) => {
             className={className}
             style={style}
         >
-            {paths.map((path, index) => (
+            {(Array.isArray(paths) ? paths : [paths]).map((path, index) => (
                 <path key={`svg_path_${index}`} d={path} />
             ))}
         </svg>

resources/scripts/components/elements/ProgressBar.tsx

@@ -11,9 +11,11 @@ const BarFill = styled.div`
     box-shadow: 0 -2px 10px 2px hsl(178, 78%, 57%);
 `;
 
+type Timer = ReturnType<typeof setTimeout>;
+
 export default () => {
-    const interval = useRef<number>(null);
+    const interval = useRef<Timer>(null) as React.MutableRefObject<Timer>;
-    const timeout = useRef<number>(null);
+    const timeout = useRef<Timer>(null) as React.MutableRefObject<Timer>;
     const [visible, setVisible] = useState(false);
     const progress = useStoreState((state) => state.progress.progress);
     const continuous = useStoreState((state) => state.progress.continuous);
@@ -30,7 +32,6 @@ export default () => {
         setVisible((progress || 0) > 0);
 
         if (progress === 100) {
-            // @ts-ignore
             timeout.current = setTimeout(() => setProgress(undefined), 500);
         }
     }, [progress]);
@@ -52,8 +53,7 @@ export default () => {
             if ((progress || 0) >= 90) {
                 setProgress(90);
             } else {
-                // @ts-ignore
+                interval.current = setTimeout(() => setProgress((progress || 0) + randomInt(1, 5)), 500);
-                interval.current = setTimeout(() => setProgress(progress + randomInt(1, 5)), 500);
             }
         }
     }, [progress, continuous]);

resources/scripts/components/elements/button/Button.tsx

@@ -28,12 +28,12 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 );
 
 const TextButton = forwardRef<HTMLButtonElement, ButtonProps>(({ className, ...props }, ref) => (
-    // @ts-expect-error
+    // @ts-expect-error not sure how to get this correct
     <Button ref={ref} className={classNames(styles.text, className)} {...props} />
 ));
 
 const DangerButton = forwardRef<HTMLButtonElement, ButtonProps>(({ className, ...props }, ref) => (
-    // @ts-expect-error
+    // @ts-expect-error not sure how to get this correct
     <Button ref={ref} className={classNames(styles.danger, className)} {...props} />
 ));
 

resources/scripts/components/elements/dialog/Dialog.tsx

@@ -21,11 +21,11 @@ const DialogButtons = ({ children }: { children: React.ReactNode }) => <>{childr
 const Dialog = ({ open, title, description, onClose, hideCloseIcon, children }: DialogProps) => {
     const items = React.Children.toArray(children || []);
     const [buttons, icon, content] = [
-        // @ts-expect-error
+        // @ts-expect-error not sure how to get this correct
         items.find((child) => child.type === DialogButtons),
-        // @ts-expect-error
+        // @ts-expect-error not sure how to get this correct
         items.find((child) => child.type === DialogIcon),
-        // @ts-expect-error
+        // @ts-expect-error not sure how to get this correct
         items.filter((child) => ![DialogIcon, DialogButtons].includes(child.type)),
     ];
 

resources/scripts/components/server/backups/BackupContextMenu.tsx

@@ -41,7 +41,7 @@ export default ({ backup }: Props) => {
         clearFlashes('backups');
         getBackupDownloadUrl(uuid, backup.uuid)
             .then((url) => {
-                // @ts-ignore
+                // @ts-expect-error this is valid
                 window.location = url;
             })
             .catch((error) => {

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

@@ -100,7 +100,7 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
 
         getFileDownloadUrl(uuid, join(directory, file.name))
             .then((url) => {
-                // @ts-ignore
+                // @ts-expect-error this is valid
                 window.location = url;
             })
             .catch((error) => clearAndAddHttpError({ key: 'files', error }))

resources/scripts/state/user.ts

@@ -26,8 +26,7 @@ const user: UserStore = {
     }),
 
     updateUserData: action((state, payload) => {
-        // Limitation of Typescript, can't do much about that currently unfortunately.
+        // @ts-expect-error limitation of Typescript, can't do much about that currently unfortunately.
-        // @ts-ignore
         state.data = { ...state.data, ...payload };
     }),