feat: implement settings migration

feat: update nmr-load-save to version 0.32.0

refactor: read and write settings in local storage

package.json

@@ -90,7 +90,7 @@
     "ml-tree-similarity": "^2.2.0",
     "multiplet-analysis": "^2.1.2",
     "nmr-correlation": "^2.3.3",
-    "nmr-load-save": "0.31.1-pre.1715757737",
+    "nmr-load-save": "0.32.0",
     "nmr-processing": "^12.3.1",
     "nmredata": "^0.9.9",
     "numeral": "^2.0.6",

src/component/1d-2d/FieldEdition.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
 import { Popover, PopoverProps } from '@blueprintjs/core';
+import { css } from '@emotion/react';
 import { Formik } from 'formik';
 import { ReactNode, useState } from 'react';
 import * as Yup from 'yup';

src/component/2d/Chart2D.tsx

@@ -4,6 +4,7 @@ import { memo } from 'react';
 import SpectrumInfoBlock from '../1d-2d/components/SpectrumInfoBlock';
 import { useChartData } from '../context/ChartContext';
 import { usePreferences } from '../context/PreferencesContext';
+import { ShareDataProvider } from '../context/ShareDataContext';
 import { Margin } from '../reducer/Reducer';
 
 import XAxis from './XAxis';
@@ -13,7 +14,6 @@ import { FTContainer } from './ft/FTContainer';
 import IndicationLines from './zones/IndicationLines';
 import Zones from './zones/Zones';
 import ZonesAssignmentsLabels from './zones/ZonesAssignmentsLabels';
-import { ShareDataProvider } from '../context/ShareDataContext';
 
 interface Chart2DProps {
   spectra?: Spectrum1D[];

src/component/header/Header.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { css } from '@emotion/react';
-import { useMemo, useCallback, memo } from 'react';
+import { useMemo, memo } from 'react';
 import {
   FaRegWindowMaximize,
   FaQuestionCircle,
@@ -22,6 +22,7 @@ import DropDownButton, {
   DropDownListItem,
 } from '../elements/dropDownButton/DropDownButton';
 import { useSaveSettings } from '../hooks/useSaveSettings';
+import { useWorkspaceAction } from '../hooks/useWorkspaceAction';
 import { LogsHistoryModal } from '../modal/LogsHistoryModal';
 import AboutUsModal from '../modal/aboutUs/AboutUsModal';
 import GeneralSettingsModal from '../modal/setting/GeneralSettings';
@@ -89,8 +90,8 @@ function HeaderInner(props: HeaderInnerProps) {
       display: { general },
     },
     workspace,
-    dispatch,
   } = usePreferences();
+  const { setActiveWorkspace } = useWorkspaceAction();
   const fullscreen = useFullscreen();
 
   const workspacesList = useWorkspacesList();
@@ -123,17 +124,9 @@ function HeaderInner(props: HeaderInnerProps) {
     }
   }, [selectedOptionPanel]);
 
-  const changeWorkspaceHandler = useCallback(
-    (option: DropDownListItem) => {
-      dispatch({
-        type: 'SET_ACTIVE_WORKSPACE',
-        payload: {
-          workspace: option.key,
-        },
-      });
-    },
-    [dispatch],
-  );
+  function changeWorkspaceHandler(option: DropDownListItem) {
+    setActiveWorkspace(option.key);
+  }
 
   function renderItem(item) {
     return <WorkspaceItem item={item} />;

src/component/hooks/useSaveSettings.tsx

@@ -10,6 +10,8 @@ import { useToaster } from '../context/ToasterContext';
 import FormikInput from '../elements/formik/FormikInput';
 import ConfirmationDialog from '../elements/popup/Modal/ConfirmDialog';
 
+import { useWorkspaceAction } from './useWorkspaceAction';
+
 const schema = Yup.object().shape({
   workspaceName: Yup.string().required(),
 });
@@ -48,17 +50,13 @@ export function useSaveSettings() {
   const toaster = useToaster();
   const [isOpenDialog, openDialog, closeDialog] = useOnOff(false);
   const settingsRef = useRef<Workspace>();
-  const { dispatch, current } = usePreferences();
+  const { current } = usePreferences();
   const formRef = useRef<FormikProps<any>>(null);
+  const { saveWorkspace, addNewWorkspace } = useWorkspaceAction();
+
+  function handleAddNewWorkspace({ workspaceName }) {
+    addNewWorkspace(workspaceName, settingsRef.current);
 
-  function addNewWorkspace({ workspaceName }) {
-    dispatch({
-      type: 'ADD_WORKSPACE',
-      payload: {
-        workspaceKey: workspaceName,
-        data: settingsRef.current,
-      },
-    });
     closeDialog();
     toaster.show({
       message: 'Preferences saved successfully',
@@ -72,10 +70,8 @@ export function useSaveSettings() {
       if (current.source !== 'user') {
         openDialog();
       } else {
-        dispatch({
-          type: 'SET_PREFERENCES',
-          ...(values && { payload: values }),
-        });
+        saveWorkspace(values);
+
         closeDialog();
       }
     },
@@ -84,7 +80,11 @@ export function useSaveSettings() {
         message:
           'Please enter a new user workspace name in order to save your changes locally',
         render: (props) => (
-          <WorkspaceAddForm {...props} onSave={addNewWorkspace} ref={formRef} />
+          <WorkspaceAddForm
+            {...props}
+            onSave={handleAddNewWorkspace}
+            ref={formRef}
+          />
         ),
         buttons: [
           {

src/component/hooks/useWorkspaceAction.ts

@@ -0,0 +1,113 @@
+import { v4 } from '@lukeed/uuid';
+import lodashMerge from 'lodash/merge';
+import { Workspace } from 'nmr-load-save';
+
+import { usePreferences } from '../context/PreferencesContext';
+import {
+  Settings,
+  readSettings,
+  updateSettings,
+} from '../reducer/preferences/preferencesReducer';
+import { workspaceDefaultProperties } from '../workspaces/workspaceDefaultProperties';
+
+export function useWorkspaceAction() {
+  const { dispatch, current, workspace } = usePreferences();
+
+  function setActiveWorkspace(workspace: string) {
+    const settings = readSettings() || {
+      currentWorkspace: null,
+      version: 0,
+      workspaces: {},
+    };
+    settings.currentWorkspace = workspace;
+    updateSettings(settings);
+
+    dispatch({
+      type: 'SET_ACTIVE_WORKSPACE',
+      payload: {
+        workspace,
+      },
+    });
+  }
+
+  function addNewWorkspace(
+    workspaceName: string,
+    data?: Omit<Workspace, 'version' | 'label'>,
+  ) {
+    const workSpaceData = data ?? current;
+    const newWorkSpace = lodashMerge(
+      {},
+      workspaceDefaultProperties,
+      workSpaceData,
+      {
+        version: 1,
+        label: workspaceName,
+        source: 'user',
+      },
+    );
+    const workspaceKey = v4();
+    const localData = readSettings() || { workspaces: {} };
+    const settings = {
+      ...localData,
+      currentWorkspace: workspaceKey,
+      workspaces: { ...localData?.workspaces, [workspaceKey]: newWorkSpace },
+    };
+    updateSettings(settings as Settings);
+
+    dispatch({
+      type: 'ADD_WORKSPACE',
+      payload: {
+        workspaceKey,
+        data: newWorkSpace,
+      },
+    });
+  }
+
+  function removeWorkspace(key: string) {
+    const settings = readSettings();
+    if (settings) {
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+      delete settings.workspaces[key];
+      if (key === settings.currentWorkspace) {
+        settings.currentWorkspace = 'default';
+      }
+
+      updateSettings(settings);
+    }
+    dispatch({
+      type: 'REMOVE_WORKSPACE',
+      payload: {
+        workspace: key,
+      },
+    });
+  }
+
+  function saveWorkspace(data?: Partial<Workspace>) {
+    if (data) {
+      const settings = readSettings() || {
+        version: 0,
+        currentWorkspace: null,
+        workspaces: {},
+      };
+
+      updateSettings({
+        ...settings,
+        workspaces: {
+          ...settings.workspaces,
+          [workspace.current]: data,
+        },
+      } as Settings);
+    }
+    dispatch({
+      type: 'SET_PREFERENCES',
+      ...(data && { payload: data }),
+    });
+  }
+
+  return {
+    addNewWorkspace,
+    removeWorkspace,
+    saveWorkspace,
+    setActiveWorkspace,
+  };
+}

src/component/main/InnerNMRium.tsx

@@ -20,6 +20,7 @@ import { defaultGetSpinner, SpinnerProvider } from '../loader/SpinnerContext';
 import preferencesReducer, {
   preferencesInitialState,
   initPreferencesState,
+  readSettings,
 } from '../reducer/preferences/preferencesReducer';
 import { getBlob } from '../utility/export';
 
@@ -58,12 +59,14 @@ export function InnerNMRium({
   }, [isFullScreen]);
 
   useEffect(() => {
+    const settings = readSettings();
     dispatchPreferences({
       type: 'INIT_PREFERENCES',
       payload: {
         preferences,
         workspace,
         customWorkspaces,
+        currentWorkspace: settings?.currentWorkspace,
         dispatch: dispatchPreferences,
       },
     });

src/component/modal/setting/GeneralSettings.tsx

@@ -28,6 +28,7 @@ import DropDownButton, {
   DropDownListItem,
 } from '../../elements/dropDownButton/DropDownButton';
 import { useSaveSettings } from '../../hooks/useSaveSettings';
+import { useWorkspaceAction } from '../../hooks/useWorkspaceAction';
 import { getPreferencesByWorkspace } from '../../reducer/preferences/utilities/getPreferencesByWorkspace';
 import PredefinedWorkspaces from '../../workspaces';
 
@@ -104,6 +105,8 @@ function GeneralSettingsModal({ height }: GeneralSettingsModalProps) {
     originalWorkspaces,
     ...preferences
   } = usePreferences();
+  const { addNewWorkspace, removeWorkspace, setActiveWorkspace } =
+    useWorkspaceAction();
   const { saveSettings, SaveSettingsModal } = useSaveSettings();
   const toaster = useToaster();
   const refForm = useRef<FormikProps<any>>(null);
@@ -136,14 +139,9 @@ function GeneralSettingsModal({ height }: GeneralSettingsModalProps) {
     closeDialog?.();
   }
   function addWorkSpaceHandler(name) {
-    dispatch({
-      type: 'ADD_WORKSPACE',
-      payload: {
-        workspaceKey: name,
-        data: refForm.current?.values,
-      },
-    });
+    addNewWorkspace(name, refForm.current?.values);
   }
+
   async function applyPreferencesHandler() {
     const errors = await refForm.current?.validateForm();
     if (Object.keys(errors || {}).length > 0) {
@@ -160,21 +158,11 @@ function GeneralSettingsModal({ height }: GeneralSettingsModalProps) {
   }
 
   function deleteWorkSpaceHandler(key) {
-    dispatch({
-      type: 'REMOVE_WORKSPACE',
-      payload: {
-        workspace: key,
-      },
-    });
+    removeWorkspace(key);
   }
 
   function ChangeWorkspaceHandler(option: DropDownListItem) {
-    dispatch({
-      type: 'SET_ACTIVE_WORKSPACE',
-      payload: {
-        workspace: option.key,
-      },
-    });
+    setActiveWorkspace(option.key);
   }
 
   function renderItem(item) {

src/component/modal/setting/WorkspaceItem.tsx

@@ -105,9 +105,6 @@ function WorkspaceItem({ item, onSave, onDelete }: WorkspaceItemProps) {
               <FaTimes />
             </Button.Danger>
           )}
-          {item.version && !item.isReadOnly && (
-            <span style={styles.workspaceVersion}>V{item.version}</span>
-          )}
         </div>
       )}
     </div>