From 8c98264eedbbf35e4dd38f082f8765f40aa01652 Mon Sep 17 00:00:00 2001 From: Dane Everitt Date: Tue, 25 Aug 2020 22:09:54 -0700 Subject: [PATCH] Remove last calls to useServer --- .../server/backups/BackupContainer.tsx | 24 +++++++---------- .../server/backups/BackupContextMenu.tsx | 4 +-- .../server/backups/CreateBackupButton.tsx | 4 +-- .../server/databases/CreateDatabaseButton.tsx | 3 +-- .../server/databases/DatabaseRow.tsx | 5 ++-- .../server/databases/DatabasesContainer.tsx | 26 +++++++++---------- .../server/network/NetworkContainer.tsx | 7 +++-- .../server/schedules/EditScheduleModal.tsx | 3 +-- .../server/schedules/ScheduleContainer.tsx | 13 +++------- .../schedules/ScheduleEditContainer.tsx | 5 ++-- .../server/schedules/ScheduleTaskRow.tsx | 3 +-- .../server/schedules/TaskDetailsModal.tsx | 3 +-- resources/scripts/plugins/useServer.ts | 8 ------ 13 files changed, 44 insertions(+), 64 deletions(-) delete mode 100644 resources/scripts/plugins/useServer.ts diff --git a/resources/scripts/components/server/backups/BackupContainer.tsx b/resources/scripts/components/server/backups/BackupContainer.tsx index c7504b164..b3bfdc945 100644 --- 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 ( - - - {serverName} | Backups - + {!backups.items.length ?

@@ -50,23 +46,23 @@ export default () => { />)} } - {featureLimits.backups === 0 && + {backupLimit === 0 &&

Backups cannot be created for this server.

} - {(featureLimits.backups > 0 && backups.items.length > 0) && + {(backupLimit > 0 && backups.items.length > 0) &&

- {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.

} - {featureLimits.backups > 0 && featureLimits.backups !== backups.items.length && + {backupLimit > 0 && backupLimit !== backups.items.length &&
} - + ); }; diff --git a/resources/scripts/components/server/backups/BackupContextMenu.tsx b/resources/scripts/components/server/backups/BackupContextMenu.tsx index 422155cf9..7c3ba07ac 100644 --- 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); diff --git a/resources/scripts/components/server/backups/CreateBackupButton.tsx b/resources/scripts/components/server/backups/CreateBackupButton.tsx index 3fd53403a..e505fd251 100644 --- 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(); diff --git a/resources/scripts/components/server/databases/CreateDatabaseButton.tsx b/resources/scripts/components/server/databases/CreateDatabaseButton.tsx index 2b035ce2c..0fff36d25 100644 --- 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); diff --git a/resources/scripts/components/server/databases/DatabaseRow.tsx b/resources/scripts/components/server/databases/DatabaseRow.tsx index 4cad11611..e0e3b038a 100644 --- 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); diff --git a/resources/scripts/components/server/databases/DatabasesContainer.tsx b/resources/scripts/components/server/databases/DatabasesContainer.tsx index 922f0a364..8ee4b3129 100644 --- 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 ( - - - {serverName} | Databases - + {(!databases.length && loading) ? @@ -56,7 +54,7 @@ export default () => { )) :

- {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 () => {

} - {(featureLimits.databases > 0 && databases.length > 0) && + {(databaseLimit > 0 && databases.length > 0) &&

- {databases.length} of {featureLimits.databases} databases have been allocated to this + {databases.length} of {databaseLimit} databases have been allocated to this server.

} - {featureLimits.databases > 0 && featureLimits.databases !== databases.length && + {databaseLimit > 0 && databaseLimit !== databases.length &&
@@ -79,6 +77,6 @@ export default () => { } - + ); }; diff --git a/resources/scripts/components/server/network/NetworkContainer.tsx b/resources/scripts/components/server/network/NetworkContainer.tsx index d0682b8dd..14ae10597 100644 --- 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); const { data, error, mutate } = useSWR(uuid, key => getServerAllocations(key), { initialData: allocations }); diff --git a/resources/scripts/components/server/schedules/EditScheduleModal.tsx b/resources/scripts/components/server/schedules/EditScheduleModal.tsx index 1cf9eea3a..5d42888f3 100644 --- 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 { - const { uuid } = useServer(); + const uuid = ServerContext.useStoreState(state => state.server.data!.uuid); const { addError, clearFlashes } = useFlash(); const [ modalVisible, setModalVisible ] = useState(visible); diff --git a/resources/scripts/components/server/schedules/ScheduleContainer.tsx b/resources/scripts/components/server/schedules/ScheduleContainer.tsx index 77e31b590..b9c1f0340 100644 --- 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 ( - - - {serverName} | Schedules - + {(!schedules.length && loading) ? @@ -77,6 +72,6 @@ export default ({ match, history }: RouteComponentProps) => { } - + ); }; diff --git a/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx b/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx index 6fcaca784..9573d307b 100644 --- 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, 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); diff --git a/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx b/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx index b14a24ea3..5f101415e 100644 --- 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); diff --git a/resources/scripts/components/server/schedules/TaskDetailsModal.tsx b/resources/scripts/components/server/schedules/TaskDetailsModal.tsx index 00457a4ec..1ef64c138 100644 --- 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); diff --git a/resources/scripts/plugins/useServer.ts b/resources/scripts/plugins/useServer.ts deleted file mode 100644 index 8014ced58..000000000 --- a/resources/scripts/plugins/useServer.ts +++ /dev/null @@ -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;