React 18 and Vite (#4510)

resources/scripts/state/server/databases.ts

@@ -16,15 +16,15 @@ const databases: ServerDatabaseStore = {
     }),
 
     appendDatabase: action((state, payload) => {
-        if (state.data.find((database) => database.id === payload.id)) {
-            state.data = state.data.map((database) => (database.id === payload.id ? payload : database));
+        if (state.data.find(database => database.id === payload.id)) {
+            state.data = state.data.map(database => (database.id === payload.id ? payload : database));
         } else {
             state.data = [...state.data, payload];
         }
     }),
 
     removeDatabase: action((state, payload) => {
-        state.data = [...state.data.filter((database) => database.id !== payload)];
+        state.data = [...state.data.filter(database => database.id !== payload)];
     }),
 };
 

resources/scripts/state/server/files.ts

@@ -1,13 +1,15 @@
-import { action, Action } from 'easy-peasy';
+import type { Action } from 'easy-peasy';
+import { action } from 'easy-peasy';
+
 import { cleanDirectoryPath } from '@/helpers';
 
-export interface FileUploadData {
+interface FileUploadData {
     loaded: number;
     readonly abort: AbortController;
     readonly total: number;
 }
 
-export interface ServerFileStore {
+interface ServerFileStore {
     directory: string;
     selectedFiles: string[];
     uploads: Record<string, FileUploadData>;
@@ -37,15 +39,15 @@ const files: ServerFileStore = {
     }),
 
     appendSelectedFile: action((state, payload) => {
-        state.selectedFiles = state.selectedFiles.filter((f) => f !== payload).concat(payload);
+        state.selectedFiles = state.selectedFiles.filter(f => f !== payload).concat(payload);
     }),
 
     removeSelectedFile: action((state, payload) => {
-        state.selectedFiles = state.selectedFiles.filter((f) => f !== payload);
+        state.selectedFiles = state.selectedFiles.filter(f => f !== payload);
     }),
 
-    clearFileUploads: action((state) => {
-        Object.values(state.uploads).forEach((upload) => upload.abort.abort());
+    clearFileUploads: action(state => {
+        Object.values(state.uploads).forEach(upload => upload.abort.abort());
 
         state.uploads = {};
     }),
@@ -55,20 +57,27 @@ const files: ServerFileStore = {
     }),
 
     setUploadProgress: action((state, { name, loaded }) => {
-        if (state.uploads[name]) {
-            state.uploads[name].loaded = loaded;
+        const upload = state.uploads[name];
+        if (upload === undefined) {
+            return;
         }
+
+        upload.loaded = loaded;
     }),
 
     removeFileUpload: action((state, payload) => {
-        if (state.uploads[payload]) {
-            // Abort the request if it is still in flight. If it already completed this is
-            // a no-op.
-            state.uploads[payload].abort.abort();
-
-            delete state.uploads[payload];
+        const upload = state.uploads[payload];
+        if (upload === undefined) {
+            return;
         }
+
+        // Abort the request if it is still in flight. If it already completed this is
+        // a no-op.
+        upload.abort.abort();
+
+        delete state.uploads[payload];
     }),
 };
 
+export type { FileUploadData, ServerFileStore };
 export default files;

resources/scripts/state/server/index.ts

@@ -1,13 +1,20 @@
-import getServer, { Server } from '@/api/server/getServer';
-import { action, Action, computed, Computed, createContextStore, thunk, Thunk } from 'easy-peasy';
-import socket, { SocketStore } from './socket';
-import files, { ServerFileStore } from '@/state/server/files';
-import subusers, { ServerSubuserStore } from '@/state/server/subusers';
-import { composeWithDevTools } from 'redux-devtools-extension';
-import schedules, { ServerScheduleStore } from '@/state/server/schedules';
-import databases, { ServerDatabaseStore } from '@/state/server/databases';
+import type { Action, Computed, Thunk } from 'easy-peasy';
+import { action, computed, createContextStore, thunk } from 'easy-peasy';
 import isEqual from 'react-fast-compare';
 
+import type { Server } from '@/api/server/getServer';
+import getServer from '@/api/server/getServer';
+import type { ServerDatabaseStore } from '@/state/server/databases';
+import databases from '@/state/server/databases';
+import type { ServerFileStore } from '@/state/server/files';
+import files from '@/state/server/files';
+import type { ServerScheduleStore } from '@/state/server/schedules';
+import schedules from '@/state/server/schedules';
+import type { SocketStore } from '@/state/server/socket';
+import socket from '@/state/server/socket';
+import type { ServerSubuserStore } from '@/state/server/subusers';
+import subusers from '@/state/server/subusers';
+
 export type ServerStatus = 'offline' | 'starting' | 'stopping' | 'running' | null;
 
 interface ServerDataStore {
@@ -25,7 +32,7 @@ interface ServerDataStore {
 const server: ServerDataStore = {
     permissions: [],
 
-    inConflictState: computed((state) => {
+    inConflictState: computed(state => {
         if (!state.data) {
             return false;
         }
@@ -33,7 +40,7 @@ const server: ServerDataStore = {
         return state.data.status !== null || state.data.isTransferring || state.data.isNodeUnderMaintenance;
     }),
 
-    isInstalling: computed((state) => {
+    isInstalling: computed(state => {
         return state.data?.status === 'installing' || state.data?.status === 'install_failed';
     }),
 
@@ -87,37 +94,29 @@ export interface ServerStore {
     clearServerState: Action<ServerStore>;
 }
 
-export const ServerContext = createContextStore<ServerStore>(
-    {
-        server,
-        socket,
-        status,
-        databases,
-        files,
-        subusers,
-        schedules,
-        clearServerState: action((state) => {
-            state.server.data = undefined;
-            state.server.permissions = [];
-            state.databases.data = [];
-            state.subusers.data = [];
-            state.files.directory = '/';
-            state.files.selectedFiles = [];
-            state.schedules.data = [];
+export const ServerContext = createContextStore<ServerStore>({
+    server,
+    socket,
+    status,
+    databases,
+    files,
+    subusers,
+    schedules,
+    clearServerState: action(state => {
+        state.server.data = undefined;
+        state.server.permissions = [];
+        state.databases.data = [];
+        state.subusers.data = [];
+        state.files.directory = '/';
+        state.files.selectedFiles = [];
+        state.schedules.data = [];
 
-            if (state.socket.instance) {
-                state.socket.instance.removeAllListeners();
-                state.socket.instance.close();
-            }
+        if (state.socket.instance) {
+            state.socket.instance.removeAllListeners();
+            state.socket.instance.close();
+        }
 
-            state.socket.instance = null;
-            state.socket.connected = false;
-        }),
-    },
-    {
-        compose: composeWithDevTools({
-            name: 'ServerStore',
-            trace: true,
-        }),
-    }
-);
+        state.socket.instance = null;
+        state.socket.connected = false;
+    }),
+});

resources/scripts/state/server/schedules.ts

@@ -16,15 +16,15 @@ const schedules: ServerScheduleStore = {
     }),
 
     appendSchedule: action((state, payload) => {
-        if (state.data.find((schedule) => schedule.id === payload.id)) {
-            state.data = state.data.map((schedule) => (schedule.id === payload.id ? payload : schedule));
+        if (state.data.find(schedule => schedule.id === payload.id)) {
+            state.data = state.data.map(schedule => (schedule.id === payload.id ? payload : schedule));
         } else {
             state.data = [...state.data, payload];
         }
     }),
 
     removeSchedule: action((state, payload) => {
-        state.data = [...state.data.filter((schedule) => schedule.id !== payload)];
+        state.data = [...state.data.filter(schedule => schedule.id !== payload)];
     }),
 };
 

resources/scripts/state/server/subusers.ts

@@ -60,7 +60,7 @@ const subusers: ServerSubuserStore = {
         let matched = false;
         state.data = [
             ...state.data
-                .map((user) => {
+                .map(user => {
                     if (user.uuid === payload.uuid) {
                         matched = true;
 
@@ -74,7 +74,7 @@ const subusers: ServerSubuserStore = {
     }),
 
     removeSubuser: action((state, payload) => {
-        state.data = [...state.data.filter((user) => user.uuid !== payload)];
+        state.data = [...state.data.filter(user => user.uuid !== payload)];
     }),
 };