Switch to a context store for server stuff to better support things in the future

resources/scripts/components/server/Console.tsx

@@ -2,9 +2,9 @@ import React, { createRef } from 'react';
 import { Terminal } from 'xterm';
 import * as TerminalFit from 'xterm/lib/addons/fit/fit';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import { ApplicationState } from '@/state/types';
 import { connect } from 'react-redux';
 import { Websocket } from '@/plugins/Websocket';
+import { ServerStore } from '@/state/server';
 
 const theme = {
     background: 'transparent',
@@ -113,8 +113,8 @@ class Console extends React.PureComponent<Readonly<Props>> {
 }
 
 export default connect(
-    (state: ApplicationState) => ({
-        connected: state.server.socket.connected,
-        instance: state.server.socket.instance,
+    (state: ServerStore) => ({
+        connected: state.socket.connected,
+        instance: state.socket.instance,
     }),
 )(Console);

resources/scripts/components/server/ServerConsole.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import Console from '@/components/server/Console';
-import { State, useStoreState } from 'easy-peasy';
-import { ApplicationState } from '@/state/types';
+import { ServerContext } from '@/state/server';
 
 export default () => {
-    const status = useStoreState((state: State<ApplicationState>) => state.server.status);
+    const status = ServerContext.useStoreState(state => state.status.value);
 
     return (
         <div className={'my-10 flex'}>

resources/scripts/components/server/ServerDatabases.tsx

@@ -0,0 +1,24 @@
+import React, { useEffect } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faDatabase } from '@fortawesome/free-solid-svg-icons/faDatabase';
+import getServerDatabases from '@/api/server/getServerDatabases';
+import { useStoreState } from 'easy-peasy';
+
+export default () => {
+    useEffect(() => {
+        getServerDatabases('s');
+    }, []);
+
+    return (
+        <div className={'my-10'}>
+            <div className={'flex rounded no-underline text-neutral-200 items-center bg-neutral-700 p-4 border border-transparent hover:border-neutral-500'}>
+                <div className={'rounded-full bg-neutral-500 p-3'}>
+                    <FontAwesomeIcon icon={faDatabase}/>
+                </div>
+                <div className={'w-1/2 ml-4'}>
+                    <p className={'text-lg'}>sfgsfgd</p>
+                </div>
+            </div>
+        </div>
+    );
+};

resources/scripts/components/server/WebsocketHandler.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect } from 'react';
-import { Actions, State, useStoreActions, useStoreState } from 'easy-peasy';
-import { ApplicationState } from '@/state/types';
 import { Websocket } from '@/plugins/Websocket';
+import { ServerContext } from '@/state/server';
 
 export default () => {
-    const server = useStoreState((state: State<ApplicationState>) => state.server.data);
-    const instance = useStoreState((state: State<ApplicationState>) => state.server.socket.instance);
-    const setServerStatus = useStoreActions((actions: Actions<ApplicationState>) => actions.server.setServerStatus);
-    const { setInstance, setConnectionState } = useStoreActions((actions: Actions<ApplicationState>) => actions.server.socket);
+    const server = ServerContext.useStoreState(state => state.server.data);
+    const instance = ServerContext.useStoreState(state => state.socket.instance);
+    const setServerStatus = ServerContext.useStoreActions(actions => actions.status.setServerStatus);
+    const { setInstance, setConnectionState } = ServerContext.useStoreActions(actions => actions.socket);
 
     useEffect(() => {
         // If there is already an instance or there is no server, just exit out of this process
@@ -20,7 +19,7 @@ export default () => {
 
         const socket = new Websocket(
             `wss://wings.pterodactyl.test:8080/api/servers/${server.uuid}/ws`,
-            'CC8kHCuMkXPosgzGO6d37wvhNcksWxG6kTrA'
+            'CC8kHCuMkXPosgzGO6d37wvhNcksWxG6kTrA',
         );
 
         socket.on('SOCKET_OPEN', () => setConnectionState(true));