replacing rematch with zustand (#180)

* replacing rematch with zustand

* upgrading dependencies

* next release version

ui/src/App.jsx

@@ -6,7 +6,7 @@ import GeneralSettings from './views/generalSettings/GeneralSettings';
 import JobMutation from './views/jobs/mutation/JobMutation';
 import UserMutator from './views/user/mutation/UserMutator';
 import JobInsight from './views/jobs/insights/JobInsight.jsx';
-import { useDispatch, useSelector } from 'react-redux';
+import { useActions, useSelector } from './services/state/store';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import Logout from './components/logout/Logout';
 import Logo from './components/logo/Logo';
@@ -20,20 +20,20 @@ import TrackingModal from './components/tracking/TrackingModal.jsx';
 import { Banner } from '@douyinfe/semi-ui';
 
 export default function FredyApp() {
-  const dispatch = useDispatch();
+  const actions = useActions();
   const [loading, setLoading] = React.useState(true);
   const currentUser = useSelector((state) => state.user.currentUser);
   const settings = useSelector((state) => state.generalSettings.settings);
 
   useEffect(() => {
     async function init() {
-      await dispatch.user.getCurrentUser();
+      await actions.user.getCurrentUser();
       if (!needsLogin()) {
-        await dispatch.provider.getProvider();
-        await dispatch.jobs.getJobs();
-        await dispatch.jobs.getProcessingTimes();
-        await dispatch.notificationAdapter.getAdapter();
-        await dispatch.generalSettings.getGeneralSettings();
+        await actions.provider.getProvider();
+        await actions.jobs.getJobs();
+        await actions.jobs.getProcessingTimes();
+        await actions.notificationAdapter.getAdapter();
+        await actions.generalSettings.getGeneralSettings();
       }
       setLoading(false);
     }

ui/src/Index.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
 
-import { reduxStore } from './services/rematch/store';
 import { HashRouter } from 'react-router-dom';
-import { Provider } from 'react-redux';
 import { createRoot } from 'react-dom/client';
 import en_US from '@douyinfe/semi-ui/lib/es/locale/source/en_US';
 import { LocaleProvider } from '@douyinfe/semi-ui';
@@ -18,11 +16,9 @@ initVChartSemiTheme({
 });
 
 root.render(
-  <Provider store={reduxStore}>
-    <HashRouter>
-      <LocaleProvider locale={en_US}>
-        <App />
-      </LocaleProvider>
-    </HashRouter>
-  </Provider>,
+  <HashRouter>
+    <LocaleProvider locale={en_US}>
+      <App />
+    </LocaleProvider>
+  </HashRouter>,
 );

ui/src/services/rematch/models/demoMode.js

@@ -1,24 +0,0 @@
-import { xhrGet } from '../../xhr';
-export const demoMode = {
-  state: {
-    demoMode: false,
-  },
-  reducers: {
-    setDemoMode: (state, payload) => {
-      return {
-        ...state,
-        demoMode: payload.demoMode,
-      };
-    },
-  },
-  effects: {
-    async getDemoMode() {
-      try {
-        const response = await xhrGet('/api/demo');
-        this.setDemoMode(response.json);
-      } catch (Exception) {
-        console.error('Error while trying to get resource for api/demo. Error:', Exception);
-      }
-    },
-  },
-};

ui/src/services/rematch/models/generalSettings.js

@@ -1,25 +0,0 @@
-import { xhrGet } from '../../xhr';
-export const generalSettings = {
-  state: {
-    settings: {},
-  },
-  reducers: {
-    //only admins
-    setGeneralSettings: (state, payload) => {
-      return {
-        ...state,
-        settings: payload,
-      };
-    },
-  },
-  effects: {
-    async getGeneralSettings() {
-      try {
-        const response = await xhrGet('/api/admin/generalSettings');
-        this.setGeneralSettings(response.json);
-      } catch (Exception) {
-        console.error('Error while trying to get resource for api/admin/generalSettings. Error:', Exception);
-      }
-    },
-  },
-};

ui/src/services/rematch/models/jobs.js

@@ -1,57 +0,0 @@
-import { xhrGet } from '../../xhr';
-export const jobs = {
-  state: {
-    jobs: [],
-    insights: {},
-    processingTimes: {},
-  },
-  reducers: {
-    setJobs: (state, payload) => {
-      return {
-        ...state,
-        jobs: Object.freeze(payload),
-      };
-    },
-    setProcessingTimes: (state, payload) => {
-      return {
-        ...state,
-        processingTimes: Object.freeze(payload),
-      };
-    },
-    setJobInsights: (state, payload, jobId) => {
-      return {
-        ...state,
-        insights: {
-          ...state.insights,
-          [jobId]: Object.freeze(payload),
-        },
-      };
-    },
-  },
-  effects: {
-    async getJobs() {
-      try {
-        const response = await xhrGet('/api/jobs');
-        this.setJobs(response.json);
-      } catch (Exception) {
-        console.error(`Error while trying to get resource for api/jobs. Error:`, Exception);
-      }
-    },
-    async getProcessingTimes() {
-      try {
-        const response = await xhrGet('/api/jobs/processingTimes');
-        this.setProcessingTimes(response.json);
-      } catch (Exception) {
-        console.error(`Error while trying to get resource for api/processingTimes. Error:`, Exception);
-      }
-    },
-    async getInsightDataForJob(jobId) {
-      try {
-        const response = await xhrGet(`/api/jobs/insights/${jobId}`);
-        this.setJobInsights(response.json, jobId);
-      } catch (Exception) {
-        console.error(`Error while trying to get resource for api/jobs/insights. Error:`, Exception);
-      }
-    },
-  },
-};

ui/src/services/rematch/models/notificationAdapter.js

@@ -1,19 +0,0 @@
-import { xhrGet } from '../../xhr';
-export const notificationAdapter = {
-  state: [],
-  reducers: {
-    setAdapter: (state, payload) => {
-      return [...Object.freeze(payload)];
-    },
-  },
-  effects: {
-    async getAdapter() {
-      try {
-        const response = await xhrGet('/api/jobs/notificationAdapter');
-        this.setAdapter(response.json);
-      } catch (Exception) {
-        console.error(`Error while trying to get resource for api/jobs/notificationAdapter. Error:`, Exception);
-      }
-    },
-  },
-};

ui/src/services/rematch/models/provider.js

@@ -1,19 +0,0 @@
-import { xhrGet } from '../../xhr';
-export const provider = {
-  state: [],
-  reducers: {
-    setProvider: (state, payload) => {
-      return [...Object.freeze(payload)];
-    },
-  },
-  effects: {
-    async getProvider() {
-      try {
-        const response = await xhrGet('/api/jobs/provider');
-        this.setProvider(response.json);
-      } catch (Exception) {
-        console.error(`Error while trying to get resource for api/jobs/provider. Error:`, Exception);
-      }
-    },
-  },
-};

ui/src/services/rematch/models/user.js

@@ -1,40 +0,0 @@
-import { xhrGet } from '../../xhr';
-export const user = {
-  state: {
-    users: [],
-    currentUser: null,
-  },
-  reducers: {
-    //only admins
-    setUsers: (state, payload) => {
-      return {
-        ...state,
-        users: payload,
-      };
-    },
-    setCurrentUser: (state, payload) => {
-      return {
-        ...state,
-        currentUser: Object.freeze(payload),
-      };
-    },
-  },
-  effects: {
-    async getUsers() {
-      try {
-        const response = await xhrGet('/api/admin/users');
-        this.setUsers(response.json);
-      } catch (Exception) {
-        console.error('Error while trying to get resource for api/admin/users. Error:', Exception);
-      }
-    },
-    async getCurrentUser() {
-      try {
-        const response = await xhrGet('/api/login/user');
-        this.setCurrentUser(response.json);
-      } catch (Exception) {
-        console.error('Error while trying to get resource for api/login/user. Error:', Exception);
-      }
-    },
-  },
-};

ui/src/services/rematch/store.js

@@ -1,29 +0,0 @@
-import { notificationAdapter } from './models/notificationAdapter';
-import { generalSettings } from './models/generalSettings';
-import createLoadingPlugin from '@rematch/loading';
-import { provider } from './models/provider';
-import { createLogger } from 'redux-logger';
-import { jobs } from './models/jobs';
-import { user } from './models/user';
-import { demoMode } from './models/demoMode.js';
-import { init } from '@rematch/core';
-const middleware = [];
-if (process.env.NODE_ENV === 'development') {
-  middleware.push(createLogger({ duration: false, collapsed: (getState, action, logEntry) => !logEntry.error }));
-}
-const store = init({
-  name: 'fredy',
-  models: {
-    notificationAdapter,
-    generalSettings,
-    demoMode,
-    provider,
-    jobs,
-    user,
-  },
-  plugins: [createLoadingPlugin({})],
-  redux: {
-    middlewares: middleware,
-  },
-});
-export const reduxStore = store;

ui/src/services/state/store.js

@@ -0,0 +1,171 @@
+/**
+ * Zustand store for Fredy ui state.
+ */
+import { create } from 'zustand';
+import { shallow } from 'zustand/shallow';
+import { xhrGet } from '../xhr.js';
+
+const logger = (config) => (set, get, api) =>
+  config(
+    (partial, replace) => {
+      const prev = get();
+      set(partial, replace);
+      const next = get();
+      if (process.env.NODE_ENV !== 'production') {
+        /* eslint-disable no-console */
+        console.info('[zustand] state changed:', { prev, next });
+        /* eslint-enable no-console */
+      }
+    },
+    get,
+    api,
+  );
+
+// Create the Zustand store with slices and actions
+export const useFredyState = create(
+  logger(
+    (set) => {
+      // Async actions that directly set state (no separate reducer concept)
+      const effects = {
+        notificationAdapter: {
+          async getAdapter() {
+            try {
+              const response = await xhrGet('/api/jobs/notificationAdapter');
+              set(() => ({ notificationAdapter: Object.freeze([...response.json]) }));
+            } catch (Exception) {
+              console.error(`Error while trying to get resource for api/jobs/notificationAdapter. Error:`, Exception);
+            }
+          },
+        },
+        generalSettings: {
+          async getGeneralSettings() {
+            try {
+              const response = await xhrGet('/api/admin/generalSettings');
+              set((state) => ({ generalSettings: { ...state.generalSettings, settings: response.json } }));
+            } catch (Exception) {
+              console.error('Error while trying to get resource for api/admin/generalSettings. Error:', Exception);
+            }
+          },
+        },
+        provider: {
+          async getProvider() {
+            try {
+              const response = await xhrGet('/api/jobs/provider');
+              set(() => ({ provider: Object.freeze([...response.json]) }));
+            } catch (Exception) {
+              console.error(`Error while trying to get resource for api/jobs/provider. Error:`, Exception);
+            }
+          },
+        },
+        jobs: {
+          async getJobs() {
+            try {
+              const response = await xhrGet('/api/jobs');
+              set((state) => ({ jobs: { ...state.jobs, jobs: Object.freeze(response.json) } }));
+            } catch (Exception) {
+              console.error(`Error while trying to get resource for api/jobs. Error:`, Exception);
+            }
+          },
+          async getProcessingTimes() {
+            try {
+              const response = await xhrGet('/api/jobs/processingTimes');
+              set((state) => ({ jobs: { ...state.jobs, processingTimes: Object.freeze(response.json) } }));
+            } catch (Exception) {
+              console.error(`Error while trying to get resource for api/processingTimes. Error:`, Exception);
+            }
+          },
+          async getInsightDataForJob(jobId) {
+            try {
+              const response = await xhrGet(`/api/jobs/insights/${jobId}`);
+              set((state) => ({
+                jobs: {
+                  ...state.jobs,
+                  insights: { ...state.jobs.insights, [jobId]: Object.freeze(response.json) },
+                },
+              }));
+            } catch (Exception) {
+              console.error(`Error while trying to get resource for api/jobs/insights. Error:`, Exception);
+            }
+          },
+        },
+        user: {
+          async getUsers() {
+            try {
+              const response = await xhrGet('/api/admin/users');
+              set((state) => ({ user: { ...state.user, users: response.json } }));
+            } catch (Exception) {
+              console.error('Error while trying to get resource for api/admin/users. Error:', Exception);
+            }
+          },
+          async getCurrentUser() {
+            try {
+              const response = await xhrGet('/api/login/user');
+              set((state) => ({ user: { ...state.user, currentUser: Object.freeze(response.json) } }));
+            } catch (Exception) {
+              console.error('Error while trying to get resource for api/login/user. Error:', Exception);
+            }
+          },
+        },
+        demoMode: {
+          async getDemoMode() {
+            try {
+              const response = await xhrGet('/api/demo');
+              set((state) => ({
+                demoMode: { ...state.demoMode, demoMode: response.json.demoMode },
+              }));
+            } catch (Exception) {
+              console.error('Error while trying to get resource for api/demo. Error:', Exception);
+            }
+          },
+        },
+      };
+
+      // Initial state
+      const initial = {
+        notificationAdapter: [],
+        generalSettings: { settings: {} },
+        demoMode: { demoMode: false },
+        provider: [],
+        jobs: { jobs: [], insights: {}, processingTimes: {} },
+        user: { users: [], currentUser: null },
+      };
+
+      // Expose actions by grouping them per slice
+      const actions = {
+        notificationAdapter: { ...effects.notificationAdapter },
+        generalSettings: { ...effects.generalSettings },
+        demoMode: { ...effects.demoMode },
+        provider: { ...effects.provider },
+        jobs: { ...effects.jobs },
+        user: { ...effects.user },
+      };
+
+      return {
+        ...initial,
+        __actions: { actions },
+      };
+    },
+    { name: 'fredy' },
+  ),
+);
+
+/**
+ * Selector hook, drop-in replacement for react-redux useSelector.
+ * Pass a selector function and optional equality function. Defaults to shallow comparison.
+ * @template T
+ * @param {(state: FredyState) => T} selector
+ * @param {(a: T, b: T) => boolean} [equalityFn]
+ * @returns {T}
+ */
+export function useSelector(selector, equalityFn = shallow) {
+  return useFredyState(selector, equalityFn);
+}
+
+/**
+ * Actions hook returning grouped async actions per slice.
+ * Example: const { jobs } = useActions(); await jobs.getJobs();
+ * @returns {{notificationAdapter: any, generalSettings: any, demoMode: any, provider: any, jobs: any, user: any}}
+ */
+export function useActions() {
+  return useFredyState((s) => s.__actions.actions);
+}

ui/src/views/generalSettings/GeneralSettings.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useDispatch, useSelector } from 'react-redux';
+import { useActions, useSelector } from '../../services/state/store';
 
 import { Divider, TimePicker, Button, Checkbox, Input } from '@douyinfe/semi-ui';
 import { InputNumber } from '@douyinfe/semi-ui';
@@ -36,7 +36,7 @@ function formatFromTBackend(time) {
 }
 
 const GeneralSettings = function GeneralSettings() {
-  const dispatch = useDispatch();
+  const actions = useActions();
   const [loading, setLoading] = React.useState(true);
 
   const settings = useSelector((state) => state.generalSettings.settings);
@@ -51,7 +51,7 @@ const GeneralSettings = function GeneralSettings() {
 
   React.useEffect(() => {
     async function init() {
-      await dispatch.generalSettings.getGeneralSettings();
+      await actions.generalSettings.getGeneralSettings();
       setLoading(false);
     }
 

ui/src/views/jobs/Jobs.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import JobTable from '../../components/table/JobTable';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector, useActions } from '../../services/state/store';
 import { xhrDelete, xhrPut } from '../../services/xhr';
 import { useNavigate } from 'react-router-dom';
 import ProcessingTimes from './ProcessingTimes';
@@ -13,13 +13,13 @@ export default function Jobs() {
   const jobs = useSelector((state) => state.jobs.jobs);
   const processingTimes = useSelector((state) => state.jobs.processingTimes);
   const navigate = useNavigate();
-  const dispatch = useDispatch();
+  const actions = useActions();
 
   const onJobRemoval = async (jobId) => {
     try {
       await xhrDelete('/api/jobs', { jobId });
       Toast.success('Job successfully remove');
-      await dispatch.jobs.getJobs();
+      await actions.jobs.getJobs();
     } catch (error) {
       Toast.error(error);
     }
@@ -29,7 +29,7 @@ export default function Jobs() {
     try {
       await xhrPut(`/api/jobs/${jobId}/status`, { status });
       Toast.success('Job status successfully changed');
-      await dispatch.jobs.getJobs();
+      await actions.jobs.getJobs();
     } catch (error) {
       Toast.error(error);
     }

ui/src/views/jobs/insights/JobInsight.jsx

@@ -2,20 +2,20 @@ import React from 'react';
 
 import { roundToHour } from '../../../services/time/timeService';
 import Headline from '../../../components/headline/Headline';
-import { useDispatch, useSelector } from 'react-redux';
+import { useActions, useSelector } from '../../../services/state/store';
 import { useParams } from 'react-router-dom';
 import Linechart from './Linechart';
 
 const JobInsight = function JobInsight() {
-  const dispatch = useDispatch();
+  const actions = useActions();
 
   const insights = useSelector((state) => state.jobs.insights);
   const jobs = useSelector((state) => state.jobs.jobs);
   const params = useParams();
 
   React.useEffect(() => {
-    dispatch.jobs.getInsightDataForJob(params.jobId);
-    dispatch.jobs.getJobs();
+    actions.jobs.getInsightDataForJob(params.jobId);
+    actions.jobs.getJobs();
   }, []);
 
   const getData = () => {

ui/src/views/jobs/mutation/JobMutation.jsx

@@ -5,7 +5,7 @@ import NotificationAdapterTable from '../../../components/table/NotificationAdap
 import ProviderTable from '../../../components/table/ProviderTable';
 import ProviderMutator from './components/provider/ProviderMutator';
 import Headline from '../../../components/headline/Headline';
-import { useDispatch, useSelector } from 'react-redux';
+import { useActions, useSelector } from '../../../services/state/store';
 import { xhrPost } from '../../../services/xhr';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Divider, Input, Switch, Button, TagInput, Toast } from '@douyinfe/semi-ui';
@@ -34,7 +34,7 @@ export default function JobMutator() {
   const [notificationAdapterData, setNotificationAdapterData] = useState(defaultNotificationAdapter);
   const [enabled, setEnabled] = useState(defaultEnabled);
   const navigate = useNavigate();
-  const dispatch = useDispatch();
+  const actions = useActions();
 
   const isSavingEnabled = () => {
     return Boolean(notificationAdapterData.length && providerData.length && name);
@@ -50,7 +50,7 @@ export default function JobMutator() {
         enabled,
         jobId: jobToBeEdit?.id || null,
       });
-      await dispatch.jobs.getJobs();
+      await actions.jobs.getJobs();
       Toast.success('Job successfully saved...');
       navigate('/jobs');
     } catch (Exception) {

ui/src/views/jobs/mutation/components/notificationAdapter/NotificationAdapterMutator.jsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { transform } from '../../../../../services/transformer/notificationAdapterTransformer';
 import { xhrPost } from '../../../../../services/xhr';
 import Help from './NotificationHelpDisplay';
-import { useSelector } from 'react-redux';
+import { useSelector } from '../../../../../services/state/store';
 import { Banner, Button, Form, Modal, Select, Switch } from '@douyinfe/semi-ui';
 
 import './NotificationAdapterMutator.less';

ui/src/views/jobs/mutation/components/provider/ProviderMutator.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import { Banner, Modal, Select, Input } from '@douyinfe/semi-ui';
 import { transform } from '../../../../../services/transformer/providerTransformer';
-import { useSelector } from 'react-redux';
+import { useSelector } from '../../../../../services/state/store';
 import { IconLikeHeart } from '@douyinfe/semi-icons';
 import './ProviderMutator.less';
 

ui/src/views/login/Login.jsx

@@ -4,14 +4,14 @@ import cityBackground from '../../assets/city_background.jpg';
 import Logo from '../../components/logo/Logo';
 import { xhrPost } from '../../services/xhr';
 import { useNavigate } from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
+import { useActions, useSelector } from '../../services/state/store';
 import { Input, Button, Banner, Toast } from '@douyinfe/semi-ui';
 
 import './login.less';
 import { IconUser, IconLock } from '@douyinfe/semi-icons';
 
 export default function Login() {
-  const dispatch = useDispatch();
+  const actions = useActions();
   const [username, setUserName] = React.useState('');
   const [password, setPassword] = React.useState('');
   const [error, setError] = React.useState(null);
@@ -20,7 +20,7 @@ export default function Login() {
 
   useEffect(() => {
     async function init() {
-      await dispatch.demoMode.getDemoMode();
+      await actions.demoMode.getDemoMode();
     }
 
     init();
@@ -46,7 +46,7 @@ export default function Login() {
 
     Toast.success('Login successful!');
 
-    await dispatch.user.getCurrentUser();
+    await actions.user.getCurrentUser();
     navigate('/jobs');
   };
 

ui/src/views/user/Users.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Toast } from '@douyinfe/semi-ui';
 import UserTable from '../../components/table/UserTable';
-import { useDispatch, useSelector } from 'react-redux';
+import { useActions, useSelector } from '../../services/state/store';
 import { IconPlus } from '@douyinfe/semi-icons';
 import { Button } from '@douyinfe/semi-ui';
 import UserRemovalModal from './UserRemovalModal';
@@ -12,7 +12,7 @@ import { useNavigate } from 'react-router-dom';
 import './Users.less';
 
 const Users = function Users() {
-  const dispatch = useDispatch();
+  const actions = useActions();
   const [loading, setLoading] = React.useState(true);
   const users = useSelector((state) => state.user.users);
   const [userIdToBeRemoved, setUserIdToBeRemoved] = React.useState(null);
@@ -20,7 +20,7 @@ const Users = function Users() {
 
   React.useEffect(() => {
     async function init() {
-      await dispatch.user.getUsers();
+      await actions.user.getUsers();
       setLoading(false);
     }
 
@@ -32,8 +32,8 @@ const Users = function Users() {
       await xhrDelete('/api/admin/users', { userId: userIdToBeRemoved });
       Toast.success('User successfully remove');
       setUserIdToBeRemoved(null);
-      await dispatch.jobs.getJobs();
-      await dispatch.user.getUsers();
+      await actions.jobs.getJobs();
+      await actions.user.getUsers();
     } catch (error) {
       Toast.error(error);
       setUserIdToBeRemoved(null);

ui/src/views/user/mutation/UserMutator.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { xhrGet, xhrPost } from '../../../services/xhr';
 import { useNavigate, useParams } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
+import { useActions } from '../../../services/state/store';
 import { Divider, Input, Switch, Button, Toast } from '@douyinfe/semi-ui';
 import './UserMutator.less';
 import { SegmentPart } from '../../../components/segment/SegmentPart';
@@ -16,7 +16,7 @@ const UserMutator = function UserMutator() {
   const [isAdmin, setIsAdmin] = React.useState(false);
 
   const navigate = useNavigate();
-  const dispatch = useDispatch();
+  const actions = useActions();
 
   React.useEffect(() => {
     async function init() {
@@ -48,7 +48,7 @@ const UserMutator = function UserMutator() {
         password2,
         isAdmin,
       });
-      await dispatch.user.getUsers();
+      await actions.user.getUsers();
       Toast.success('User successfully saved...');
       navigate('/users');
     } catch (error) {