Remove last calls to useServer

Author: DaneEveritt

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

@@ -1,22 +1,21 @@
 import React, { useEffect } from 'react';
-import { Helmet } from 'react-helmet';
 import Spinner from '@/components/elements/Spinner';
-import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
 import Can from '@/components/elements/Can';
 import CreateBackupButton from '@/components/server/backups/CreateBackupButton';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import BackupRow from '@/components/server/backups/BackupRow';
-import PageContentBlock from '@/components/elements/PageContentBlock';
 import tw from 'twin.macro';
 import getServerBackups from '@/api/swr/getServerBackups';
+import { ServerContext } from '@/state/server';
+import ServerContentBlock from '@/components/elements/ServerContentBlock';
 
 export default () => {
     const { clearFlashes, clearAndAddHttpError } = useFlash();
-    const { featureLimits, name: serverName } = useServer();
-
     const { data: backups, error, isValidating } = getServerBackups();
 
+    const backupLimit = ServerContext.useStoreState(state => state.server.data!.featureLimits.backups);
+
     useEffect(() => {
         if (!error) {
             clearFlashes('backups');
@@ -32,10 +31,7 @@ export default () => {
     }
 
     return (
-        <PageContentBlock>
-            <Helmet>
-                <title>{serverName} | Backups</title>
-            </Helmet>
+        <ServerContentBlock title={'Backups'}>
             <FlashMessageRender byKey={'backups'} css={tw`mb-4`}/>
             {!backups.items.length ?
                 <p css={tw`text-center text-sm text-neutral-400`}>
@@ -50,23 +46,23 @@ export default () => {
                     />)}
                 </div>
             }
-            {featureLimits.backups === 0 &&
+            {backupLimit === 0 &&
             <p css={tw`text-center text-sm text-neutral-400`}>
                 Backups cannot be created for this server.
             </p>
             }
             <Can action={'backup.create'}>
-                {(featureLimits.backups > 0 && backups.items.length > 0) &&
+                {(backupLimit > 0 && backups.items.length > 0) &&
                 <p css={tw`text-center text-xs text-neutral-400 mt-2`}>
-                    {backups.items.length} of {featureLimits.backups} backups have been created for this server.
+                    {backups.items.length} of {backupLimit} backups have been created for this server.
                 </p>
                 }
-                {featureLimits.backups > 0 && featureLimits.backups !== backups.items.length &&
+                {backupLimit > 0 && backupLimit !== backups.items.length &&
                 <div css={tw`mt-6 flex justify-end`}>
                     <CreateBackupButton/>
                 </div>
                 }
             </Can>
-        </PageContentBlock>
+        </ServerContentBlock>
     );
 };

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

@@ -6,20 +6,20 @@ import getBackupDownloadUrl from '@/api/server/backups/getBackupDownloadUrl';
 import useFlash from '@/plugins/useFlash';
 import ChecksumModal from '@/components/server/backups/ChecksumModal';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import useServer from '@/plugins/useServer';
 import deleteBackup from '@/api/server/backups/deleteBackup';
 import ConfirmationModal from '@/components/elements/ConfirmationModal';
 import Can from '@/components/elements/Can';
 import tw from 'twin.macro';
 import getServerBackups from '@/api/swr/getServerBackups';
 import { ServerBackup } from '@/api/server/types';
+import { ServerContext } from '@/state/server';
 
 interface Props {
     backup: ServerBackup;
 }
 
 export default ({ backup }: Props) => {
-    const { uuid } = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const [ loading, setLoading ] = useState(false);
     const [ visible, setVisible ] = useState(false);
     const [ deleteVisible, setDeleteVisible ] = useState(false);

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

@@ -5,13 +5,13 @@ import { object, string } from 'yup';
 import Field from '@/components/elements/Field';
 import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
 import useFlash from '@/plugins/useFlash';
-import useServer from '@/plugins/useServer';
 import createServerBackup from '@/api/server/backups/createServerBackup';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import Button from '@/components/elements/Button';
 import tw from 'twin.macro';
 import { Textarea } from '@/components/elements/Input';
 import getServerBackups from '@/api/swr/getServerBackups';
+import { ServerContext } from '@/state/server';
 
 interface Values {
     name: string;
@@ -58,7 +58,7 @@ const ModalContent = ({ ...props }: RequiredModalProps) => {
 };
 
 export default () => {
-    const { uuid } = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const { clearFlashes, clearAndAddHttpError } = useFlash();
     const [ visible, setVisible ] = useState(false);
     const { mutate } = getServerBackups();

resources/scripts/components/server/databases/CreateDatabaseButton.tsx

@@ -8,7 +8,6 @@ import { ServerContext } from '@/state/server';
 import { httpErrorToHuman } from '@/api/http';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import useFlash from '@/plugins/useFlash';
-import useServer from '@/plugins/useServer';
 import Button from '@/components/elements/Button';
 import tw from 'twin.macro';
 
@@ -29,7 +28,7 @@ const schema = object().shape({
 });
 
 export default () => {
-    const { uuid } = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const { addError, clearFlashes } = useFlash();
     const [ visible, setVisible ] = useState(false);
 

resources/scripts/components/server/databases/DatabaseRow.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faDatabase, faTrashAlt, faEye } from '@fortawesome/free-solid-svg-icons';
+import { faDatabase, faEye, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import Modal from '@/components/elements/Modal';
 import { Form, Formik, FormikHelpers } from 'formik';
 import Field from '@/components/elements/Field';
@@ -12,7 +12,6 @@ import { httpErrorToHuman } from '@/api/http';
 import RotatePasswordButton from '@/components/server/databases/RotatePasswordButton';
 import Can from '@/components/elements/Can';
 import { ServerDatabase } from '@/api/server/getServerDatabases';
-import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
@@ -26,7 +25,7 @@ interface Props {
 }
 
 export default ({ database, className }: Props) => {
-    const { uuid } = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const { addError, clearFlashes } = useFlash();
     const [ visible, setVisible ] = useState(false);
     const [ connectionVisible, setConnectionVisible ] = useState(false);

resources/scripts/components/server/databases/DatabasesContainer.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { Helmet } from 'react-helmet';
 import getServerDatabases from '@/api/server/getServerDatabases';
 import { ServerContext } from '@/state/server';
 import { httpErrorToHuman } from '@/api/http';
@@ -9,17 +8,19 @@ import Spinner from '@/components/elements/Spinner';
 import CreateDatabaseButton from '@/components/server/databases/CreateDatabaseButton';
 import Can from '@/components/elements/Can';
 import useFlash from '@/plugins/useFlash';
-import useServer from '@/plugins/useServer';
-import PageContentBlock from '@/components/elements/PageContentBlock';
 import tw from 'twin.macro';
 import Fade from '@/components/elements/Fade';
+import ServerContentBlock from '@/components/elements/ServerContentBlock';
+import { useDeepMemoize } from '@/plugins/useDeepMemoize';
 
 export default () => {
-    const { uuid, featureLimits, name: serverName } = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+    const databaseLimit = ServerContext.useStoreState(state => state.server.data!.featureLimits.databases);
+
     const { addError, clearFlashes } = useFlash();
     const [ loading, setLoading ] = useState(true);
 
-    const databases = ServerContext.useStoreState(state => state.databases.data);
+    const databases = useDeepMemoize(ServerContext.useStoreState(state => state.databases.data));
     const setDatabases = ServerContext.useStoreActions(state => state.databases.setDatabases);
 
     useEffect(() => {
@@ -36,10 +37,7 @@ export default () => {
     }, []);
 
     return (
-        <PageContentBlock>
-            <Helmet>
-                <title> {serverName} | Databases </title>
-            </Helmet>
+        <ServerContentBlock title={'Databases'}>
             <FlashMessageRender byKey={'databases'} css={tw`mb-4`}/>
             {(!databases.length && loading) ?
                 <Spinner size={'large'} centered/>
@@ -56,21 +54,21 @@ export default () => {
                             ))
                             :
                             <p css={tw`text-center text-sm text-neutral-400`}>
-                                {featureLimits.databases > 0 ?
+                                {databaseLimit > 0 ?
                                     'It looks like you have no databases.'
                                     :
                                     'Databases cannot be created for this server.'
                                 }
                             </p>
                         }
                         <Can action={'database.create'}>
-                            {(featureLimits.databases > 0 && databases.length > 0) &&
+                            {(databaseLimit > 0 && databases.length > 0) &&
                             <p css={tw`text-center text-xs text-neutral-400 mt-2`}>
-                                {databases.length} of {featureLimits.databases} databases have been allocated to this
+                                {databases.length} of {databaseLimit} databases have been allocated to this
                                 server.
                             </p>
                             }
-                            {featureLimits.databases > 0 && featureLimits.databases !== databases.length &&
+                            {databaseLimit > 0 && databaseLimit !== databases.length &&
                             <div css={tw`mt-6 flex justify-end`}>
                                 <CreateDatabaseButton/>
                             </div>
@@ -79,6 +77,6 @@ export default () => {
                     </>
                 </Fade>
             }
-        </PageContentBlock>
+        </ServerContentBlock>
     );
 };

resources/scripts/components/server/network/NetworkContainer.tsx

@@ -6,7 +6,6 @@ import styled from 'styled-components/macro';
 import GreyRowBox from '@/components/elements/GreyRowBox';
 import Button from '@/components/elements/Button';
 import Can from '@/components/elements/Can';
-import useServer from '@/plugins/useServer';
 import useSWR from 'swr';
 import getServerAllocations from '@/api/server/network/getServerAllocations';
 import { Allocation } from '@/api/server/getServer';
@@ -18,12 +17,16 @@ import setServerAllocationNotes from '@/api/server/network/setServerAllocationNo
 import { debounce } from 'debounce';
 import InputSpinner from '@/components/elements/InputSpinner';
 import ServerContentBlock from '@/components/elements/ServerContentBlock';
+import { ServerContext } from '@/state/server';
+import { useDeepMemoize } from '@/plugins/useDeepMemoize';
 
 const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm block`}`;
 const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
 
 const NetworkContainer = () => {
-    const { uuid, allocations } = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+    const allocations = useDeepMemoize(ServerContext.useStoreState(state => state.server.data!.allocations));
+
     const { clearFlashes, clearAndAddHttpError } = useFlash();
     const [ loading, setLoading ] = useState<false | number>(false);
     const { data, error, mutate } = useSWR<Allocation[]>(uuid, key => getServerAllocations(key), { initialData: allocations });

resources/scripts/components/server/schedules/EditScheduleModal.tsx

@@ -8,7 +8,6 @@ import createOrUpdateSchedule from '@/api/server/schedules/createOrUpdateSchedul
 import { ServerContext } from '@/state/server';
 import { httpErrorToHuman } from '@/api/http';
 import FlashMessageRender from '@/components/FlashMessageRender';
-import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
@@ -75,7 +74,7 @@ const EditScheduleModal = ({ schedule, ...props }: Omit<Props, 'onScheduleUpdate
 };
 
 export default ({ schedule, visible, ...props }: Props) => {
-    const { uuid } = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const { addError, clearFlashes } = useFlash();
     const [ modalVisible, setModalVisible ] = useState(visible);
 

resources/scripts/components/server/schedules/ScheduleContainer.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { Helmet } from 'react-helmet';
 import getServerSchedules from '@/api/server/schedules/getServerSchedules';
 import { ServerContext } from '@/state/server';
 import Spinner from '@/components/elements/Spinner';
@@ -9,15 +8,14 @@ import ScheduleRow from '@/components/server/schedules/ScheduleRow';
 import { httpErrorToHuman } from '@/api/http';
 import EditScheduleModal from '@/components/server/schedules/EditScheduleModal';
 import Can from '@/components/elements/Can';
-import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
-import PageContentBlock from '@/components/elements/PageContentBlock';
 import tw from 'twin.macro';
 import GreyRowBox from '@/components/elements/GreyRowBox';
 import Button from '@/components/elements/Button';
+import ServerContentBlock from '@/components/elements/ServerContentBlock';
 
 export default ({ match, history }: RouteComponentProps) => {
-    const { uuid, name: serverName } = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const { clearFlashes, addError } = useFlash();
     const [ loading, setLoading ] = useState(true);
     const [ visible, setVisible ] = useState(false);
@@ -37,10 +35,7 @@ export default ({ match, history }: RouteComponentProps) => {
     }, []);
 
     return (
-        <PageContentBlock>
-            <Helmet>
-                <title> {serverName} | Schedules </title>
-            </Helmet>
+        <ServerContentBlock title={'Schedules'}>
             <FlashMessageRender byKey={'schedules'} css={tw`mb-4`}/>
             {(!schedules.length && loading) ?
                 <Spinner size={'large'} centered/>
@@ -77,6 +72,6 @@ export default ({ match, history }: RouteComponentProps) => {
                     </Can>
                 </>
             }
-        </PageContentBlock>
+        </ServerContentBlock>
     );
 };

resources/scripts/components/server/schedules/ScheduleEditContainer.tsx

@@ -11,7 +11,6 @@ import EditScheduleModal from '@/components/server/schedules/EditScheduleModal';
 import NewTaskButton from '@/components/server/schedules/NewTaskButton';
 import DeleteScheduleButton from '@/components/server/schedules/DeleteScheduleButton';
 import Can from '@/components/elements/Can';
-import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
 import { ServerContext } from '@/state/server';
 import PageContentBlock from '@/components/elements/PageContentBlock';
@@ -28,7 +27,9 @@ interface State {
 }
 
 export default ({ match, history, location: { state } }: RouteComponentProps<Params, Record<string, unknown>, State>) => {
-    const { id, uuid } = useServer();
+    const id = ServerContext.useStoreState(state => state.server.data!.id);
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+
     const { clearFlashes, addError } = useFlash();
     const [ isLoading, setIsLoading ] = useState(true);
     const [ showEditModal, setShowEditModal ] = useState(false);