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

resources/scripts/components/FlashMessageRender.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import MessageBox from '@/components/MessageBox';
 import { State, useStoreState } from 'easy-peasy';
-import { ApplicationState } from '@/state/types';
+import { ApplicationStore } from '@/state';
 
 type Props = Readonly<{
     byKey?: string;
@@ -10,7 +10,7 @@ type Props = Readonly<{
 }>;
 
 export default ({ withBottomSpace, spacerClass, byKey }: Props) => {
-    const flashes = useStoreState((state: State<ApplicationState>) => state.flashes.items);
+    const flashes = useStoreState((state: State<ApplicationStore>) => state.flashes.items);
 
     let filtered = flashes;
     if (byKey) {

resources/scripts/components/auth/ForgotPasswordContainer.tsx

@@ -4,14 +4,14 @@ import requestPasswordResetEmail from '@/api/auth/requestPasswordResetEmail';
 import { httpErrorToHuman } from '@/api/http';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
 import { Actions, useStoreActions } from 'easy-peasy';
-import { ApplicationState } from '@/state/types';
 import FlashMessageRender from '@/components/FlashMessageRender';
+import { ApplicationStore } from '@/state';
 
 export default () => {
     const [ isSubmitting, setSubmitting ] = React.useState(false);
     const [ email, setEmail ] = React.useState('');
 
-    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
+    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
     const handleFieldUpdate = (e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value);
 

resources/scripts/components/auth/LoginCheckpointContainer.tsx

@@ -4,15 +4,15 @@ import loginCheckpoint from '@/api/auth/loginCheckpoint';
 import { httpErrorToHuman } from '@/api/http';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
 import { Actions, useStoreActions } from 'easy-peasy';
-import { ApplicationState } from '@/state/types';
 import { StaticContext } from 'react-router';
 import FlashMessageRender from '@/components/FlashMessageRender';
+import { ApplicationStore } from '@/state';
 
 export default ({ history, location: { state } }: RouteComponentProps<{}, StaticContext, { token?: string }>) => {
     const [ code, setCode ] = useState('');
     const [ isLoading, setIsLoading ] = useState(false);
 
-    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
+    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
     if (!state || !state.token) {
         history.replace('/auth/login');

resources/scripts/components/auth/LoginContainer.tsx

@@ -5,14 +5,14 @@ import { httpErrorToHuman } from '@/api/http';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { Actions, useStoreActions } from 'easy-peasy';
-import { ApplicationState } from '@/state/types';
+import { ApplicationStore } from '@/state';
 
 export default ({ history }: RouteComponentProps) => {
     const [ username, setUsername ] = useState('');
     const [ password, setPassword ] = useState('');
     const [ isLoading, setLoading ] = useState(false);
 
-    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
+    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
     const submit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();

resources/scripts/components/auth/ResetPasswordContainer.tsx

@@ -7,7 +7,7 @@ import { httpErrorToHuman } from '@/api/http';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { Actions, useStoreActions } from 'easy-peasy';
-import { ApplicationState } from '@/state/types';
+import { ApplicationStore } from '@/state';
 
 type Props = Readonly<RouteComponentProps<{ token: string }> & {}>;
 
@@ -17,7 +17,7 @@ export default (props: Props) => {
     const [ password, setPassword ] = useState('');
     const [ passwordConfirm, setPasswordConfirm ] = useState('');
 
-    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
+    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
     const parsed = parse(props.location.search);
     if (email.length === 0 && parsed.email) {

resources/scripts/components/dashboard/forms/UpdateEmailAddressForm.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Actions, State, useStoreActions, useStoreState } from 'easy-peasy';
-import { ApplicationState } from '@/state/types';
 import { Form, Formik, FormikActions } from 'formik';
 import * as Yup from 'yup';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import Field from '@/components/elements/Field';
 import { httpErrorToHuman } from '@/api/http';
+import { ApplicationStore } from '@/state';
 
 interface Values {
     email: string;
@@ -18,10 +18,10 @@ const schema = Yup.object().shape({
 });
 
 export default () => {
-    const user = useStoreState((state: State<ApplicationState>) => state.user.data);
-    const updateEmail = useStoreActions((state: Actions<ApplicationState>) => state.user.updateUserEmail);
+    const user = useStoreState((state: State<ApplicationStore>) => state.user.data);
+    const updateEmail = useStoreActions((state: Actions<ApplicationStore>) => state.user.updateUserEmail);
 
-    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
+    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
     const submit = (values: Values, { resetForm, setSubmitting }: FormikActions<Values>) => {
         clearFlashes('account:email');

resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Actions, State, useStoreActions, useStoreState } from 'easy-peasy';
-import { ApplicationState } from '@/state/types';
 import { Form, Formik, FormikActions } from 'formik';
 import Field from '@/components/elements/Field';
 import * as Yup from 'yup';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import updateAccountPassword from '@/api/account/updateAccountPassword';
 import { httpErrorToHuman } from '@/api/http';
+import { ApplicationStore } from '@/state';
 
 interface Values {
     current: string;
@@ -23,8 +23,8 @@ const schema = Yup.object().shape({
 });
 
 export default () => {
-    const user = useStoreState((state: State<ApplicationState>) => state.user.data);
-    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
+    const user = useStoreState((state: State<ApplicationStore>) => state.user.data);
+    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
     if (!user) {
         return null;

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