Remove last calls to useServer

2020-08-25 22:09:54 -07:00 · 2020-08-25 22:09:54 -07:00 · 8c98264eed
commit 8c98264eed
parent 6bc51adad7
13 changed files with 44 additions and 64 deletions
--- a/resources/scripts/components/server/backups/BackupContainer.tsx
+++ b/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>
    );
 };
--- a/resources/scripts/components/server/backups/BackupContextMenu.tsx
+++ b/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);
--- a/resources/scripts/components/server/backups/CreateBackupButton.tsx
+++ b/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();
--- a/resources/scripts/components/server/databases/CreateDatabaseButton.tsx
+++ b/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);

--- a/resources/scripts/components/server/databases/DatabaseRow.tsx
+++ b/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);
--- a/resources/scripts/components/server/databases/DatabasesContainer.tsx
+++ b/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,7 +54,7 @@ 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.'
@ -64,13 +62,13 @@ export default () => {
                            </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>
    );
 };
--- a/resources/scripts/components/server/network/NetworkContainer.tsx
+++ b/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 });
--- a/resources/scripts/components/server/schedules/EditScheduleModal.tsx
+++ b/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);

--- a/resources/scripts/components/server/schedules/ScheduleContainer.tsx
+++ b/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>
    );
 };
--- a/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
+++ b/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);
--- a/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
+++ b/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
@ -7,7 +7,6 @@ import { httpErrorToHuman } from '@/api/http';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import TaskDetailsModal from '@/components/server/schedules/TaskDetailsModal';
 import Can from '@/components/elements/Can';
-import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
 import { ServerContext } from '@/state/server';
 import tw from 'twin.macro';
@ -32,7 +31,7 @@ const getActionDetails = (action: string): [ string, any ] => {
 };

 export default ({ schedule, task }: Props) => {
-    const { uuid } = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
    const { clearFlashes, addError } = useFlash();
    const [ visible, setVisible ] = useState(false);
    const [ isLoading, setIsLoading ] = useState(false);
--- a/resources/scripts/components/server/schedules/TaskDetailsModal.tsx
+++ b/resources/scripts/components/server/schedules/TaskDetailsModal.tsx
@ -9,7 +9,6 @@ import Field from '@/components/elements/Field';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { number, object, string } from 'yup';
 import useFlash from '@/plugins/useFlash';
-import useServer from '@/plugins/useServer';
 import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
 import tw from 'twin.macro';
 import Label from '@/components/elements/Label';
@ -108,7 +107,7 @@ const TaskDetailsForm = ({ isEditingTask }: { isEditingTask: boolean }) => {
 };

 export default ({ task, schedule, onDismissed }: Props) => {
-    const { uuid } = useServer();
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
    const { clearFlashes, addError } = useFlash();
    const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);

--- a/resources/scripts/plugins/useServer.ts
+++ b/resources/scripts/plugins/useServer.ts
@ -1,8 +0,0 @@
-import { ServerContext } from '@/state/server';
-import { Server } from '@/api/server/getServer';
-
-const useServer = (dependencies?: any[] | undefined): Server => {
-    return ServerContext.useStoreState(state => state.server.data!, dependencies);
-};
-
-export default useServer;