migrate profiles and schema data

src/common/hooks/useComplexLookup.ts

@@ -1,5 +1,5 @@
 import { ChangeEvent, useCallback, useState } from 'react';
-import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
+import { useRecoilState, useResetRecoilState } from 'recoil';
 import {
   generateEmptyValueUuid,
   getLinkedField,
@@ -12,7 +12,7 @@ import state from '@state';
 import { useModalControls } from './useModalControls';
 import { useMarcData } from './useMarcData';
 import { useServicesContext } from './useServicesContext';
-import { useMarcPreviewState } from '@src/store';
+import { useMarcPreviewState, useProfileState } from '@src/store';
 
 export const useComplexLookup = ({
   entry,
@@ -27,7 +27,7 @@ export const useComplexLookup = ({
 }) => {
   const { selectedEntriesService } = useServicesContext() as Required<ServicesParams>;
   const [localValue, setLocalValue] = useState<UserValueContents[]>(value || []);
-  const schema = useRecoilValue(state.config.schema);
+  const { schema } = useProfileState();
   const [selectedEntries, setSelectedEntries] = useRecoilState(state.config.selectedEntries);
   const {
     setComplexValue,

src/common/hooks/useConfig.hook.ts

@@ -1,10 +1,11 @@
 import { useRef } from 'react';
-import { useRecoilState, useSetRecoilState } from 'recoil';
+import { useSetRecoilState } from 'recoil';
 import { v4 as uuidv4 } from 'uuid';
 import state from '@state';
 import { fetchProfiles } from '@common/api/profiles.api';
 import { PROFILE_NAMES } from '@common/constants/bibframe.constants';
 import { getPrimaryEntitiesFromRecord, getRecordTitle } from '@common/helpers/record.helper';
+import { useProfileState } from '@src/store';
 import { useProcessedRecordAndSchema } from './useProcessedRecordAndSchema.hook';
 import { useServicesContext } from './useServicesContext';
 
@@ -22,12 +23,16 @@ type GetProfiles = {
 export const useConfig = () => {
   const { schemaCreatorService, userValuesService, selectedEntriesService } =
     useServicesContext() as Required<ServicesParams>;
-  const [profiles, setProfiles] = useRecoilState(state.config.profiles);
-  const setSelectedProfile = useSetRecoilState(state.config.selectedProfile);
+  const {
+    profiles,
+    setProfiles,
+    setSelectedProfile,
+    preparedFields,
+    setPreparedFields,
+    setInitialSchemaKey,
+    setSchema,
+  } = useProfileState();
   const setUserValues = useSetRecoilState(state.inputs.userValues);
-  const [preparedFields, setPreparedFields] = useRecoilState(state.config.preparedFields);
-  const setSchema = useSetRecoilState(state.config.schema);
-  const setInitialSchemaKey = useSetRecoilState(state.config.initialSchemaKey);
   const setSelectedEntries = useSetRecoilState(state.config.selectedEntries);
   const setPreviewContent = useSetRecoilState(state.inputs.previewContent);
   const setSelectedRecordBlocks = useSetRecoilState(state.inputs.selectedRecordBlocks);

src/common/hooks/useProfileSchema.ts

@@ -1,16 +1,16 @@
-import { useRecoilState, useSetRecoilState } from 'recoil';
+import { useSetRecoilState } from 'recoil';
 import state from '@state';
 import { useServicesContext } from './useServicesContext';
 import { deleteFromSetImmutable } from '@common/helpers/common.helper';
-import { useStatusState } from '@src/store';
+import { useProfileState, useStatusState } from '@src/store';
 
 export const useProfileSchema = () => {
   const { selectedEntriesService, schemaWithDuplicatesService } = useServicesContext() as Required<ServicesParams>;
-  const [schema, setSchema] = useRecoilState(state.config.schema);
   const setSelectedEntries = useSetRecoilState(state.config.selectedEntries);
   const setCollapsibleEntries = useSetRecoilState(state.ui.collapsibleEntries);
   const setUserValues = useSetRecoilState(state.inputs.userValues);
   const { setIsEditedRecord: setIsEdited } = useStatusState();
+  const { schema, setSchema } = useProfileState();
 
   const getSchemaWithCopiedEntries = (entry: SchemaEntry, selectedEntries: string[]) => {
     selectedEntriesService.set(selectedEntries);

src/common/hooks/useRecordControls.ts

@@ -28,7 +28,7 @@ import { RecordStatus, ResourceType } from '@common/constants/record.constants';
 import { generateEditResourceUrl } from '@common/helpers/navigation.helper';
 import { ApiErrorCodes, ExternalResourceIdType } from '@common/constants/api.constants';
 import { checkHasErrorOfCodeType } from '@common/helpers/api.helper';
-import { useLoadingState, useStatusState } from '@src/store';
+import { useLoadingState, useStatusState, useProfileState } from '@src/store';
 import state from '@state';
 import { useRecordGeneration } from './useRecordGeneration';
 import { useBackToSearchUri } from './useBackToSearchUri';
@@ -51,7 +51,7 @@ export const useRecordControls = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const { setIsLoading } = useLoadingState();
   const setUserValues = useSetRecoilState(state.inputs.userValues);
-  const setSelectedProfile = useSetRecoilState(state.config.selectedProfile);
+  const { setSelectedProfile } = useProfileState();
   const [record, setRecord] = useRecoilState(state.inputs.record);
   const { setRecordStatus, setLastSavedRecordId, setIsEditedRecord: setIsEdited, addStatusMessage } = useStatusState();
   const setCurrentlyEditedEntityBfid = useSetRecoilState(state.ui.currentlyEditedEntityBfid);

src/common/hooks/useRecordGeneration.ts

@@ -1,13 +1,13 @@
 import { useRecoilValue } from 'recoil';
-import { useServicesContext } from './useServicesContext';
+import { useProfileState } from '@src/store';
 import state from '@state';
+import { useServicesContext } from './useServicesContext';
 
 export const useRecordGeneration = () => {
   const { recordGeneratorService } = useServicesContext();
-  const schema = useRecoilValue(state.config.schema);
   const userValues = useRecoilValue(state.inputs.userValues);
   const selectedEntries = useRecoilValue(state.config.selectedEntries);
-  const initialSchemaKey = useRecoilValue(state.config.initialSchemaKey);
+  const { schema, initialSchemaKey } = useProfileState();
 
   const generateRecord = () => {
     recordGeneratorService?.init({

src/components/EditSection/EditSection.tsx

@@ -13,12 +13,12 @@ import { useServicesContext } from '@common/hooks/useServicesContext';
 import { renderDrawComponent } from './renderDrawComponent';
 import './EditSection.scss';
 import { useRecordGeneration } from '@common/hooks/useRecordGeneration';
-import { useStatusState } from '@src/store';
+import { useProfileState, useStatusState } from '@src/store';
 
 export const EditSection = memo(() => {
   const { selectedEntriesService } = useServicesContext() as Required<ServicesParams>;
-  const resourceTemplates = useRecoilValue(state.config.selectedProfile)?.json.Profile.resourceTemplates;
-  const initialSchemaKey = useRecoilValue(state.config.initialSchemaKey);
+  const { selectedProfile, initialSchemaKey } = useProfileState();
+  const resourceTemplates = selectedProfile?.json.Profile.resourceTemplates;
   const [selectedEntries, setSelectedEntries] = useRecoilState(state.config.selectedEntries);
   const [userValues, setUserValues] = useRecoilState(state.inputs.userValues);
   const { isEditedRecord: isEdited, setIsEditedRecord: setIsEdited } = useStatusState();

src/components/FieldWithMetadataAndControls/FieldWithMetadataAndControls.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { useRecoilValue } from 'recoil';
 import { checkRepeatableGroup, checkRepeatableSubcomponent } from '@common/helpers/repeatableFields.helper';
 import { useProfileSchema } from '@common/hooks/useProfileSchema';
+import { useProfileState } from '@src/store';
 import state from '@state';
 import { CompactLayout } from './CompactLayout';
 import { ExtendedLayout } from './ExtendedLayout';
@@ -31,8 +32,8 @@ export const FieldWithMetadataAndControls: FC<IFieldWithMetadataAndControls> = (
   disabled = false,
   ...restProps
 }) => {
-  const schema = useRecoilValue(state.config.schema);
   const selectedEntries = useRecoilValue(state.config.selectedEntries);
+  const { schema } = useProfileState();
   const { getSchemaWithCopiedEntries, getSchemaWithDeletedEntries } = useProfileSchema();
   const { uuid, displayName, htmlId } = entry;
 

src/components/Fields/Fields.tsx

@@ -8,6 +8,7 @@ import { ENTITY_LEVEL } from '@common/constants/bibframe.constants';
 import { DuplicateGroupContainer } from '@components/DuplicateGroupContainer';
 import { ConditionalWrapper } from '@components/ConditionalWrapper';
 import { DuplicateSubcomponentContainer } from '@components/DuplicateSubcomponentContainer';
+import { useProfileState } from '@src/store';
 
 export type IFields = {
   uuid: string | null;
@@ -37,9 +38,9 @@ export const Fields: FC<IFields> = memo(
     scrollToEnabled = false,
     groupingDisabled = false,
   }) => {
-    const schema = useRecoilValue(state.config.schema);
     const selectedEntries = useRecoilValue(state.config.selectedEntries);
     const currentlyEditedEntityBfid = useRecoilValue(state.ui.currentlyEditedEntityBfid);
+    const { schema } = useProfileState();
 
     const entry = uuid && schema?.get(uuid);
 

src/components/Preview/Fields.tsx

@@ -10,7 +10,7 @@ import { getRecordId, getPreviewFieldsConditions } from '@common/helpers/record.
 import { getParentEntryUuid } from '@common/helpers/schema.helper';
 import { useNavigateToEditPage } from '@common/hooks/useNavigateToEditPage';
 import { ConditionalWrapper } from '@components/ConditionalWrapper';
-import { useStatusState } from '@src/store';
+import { useProfileState, useStatusState } from '@src/store';
 import state from '@state';
 import { Labels } from './Labels';
 import { Values } from './Values';
@@ -77,10 +77,10 @@ export const Fields = ({
   forceRenderAllTopLevelEntities,
 }: FieldsProps) => {
   const userValuesFromState = useRecoilValue(state.inputs.userValues);
-  const schemaFromState = useRecoilValue(state.config.schema);
   const selectedEntries = useRecoilValue(state.config.selectedEntries);
   const record = useRecoilValue(state.inputs.record);
   const currentlyPreviewedEntityBfid = useRecoilValue(state.ui.currentlyPreviewedEntityBfid);
+  const { schema: schemaFromState } = useProfileState();
   const { isEditedRecord: isEdited, setRecordStatus } = useStatusState();
   const { navigateToEditPage } = useNavigateToEditPage();
   const userValues = altUserValues || userValuesFromState;

src/components/Preview/Preview.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { useRecoilValue } from 'recoil';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
+import { useProfileState } from '@src/store';
 import state from '@state';
 import { Fields } from './Fields';
 import './Preview.scss';
@@ -28,8 +29,7 @@ export const Preview: FC<IPreview> = ({
   entityRowDisplay,
 }) => {
   const userValuesFromState = useRecoilValue(state.inputs.userValues);
-  const schemaFromState = useRecoilValue(state.config.schema);
-  const initialSchemaKeyFromState = useRecoilValue(state.config.initialSchemaKey);
+  const { schema: schemaFromState, initialSchemaKey: initialSchemaKeyFromState } = useProfileState();
   const userValues = altUserValues || userValuesFromState;
   const schema = altSchema || schemaFromState;
   const initialSchemaKey = altInitKey ?? initialSchemaKeyFromState;

src/state/config.ts

@@ -3,31 +3,6 @@ import { LOCALES } from '@common/i18n/locales';
 import { localStorageService } from '@common/services/storage';
 import { atom } from 'recoil';
 
-const profiles = atom<Array<ProfileEntry>>({
-  key: 'config.profiles',
-  default: [],
-});
-
-const selectedProfile = atom<ProfileEntry | null>({
-  key: 'config.selectedProfile',
-  default: null,
-});
-
-const preparedFields = atom<ResourceTemplates | null>({
-  key: 'config.preparedFields',
-  default: null,
-});
-
-const initialSchemaKey = atom<string | null>({
-  key: 'config.initialSchemaKey',
-  default: null,
-});
-
-const schema = atom<Map<string, SchemaEntry>>({
-  key: 'config.schema',
-  default: new Map(),
-});
-
 const selectedEntries = atom<Array<string>>({
   key: 'config.selectedEntries',
   default: [],
@@ -43,11 +18,6 @@ const i18nMessages = atom<I18nMessages>({
   default: {},
 });
 
-const collectRecordDataForPreview = atom<boolean>({
-  key: 'config.collectRecordDataForPreview',
-  default: false,
-});
-
 const customEvents = atom<Record<string, string> | null>({
   key: 'config.customEvents',
   default: null,
@@ -59,15 +29,9 @@ const hasNavigationOrigin = atom<boolean>({
 });
 
 export default {
-  profiles,
-  selectedProfile,
-  preparedFields,
-  schema,
-  initialSchemaKey,
   selectedEntries,
   locale,
   i18nMessages,
-  collectRecordDataForPreview,
   customEvents,
   hasNavigationOrigin,
 };

src/store/index.ts

@@ -1,4 +1,8 @@
+// Stores
 export * from './status';
 export * from './loadingState';
 export * from './marcPreview';
+export * from './profile';
+
+// Selector hooks
 export * from './selectors';

src/store/loadingState.ts

@@ -4,7 +4,7 @@ import { generateStore } from './utils/storeCreator';
 
 export type LoadingState = SliceState<'isLoading', boolean>;
 
-const STORE_NAME = 'LoadingState';
+const STORE_NAME = 'Loading';
 
 const loadingStateStore: StateCreator<LoadingState, [['zustand/devtools', never]], []> = (...args) => ({
   ...createBaseSlice({ basic: 'isLoading' }, false)(...args),

src/store/profile.ts

@@ -0,0 +1,25 @@
+import { StateCreator } from 'zustand';
+import { createBaseSlice, SliceState } from './utils/slice';
+import { generateStore } from './utils/storeCreator';
+
+type SelectedProfileType = ProfileEntry | null;
+type PreparedFieldsType = ResourceTemplates | null;
+type InitialSchemaKeyType = string | null;
+
+export type ProfileState = SliceState<'profiles', ProfileEntry[]> &
+  SliceState<'selectedProfile', SelectedProfileType> &
+  SliceState<'preparedFields', PreparedFieldsType> &
+  SliceState<'initialSchemaKey', InitialSchemaKeyType> &
+  SliceState<'schema', Map<string, SchemaEntry>>;
+
+const STORE_NAME = 'Profile';
+
+const profileStore: StateCreator<ProfileState, [['zustand/devtools', never]], []> = (...args) => ({
+  ...createBaseSlice({ basic: 'profiles' }, [] as ProfileEntry[])(...args),
+  ...createBaseSlice({ basic: 'selectedProfile' }, null as SelectedProfileType)(...args),
+  ...createBaseSlice({ basic: 'preparedFields' }, null as PreparedFieldsType)(...args),
+  ...createBaseSlice({ basic: 'initialSchemaKey' }, null as InitialSchemaKeyType)(...args),
+  ...createBaseSlice({ basic: 'schema' }, new Map())(...args),
+});
+
+export const useProfileStore = generateStore(profileStore, STORE_NAME);

src/store/selectors.ts

@@ -2,7 +2,9 @@ import { createSelectors } from './utils/selectors';
 import { useStatusStore } from './status';
 import { useLoadingStateStore } from './loadingState';
 import { useMarcPreviewStore } from './marcPreview';
+import { useProfileStore } from './profile';
 
 export const useStatusState = () => createSelectors(useStatusStore).use;
 export const useLoadingState = () => createSelectors(useLoadingStateStore).use;
 export const useMarcPreviewState = () => createSelectors(useMarcPreviewStore).use;
+export const useProfileState = () => createSelectors(useProfileStore).use;

src/store/utils/storeCreator.ts

@@ -1,6 +1,6 @@
-import { IS_PROD_MODE } from '@common/constants/bundle.constants';
 import { create, StateCreator } from 'zustand';
 import { devtools } from 'zustand/middleware';
+import { IS_PROD_MODE } from '@common/constants/bundle.constants';
 
 const STORE_NAME = 'Linked Data Editor';
 

src/test/__mocks__/store/index.ts

@@ -5,3 +5,9 @@ export const setInitialGlobalState = <T>(store: StoreApi<T>, initialState: any)
     ...store.getInitialState(),
     ...initialState,
   });
+
+export const setUpdatedGlobalState = <T>(store: StoreApi<T>, updatedState: any) =>
+  store.setState({
+    ...store.getState(),
+    ...updatedState,
+  });