Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove last calls to useServer

Browse source
This commit is contained in:
Dane Everitt 2020-08-25 22:09:54 -07:00
parent 6bc51adad7
commit 8c98264eed
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
13 changed files with 44 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
resources/scripts/components/server/backups/BackupContainer.tsx
View file

@ -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>
);
};

4
resources/scripts/components/server/backups/BackupContextMenu.tsx
View file

@ -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);

4
resources/scripts/components/server/backups/CreateBackupButton.tsx
View file

@ -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();

3
resources/scripts/components/server/databases/CreateDatabaseButton.tsx
View file

@ -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);

5
resources/scripts/components/server/databases/DatabaseRow.tsx
View file

@ -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);

26
resources/scripts/components/server/databases/DatabasesContainer.tsx
View file

@ -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>
);
};

7
resources/scripts/components/server/network/NetworkContainer.tsx
View file

@ -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 });

3
resources/scripts/components/server/schedules/EditScheduleModal.tsx
View file

@ -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);

13
resources/scripts/components/server/schedules/ScheduleContainer.tsx
View file

@ -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>
);
};

5
resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
View file

@ -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);

3
resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
View file

@ -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);

3
resources/scripts/components/server/schedules/TaskDetailsModal.tsx
View file

@ -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);

8
resources/scripts/plugins/useServer.ts
View file

@ -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;