Remove a hilarious number of unused dependencies

resources/scripts/components/server/ServerConsole.tsx

@@ -2,7 +2,6 @@ import React, { lazy, useEffect, useState } from 'react';
 import { ServerContext } from '@/state/server';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCircle, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome/free-solid-svg-icons';
-import classNames from 'classnames';
 import { bytesToHuman } from '@/helpers';
 import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
@@ -68,11 +67,10 @@ export default () => {
                         <FontAwesomeIcon
                             icon={faCircle}
                             fixedWidth
-                            className={classNames('mr-1', {
-                                'text-red-500': status === 'offline',
-                                'text-yellow-500': [ 'running', 'offline' ].indexOf(status) < 0,
-                                'text-green-500': status === 'running',
-                            })}
+                            css={[
+                                tw`mr-1`,
+                                status === 'offline' ? tw`text-red-500` : (status === 'running' ? tw`text-green-500` : tw`text-yellow-500`),
+                            ]}
                         />
                         &nbsp;{status}
                     </p>

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

@@ -1,14 +1,13 @@
 import React, { lazy, useEffect, useState } from 'react';
 import { ServerContext } from '@/state/server';
 import getFileContents from '@/api/server/files/getFileContents';
-import useRouter from 'use-react-router';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import saveFileContents from '@/api/server/files/saveFileContents';
 import FileManagerBreadcrumbs from '@/components/server/files/FileManagerBreadcrumbs';
-import { useParams } from 'react-router';
+import { useHistory, useLocation, useParams } from 'react-router';
 import FileNameModal from '@/components/server/files/FileNameModal';
 import Can from '@/components/elements/Can';
 import FlashMessageRender from '@/components/FlashMessageRender';
@@ -22,11 +21,13 @@ const LazyAceEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/compo
 export default () => {
     const [ error, setError ] = useState('');
     const { action } = useParams();
-    const { history, location: { hash } } = useRouter();
     const [ loading, setLoading ] = useState(action === 'edit');
     const [ content, setContent ] = useState('');
     const [ modalVisible, setModalVisible ] = useState(false);
 
+    const history = useHistory();
+    const { hash } = useLocation();
+
     const { id, uuid } = ServerContext.useStoreState(state => state.server.data!);
     const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 

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

@@ -6,14 +6,15 @@ import React from 'react';
 import { FileObject } from '@/api/server/files/loadDirectory';
 import FileDropdownMenu from '@/components/server/files/FileDropdownMenu';
 import { ServerContext } from '@/state/server';
-import { NavLink } from 'react-router-dom';
-import useRouter from 'use-react-router';
+import { NavLink, useHistory, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 
 export default ({ file }: { file: FileObject }) => {
     const directory = ServerContext.useStoreState(state => state.files.directory);
     const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
-    const { match, history } = useRouter();
+
+    const history = useHistory();
+    const match = useRouteMatch();
 
     return (
         <div

resources/scripts/components/server/users/EditSubuserModal.tsx

@@ -9,7 +9,6 @@ import { ApplicationStore } from '@/state';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import Checkbox from '@/components/elements/Checkbox';
 import styled from 'styled-components/macro';
-import classNames from 'classnames';
 import createOrUpdateSubuser from '@/api/server/users/createOrUpdateSubuser';
 import { ServerContext } from '@/state/server';
 import { httpErrorToHuman } from '@/api/http';
@@ -145,10 +144,11 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
                             <PermissionLabel
                                 key={`permission_${key}_${pkey}`}
                                 htmlFor={`permission_${key}_${pkey}`}
-                                className={classNames('transition-colors duration-75', {
-                                    'mt-2': index !== 0,
-                                    disabled: !canEditUser || editablePermissions.indexOf(`${key}.${pkey}`) < 0,
-                                })}
+                                css={[
+                                    tw`transition-colors duration-75`,
+                                    index > 0 ? tw`mt-2` : undefined,
+                                ]}
+                                className={(!canEditUser || editablePermissions.indexOf(`${key}.${pkey}`) < 0) ? 'disabled' : undefined}
                             >
                                 <div css={tw`p-2`}>
                                     <Checkbox

resources/scripts/components/server/users/UserRow.tsx

@@ -4,7 +4,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPencilAlt, faUnlockAlt, faUserLock } from '@fortawesome/free-solid-svg-icons';
 import RemoveSubuserButton from '@/components/server/users/RemoveSubuserButton';
 import EditSubuserModal from '@/components/server/users/EditSubuserModal';
-import classNames from 'classnames';
 import Can from '@/components/elements/Can';
 import { useStoreState } from 'easy-peasy';
 import tw from 'twin.macro';
@@ -39,9 +38,8 @@ export default ({ subuser }: Props) => {
                      
                     <FontAwesomeIcon
                         icon={subuser.twoFactorEnabled ? faUserLock : faUnlockAlt}
-                        className={classNames('fa-fw', {
-                            'text-red-400': !subuser.twoFactorEnabled,
-                        })}
+                        fixedWidth
+                        css={!subuser.twoFactorEnabled ? tw`text-red-400` : undefined}
                     />
                     &nbsp;
                 </p>
@@ -56,9 +54,10 @@ export default ({ subuser }: Props) => {
             <button
                 type={'button'}
                 aria-label={'Edit subuser'}
-                className={classNames('block text-sm p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mx-4', {
-                    hidden: subuser.uuid === uuid,
-                })}
+                css={[
+                    tw`block text-sm p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mx-4`,
+                    subuser.uuid === uuid ? tw`hidden` : undefined,
+                ]}
                 onClick={() => setVisible(true)}
             >
                 <FontAwesomeIcon icon={faPencilAlt}/>