Skip to content

Commit c66d2cd

Browse files
DaneEverittDaneEveritt
committed
A few adjustments for chunking the new file edit page
1 parent 8599e2c commit c66d2cd

File tree

9 files changed

+72
-28
lines changed

9 files changed

+72
-28
lines changed

‎app/Models/Server.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
* @property \Pterodactyl\Models\Node $node
4545
* @property \Pterodactyl\Models\Nest $nest
4646
* @property \Pterodactyl\Models\Egg $egg
47-
* @property \Pterodactyl\Models\EggVariable[]|\Illuminate\Support\Collection $variables
47+
* @property \Pterodactyl\Models\ServerVariable[]|\Illuminate\Support\Collection $variables
4848
* @property \Pterodactyl\Models\Schedule[]|\Illuminate\Support\Collection $schedule
4949
* @property \Pterodactyl\Models\Database[]|\Illuminate\Support\Collection $databases
5050
* @property \Pterodactyl\Models\Location $location

‎resources/scripts/api/server/files/getFileContents.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import http from '@/api/http';
2+
3+
export default (server: string, file: string): Promise<string> => {
4+
return new Promise((resolve, reject) => {
5+
http.get(`/api/client/servers/${server}/files/contents`, { params: { file } })
6+
.then(({ data }) => resolve(data))
7+
.catch(reject);
8+
});
9+
};

‎resources/scripts/components/elements/SuspenseSpinner.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React, { Suspense } from 'react';
2+
import Spinner from '@/components/elements/Spinner';
3+
4+
export default ({ children }: { children?: React.ReactNode }) => (
5+
<Suspense
6+
fallback={
7+
<div className={'mx-4 w-3/4 mr-4 flex items-center justify-center'}>
8+
<Spinner centered={true} size={'normal'}/>
9+
</div>
10+
}
11+
>
12+
{children}
13+
</Suspense>
14+
);

‎resources/scripts/components/server/ServerConsole.tsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import styled from 'styled-components';
88
import { faMemory } from '@fortawesome/free-solid-svg-icons/faMemory';
99
import { faMicrochip } from '@fortawesome/free-solid-svg-icons/faMicrochip';
1010
import { bytesToHuman } from '@/helpers';
11-
import Spinner from '@/components/elements/Spinner';
11+
import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
1212

1313
type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
1414

@@ -23,8 +23,8 @@ const StopOrKillButton = ({ onPress }: { onPress: (action: PowerAction) => void
2323
const status = ServerContext.useStoreState(state => state.status.value);
2424

2525
useEffect(() => {
26-
setClicked(state => ['stopping'].indexOf(status) < 0 ? false : state);
27-
}, [status]);
26+
setClicked(state => [ 'stopping' ].indexOf(status) < 0 ? false : state);
27+
}, [ status ]);
2828

2929
return (
3030
<button
@@ -142,17 +142,11 @@ export default () => {
142142
<StopOrKillButton onPress={action => sendPowerCommand(action)}/>
143143
</GreyBox>
144144
</div>
145-
<React.Suspense
146-
fallback={
147-
<div className={'mx-4 w-3/4 mr-4 flex items-center justify-center'}>
148-
<Spinner centered={true} size={'normal'}/>
149-
</div>
150-
}
151-
>
145+
<SuspenseSpinner>
152146
<div className={'mx-4 w-3/4 mr-4'}>
153147
<ChunkedConsole/>
154148
</div>
155-
</React.Suspense>
149+
</SuspenseSpinner>
156150
</div>
157151
);
158152
};

‎resources/scripts/components/server/files/FileEditContainer.tsx‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
1-
import React from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import useRouter from 'use-react-router';
3-
import queryString from 'query-string';
3+
import { ServerContext } from '@/state/server';
4+
import getFileContents from '@/api/server/files/getFileContents';
45

56
export default () => {
6-
const { location: { search } } = useRouter();
7-
const values = queryString.parse(search);
7+
const { location: { hash } } = useRouter();
8+
const [content, setContent] = useState('');
9+
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
10+
11+
useEffect(() => {
12+
getFileContents(uuid, hash.replace(/^#/, ''))
13+
.then(setContent)
14+
.catch(error => console.error(error));
15+
}, []);
816

917
return (
1018
<div className={'my-10'}>
11-
<textarea className={'rounded bg-black h-32 w-full text-neutral-100'}>
12-
13-
</textarea>
19+
<textarea
20+
value={content}
21+
className={'rounded bg-black h-32 w-full text-neutral-100 text-sm font-mono'}
22+
/>
1423
</div>
1524
);
1625
};

‎resources/scripts/components/server/files/FileObjectRow.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,13 @@ import React from 'react';
1010
import { FileObject } from '@/api/server/files/loadDirectory';
1111
import FileDropdownMenu from '@/components/server/files/FileDropdownMenu';
1212
import { ServerContext } from '@/state/server';
13+
import { NavLink } from 'react-router-dom';
14+
import useRouter from 'use-react-router';
1315

1416
export default ({ file }: { file: FileObject }) => {
1517
const directory = ServerContext.useStoreState(state => state.files.directory);
1618
const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
19+
const { match } = useRouter();
1720

1821
return (
1922
<div
@@ -23,18 +26,18 @@ export default ({ file }: { file: FileObject }) => {
2326
hover:text-neutral-100 cursor-pointer items-center no-underline hover:bg-neutral-600
2427
`}
2528
>
26-
<a
27-
href={file.isFile ? undefined : `#${directory}/${file.name}`}
29+
<NavLink
30+
to={`${match.url}/${file.isFile ? 'edit/' : ''}#${directory}/${file.name}`}
2831
className={'flex flex-1 text-neutral-300 no-underline p-3'}
2932
onClick={e => {
30-
e.preventDefault();
31-
3233
// Don't rely on the onClick to work with the generated URL. Because of the way this
3334
// component re-renders you'll get redirected into a nested directory structure since
3435
// it'll cause the directory variable to update right away when you click.
3536
//
3637
// Just trust me future me, leave this be.
3738
if (!file.isFile) {
39+
e.preventDefault();
40+
3841
window.location.hash = `#${directory}/${file.name}`;
3942
setDirectory(`${directory}/${file.name}`);
4043
}
@@ -65,7 +68,7 @@ export default ({ file }: { file: FileObject }) => {
6568
distanceInWordsToNow(file.modifiedAt, { addSuffix: true })
6669
}
6770
</div>
68-
</a>
71+
</NavLink>
6972
<FileDropdownMenu uuid={file.uuid}/>
7073
</div>
7174
);

‎resources/scripts/routers/ServerRouter.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect } from 'react';
1+
import React, { lazy, useEffect } from 'react';
22
import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
33
import NavigationBar from '@/components/NavigationBar';
44
import ServerConsole from '@/components/server/ServerConsole';
@@ -10,7 +10,11 @@ import { Provider } from 'react-redux';
1010
import DatabasesContainer from '@/components/server/databases/DatabasesContainer';
1111
import FileManagerContainer from '@/components/server/files/FileManagerContainer';
1212
import { CSSTransition } from 'react-transition-group';
13-
import FileEditContainer from '@/components/server/files/FileEditContainer';
13+
import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
14+
15+
const LazyFileEditContainer = lazy<React.ComponentType<RouteComponentProps<any>>>(
16+
() => import('@/components/server/files/FileEditContainer')
17+
);
1418

1519
const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
1620
const server = ServerContext.useStoreState(state => state.server.data);
@@ -51,7 +55,15 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
5155
<Switch location={location}>
5256
<Route path={`${match.path}`} component={ServerConsole} exact/>
5357
<Route path={`${match.path}/files`} component={FileManagerContainer} exact/>
54-
<Route path={`${match.path}/files/edit`} component={FileEditContainer} exact/>
58+
<Route
59+
path={`${match.path}/files/edit`}
60+
render={props => (
61+
<SuspenseSpinner>
62+
<LazyFileEditContainer {...props}/>
63+
</SuspenseSpinner>
64+
)}
65+
exact
66+
/>
5567
<Route path={`${match.path}/databases`} component={DatabasesContainer}/>
5668
</Switch>
5769
</React.Fragment>

‎resources/styles/components/typography.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@import url('//fonts.googleapis.com/css?family=Rubik:300,400,500&display=swap');
2-
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:500&display=swap');
2+
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans:500&display=swap');
33

44
body {
55
@apply .text-neutral-200;

‎tailwind.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,9 @@ module.exports = {
211211
'serif',
212212
],
213213
'mono': [
214+
'"IBM Plex Mono"',
215+
'"Source Code Pro"',
216+
'SourceCodePro',
214217
'Menlo',
215218
'Monaco',
216219
'Consolas',

0 commit comments

Comments
 (0)