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

Don't execute unnecessary HTTP requests when browing a file directory

Browse source
This commit is contained in:
Dane Everitt 2020-04-10 13:57:24 -07:00
parent 76300209f1
commit b72a770ec9
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
6 changed files with 17 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react';
import { ServerContext } from '@/state/server';
import { NavLink, useParams } from 'react-router-dom';
import { NavLink } from 'react-router-dom';
import { cleanDirectoryPath } from '@/helpers';
interface Props {
withinFileEditor?: boolean;
@ -8,21 +9,17 @@ interface Props {
}
export default ({ withinFileEditor, isNewFile }: Props) => {
const { action } = useParams();
const [ file, setFile ] = useState<string | null>(null);
const id = ServerContext.useStoreState(state => state.server.data!.id);
const directory = ServerContext.useStoreState(state => state.files.directory);
const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
useEffect(() => {
const parts = window.location.hash.replace(/^#(\/)*/, '/').split('/');
const parts = cleanDirectoryPath(window.location.hash).split('/');
if (withinFileEditor && !isNewFile) {
setFile(parts.pop() || null);
}
setDirectory(parts.join('/'));
}, [ withinFileEditor, isNewFile, setDirectory ]);
}, [ withinFileEditor, isNewFile ]);
const breadcrumbs = (): { name: string; path?: string }[] => directory.split('/')
.filter(directory => !!directory)
@ -39,7 +36,6 @@ export default ({ withinFileEditor, isNewFile }: Props) => {
/<span className={'px-1 text-neutral-300'}>home</span>/
<NavLink
to={`/server/${id}/files`}
onClick={() => setDirectory('/')}
className={'px-1 text-neutral-200 no-underline hover:text-neutral-100'}
>
container
@ -50,7 +46,6 @@ export default ({ withinFileEditor, isNewFile }: Props) => {
<React.Fragment key={index}>
<NavLink
to={`/server/${id}/files#${crumb.path}`}
onClick={() => setDirectory(crumb.path!)}
className={'px-1 text-neutral-200 no-underline hover:text-neutral-100'}
>
{crumb.name}

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

@ -22,20 +22,20 @@ export default () => {
const [ loading, setLoading ] = useState(true);
const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const { id } = ServerContext.useStoreState(state => state.server.data!);
const { contents: files, directory } = ServerContext.useStoreState(state => state.files);
const { contents: files } = ServerContext.useStoreState(state => state.files);
const { getDirectoryContents } = ServerContext.useStoreActions(actions => actions.files);
useEffect(() => {
setLoading(true);
clearFlashes();
getDirectoryContents(window.location.hash.replace(/^#(\/)*/, '/'))
getDirectoryContents(window.location.hash)
.then(() => setLoading(false))
.catch(error => {
console.error(error.message, { error });
addError({ message: httpErrorToHuman(error), key: 'files' });
});
}, [ directory ]);
}, []);
return (
<div className={'my-10 mb-6'}>

8
resources/scripts/components/server/files/FileObjectRow.tsx
View file

@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFileImport } from '@fortawesome/free-solid-svg-icons/faFileImport';
import { faFileAlt } from '@fortawesome/free-solid-svg-icons/faFileAlt';
import { faFolder } from '@fortawesome/free-solid-svg-icons/faFolder';
import { bytesToHuman } from '@/helpers';
import { bytesToHuman, cleanDirectoryPath } from '@/helpers';
import differenceInHours from 'date-fns/difference_in_hours';
import format from 'date-fns/format';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
@ -16,7 +16,7 @@ import useRouter from 'use-react-router';
export default ({ file }: { file: FileObject }) => {
const directory = ServerContext.useStoreState(state => state.files.directory);
const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
const { match } = useRouter();
const { match, history } = useRouter();
return (
<div
@ -27,7 +27,7 @@ export default ({ file }: { file: FileObject }) => {
`}
>
<NavLink
to={`${match.url}/${file.isFile ? 'edit/' : ''}#${directory}/${file.name}`}
to={`${match.url}/${file.isFile ? 'edit/' : ''}#${cleanDirectoryPath(`${directory}/${file.name}`)}`}
className={'flex flex-1 text-neutral-300 no-underline p-3'}
onClick={e => {
// Don't rely on the onClick to work with the generated URL. Because of the way this
@ -38,7 +38,7 @@ export default ({ file }: { file: FileObject }) => {
if (!file.isFile) {
e.preventDefault();
window.location.hash = `#${directory}/${file.name}`;
history.push(`#${cleanDirectoryPath(`${directory}/${file.name}`)}`);
setDirectory(`${directory}/${file.name}`);
}
}}

2
resources/scripts/helpers.ts
View file

@ -11,3 +11,5 @@ export function bytesToHuman (bytes: number): string {
export const bytesToMegabytes = (bytes: number) => Math.floor(bytes / 1000 / 1000);
export const randomInt = (low: number, high: number) => Math.floor(Math.random() * (high - low) + low);
export const cleanDirectoryPath = (path: string) => path.replace(/(^#\/*)|(\/(\/*))|(^$)/g, '/');

2
resources/scripts/routers/ServerRouter.tsx
View file

@ -64,7 +64,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
<Spinner size={'large'}/>
</div>
:
<Switch location={location} key={'server-switch'}>
<Switch location={location}>
<Route path={`${match.path}`} component={ServerConsole} exact/>
<Route path={`${match.path}/files`} component={FileManagerContainer} exact/>
<Route

5
resources/scripts/state/server/files.ts
View file

@ -1,6 +1,7 @@
import loadDirectory, { FileObject } from '@/api/server/files/loadDirectory';
import { action, Action, thunk, Thunk } from 'easy-peasy';
import { ServerStore } from '@/state/server/index';
import { cleanDirectoryPath } from '@/helpers';
export interface ServerFileStore {
directory: string;
@ -22,7 +23,7 @@ const files: ServerFileStore = {
return;
}
const contents = await loadDirectory(server.uuid, payload);
const contents = await loadDirectory(server.uuid, cleanDirectoryPath(payload));
actions.setDirectory(payload.length === 0 ? '/' : payload);
actions.setContents(contents);
@ -47,7 +48,7 @@ const files: ServerFileStore = {
}),
setDirectory: action((state, payload) => {
state.directory = payload.length === 0 ? '/' : payload;
state.directory = cleanDirectoryPath(payload)
}),
};