From 29da1ceace69ff782e165edf21d65d9412dbe76b Mon Sep 17 00:00:00 2001
From: "Navy.gif" <navydotgif@gmail.com>
Date: Wed, 1 May 2024 16:57:32 +0300
Subject: [PATCH] Linter rules update

---
 .eslintrc.json                   | 25 +++++++++++++++++++++--
 src/App.tsx                      |  8 ++++----
 src/components/InputElements.tsx | 24 +++++++++++-----------
 src/components/PageControls.tsx  |  4 ++--
 src/components/PageElements.tsx  | 22 ++++++++++-----------
 src/components/Sidebar.tsx       |  8 ++++----
 src/components/Table.tsx         |  2 +-
 src/components/TitledPage.tsx    | 12 +++++------
 src/components/UserControls.tsx  |  8 ++++----
 src/pages/Login.tsx              | 34 ++++++++++++++++----------------
 src/pages/Recover.tsx            |  4 ++--
 src/pages/Register.tsx           | 16 +++++++--------
 src/pages/admin/Admin.tsx        | 10 +++++-----
 src/pages/admin/Flags.tsx        | 14 ++++++-------
 src/pages/admin/Users.tsx        | 20 +++++++++----------
 src/pages/home/Applications.tsx  | 14 ++++++-------
 src/pages/home/Home.tsx          |  6 +++---
 src/pages/home/Profile.tsx       | 11 ++++++-----
 src/util/ClickDetector.tsx       |  6 +++---
 src/util/ErrorBoundary.tsx       |  8 ++++----
 src/util/Util.ts                 |  2 +-
 src/views/PermissionsView.tsx    |  8 ++++----
 src/views/RateLimitsView.tsx     |  8 ++++----
 23 files changed, 148 insertions(+), 126 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index f4f0fe9..1e40eb7 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -15,7 +15,8 @@
             "jsx": true
         },
         "ecmaVersion": 12,
-        "sourceType": "module"
+        "sourceType": "module",
+        "project": "./tsconfig.json"
     },
     "plugins": [
         "react",
@@ -31,11 +32,18 @@
             "allman"
         ],
         "indent": ["warn", 4, {
-            "SwitchCase": 1
+            "SwitchCase": 1,
+            "VariableDeclarator": "first",
+            "FunctionDeclaration": {"parameters": "first"},
+            "CallExpression": {"arguments": "first"},
+            "ArrayExpression": "first",
+            "ObjectExpression": "first",
+            "ImportDeclaration": "first"
         }],
         "no-warning-comments": [1, {
             "terms": ["todo", "fixme"]
         }],
+        "no-multi-spaces": ["warn", {"ignoreEOLComments": true, "exceptions": {"ImportDeclaration": true}}],
         "prefer-arrow-callback": "warn",
         "prefer-const": "warn",
         "prefer-destructuring": "warn",
@@ -77,7 +85,20 @@
         "no-console": "warn",
         "no-constant-binary-expression": "error",
         "no-trailing-spaces": "warn",
+        "no-tabs": "error",
         "quotes": ["error" , "single"],
+        "jsx-quotes": [
+            "error",
+            "prefer-single"
+        ],
+        "key-spacing": [
+            "warn",
+            {
+                "beforeColon": false,
+                "afterColon": true,
+                "align": "value"
+            }
+        ],
         "guard-for-in": "warn",
         "yoda": [
             "warn",
diff --git a/src/App.tsx b/src/App.tsx
index 164fe84..f77a9ac 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -77,13 +77,13 @@ const App = () =>
 
     const menuItems: SidebarMenuItem[] = [
         {
-            to: '/home', label: 'Home', items: [
+            to:    '/home', label: 'Home', items: [
                 { to: '/profile', label: 'Profile', relative: true },
                 { to: '/applications', label: 'Applications', relative: true, permission: [ 'applications:*', 1 ] }
             ]
         },
         {
-            to: '/admin', label: 'Admin', permission: [ 'administrator:*', 1 ], items: [
+            to:         '/admin', label:      'Admin', permission: [ 'administrator:*', 1 ], items:      [
                 { to: '/users', label: 'Users', relative: true, permission: [ 'administrator:users:*', 1 ] },
                 { to: '/roles', label: 'Roles', relative: true, permission: [ 'administrator:roles:*', 1 ] },
                 { to: '/flags', label: 'Flags', relative: true, permission: [ 'administrator:flags:*', 1 ] },
@@ -101,7 +101,7 @@ const App = () =>
 
                 {user ?
                     <div>
-                        <header className="">
+                        <header className=''>
                             {/* <OnlineList /> */}
                             <UserControls />
                         </header>
@@ -153,7 +153,7 @@ const App = () =>
                     </ErrorBoundary>
 
                     <div className={`footer ${user ? '' : 'login'}`}>
-                        <p className='m-0 text-center'>Made with <i className="icon corgi transparent"></i> by <a href="https://corgi.wtf" target="_blank" rel="noreferrer">Navy.gif</a> &nbsp;|&nbsp; Front-end magic by <a href="https://d3vision.dev" target="_blank" rel="noreferrer">D3vision</a></p>
+                        <p className='m-0 text-center'>Made with <i className='icon corgi transparent'></i> by <a href='https://corgi.wtf' target='_blank' rel='noreferrer'>Navy.gif</a> &nbsp;|&nbsp; Front-end magic by <a href='https://d3vision.dev' target='_blank' rel='noreferrer'>D3vision</a></p>
                     </div>
                 </div>
 
diff --git a/src/components/InputElements.tsx b/src/components/InputElements.tsx
index 5da8c5b..40aff8c 100644
--- a/src/components/InputElements.tsx
+++ b/src/components/InputElements.tsx
@@ -25,11 +25,11 @@ export const FileSelector = ({ file, cb, types = '' }: { types?: string, file: F
         cb(file);
     };
 
-    return <label onDrop={onDrop} onDragOver={onDragOver} htmlFor="fileUpload" className="drop-container">
-        <span className="drop-title">Drag &apos;n&apos; drop a file here</span>
+    return <label onDrop={onDrop} onDragOver={onDragOver} htmlFor='fileUpload' className='drop-container'>
+        <span className='drop-title'>Drag &apos;n&apos; drop a file here</span>
         or
-        <span className="drop-title">Click to select a file</span>
-        <p className="fileName m-0">{file ? `Selected: ${file.name}` : null}</p>
+        <span className='drop-title'>Click to select a file</span>
+        <p className='fileName m-0'>{file ? `Selected: ${file.name}` : null}</p>
         <input onChange={(event) =>
         {
             if (!event.target.files)
@@ -37,7 +37,7 @@ export const FileSelector = ({ file, cb, types = '' }: { types?: string, file: F
             const [ f ] = event.target.files;
             cb(f);
         }}
-        type="file" id="fileUpload" accept={types} required />
+        type='file' id='fileUpload' accept={types} required />
     </label>;
 };
 
@@ -55,7 +55,7 @@ export type InputElementProperties<T> = {
 export const ToggleSwitch = ({ name, defaultValue: value, onChange, inputRef, children, className = '' }: InputElementProperties<boolean>) =>
 {
     return <label className={`label-fix ${className}`}>
-        <span className="check-box check-box-row">
+        <span className='check-box check-box-row'>
             {children && <b>{children}</b>}
             <input name={name} ref={inputRef} defaultChecked={value} onChange={onChange} type='checkbox' />
         </span>
@@ -64,9 +64,9 @@ export const ToggleSwitch = ({ name, defaultValue: value, onChange, inputRef, ch
 
 export const VerticalToggleSwitch = ({ name, defaultValue: value, onChange, inputRef, children }: InputElementProperties<boolean>) =>
 {
-    return <label className="label-fix">
+    return <label className='label-fix'>
         {children && <b>{children}</b>}
-        <span className="check-box">
+        <span className='check-box'>
             <input name={name} ref={inputRef} defaultChecked={value} onChange={onChange} type='checkbox' />
         </span>
     </label>;
@@ -121,7 +121,7 @@ export const NumberInput = ({ name, children, placeholder, inputRef, onChange, d
         ref={inputRef}
         defaultValue={value}
         onChange={onChange}
-        type="number"
+        type='number'
         min={min}
         max={max}
         step={step}
@@ -164,7 +164,7 @@ export const ClickToEdit = ({ value, onUpdate, inputElement, placeholder }:
         return <span className='input-group'>
             {input}
             <div className='input-group-btn'>
-                <button className="button primary" onClick={onClick} >OK</button>
+                <button className='button primary' onClick={onClick} >OK</button>
             </div>
         </span>;
     return <span onClick={() => setEditing(true)} className='mt-0 mb-1 clickable'>{value || placeholder}</span>;
@@ -240,9 +240,9 @@ const DropdownComp = ({ children, className = '', onToggle }: DropdownProps) =>
 };
 
 const Dropdown = Object.assign(DropdownComp, {
-    Header: DropdownHeader,
+    Header:   DropdownHeader,
     ItemList: DropdownItemList,
-    Item: DropdownItem
+    Item:     DropdownItem
 });
 
 export type InputElementType =
diff --git a/src/components/PageControls.tsx b/src/components/PageControls.tsx
index a647043..cf3d1e0 100644
--- a/src/components/PageControls.tsx
+++ b/src/components/PageControls.tsx
@@ -53,7 +53,7 @@ export const PageButtons = ({ setPage, page, pages, disabled }: PageButtonProps)
     };
 
     return <div className='flex is-vertical-align is-center page-controls'>
-        <button className="button dark" disabled={page === 1 || disabled} onClick={previous}>Previous</button>
+        <button className='button dark' disabled={page === 1 || disabled} onClick={previous}>Previous</button>
         <div className='flex gap-3 align-items-center'><span>Page:</span> {showInput ? <input onKeyUp={(e) =>
         {
             if (e.key === 'Enter')
@@ -62,7 +62,7 @@ export const PageButtons = ({ setPage, page, pages, disabled }: PageButtonProps)
                 onEnter(field.value);
             }
         }} className='page-number-input mb-0 p-2 pb-1' defaultValue={page} type='number' /> : <span className='clickable' onClick={onClick}>{page}</span>}<span> / {pages || 1}</span></div>
-        <button className="button dark" disabled={page >= pages || disabled} onClick={next}>Next</button>
+        <button className='button dark' disabled={page >= pages || disabled} onClick={next}>Next</button>
     </div>;
 };
 
diff --git a/src/components/PageElements.tsx b/src/components/PageElements.tsx
index cb5c413..aa72ea7 100644
--- a/src/components/PageElements.tsx
+++ b/src/components/PageElements.tsx
@@ -29,18 +29,18 @@ export const Refresher = ({ state, className = '', tooltipText, onRefresh: onCli
         onClick();
     };
     return <div className={`refresher-wrapper ${className}`} {...tooltipText ? { 'data-tooltip': tooltipText } : {}}>
-        <div id="reportRefresher" className={`refresher ${stateClass}`} onClick={refresh}>
-            <svg className="icon-loading" viewBox="0 0 32 32">
-                <path d="M 16 4 C 10.886719 4 6.617188 7.160156 4.875 11.625 L 6.71875 12.375 C 8.175781 8.640625 11.710938 6 16 6 C 19.242188 6 22.132813 7.589844 23.9375 10 L 20 10 L 20 12 L 27 12 L 27 5 L 25 5 L 25 8.09375 C 22.808594 5.582031 19.570313 4 16 4 Z M 25.28125 19.625 C 23.824219 23.359375 20.289063 26 16 26 C 12.722656 26 9.84375 24.386719 8.03125 22 L 12 22 L 12 20 L 5 20 L 5 27 L 7 27 L 7 23.90625 C 9.1875 26.386719 12.394531 28 16 28 C 21.113281 28 25.382813 24.839844 27.125 20.375 Z ">
+        <div id='reportRefresher' className={`refresher ${stateClass}`} onClick={refresh}>
+            <svg className='icon-loading' viewBox='0 0 32 32'>
+                <path d='M 16 4 C 10.886719 4 6.617188 7.160156 4.875 11.625 L 6.71875 12.375 C 8.175781 8.640625 11.710938 6 16 6 C 19.242188 6 22.132813 7.589844 23.9375 10 L 20 10 L 20 12 L 27 12 L 27 5 L 25 5 L 25 8.09375 C 22.808594 5.582031 19.570313 4 16 4 Z M 25.28125 19.625 C 23.824219 23.359375 20.289063 26 16 26 C 12.722656 26 9.84375 24.386719 8.03125 22 L 12 22 L 12 20 L 5 20 L 5 27 L 7 27 L 7 23.90625 C 9.1875 26.386719 12.394531 28 16 28 C 21.113281 28 25.382813 24.839844 27.125 20.375 Z '>
                 </path>
             </svg>
-            <svg className="icon-success" viewBox="0 0 76 76">
-                <path fill="none" strokeWidth="7" d="M17.5,40.9l10.9,10.9l28.7-28"></path>
+            <svg className='icon-success' viewBox='0 0 76 76'>
+                <path fill='none' strokeWidth='7' d='M17.5,40.9l10.9,10.9l28.7-28'></path>
             </svg>
-            <svg className="icon-error" viewBox="0 0 20 20">
-                <circle cx="10" cy="10" r="10"></circle>
-                <polyline points="5 15, 15 5"></polyline>
-                <polyline points="15 15, 5 5"></polyline>
+            <svg className='icon-error' viewBox='0 0 20 20'>
+                <circle cx='10' cy='10' r='10'></circle>
+                <polyline points='5 15, 15 5'></polyline>
+                <polyline points='15 15, 5 5'></polyline>
             </svg>
         </div>
     </div>;
@@ -194,8 +194,8 @@ type BasePaginatedCardProps = {
     // onlineList?: string
 }
 export const BasePaginatedCard = ({ children, data,
-    className, id, tableDivClass, formatter, callback,
-    page, pages, setPage, loadState, onRefresh }: BasePaginatedCardProps) =>
+                                    className, id, tableDivClass, formatter, callback,
+                                    page, pages, setPage, loadState, onRefresh }: BasePaginatedCardProps) =>
 {
     if (!(children instanceof Array))
         children = [ children ];
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 1045231..f394238 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -12,7 +12,7 @@ const Sidebar = ({ children }: {children?: React.ReactNode}) =>
 {
     return <div className='sidebar card'>
         <div className='flex align-items-center'>
-            <img className="sidebar-logo" src={logoImg}/>
+            <img className='sidebar-logo' src={logoImg}/>
             <span className='hamburger mr-5 mb-2' onClick={expandMobileMenu}></span>
         </div>
         {children}
@@ -83,7 +83,7 @@ const SidebarMenu = ({ menuItems = [], children }: {menuItems: SidebarMenuItem[]
             });
 
         let link = <NavLink className={`sidebar-menu-item ${subElements?.length ? 'has-children' : ''}`} onClick={closeMobileMenu} activeClassName='active open' {...rest} key={label}>
-            {label}{subElements && <i className="sidebar-menu-item-carrot" onClick={toggleMenu}></i>}
+            {label}{subElements && <i className='sidebar-menu-item-carrot' onClick={toggleMenu}></i>}
         </NavLink>;
         if(external)
             link = <Link className='sidebar-menu-item' {...rest}>{label}</Link>;
@@ -102,8 +102,8 @@ const SidebarMenu = ({ menuItems = [], children }: {menuItems: SidebarMenuItem[]
         {elements}
 
         {children}
-        <div className="parent-menu log-out-menu-item">
-            <a className="sidebar-menu-item" onClick={logOut} href="#">Log Out</a>
+        <div className='parent-menu log-out-menu-item'>
+            <a className='sidebar-menu-item' onClick={logOut} href='#'>Log Out</a>
         </div>
     </div>;
 
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index 41d1413..fdb89d6 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -33,7 +33,7 @@ export const Table = ({ headerItems, children, items, itemKeys }: TableProps) =>
     if(!children && !items)
         throw new Error('Missing items or children');
     let i = 0;
-    return <table className="striped hover table-pd" >
+    return <table className='striped hover table-pd' >
         <thead>
             <tr>
                 {headerItems.map(item => <th key={item}>{item}</th>)}
diff --git a/src/components/TitledPage.tsx b/src/components/TitledPage.tsx
index cef1de4..791048e 100644
--- a/src/components/TitledPage.tsx
+++ b/src/components/TitledPage.tsx
@@ -12,10 +12,10 @@ type SubtitleContext = {
 }
 const Context = React.createContext<SubtitleContext>({
     breadcrumbs: [],
-    set: () => null,
-    clear: () => null,
-    push: () => null,
-    pop: () => null,
+    set:         () => null,
+    clear:       () => null,
+    push:        () => null,
+    pop:         () => null,
 });
 
 let TO: NodeJS.Timeout | null = null;
@@ -30,11 +30,11 @@ export const useSubtitle = () =>
 const Main = ({ title, crumbs: crumbs, children }: {title: string, crumbs: string[], children: React.ReactNode}) =>
 {
     const trail = crumbs.length ? `/ ${crumbs.join(' / ')}` : '';
-    return <div className="page">
+    return <div className='page'>
         <Helmet>
             <title>{title} {trail}</title>
         </Helmet>
-        <h2 className="pageTitle">{title} {trail}</h2>
+        <h2 className='pageTitle'>{title} {trail}</h2>
         <div className='card'>
             {children}
         </div>
diff --git a/src/components/UserControls.tsx b/src/components/UserControls.tsx
index 4a54cba..52a233e 100644
--- a/src/components/UserControls.tsx
+++ b/src/components/UserControls.tsx
@@ -32,15 +32,15 @@ const UserControls = () =>
             detailsRef.current.removeAttribute('open');
     }}>
         <details ref={detailsRef} className='dropdown user-controls card'>
-            <summary className="is-vertical-align">
+            <summary className='is-vertical-align'>
                 Hello {user.displayName || user.name}
-                <img className="profile-picture" src={`/api/users/${user.id}/avatar`}></img>
+                <img className='profile-picture' src={`/api/users/${user.id}/avatar`}></img>
             </summary>
 
-            <div className="card">
+            <div className='card'>
                 <p className='mb-0'><span className='clickable' onClick={() => navigate('/home/profile')}>Profile</span></p>
                 <hr className='mt-3 mb-3'/>
-                <p><a onClick={logOut} className="text-error">Logout</a></p>
+                <p><a onClick={logOut} className='text-error'>Logout</a></p>
             </div>
 
         </details>
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index b92d463..615a892 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -71,31 +71,31 @@ const CredentialFields = () =>
 
     return <div>
         <LoadingBar color='#2685ff' ref={ref} />
-        <div className="is-center">
-            <img className="logoImg mb-4" src={logoImg}></img>
+        <div className='is-center'>
+            <img className='logoImg mb-4' src={logoImg}></img>
         </div>
 
-        <div className="card mb-3 is-center dir-column">
+        <div className='card mb-3 is-center dir-column'>
             <h2>Log in</h2>
 
-            <form className="loginForm">
+            <form className='loginForm'>
                 <input ref={usernameRef} autoComplete='off' placeholder='Username' required id='username' type='text' autoFocus />
                 <input ref={passwordRef} autoComplete='off' placeholder='Password' required id='password' type='password' />
                 <div className='button-group'>
-                    <button className="button primary" onClick={loginClick}>Enter</button>
+                    <button className='button primary' onClick={loginClick}>Enter</button>
                     <button className='button red' onClick={forgotPassword}>Forgot password</button>
                 </div>
             </form>
 
-            {registrationEnabled ? <div className="text-center registerText">
-                { 'Don\'t have an account?'}<br/><a onClick={() => navigate('/register')} className="clickable">Register</a> instead!
+            {registrationEnabled ? <div className='text-center registerText'>
+                { 'Don\'t have an account?'}<br/><a onClick={() => navigate('/register')} className='clickable'>Register</a> instead!
             </div> : null}
 
         </div>
 
-        <div className="card is-center dir-column">
+        <div className='card is-center dir-column'>
             <b>Alternate login methods</b>
-            <div className="methodsWrapper is-center flex-wrap">
+            <div className='methodsWrapper is-center flex-wrap'>
                 {loginMethods.map((method: OAuthProvider) => <div
                     className='third-party-login'
                     key={method.name}
@@ -104,7 +104,7 @@ const CredentialFields = () =>
                         window.location.pathname = `/api/login/${method.name}`;
                     }}>
                     <img
-                        crossOrigin="anonymous"
+                        crossOrigin='anonymous'
                         alt={method.name}
                         src={method.icon}
                         width={48} height={48}
@@ -145,16 +145,16 @@ const TwoFactor = () =>
 
     return <div>
         <LoadingBar color='#2685ff' ref={ref} />
-        <div className="is-center">
-            <img className="logoImg mb-4" src={logoImg}></img>
+        <div className='is-center'>
+            <img className='logoImg mb-4' src={logoImg}></img>
         </div>
 
-        <div className="card mb-3 is-center dir-column">
+        <div className='card mb-3 is-center dir-column'>
             <h2>Verification Code</h2>
-            {fail ? <p className="mt-0">Invalid code</p> : null}
-            <form className="is-center dir-column">
+            {fail ? <p className='mt-0'>Invalid code</p> : null}
+            <form className='is-center dir-column'>
                 <input ref={mfaCode} autoComplete='off' placeholder='Your 2FA code...' required id='2faCode' type='password' />
-                <button className="button primary mt-1 mb-3" onClick={twoFactorClick}>Enter</button>
+                <button className='button primary mt-1 mb-3' onClick={twoFactorClick}>Enter</button>
             </form>
         </div>
     </div>;
@@ -162,7 +162,7 @@ const TwoFactor = () =>
 
 const Login = ({ title }: {title: string}) =>
 {
-    return <div className="row is-center is-full-screen is-marginless">
+    return <div className='row is-center is-full-screen is-marginless'>
         <div className='loginWrapper col-6 col-6-md col-3-lg'>
             <Helmet>
                 <title>{title}</title>
diff --git a/src/pages/Recover.tsx b/src/pages/Recover.tsx
index 9660a69..ebf134b 100644
--- a/src/pages/Recover.tsx
+++ b/src/pages/Recover.tsx
@@ -56,8 +56,8 @@ const Main = () =>
 
 const Recover = ({ title }: {title: string}) =>
 {
-    return <div className="row is-center is-fucll-screen is-marginless">
-        <div className="col-6 col-6-md col-3-lg">
+    return <div className='row is-center is-fucll-screen is-marginless'>
+        <div className='col-6 col-6-md col-3-lg'>
             <Helmet>
                 <title>{title}</title>
             </Helmet>
diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
index 3a6913b..7ea25a0 100644
--- a/src/pages/Register.tsx
+++ b/src/pages/Register.tsx
@@ -40,28 +40,28 @@ const Register = ({ title }: {title: string}) =>
         navigate('/login');
     };
 
-    return <div className="row is-center is-full-screen is-marginless">
+    return <div className='row is-center is-full-screen is-marginless'>
         <LoadingBar color='#2685ff' ref={ref} />
         <Helmet>
             <title>{title}</title>
         </Helmet>
         <div className='registerWrapper col-6 col-6-md col-3-lg'>
             <div>
-                <div className="is-center">
-                    <img className="logoImg mb-4" src={logoImg}></img>
+                <div className='is-center'>
+                    <img className='logoImg mb-4' src={logoImg}></img>
                 </div>
 
-                <div className="card mb-3 is-center dir-column">
+                <div className='card mb-3 is-center dir-column'>
                     <h2>Register</h2>
 
-                    <form className="registerForm">
+                    <form className='registerForm'>
                         <input ref={usernameRef} autoComplete='off' placeholder='Username' required id='username' type='text' autoFocus />
                         <input ref={passwordRef} autoComplete='off' placeholder='Password' required id='password' type='password' />
-                        <button className="button primary" onClick={submit}>Register</button>
+                        <button className='button primary' onClick={submit}>Register</button>
                     </form>
 
-                    <div className="text-center registerText">
-                        Have an account?<br/><a onClick={() => navigate('/login')} className="clickable">Log in</a> instead!
+                    <div className='text-center registerText'>
+                        Have an account?<br/><a onClick={() => navigate('/login')} className='clickable'>Log in</a> instead!
                     </div>
                 </div>
             </div>
diff --git a/src/pages/admin/Admin.tsx b/src/pages/admin/Admin.tsx
index f563df1..8cf681f 100644
--- a/src/pages/admin/Admin.tsx
+++ b/src/pages/admin/Admin.tsx
@@ -20,9 +20,9 @@ const Main = () =>
         // console.log(file);
     };
 
-    return <div className="row">
+    return <div className='row'>
 
-        <div className="col-6-lg col-12">
+        <div className='col-6-lg col-12'>
             <h2>Thematic customisation</h2>
             <form>
                 <input type='text' placeholder='Site name' />
@@ -32,7 +32,7 @@ const Main = () =>
 
         </div>
 
-        <div className="col-6-lg col-12">
+        <div className='col-6-lg col-12'>
             <h2>Dingus</h2>
 
         </div>
@@ -51,8 +51,8 @@ const Admin = () =>
     }, [ window.location.href ]);
     return <ErrorBoundary>
         <Routes>
-            <Route path="/" element={<Main />} />
-            <Route path="/users/*" element={<PermissionBarrier permission='administrator:users:*'>
+            <Route path='/' element={<Main />} />
+            <Route path='/users/*' element={<PermissionBarrier permission='administrator:users:*'>
                 <Users/>
             </PermissionBarrier>} />
             <Route path='/roles/*' element={<PermissionBarrier permission='administrator:roles:*'>
diff --git a/src/pages/admin/Flags.tsx b/src/pages/admin/Flags.tsx
index a7db9aa..2ee7e75 100644
--- a/src/pages/admin/Flags.tsx
+++ b/src/pages/admin/Flags.tsx
@@ -8,10 +8,10 @@ import ClickDetector from '../../util/ClickDetector';
 import { useSubtitle } from '../../components/TitledPage';
 
 const emptyFlag: FlagCreateData = {
-    name: '',
-    env: '',
-    consumer: '',
-    value: '',
+    name:      '',
+    env:       '',
+    consumer:  '',
+    value:     '',
     hierarchy: ''
 };
 
@@ -251,7 +251,7 @@ const CreateFlag = ({ close, submit }: { close: () => void, submit: (data: FlagC
         <h4>Create Flag</h4>
         <form onSubmit={createFlag} onReset={cancel}>
             <label>Name</label>
-            <input onChange={handleChange} minLength={4}  name='name' autoComplete='off' placeholder='Name' type='text' required />
+            <input onChange={handleChange} minLength={4} name='name' autoComplete='off' placeholder='Name' type='text' required />
             <label>Environment</label>
             <input onChange={handleChange} name='env' autoComplete='off' placeholder='Environment' type='text' required />
             <label>Consumer</label>
@@ -362,7 +362,7 @@ const Main = () =>
                         }}
                         placeholder='Flag name or ID'
                     />
-                    {availableFilters && <Dropdown className="m-0">
+                    {availableFilters && <Dropdown className='m-0'>
                         <Dropdown.Header className='p-2'>
                             {selectedFilters.length === 0
                                 ? <p className='placeholder'>Click to filter</p>
@@ -398,7 +398,7 @@ const Main = () =>
 
             <h4 className='mt-3'>Flags</h4>
             <button onClick={() => togglePopup(true)} className='button primary'>Create</button>
-            <ToggleSwitch className="mt-3 mb-3" defaultValue={listView} onChange={(event) =>
+            <ToggleSwitch className='mt-3 mb-3' defaultValue={listView} onChange={(event) =>
             {
                 toggleListView(event.target.checked);
             }}>List View:</ToggleSwitch>
diff --git a/src/pages/admin/Users.tsx b/src/pages/admin/Users.tsx
index 405b2fa..5bfb89a 100644
--- a/src/pages/admin/Users.tsx
+++ b/src/pages/admin/Users.tsx
@@ -16,10 +16,10 @@ type UserFilters = {
     //
 }
 const emptyUsersState = {
-    users: new Map(), setUsers: () => null,
-    roles: new Map(), setRoles: () => null,
+    users:        new Map(), setUsers:     () => null,
+    roles:        new Map(), setRoles:     () => null,
     refreshState: false, refreshUsers: () => null,
-    searchFilter: {}, setFilter: () => null
+    searchFilter: {}, setFilter:    () => null
 };
 type UsersContextObj = {
     users: Map<string, UserStruct>, setUsers: (users: Map<string, UserStruct>) => void,
@@ -313,7 +313,7 @@ const UserData = ({ user, updateUser }: {user: UserStruct | null, updateUser: (u
                             <Dropdown.Header className='w-25-rem p-0'>
                                 {equippedRoles.map(role =>
                                     <div key={role.id} className='card role flex gap-5px align-items-center'>
-                                        {role.name} <span className="icon x hover" onClick={(e) =>
+                                        {role.name} <span className='icon x hover' onClick={(e) =>
                                         {
                                             e.preventDefault();
                                             deselectRole(role);
@@ -345,7 +345,7 @@ const UserData = ({ user, updateUser }: {user: UserStruct | null, updateUser: (u
                     </div>
                     <hr />
                     <div className='ml-4'>
-                        <button onClick={commitPerms} className="button primary">Save</button>
+                        <button onClick={commitPerms} className='button primary'>Save</button>
                         <button onClick={resetPerms} className='button red'>Reset</button>
                     </div>
                 </div>
@@ -504,15 +504,15 @@ const UserList = ({ page, pages, setPage, loadState, onRefresh }: UserListProps)
                     <h4>Invitation Link</h4>
                     {
                         link ?
-                            <div className="registerCodeWrapper tooltip"><p onClick={copyToClipboard}>{link}</p></div>
-                            : <button onClick={getSignupCode} className="button primary is-center">Create sign-up link</button>
+                            <div className='registerCodeWrapper tooltip'><p onClick={copyToClipboard}>{link}</p></div>
+                            : <button onClick={getSignupCode} className='button primary is-center'>Create sign-up link</button>
                     }
                     <hr />
                     <h4>Create User</h4>
                     <form>
                         <p>Users will be forced to change the password you set here.</p>
-                        <input ref={usernameRef} placeholder="Username" autoComplete="off" type='text' id='username' />
-                        <input ref={passwordRef} placeholder="Password" autoComplete="off" type='password' id='password' />
+                        <input ref={usernameRef} placeholder='Username' autoComplete='off' type='text' id='username' />
+                        <input ref={passwordRef} placeholder='Password' autoComplete='off' type='password' id='password' />
                         <button onClick={createUser} className='button primary'>Create User</button>
                     </form>
                 </div>
@@ -558,7 +558,7 @@ const Main = () =>
     }, [ refresh, setRoles ]);
 
     return <Routes>
-        <Route path='/*' element={<UserList {...{ page, pages, setPage, loadState, onRefresh: () =>  setRefresh(val => !val) }} />} />
+        <Route path='/*' element={<UserList {...{ page, pages, setPage, loadState, onRefresh: () => setRefresh(val => !val) }} />} />
         <Route path='/:userId/*' element={<User refreshList={() => setRefresh(val => !val)} />} />
         {/* <Route path='/:userId/applications/:appId' element={<Application />} /> */}
     </Routes>;
diff --git a/src/pages/home/Applications.tsx b/src/pages/home/Applications.tsx
index 54a1a54..e135650 100644
--- a/src/pages/home/Applications.tsx
+++ b/src/pages/home/Applications.tsx
@@ -182,7 +182,7 @@ const Applications = () =>
 
     const Main = () =>
     {
-        return <div className="row">
+        return <div className='row'>
 
             <PaginatedCard
                 path='/api/user/applications'
@@ -215,12 +215,12 @@ const Applications = () =>
                 </Table>
             </div> */}
 
-            <div className="col">
+            <div className='col'>
                 <h2>Create Application</h2>
                 <form>
-                    <input ref={nameField} placeholder="Name" type='text' />
-                    <textarea ref={descField} rows={5} placeholder="Describe your application" />
-                    <button onClick={createApp} className="button primary mt-3">Create</button>
+                    <input ref={nameField} placeholder='Name' type='text' />
+                    <textarea ref={descField} rows={5} placeholder='Describe your application' />
+                    <button onClick={createApp} className='button primary mt-3'>Create</button>
                 </form>
             </div>
         </div>;
@@ -237,8 +237,8 @@ const Applications = () =>
 
     return <ErrorBoundary>
         <Routes>
-            <Route path="/" element={<Main />} />
-            <Route path="/:id" element={<Application />} />
+            <Route path='/' element={<Main />} />
+            <Route path='/:id' element={<Application />} />
         </Routes>
     </ErrorBoundary>;
 };
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
index 8357876..ede12be 100644
--- a/src/pages/home/Home.tsx
+++ b/src/pages/home/Home.tsx
@@ -49,9 +49,9 @@ const Home = () =>
     }, [ window.location.href ]);
     return <ErrorBoundary>
         <Routes>
-            <Route path="/" element={<Main />} />
-            <Route path="/profile" element={<Profile />} />
-            <Route path="/applications/*" element={
+            <Route path='/' element={<Main />} />
+            <Route path='/profile' element={<Profile />} />
+            <Route path='/applications/*' element={
                 <PermissionBarrier permission='applications:*'>
                     <Applications />
                 </PermissionBarrier>
diff --git a/src/pages/home/Profile.tsx b/src/pages/home/Profile.tsx
index beca5f1..fb8f81c 100644
--- a/src/pages/home/Profile.tsx
+++ b/src/pages/home/Profile.tsx
@@ -104,6 +104,12 @@ const Profile = () =>
     const newPassRef = useRef<HTMLInputElement>(null);
     const newPassRepeatRef = useRef<HTMLInputElement>(null);
 
+    useEffect(() =>
+    {
+        subtitle.set('Profile');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     if (!user)
         return <div>
             Not logged in
@@ -170,11 +176,6 @@ const Profile = () =>
         window.open('/api/user/connect/discord', '_blank', 'noreferrer');
     };
 
-    useEffect(() =>
-    {
-        subtitle.set('Profile');
-    }, []);
-
     return <div>
         <div className='row'>
             <DataCard className='col-6-lg col-12'>
diff --git a/src/util/ClickDetector.tsx b/src/util/ClickDetector.tsx
index cadfca9..6db0429 100644
--- a/src/util/ClickDetector.tsx
+++ b/src/util/ClickDetector.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 
 // Listens for mouse clicks outside of the wrapped element
-const alerter = (ref: React.RefObject<HTMLElement>, callback: () => void) =>
+const useAlerter = (ref: React.RefObject<HTMLElement>, callback: () => void) =>
 {
     useEffect(() =>
     {
@@ -20,7 +20,7 @@ const alerter = (ref: React.RefObject<HTMLElement>, callback: () => void) =>
             document.removeEventListener('mousedown', listener);
         };
 
-    }, [ ref ]);
+    }, [ callback, ref ]);
 };
 
 /**
@@ -32,7 +32,7 @@ const alerter = (ref: React.RefObject<HTMLElement>, callback: () => void) =>
 const ClickDetector = ({ children, callback, className='', style }: { style?: React.CSSProperties, children: React.ReactNode, callback: () => void, className?: string}) =>
 {
     const wrapperRef = useRef(null);
-    alerter(wrapperRef, callback);
+    useAlerter(wrapperRef, callback);
 
     return (
         <div style={style} className={`click-detector ${className}`} ref={wrapperRef}>
diff --git a/src/util/ErrorBoundary.tsx b/src/util/ErrorBoundary.tsx
index 8aacc5e..62e83d8 100644
--- a/src/util/ErrorBoundary.tsx
+++ b/src/util/ErrorBoundary.tsx
@@ -23,11 +23,11 @@ class ErrorBoundary extends React.Component<BoundaryProps, StateProps>
     {
         super(props);
         this.state = {
-            reAuth: false,
+            reAuth:     false,
             chunkIssue: false,
-            active: false,
-            error: null,
-            info: null
+            active:     false,
+            error:      null,
+            info:       null
         };
         this.fallback = props.fallback;
     }
diff --git a/src/util/Util.ts b/src/util/Util.ts
index b2c7e88..aa1765f 100644
--- a/src/util/Util.ts
+++ b/src/util/Util.ts
@@ -347,7 +347,7 @@ export const dateString = (ts: number) =>
     return new Date(ts).toLocaleString(navigator.language);
 };
 
-export const  randomString = (len = 32)  =>
+export const randomString = (len = 32) =>
 {
     let result = '';
     for (let i = 50; i > 0; --i)
diff --git a/src/views/PermissionsView.tsx b/src/views/PermissionsView.tsx
index bfa1f87..3f71f52 100644
--- a/src/views/PermissionsView.tsx
+++ b/src/views/PermissionsView.tsx
@@ -15,7 +15,7 @@ export const Permission = ({ name, value, chain, updatePerms, readOnly = false }
         updatePerms(chain, val);
     };
 
-    return <li className="flex is-vertical-align space-between">
+    return <li className='flex is-vertical-align space-between'>
         <label>{name}</label>
         <input readOnly={readOnly} ref={inputRef} onChange={onChange} max={10} min={0} type='number' defaultValue={value as number}></input>
     </li>;
@@ -36,9 +36,9 @@ export const PermissionGroup = ({ name, value, chain, updatePerms, readOnly = fa
             elements.push(<Permission {...props} />);
     }
     return <li>
-        <input type="checkbox" className="collapsible" id={`${chain}_${name}_collapsible`}></input>
+        <input type='checkbox' className='collapsible' id={`${chain}_${name}_collapsible`}></input>
         <label htmlFor={`${chain}_${name}_collapsible`} >
-            <div className="groupName">
+            <div className='groupName'>
                 <b>Group: {name}</b>
             </div>
         </label>
@@ -97,7 +97,7 @@ export const Permissions = ({ perms, onUpdate }: { perms: PermissionsStruct, onU
         elements.push(<Elem {...props} />);
     }
 
-    return <ul className="tree w-max-fit-content w-min-35-rem">
+    return <ul className='tree w-max-fit-content w-min-35-rem'>
         {elements}
     </ul>;
 };
\ No newline at end of file
diff --git a/src/views/RateLimitsView.tsx b/src/views/RateLimitsView.tsx
index 282017c..2ae14a8 100644
--- a/src/views/RateLimitsView.tsx
+++ b/src/views/RateLimitsView.tsx
@@ -10,7 +10,7 @@ const RateLimit = ({ route, limit }: {route: string, limit: RL}) =>
         <label>Time</label>
         <input min={0} defaultValue={limit.time} type='number' />
         <label>Enabled</label>
-        <div className="check-box">
+        <div className='check-box'>
             <input defaultChecked={!limit.disabled} type='checkbox' />
         </div>
     </Fragment>;
@@ -21,14 +21,14 @@ export const RateLimits = ({ rateLimits }: {rateLimits: RLs}) =>
     const routes = Object.keys(rateLimits);
     const elements = routes.map((route, index) =>
     {
-        return <div key={index} className="card">
-            <RateLimit {...{ route, limit:rateLimits[route], index }} />
+        return <div key={index} className='card'>
+            <RateLimit {...{ route, limit: rateLimits[route], index }} />
         </div>;
     });
 
     return <div className='col-6-lg col-12'>
         <h2>Rate Limits</h2>
-        <div className="flex flex-wrap">
+        <div className='flex flex-wrap'>
             {elements}
         </div>