migrate config

src/App.tsx

@@ -1,17 +1,17 @@
 import { FC, Suspense, useEffect, useRef } from 'react';
 import { Navigate, RouteObject, RouterProvider, createBrowserRouter } from 'react-router-dom';
-import { RecoilRoot, useSetRecoilState } from 'recoil';
+import { RecoilRoot } from 'recoil';
 import { ErrorBoundary } from '@components/ErrorBoundary';
 import { Loading } from '@components/Loading';
 import { ROUTES } from '@common/constants/routes.constants';
 import { DEFAULT_LOCALE } from '@common/constants/i18n.constants';
 import { OKAPI_CONFIG } from '@common/constants/api.constants';
 import { localStorageService } from '@common/services/storage';
 import { Root, Search, EditWrapper, ExternalResourcePreview } from '@views';
-import state from '@state';
 import en from '../translations/ui-linked-data/en.json';
 import { AsyncIntlProvider, ServicesProvider } from './providers';
 import './App.scss';
+import { useConfigState } from './store';
 
 type IContainer = {
   routePrefix?: string;
@@ -54,8 +54,7 @@ export const routes: RouteObject[] = [
 const createRouter = (basename: string) => createBrowserRouter(routes, { basename });
 
 const Container: FC<IContainer> = ({ routePrefix = '', config }) => {
-  const setCustomEvents = useSetRecoilState(state.config.customEvents);
-  const setHasNavigationOrigin = useSetRecoilState(state.config.hasNavigationOrigin);
+  const { setCustomEvents, setHasNavigationOrigin } = useConfigState();
   const cachedMessages = useRef({ [DEFAULT_LOCALE]: en });
 
   useEffect(() => {

src/common/hooks/useContainerEvents.ts

@@ -1,12 +1,9 @@
-
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useRecoilValue } from 'recoil';
 import { IS_EMBEDDED_MODE } from '@common/constants/build.constants';
 import { dispatchEventWrapper, getWrapperAsWebComponent } from '@common/helpers/dom.helper';
 import { ROUTES } from '@common/constants/routes.constants';
-import { useStatusState } from '@src/store';
-import state from '@state';
+import { useConfigState, useStatusState } from '@src/store';
 
 type IUseContainerEvents =
   | {
@@ -16,16 +13,17 @@ type IUseContainerEvents =
   | undefined;
 
 export const useContainerEvents = ({ onTriggerModal, watchEditedState = false }: IUseContainerEvents = {}) => {
-  const hasNavigationOrigin = useRecoilValue(state.config.hasNavigationOrigin);
+  const { hasNavigationOrigin } = useConfigState();
   const { isEditedRecord: isEdited } = useStatusState();
+  const { customEvents } = useConfigState();
   const {
     BLOCK_NAVIGATION,
     UNBLOCK_NAVIGATION,
     TRIGGER_MODAL,
     PROCEED_NAVIGATION,
     NAVIGATE_TO_ORIGIN,
     DROP_NAVIGATE_TO_ORIGIN,
-  } = useRecoilValue(state.config.customEvents) ?? {};
+  } = customEvents ?? {};
   const navigate = useNavigate();
 
   useEffect(() => {

src/providers/AsyncIntlProvider.tsx

@@ -1,17 +1,16 @@
 import { FC } from 'react';
 import { IntlProvider } from 'react-intl';
-import { useRecoilValue } from 'recoil';
 import { useLoadI18nMessages } from '@common/hooks/useLoadI18nMessages';
 import { DEFAULT_LOCALE } from '@common/constants/i18n.constants';
-import state from '@state';
+import { useConfigState } from '@src/store';
 
 type AsyncIntlProviderProps = {
   cachedMessages: I18nMessages;
   children: React.ReactNode;
 };
 
 export const AsyncIntlProvider: FC<AsyncIntlProviderProps> = ({ cachedMessages, children }) => {
-  const locale = useRecoilValue(state.config.locale);
+  const { locale } = useConfigState();
   const { getMessages } = useLoadI18nMessages(cachedMessages, DEFAULT_LOCALE);
 
   const i18nMessages = getMessages(locale);

src/state/index.ts

@@ -1,9 +1,7 @@
-import config from './config';
 import ui from './ui';
 import search from './search';
 
 export default {
-  config,
   ui,
   search,
 };

src/store/config.ts

@@ -0,0 +1,25 @@
+import { LOCALES } from '@common/i18n/locales';
+import { createBaseSlice, SliceState } from './utils/slice';
+import { generateStore, type StateCreatorTyped } from './utils/storeCreator';
+import { OKAPI_CONFIG } from '@common/constants/api.constants';
+import { localStorageService } from '@common/services/storage';
+
+type Locale = (typeof LOCALES)[keyof typeof LOCALES];
+type CustomEvents = Record<string, string> | null;
+
+export type ConfigState = SliceState<'locale', Locale> &
+  SliceState<'customEvents', CustomEvents> &
+  SliceState<'hasNavigationOrigin', boolean>;
+
+const STORE_NAME = 'Config';
+
+const configStore: StateCreatorTyped<ConfigState> = (...args) => ({
+  ...createBaseSlice(
+    { basic: 'locale' },
+    localStorageService.deserialize(OKAPI_CONFIG)?.locale || LOCALES.ENGLISH_US,
+  )(...args),
+  ...createBaseSlice({ basic: 'customEvents' }, null as CustomEvents)(...args),
+  ...createBaseSlice({ basic: 'hasNavigationOrigin' }, false)(...args),
+});
+
+export const useConfigStore = generateStore(configStore, STORE_NAME);

src/store/index.ts

@@ -4,6 +4,7 @@ export * from './loadingState';
 export * from './marcPreview';
 export * from './profile';
 export * from './inputs';
+export * from './config';
 
 // Selector hooks
 export * from './selectors';

src/store/selectors.ts

@@ -4,9 +4,11 @@ import { useLoadingStateStore } from './loadingState';
 import { useMarcPreviewStore } from './marcPreview';
 import { useProfileStore } from './profile';
 import { useInputsStore } from './inputs';
+import { useConfigStore } from './config';
 
 export const useStatusState = () => createSelectors(useStatusStore).use;
 export const useLoadingState = () => createSelectors(useLoadingStateStore).use;
 export const useMarcPreviewState = () => createSelectors(useMarcPreviewStore).use;
 export const useProfileState = () => createSelectors(useProfileStore).use;
 export const useInputsState = () => createSelectors(useInputsStore).use;
+export const useConfigState = () => createSelectors(useConfigStore).use;

src/store/utils/slice.ts

@@ -17,10 +17,6 @@ const capitalize = (value: string) => {
 };
 
 const updateValue = <V, T>(value: V, updatedValue: T): V => {
-  console.log('====================================');
-  console.log('value', value, 'updatedValue', updatedValue);
-  console.log('====================================');
-
   if (Array.isArray(value)) {
     return [...value, updatedValue] as any;
   } else if (value instanceof Map) {

src/test/__tests__/common/hooks/useContainerEvents.test.ts

@@ -1,8 +1,7 @@
 import { renderHook } from '@testing-library/react';
-import { useRecoilValue } from 'recoil';
 import { useContainerEvents } from '@common/hooks/useContainerEvents';
 import * as domHelper from '@common/helpers/dom.helper';
-import { useStatusStore } from '@src/store';
+import { useConfigStore, useStatusStore } from '@src/store';
 import { setInitialGlobalState } from '@src/test/__mocks__/store';
 
 jest.mock('react-router-dom', () => ({
@@ -15,20 +14,21 @@ const mockEvents = {
   BLOCK_NAVIGATION: 'mockBlock',
   UNBLOCK_NAVIGATION: 'mockUnblock',
 };
-jest.mock('recoil');
 jest.mock('@common/constants/build.constants', () => ({ IS_EMBEDDED_MODE: true }));
 
 describe('useContainerEvents', () => {
   const renderUseContainerEventsHook = (isEditedRecord: boolean) => {
     (domHelper.dispatchEventWrapper as jest.Mock) = mockDispatchEventWrapper;
-    (useRecoilValue as jest.Mock).mockReturnValueOnce(false);
-    (useRecoilValue as jest.Mock).mockReturnValueOnce(mockEvents);
 
     setInitialGlobalState([
       {
         store: useStatusStore,
         state: { isEditedRecord },
       },
+      {
+        store: useConfigStore,
+        state: { customEvents: mockEvents },
+      },
     ]);
 
     renderHook(() => useContainerEvents({ watchEditedState: true }));

src/test/__tests__/components/Prompt.test.tsx

@@ -3,7 +3,8 @@ import { Prompt } from '@components/Prompt';
 import { RouterProvider, createMemoryRouter } from 'react-router-dom';
 import { createModalContainer } from '@src/test/__mocks__/common/misc/createModalContainer.mock';
 import { RecoilRoot } from 'recoil';
-import state from '@state';
+import { setInitialGlobalState } from '@src/test/__mocks__/store';
+import { useConfigStore } from '@src/store';
 
 const mockedUseBlocker = {
   reset: jest.fn(),
@@ -49,18 +50,24 @@ jest.mock('@common/helpers/dom.helper', () => ({
 
 const mockPath = '/resources/:resourceId/edit';
 
-const renderPrompt = (isBlocking = true) =>
-  render(
-    <RecoilRoot
-      initializeState={snapshot => snapshot.set(state.config.customEvents, { TRIGGER_MODAL: 'triggermodal' })}
-    >
+const renderPrompt = (isBlocking = true) => {
+  setInitialGlobalState([
+    {
+      store: useConfigStore,
+      state: { customEvents: { TRIGGER_MODAL: 'triggermodal' } },
+    },
+  ]);
+
+  return render(
+    <RecoilRoot>
       <RouterProvider
         router={createMemoryRouter([{ path: mockPath, element: <Prompt when={isBlocking} /> }], {
           initialEntries: [mockPath],
         })}
       />
     </RecoilRoot>,
   );
+};
 
 describe('Prompt', () => {
   beforeAll(() => {