Use easy-peasy to store file state data

resources/scripts/state/server/files.ts

@@ -0,0 +1,54 @@
+import loadDirectory, { FileObject } from '@/api/server/files/loadDirectory';
+import { action, Action, thunk, Thunk } from 'easy-peasy';
+import { ServerStore } from '@/state/server/index';
+
+export interface ServerFileStore {
+    directory: string;
+    contents: FileObject[];
+    getDirectoryContents: Thunk<ServerFileStore, string, {}, ServerStore, Promise<void>>;
+    setContents: Action<ServerFileStore, FileObject[]>;
+    pushFile: Action<ServerFileStore, FileObject>;
+    removeFile: Action<ServerFileStore, string>;
+    setDirectory: Action<ServerFileStore, string>;
+}
+
+const files: ServerFileStore = {
+    directory: '',
+    contents: [],
+
+    getDirectoryContents: thunk(async (actions, payload, { getStoreState }) => {
+        const server = getStoreState().server.data;
+        if (!server) {
+            return;
+        }
+
+        const contents = await loadDirectory(server.uuid, payload);
+
+        actions.setDirectory(payload);
+        actions.setContents(contents);
+    }),
+
+    setContents: action((state, payload) => {
+        state.contents = payload;
+    }),
+
+    pushFile: action((state, payload) => {
+        const matchIndex = state.contents.findIndex(file => file.uuid === payload.uuid);
+        if (matchIndex < 0) {
+            state.contents = state.contents.concat(payload);
+            return;
+        }
+
+        state.contents[matchIndex] = payload;
+    }),
+
+    removeFile: action((state, payload) => {
+        state.contents = state.contents.filter(file => file.uuid !== payload);
+    }),
+
+    setDirectory: action((state, payload) => {
+        state.directory = payload;
+    }),
+};
+
+export default files;

resources/scripts/state/server/index.ts

@@ -2,12 +2,13 @@ import getServer, { Server } from '@/api/server/getServer';
 import { action, Action, createContextStore, thunk, Thunk } from 'easy-peasy';
 import socket, { SocketStore } from './socket';
 import { ServerDatabase } from '@/api/server/getServerDatabases';
+import files, { ServerFileStore } from '@/state/server/files';
 
 export type ServerStatus = 'offline' | 'starting' | 'stopping' | 'running';
 
 interface ServerDataStore {
     data?: Server;
-    getServer: Thunk<ServerDataStore, string, {}, any, Promise<void>>;
+    getServer: Thunk<ServerDataStore, string, {}, ServerStore, Promise<void>>;
     setServer: Action<ServerDataStore, Server>;
 }
 
@@ -49,13 +50,14 @@ const databases: ServerDatabaseStore = {
         state.items = state.items.filter(item => item.id !== payload.id).concat(payload);
     }),
     removeDatabase: action((state, payload) => {
-       state.items = state.items.filter(item => item.id !== payload.id);
+        state.items = state.items.filter(item => item.id !== payload.id);
     }),
 };
 
 export interface ServerStore {
     server: ServerDataStore;
     databases: ServerDatabaseStore;
+    files: ServerFileStore;
     socket: SocketStore;
     status: ServerStatusStore;
     clearServerState: Action<ServerStore>;
@@ -66,6 +68,7 @@ export const ServerContext = createContextStore<ServerStore>({
     socket,
     status,
     databases,
+    files,
     clearServerState: action(state => {
         state.server.data = undefined;
         state.databases.items = [];