Remove more references to useServer

Author: DaneEveritt

resources/scripts/api/swr/getServerBackups.ts

@@ -2,10 +2,10 @@ import useSWR from 'swr';
 import http, { getPaginationSet, PaginatedResult } from '@/api/http';
 import { ServerBackup } from '@/api/server/types';
 import { rawDataToServerBackup } from '@/api/transformers';
-import useServer from '@/plugins/useServer';
+import { ServerContext } from '@/state/server';
 
 export default (page?: number | string) => {
-    const { uuid } = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
 
     return useSWR<PaginatedResult<ServerBackup>>([ 'server:backups', uuid, page ], async () => {
         const { data } = await http.get(`/api/client/servers/${uuid}/backups`, { params: { page } });

resources/scripts/components/NavigationBar.tsx

@@ -43,8 +43,8 @@ const RightNavigation = styled.div`
 `;
 
 export default () => {
-    const user = useStoreState((state: ApplicationStore) => state.user.data!);
     const name = useStoreState((state: ApplicationStore) => state.settings.data!.name);
+    const rootAdmin = useStoreState((state: ApplicationStore) => state.user.data!.rootAdmin);
 
     return (
         <Navigation>
@@ -62,7 +62,7 @@ export default () => {
                     <NavLink to={'/account'}>
                         <FontAwesomeIcon icon={faUserCircle}/>
                     </NavLink>
-                    {user.rootAdmin &&
+                    {rootAdmin &&
                     <a href={'/admin'} target={'_blank'} rel={'noreferrer'}>
                         <FontAwesomeIcon icon={faCogs}/>
                     </a>

resources/scripts/components/server/InstallListener.tsx

@@ -1,23 +1,22 @@
 import useWebsocketEvent from '@/plugins/useWebsocketEvent';
 import { ServerContext } from '@/state/server';
-import useServer from '@/plugins/useServer';
 
 const InstallListener = () => {
-    const server = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const getServer = ServerContext.useStoreActions(actions => actions.server.getServer);
-    const setServer = ServerContext.useStoreActions(actions => actions.server.setServer);
+    const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
 
     // Listen for the installation completion event and then fire off a request to fetch the updated
     // server information. This allows the server to automatically become available to the user if they
     // just sit on the page.
     useWebsocketEvent('install completed', () => {
-        getServer(server.uuid).catch(error => console.error(error));
+        getServer(uuid).catch(error => console.error(error));
     });
 
     // When we see the install started event immediately update the state to indicate such so that the
     // screens automatically update.
     useWebsocketEvent('install started', () => {
-        setServer({ ...server, isInstalling: true });
+        setServerFromState(s => ({ ...s, isInstalling: true }));
     });
 
     return null;

resources/scripts/components/server/ServerConsole.tsx

@@ -1,17 +1,16 @@
 import React, { lazy, useEffect, useState } from 'react';
-import { Helmet } from 'react-helmet';
 import { ServerContext } from '@/state/server';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCircle, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome/free-solid-svg-icons';
 import { bytesToHuman, megabytesToHuman } from '@/helpers';
 import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import Can from '@/components/elements/Can';
-import PageContentBlock from '@/components/elements/PageContentBlock';
 import ContentContainer from '@/components/elements/ContentContainer';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
 import StopOrKillButton from '@/components/server/StopOrKillButton';
+import ServerContentBlock from '@/components/elements/ServerContentBlock';
 
 export type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
 
@@ -23,10 +22,13 @@ export default () => {
     const [ cpu, setCpu ] = useState(0);
     const [ disk, setDisk ] = useState(0);
 
-    const server = ServerContext.useStoreState(state => state.server.data!);
+    const name = ServerContext.useStoreState(state => state.server.data!.name);
+    const limits = ServerContext.useStoreState(state => state.server.data!.limits);
+    const isInstalling = ServerContext.useStoreState(state => state.server.data!.isInstalling);
     const status = ServerContext.useStoreState(state => state.status.value);
 
-    const { connected, instance } = ServerContext.useStoreState(state => state.socket);
+    const connected = ServerContext.useStoreState(state => state.socket.connected);
+    const instance = ServerContext.useStoreState(state => state.socket.instance);
 
     const statsListener = (data: string) => {
         let stats: any = {};
@@ -57,16 +59,13 @@ export default () => {
         };
     }, [ instance, connected ]);
 
-    const disklimit = server.limits.disk ? megabytesToHuman(server.limits.disk) : 'Unlimited';
-    const memorylimit = server.limits.memory ? megabytesToHuman(server.limits.memory) : 'Unlimited';
+    const disklimit = limits.disk ? megabytesToHuman(limits.disk) : 'Unlimited';
+    const memorylimit = limits.memory ? megabytesToHuman(limits.memory) : 'Unlimited';
 
     return (
-        <PageContentBlock css={tw`flex`}>
-            <Helmet>
-                <title> {server.name} | Console </title>
-            </Helmet>
+        <ServerContentBlock title={'Console'} css={tw`flex`}>
             <div css={tw`w-1/4`}>
-                <TitledGreyBox title={server.name} icon={faServer}>
+                <TitledGreyBox title={name} icon={faServer}>
                     <p css={tw`text-xs uppercase`}>
                         <FontAwesomeIcon
                             icon={faCircle}
@@ -90,7 +89,7 @@ export default () => {
                         <span css={tw`text-neutral-500`}> / {disklimit}</span>
                     </p>
                 </TitledGreyBox>
-                {!server.isInstalling ?
+                {!isInstalling ?
                     <Can action={[ 'control.start', 'control.stop', 'control.restart' ]} matchAny>
                         <div css={tw`shadow-md bg-neutral-700 rounded p-3 flex text-xs mt-4 justify-center`}>
                             <Can action={'control.start'}>
@@ -143,6 +142,6 @@ export default () => {
                     <ChunkedStatGraphs/>
                 </SuspenseSpinner>
             </div>
-        </PageContentBlock>
+        </ServerContentBlock>
     );
 };

resources/scripts/components/server/StopOrKillButton.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import { ServerContext } from '@/state/server';
 import { PowerAction } from '@/components/server/ServerConsole';
 import Button from '@/components/elements/Button';
+import isEqual from 'react-fast-compare';
 
 const StopOrKillButton = ({ onPress }: { onPress: (action: PowerAction) => void }) => {
     const [ clicked, setClicked ] = useState(false);
@@ -27,4 +28,4 @@ const StopOrKillButton = ({ onPress }: { onPress: (action: PowerAction) => void
     );
 };
 
-export default StopOrKillButton;
+export default memo(StopOrKillButton, isEqual);

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

@@ -19,7 +19,6 @@ import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import copyFile from '@/api/server/files/copyFile';
 import Can from '@/components/elements/Can';
 import getFileDownloadUrl from '@/api/server/files/getFileDownloadUrl';
-import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
 import tw from 'twin.macro';
 import { FileObject } from '@/api/server/files/loadDirectory';
@@ -56,7 +55,7 @@ const FileDropdownMenu = ({ file }: { file: FileObject }) => {
     const [ showSpinner, setShowSpinner ] = useState(false);
     const [ modal, setModal ] = useState<ModalType | null>(null);
 
-    const { uuid } = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const { mutate } = useFileManagerSwr();
     const { clearAndAddHttpError, clearFlashes } = useFlash();
     const directory = ServerContext.useStoreState(state => state.files.directory);

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

@@ -14,8 +14,8 @@ import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
 import Select from '@/components/elements/Select';
 import modes from '@/modes';
-import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
+import { ServerContext } from '@/state/server';
 
 const LazyAceEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/components/elements/AceEditor'));
 
@@ -30,7 +30,8 @@ export default () => {
     const history = useHistory();
     const { hash } = useLocation();
 
-    const { id, uuid } = useServer();
+    const id = ServerContext.useStoreState(state => state.server.data!.id);
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const { addError, clearFlashes } = useFlash();
 
     let fetchFileContent: null | (() => Promise<string>) = null;

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

@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react';
-import { Helmet } from 'react-helmet';
 import { httpErrorToHuman } from '@/api/http';
 import { CSSTransition } from 'react-transition-group';
 import Spinner from '@/components/elements/Spinner';
@@ -9,23 +8,22 @@ import { FileObject } from '@/api/server/files/loadDirectory';
 import NewDirectoryButton from '@/components/server/files/NewDirectoryButton';
 import { Link, useLocation } from 'react-router-dom';
 import Can from '@/components/elements/Can';
-import PageContentBlock from '@/components/elements/PageContentBlock';
 import ServerError from '@/components/screens/ServerError';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
-import useServer from '@/plugins/useServer';
 import { ServerContext } from '@/state/server';
 import useFileManagerSwr from '@/plugins/useFileManagerSwr';
 import MassActionsBar from '@/components/server/files/MassActionsBar';
 import UploadButton from '@/components/server/files/UploadButton';
+import ServerContentBlock from '@/components/elements/ServerContentBlock';
 
 const sortFiles = (files: FileObject[]): FileObject[] => {
     return files.sort((a, b) => a.name.localeCompare(b.name))
         .sort((a, b) => a.isFile === b.isFile ? 0 : (a.isFile ? 1 : -1));
 };
 
 export default () => {
-    const { id, name: serverName } = useServer();
+    const id = ServerContext.useStoreState(state => state.server.data!.id);
     const { hash } = useLocation();
     const { data: files, error, mutate } = useFileManagerSwr();
 
@@ -44,10 +42,7 @@ export default () => {
     }
 
     return (
-        <PageContentBlock showFlashKey={'files'}>
-            <Helmet>
-                <title> {serverName} | File Manager </title>
-            </Helmet>
+        <ServerContentBlock title={'File Manager'} showFlashKey={'files'}>
             <FileManagerBreadcrumbs/>
             {
                 !files ?
@@ -93,6 +88,6 @@ export default () => {
                         </Can>
                     </>
             }
-        </PageContentBlock>
+        </ServerContentBlock>
     );
 };

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

@@ -8,14 +8,14 @@ import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import useFileManagerSwr from '@/plugins/useFileManagerSwr';
 import useFlash from '@/plugins/useFlash';
 import compressFiles from '@/api/server/files/compressFiles';
-import useServer from '@/plugins/useServer';
 import { ServerContext } from '@/state/server';
 import ConfirmationModal from '@/components/elements/ConfirmationModal';
 import deleteFiles from '@/api/server/files/deleteFiles';
 import RenameFileModal from '@/components/server/files/RenameFileModal';
 
 const MassActionsBar = () => {
-    const { uuid } = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+
     const { mutate } = useFileManagerSwr();
     const { clearFlashes, clearAndAddHttpError } = useFlash();
     const [ loading, setLoading ] = useState(false);

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

@@ -8,7 +8,6 @@ import { object, string } from 'yup';
 import createDirectory from '@/api/server/files/createDirectory';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
-import useServer from '@/plugins/useServer';
 import { FileObject } from '@/api/server/files/loadDirectory';
 import useFlash from '@/plugins/useFlash';
 import useFileManagerSwr from '@/plugins/useFileManagerSwr';
@@ -36,7 +35,7 @@ const generateDirectoryData = (name: string): FileObject => ({
 });
 
 export default () => {
-    const { uuid } = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const { clearAndAddHttpError } = useFlash();
     const [ visible, setVisible ] = useState(false);