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

resources/scripts/state/flashes.ts

@@ -0,0 +1,28 @@
+import { Action, action } from 'easy-peasy';
+import { FlashMessageType } from '@/components/MessageBox';
+
+export interface FlashStore {
+    items: FlashMessage[];
+    addFlash: Action<FlashStore, FlashMessage>;
+    clearFlashes: Action<FlashStore, string | void>;
+}
+
+export interface FlashMessage {
+    id?: string;
+    key?: string;
+    type: FlashMessageType;
+    title?: string;
+    message: string;
+}
+
+const flashes: FlashStore = {
+    items: [],
+    addFlash: action((state, payload) => {
+        state.items.push(payload);
+    }),
+    clearFlashes: action((state, payload) => {
+        state.items = payload ? state.items.filter(flashes => flashes.key !== payload) : [];
+    }),
+};
+
+export default flashes;

resources/scripts/state/index.ts

@@ -1,13 +1,15 @@
 import { createStore } from 'easy-peasy';
-import { ApplicationState } from '@/state/types';
-import flashes from '@/state/models/flashes';
-import user from '@/state/models/user';
-import server from '@/state/models/server';
+import flashes, { FlashStore } from '@/state/flashes';
+import user, { UserStore } from '@/state/user';
 
-const state: ApplicationState = {
+export interface ApplicationStore {
+    flashes: FlashStore;
+    user: UserStore;
+}
+
+const state: ApplicationStore = {
     flashes,
     user,
-    server,
 };
 
 export const store = createStore(state);

resources/scripts/state/models/flashes.ts

@@ -1,14 +0,0 @@
-import { action } from 'easy-peasy';
-import { FlashState } from '@/state/types';
-
-const flashes: FlashState = {
-    items: [],
-    addFlash: action((state, payload) => {
-        state.items.push(payload);
-    }),
-    clearFlashes: action((state, payload) => {
-        state.items = payload ? state.items.filter(flashes => flashes.key !== payload) : [];
-    }),
-};
-
-export default flashes;

resources/scripts/state/models/server.ts

@@ -1,43 +0,0 @@
-import getServer, { Server } from '@/api/server/getServer';
-import { action, Action, thunk, Thunk } from 'easy-peasy';
-import socket, { SocketState } from './socket';
-
-export type ServerStatus = 'offline' | 'starting' | 'stopping' | 'running';
-
-export interface ServerState {
-    data?: Server;
-    status: ServerStatus;
-    socket: SocketState;
-    getServer: Thunk<ServerState, string, {}, any, Promise<void>>;
-    setServer: Action<ServerState, Server>;
-    setServerStatus: Action<ServerState, ServerStatus>;
-    clearServerState: Action<ServerState>;
-}
-
-const server: ServerState = {
-    socket,
-    status: 'offline',
-    getServer: thunk(async (actions, payload) => {
-        const server = await getServer(payload);
-        actions.setServer(server);
-    }),
-    setServer: action((state, payload) => {
-        state.data = payload;
-    }),
-    setServerStatus: action((state, payload) => {
-        state.status = payload;
-    }),
-    clearServerState: action(state => {
-        state.data = undefined;
-
-        if (state.socket.instance) {
-            state.socket.instance.removeAllListeners();
-            state.socket.instance.close();
-        }
-
-        state.socket.instance = null;
-        state.socket.connected = false;
-    }),
-};
-
-export default server;

resources/scripts/state/server/index.ts

@@ -0,0 +1,57 @@
+import getServer, { Server } from '@/api/server/getServer';
+import { action, Action, createContextStore, thunk, Thunk } from 'easy-peasy';
+import socket, { SocketStore } from './socket';
+
+export type ServerStatus = 'offline' | 'starting' | 'stopping' | 'running';
+
+interface ServerDataStore {
+    data?: Server;
+    getServer: Thunk<ServerDataStore, string, {}, any, Promise<void>>;
+    setServer: Action<ServerDataStore, Server>;
+}
+
+const server: ServerDataStore = {
+    getServer: thunk(async (actions, payload) => {
+        const server = await getServer(payload);
+        actions.setServer(server);
+    }),
+    setServer: action((state, payload) => {
+        state.data = payload;
+    }),
+};
+
+interface ServerStatusStore {
+    value: ServerStatus;
+    setServerStatus: Action<ServerStatusStore, ServerStatus>;
+}
+
+const status: ServerStatusStore = {
+    value: 'offline',
+    setServerStatus: action((state, payload) => {
+        state.value = payload;
+    }),
+};
+
+export interface ServerStore {
+    server: ServerDataStore;
+    socket: SocketStore;
+    status: ServerStatusStore;
+    clearServerState: Action<ServerStore>;
+}
+
+export const ServerContext = createContextStore<ServerStore>({
+    server,
+    socket,
+    status,
+    clearServerState: action(state => {
+        state.server.data = undefined;
+
+        if (state.socket.instance) {
+            state.socket.instance.removeAllListeners();
+            state.socket.instance.close();
+        }
+
+        state.socket.instance = null;
+        state.socket.connected = false;
+    }),
+}, { name: 'ServerStore' });

resources/scripts/state/server/socket.ts

@@ -1,14 +1,14 @@
 import { Action, action } from 'easy-peasy';
 import { Websocket } from '@/plugins/Websocket';
 
-export interface SocketState {
+export interface SocketStore {
     instance: Websocket | null;
     connected: boolean;
-    setInstance: Action<SocketState, Websocket | null>;
-    setConnectionState: Action<SocketState, boolean>;
+    setInstance: Action<SocketStore, Websocket | null>;
+    setConnectionState: Action<SocketStore, boolean>;
 }
 
-const socket: SocketState = {
+const socket: SocketStore = {
     instance: null,
     connected: false,
     setInstance: action((state, payload) => {

resources/scripts/state/types.d.ts

@@ -1,24 +0,0 @@
-import { FlashMessageType } from '@/components/MessageBox';
-import { Action } from 'easy-peasy';
-import { UserState } from '@/state/models/user';
-import { ServerState } from '@/state/models/server';
-
-export interface ApplicationState {
-    flashes: FlashState;
-    user: UserState;
-    server: ServerState;
-}
-
-export interface FlashState {
-    items: FlashMessage[];
-    addFlash: Action<FlashState, FlashMessage>;
-    clearFlashes: Action<FlashState, string | void>;
-}
-
-export interface FlashMessage {
-    id?: string;
-    key?: string;
-    type: FlashMessageType;
-    title?: string;
-    message: string;
-}

resources/scripts/state/user.ts

@@ -12,14 +12,14 @@ export interface UserData {
     updatedAt: Date;
 }
 
-export interface UserState {
+export interface UserStore {
     data?: UserData;
-    setUserData: Action<UserState, UserData>;
-    updateUserData: Action<UserState, Partial<UserData>>;
-    updateUserEmail: Thunk<UserState, { email: string; password: string }, any, {}, Promise<void>>;
+    setUserData: Action<UserStore, UserData>;
+    updateUserData: Action<UserStore, Partial<UserData>>;
+    updateUserEmail: Thunk<UserStore, { email: string; password: string }, any, {}, Promise<void>>;
 }
 
-const user: UserState = {
+const user: UserStore = {
     data: undefined,
     setUserData: action((state, payload) => {
         state.data = payload;