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

Remove more references to useServer

Browse source
This commit is contained in:
Dane Everitt 2020-08-25 21:39:00 -07:00
parent c4418640eb
commit 1598dac6f8
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
15 changed files with 47 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
resources/scripts/api/swr/getServerBackups.ts
View file

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

4
resources/scripts/components/NavigationBar.tsx
View file

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

9
resources/scripts/components/server/InstallListener.tsx
View file

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

25
resources/scripts/components/server/ServerConsole.tsx
View file

@ -1,5 +1,4 @@
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';
@ -7,11 +6,11 @@ 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>
);
};

5
resources/scripts/components/server/StopOrKillButton.tsx
View file

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

3
resources/scripts/components/server/files/FileDropdownMenu.tsx
View file

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

5
resources/scripts/components/server/files/FileEditContainer.tsx
View file

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

13
resources/scripts/components/server/files/FileManagerContainer.tsx
View file

@ -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,15 +8,14 @@ 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))
@ -25,7 +23,7 @@ const sortFiles = (files: FileObject[]): FileObject[] => {
};
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>
);
};

4
resources/scripts/components/server/files/MassActionsBar.tsx
View file

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

3
resources/scripts/components/server/files/NewDirectoryButton.tsx
View file

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

3
resources/scripts/components/server/files/RenameFileModal.tsx
View file

@ -7,7 +7,6 @@ import renameFiles from '@/api/server/files/renameFiles';
import { ServerContext } from '@/state/server';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
import useServer from '@/plugins/useServer';
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
import useFlash from '@/plugins/useFlash';
@ -18,7 +17,7 @@ interface FormikValues {
type OwnProps = RequiredModalProps & { files: string[]; useMoveTerminology?: boolean };
const RenameFileModal = ({ files, useMoveTerminology, ...props }: OwnProps) => {
const { uuid } = useServer();
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { mutate } = useFileManagerSwr();
const { clearFlashes, clearAndAddHttpError } = useFlash();
const directory = ServerContext.useStoreState(state => state.files.directory);

3
resources/scripts/components/server/files/UploadButton.tsx
View file

@ -1,6 +1,5 @@
import axios from 'axios';
import getFileUploadUrl from '@/api/server/files/getFileUploadUrl';
import useServer from '@/plugins/useServer';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
import React, { useEffect, useState } from 'react';
@ -19,7 +18,7 @@ const InnerContainer = styled.div`
`;
export default () => {
const { uuid } = useServer();
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const [ visible, setVisible ] = useState(false);
const [ loading, setLoading ] = useState(false);
const { mutate } = useFileManagerSwr();

24
resources/scripts/components/server/settings/SettingsContainer.tsx
View file

@ -1,29 +1,25 @@
import React from 'react';
import { Helmet } from 'react-helmet';
import TitledGreyBox from '@/components/elements/TitledGreyBox';
import { ServerContext } from '@/state/server';
import { useStoreState } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import { UserData } from '@/state/user';
import RenameServerBox from '@/components/server/settings/RenameServerBox';
import FlashMessageRender from '@/components/FlashMessageRender';
import Can from '@/components/elements/Can';
import ReinstallServerBox from '@/components/server/settings/ReinstallServerBox';
import PageContentBlock from '@/components/elements/PageContentBlock';
import tw from 'twin.macro';
import Input from '@/components/elements/Input';
import Label from '@/components/elements/Label';
import { LinkButton } from '@/components/elements/Button';
import ServerContentBlock from '@/components/elements/ServerContentBlock';
export default () => {
const user = useStoreState<ApplicationStore, UserData>(state => state.user.data!);
const server = ServerContext.useStoreState(state => state.server.data!);
const username = useStoreState(state => state.user.data!.username);
const id = ServerContext.useStoreState(state => state.server.data!.id);
const sftpIp = ServerContext.useStoreState(state => state.server.data!.sftpDetails.ip);
const sftpPort = ServerContext.useStoreState(state => state.server.data!.sftpDetails.port);
return (
<PageContentBlock>
<Helmet>
<title> {server.name} | Settings </title>
</Helmet>
<ServerContentBlock title={'Settings'}>
<FlashMessageRender byKey={'settings'} css={tw`mb-4`}/>
<div css={tw`md:flex`}>
<div css={tw`w-full md:flex-1 md:mr-10`}>
@ -33,7 +29,7 @@ export default () => {
<Label>Server Address</Label>
<Input
type={'text'}
value={`sftp://${server.sftpDetails.ip}:${server.sftpDetails.port}`}
value={`sftp://${sftpIp}:${sftpPort}`}
readOnly
/>
</div>
@ -41,7 +37,7 @@ export default () => {
<Label>Username</Label>
<Input
type={'text'}
value={`${user.username}.${server.id}`}
value={`${username}.${id}`}
readOnly
/>
</div>
@ -56,7 +52,7 @@ export default () => {
<div css={tw`ml-4`}>
<LinkButton
isSecondary
href={`sftp://${user.username}.${server.id}@${server.sftpDetails.ip}:${server.sftpDetails.port}`}
href={`sftp://${username}.${id}@${sftpIp}:${sftpPort}`}
>
Launch SFTP
</LinkButton>
@ -76,6 +72,6 @@ export default () => {
</Can>
</div>
</div>
</PageContentBlock>
</ServerContentBlock>
);
};

1
resources/scripts/components/server/startup/VariableBox.tsx
View file

@ -7,7 +7,6 @@ import Input from '@/components/elements/Input';
import tw from 'twin.macro';
import { debounce } from 'debounce';
import updateStartupVariable from '@/api/server/updateStartupVariable';
import useServer from '@/plugins/useServer';
import useFlash from '@/plugins/useFlash';
import FlashMessageRender from '@/components/FlashMessageRender';
import getServerStartup from '@/api/swr/getServerStartup';

3
resources/scripts/plugins/useFileManagerSwr.ts
View file

@ -1,11 +1,10 @@
import useSWR from 'swr';
import loadDirectory, { FileObject } from '@/api/server/files/loadDirectory';
import { cleanDirectoryPath } from '@/helpers';
import useServer from '@/plugins/useServer';
import { ServerContext } from '@/state/server';
export default () => {
const { uuid } = useServer();
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const directory = ServerContext.useStoreState(state => state.files.directory);
return useSWR<FileObject[]>(