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

React 18 and Vite (#4510)

Browse source
This commit is contained in:
Matthew Penner 2022-11-25 13:25:03 -07:00 • committed by GitHub
parent 1bb1b13f6d
commit 21613fa602
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
244 changed files with 4547 additions and 8933 deletions
Download patch file Download diff file Expand all files Collapse all files

49
resources/scripts/components/server/WebsocketHandler.tsx
View file

@ -1,29 +1,32 @@
import React, { useEffect, useState } from 'react';
import { Websocket } from '@/plugins/Websocket';
import { ServerContext } from '@/state/server';
import { useEffect, useState } from 'react';
import tw from 'twin.macro';
import getWebsocketToken from '@/api/server/getWebsocketToken';
import ContentContainer from '@/components/elements/ContentContainer';
import { CSSTransition } from 'react-transition-group';
import Spinner from '@/components/elements/Spinner';
import tw from 'twin.macro';
import FadeTransition from '@/components/elements/transitions/FadeTransition';
import { Websocket } from '@/plugins/Websocket';
import { ServerContext } from '@/state/server';
const reconnectErrors = ['jwt: exp claim is invalid', 'jwt: created too far in past (denylist)'];
export default () => {
function WebsocketHandler() {
let updatingToken = false;
const [error, setError] = useState<'connecting' | string>('');
const { connected, instance } = ServerContext.useStoreState((state) => state.socket);
const uuid = ServerContext.useStoreState((state) => state.server.data?.uuid);
const setServerStatus = ServerContext.useStoreActions((actions) => actions.status.setServerStatus);
const { setInstance, setConnectionState } = ServerContext.useStoreActions((actions) => actions.socket);
const { connected, instance } = ServerContext.useStoreState(state => state.socket);
const uuid = ServerContext.useStoreState(state => state.server.data?.uuid);
const setServerStatus = ServerContext.useStoreActions(actions => actions.status.setServerStatus);
const { setInstance, setConnectionState } = ServerContext.useStoreActions(actions => actions.socket);
const updateToken = (uuid: string, socket: Websocket) => {
if (updatingToken) return;
if (updatingToken) {
return;
}
updatingToken = true;
getWebsocketToken(uuid)
.then((data) => socket.setToken(data.token, true))
.catch((error) => console.error(error))
.then(data => socket.setToken(data.token, true))
.catch(error => console.error(error))
.then(() => {
updatingToken = false;
});
@ -38,9 +41,9 @@ export default () => {
setError('connecting');
setConnectionState(false);
});
socket.on('status', (status) => setServerStatus(status));
socket.on('status', status => setServerStatus(status));
socket.on('daemon error', (message) => {
socket.on('daemon error', message => {
console.warn('Got error message from daemon socket:', message);
});
@ -50,11 +53,11 @@ export default () => {
setConnectionState(false);
console.warn('JWT validation error from wings:', error);
if (reconnectErrors.find((v) => error.toLowerCase().indexOf(v) >= 0)) {
if (reconnectErrors.find(v => error.toLowerCase().indexOf(v) >= 0)) {
updateToken(uuid, socket);
} else {
setError(
'There was an error validating the credentials provided for the websocket. Please refresh the page.'
'There was an error validating the credentials provided for the websocket. Please refresh the page.',
);
}
});
@ -74,14 +77,14 @@ export default () => {
});
getWebsocketToken(uuid)
.then((data) => {
.then(data => {
// Connect and then set the authentication token.
socket.setToken(data.token).connect(data.socket);
// Once that is done, set the instance.
setInstance(socket);
})
.catch((error) => console.error(error));
.catch(error => console.error(error));
};
useEffect(() => {
@ -105,7 +108,7 @@ export default () => {
}, [uuid]);
return error ? (
<CSSTransition timeout={150} in appear classNames={'fade'}>
<FadeTransition duration="duration-150" appear show>
<div css={tw`bg-red-500 py-2`}>
<ContentContainer css={tw`flex items-center justify-center`}>
{error === 'connecting' ? (
@ -120,6 +123,8 @@ export default () => {
)}
</ContentContainer>
</div>
</CSSTransition>
</FadeTransition>
) : null;
};
}
export default WebsocketHandler;