migrate user input

src/common/hooks/useComplexLookup.ts

@@ -1,5 +1,5 @@
 import { ChangeEvent, useCallback, useState } from 'react';
-import { useRecoilState, useResetRecoilState } from 'recoil';
+import { 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, useProfileState } from '@src/store';
+import { useInputsState, useMarcPreviewState, useProfileState } from '@src/store';
 
 export const useComplexLookup = ({
   entry,
@@ -28,7 +28,7 @@ export const useComplexLookup = ({
   const { selectedEntriesService } = useServicesContext() as Required<ServicesParams>;
   const [localValue, setLocalValue] = useState<UserValueContents[]>(value || []);
   const { schema } = useProfileState();
-  const [selectedEntries, setSelectedEntries] = useRecoilState(state.config.selectedEntries);
+  const { selectedEntries, setSelectedEntries } = useInputsState();
   const {
     setComplexValue,
     resetComplexValue: resetMarcPreviewData,

src/common/hooks/useConfig.hook.ts

@@ -1,7 +1,5 @@
 import { useRef } from 'react';
-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';
@@ -32,10 +30,8 @@ export const useConfig = () => {
     setInitialSchemaKey,
     setSchema,
   } = useProfileState();
-  const { setUserValues } = useInputsState();
-  const setSelectedEntries = useSetRecoilState(state.config.selectedEntries);
-  const setPreviewContent = useSetRecoilState(state.inputs.previewContent);
-  const setSelectedRecordBlocks = useSetRecoilState(state.inputs.selectedRecordBlocks);
+  const { setUserValues, previewContent, setPreviewContent, setSelectedRecordBlocks, setSelectedEntries } =
+    useInputsState();
   const { getProcessedRecordAndSchema } = useProcessedRecordAndSchema();
   const isProcessingProfiles = useRef(false);
 
@@ -119,8 +115,8 @@ export const useConfig = () => {
         const { updatedSchema, initKey } = await buildSchema(selectedProfile, templates, recordData, asClone);
 
         if (previewParams && recordId) {
-          setPreviewContent(prev => [
-            ...(previewParams.singular ? [] : prev.filter(({ id }) => id !== recordId)),
+          setPreviewContent([
+            ...(previewParams.singular ? [] : previewContent.filter(({ id }) => id !== recordId)),
             {
               id: recordId,
               base: updatedSchema,

src/common/hooks/useProcessedRecordAndSchema.hook.ts

@@ -1,5 +1,4 @@
 import { useCallback } from 'react';
-import { useSetRecoilState } from 'recoil';
 import { useIntl } from 'react-intl';
 import { DUPLICATE_RESOURCE_TEMPLATE } from '@common/constants/resourceTemplates.constants';
 import {
@@ -10,9 +9,8 @@ import {
 import { applyIntlToTemplates } from '@common/helpers/recordFormatting.helper';
 import { UserNotificationFactory } from '@common/services/userNotification';
 import { StatusType } from '@common/constants/status.constants';
-import state from '@state';
 import { useServicesContext } from './useServicesContext';
-import { useStatusState } from '@src/store';
+import { useInputsState, useStatusState } from '@src/store';
 
 type IGetProcessedRecordAndSchema = {
   baseSchema: Schema;
@@ -22,8 +20,8 @@ type IGetProcessedRecordAndSchema = {
 };
 
 export const useProcessedRecordAndSchema = () => {
-  const setRecord = useSetRecoilState(state.inputs.record);
   const { addStatusMessage } = useStatusState();
+  const { setRecord } = useInputsState();
   const { formatMessage } = useIntl();
   const { userValuesService, schemaWithDuplicatesService, recordNormalizingService, recordToSchemaMappingService } =
     useServicesContext() as Required<ServicesParams>;

src/common/hooks/useProfileSchema.ts

@@ -6,9 +6,8 @@ import { useInputsState, useProfileState, useStatusState } from '@src/store';
 
 export const useProfileSchema = () => {
   const { selectedEntriesService, schemaWithDuplicatesService } = useServicesContext() as Required<ServicesParams>;
-  const setSelectedEntries = useSetRecoilState(state.config.selectedEntries);
   const setCollapsibleEntries = useSetRecoilState(state.ui.collapsibleEntries);
-  const { userValues, setUserValues } = useInputsState();
+  const { userValues, setUserValues, setSelectedEntries } = useInputsState();
   const { setIsEditedRecord: setIsEdited } = useStatusState();
   const { schema, setSchema } = useProfileState();
 

src/common/hooks/useRecordControls.ts

@@ -1,6 +1,6 @@
 import { flushSync } from 'react-dom';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
-import { useRecoilState, useSetRecoilState } from 'recoil';
+import { useSetRecoilState } from 'recoil';
 import {
   postRecord,
   putRecord,
@@ -50,13 +50,11 @@ type IBaseFetchRecord = {
 export const useRecordControls = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const { setIsLoading } = useLoadingState();
-  const { resetUserValues } = useInputsState();
+  const { resetUserValues, selectedRecordBlocks, setSelectedRecordBlocks, record, setRecord } = useInputsState();
   const { setSelectedProfile } = useProfileState();
-  const [record, setRecord] = useRecoilState(state.inputs.record);
   const { setRecordStatus, setLastSavedRecordId, setIsEditedRecord: setIsEdited, addStatusMessage } = useStatusState();
   const setCurrentlyEditedEntityBfid = useSetRecoilState(state.ui.currentlyEditedEntityBfid);
   const setCurrentlyPreviewedEntityBfid = useSetRecoilState(state.ui.currentlyPreviewedEntityBfid);
-  const [selectedRecordBlocks, setSelectedRecordBlocks] = useRecoilState(state.inputs.selectedRecordBlocks);
   const setIsDuplicateImportedResourceModalOpen = useSetRecoilState(state.ui.isDuplicateImportedResourceModalOpen);
   const profile = PROFILE_BFIDS.MONOGRAPH;
   const currentRecordId = getRecordId(record);

src/common/hooks/useRecordGeneration.ts

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

src/common/hooks/useSearch.ts

@@ -8,7 +8,7 @@ import { generateSearchParamsState } from '@common/helpers/search.helper';
 import { usePagination } from '@common/hooks/usePagination';
 import { useSearchContext } from '@common/hooks/useSearchContext';
 import { useFetchSearchData } from '@common/hooks/useFetchSearchData';
-import { useLoadingState } from '@src/store';
+import { useInputsState, useLoadingState } from '@src/store';
 import state from '@state';
 
 export const useSearch = () => {
@@ -22,14 +22,14 @@ export const useSearch = () => {
     getSearchSourceData,
   } = useSearchContext();
   const { setIsLoading } = useLoadingState();
+  const { resetPreviewContent } = useInputsState();
   const [searchBy, setSearchBy] = useRecoilState(state.search.index);
   const [query, setQuery] = useRecoilState(state.search.query);
   const [facets, setFacets] = useRecoilState(state.search.limiters);
   const [message, setMessage] = useRecoilState(state.search.message);
   const [data, setData] = useRecoilState(state.search.data);
   const [pageMetadata, setPageMetadata] = useRecoilState(state.search.pageMetadata);
   const setForceRefreshSearch = useSetRecoilState(state.search.forceRefresh);
-  const resetPreviewContent = useResetRecoilState(state.inputs.previewContent);
   const [facetsBySegments, setFacetsBySegments] = useRecoilState(state.search.facetsBySegments);
   const clearFacetsBySegments = useResetRecoilState(state.search.facetsBySegments);
 

src/components/DeleteRecord/DeleteRecord.tsx

@@ -1,7 +1,5 @@
 import { FC, memo } from 'react';
-import { useRecoilValue } from 'recoil';
 import { FormattedMessage } from 'react-intl';
-import state from '@state';
 import { DEFAULT_RECORD_ID } from '@common/constants/storage.constants';
 import { useRecordControls } from '@common/hooks/useRecordControls';
 import { ModalDeleteRecord } from '@components/ModalDeleteRecord';
@@ -12,10 +10,10 @@ import { RESOURCE_URLS } from '@common/constants/routes.constants';
 import { checkButtonDisabledState } from '@common/helpers/recordControls.helper';
 import { Button, ButtonType } from '@components/Button';
 import { useRecordStatus } from '@common/hooks/useRecordStatus';
-import { useStatusState } from '@src/store';
+import { useInputsState, useStatusState } from '@src/store';
 
 const DeleteRecord: FC = () => {
-  const record = useRecoilValue(state.inputs.record);
+  const { record } = useInputsState();
   const { isEditedRecord: isEdited } = useStatusState();
   const resourceRoutePattern = useRoutePathPattern(RESOURCE_URLS);
   const { deleteRecord } = useRecordControls();

src/components/EditPreview/EditPreview.tsx

@@ -12,13 +12,13 @@ import { InstancesList } from '@components/InstancesList';
 import { useRoutePathPattern } from '@common/hooks/useRoutePathPattern';
 import { useNavigateToEditPage } from '@common/hooks/useNavigateToEditPage';
 import { checkIfRecordHasDependencies } from '@common/helpers/record.helper';
-import { useStatusState } from '@src/store';
+import { useInputsState, useStatusState } from '@src/store';
 import './EditPreview.scss';
 
 export const EditPreview = () => {
   const currentlyPreviewedEntityBfid = useRecoilValue(state.ui.currentlyPreviewedEntityBfid);
   const { isEditedRecord: isEdited } = useStatusState();
-  const record = useRecoilValue(state.inputs.record);
+  const { record } = useInputsState();
   const isPositionedSecond =
     currentlyPreviewedEntityBfid.has(PROFILE_BFIDS.INSTANCE) && currentlyPreviewedEntityBfid.values.length <= 1;
   const { resourceId } = useParams();

src/components/EditSection/EditSection.tsx

@@ -19,11 +19,9 @@ export const EditSection = memo(() => {
   const { selectedEntriesService } = useServicesContext() as Required<ServicesParams>;
   const { selectedProfile, initialSchemaKey } = useProfileState();
   const resourceTemplates = selectedProfile?.json.Profile.resourceTemplates;
-  const [selectedEntries, setSelectedEntries] = useRecoilState(state.config.selectedEntries);
-  const { userValues, addUserValues } = useInputsState();
+  const { userValues, addUserValues, selectedRecordBlocks, record, selectedEntries, setSelectedEntries } =
+    useInputsState();
   const { isEditedRecord: isEdited, setIsEditedRecord: setIsEdited } = useStatusState();
-  const record = useRecoilValue(state.inputs.record);
-  const selectedRecordBlocks = useRecoilValue(state.inputs.selectedRecordBlocks);
   const [collapsedEntries, setCollapsedEntries] = useRecoilState(state.ui.collapsedEntries);
   const collapsibleEntries = useRecoilValue(state.ui.collapsibleEntries);
   const currentlyEditedEntityBfid = useRecoilValue(state.ui.currentlyEditedEntityBfid);

src/components/EditSection/renderDrawComponent.tsx

@@ -1,10 +1,10 @@
-import { SetterOrUpdater } from 'recoil';
+import { type SelectedEntriesState } from '@src/store';
 import { DrawComponent, IDrawComponent } from './DrawComponent';
 
 export type EditSectionDataProps = {
   selectedEntriesService: ISelectedEntriesService;
   selectedEntries: string[];
-  setSelectedEntries: SetterOrUpdater<string[]>;
+  setSelectedEntries: (value: SelectedEntriesState) => void;
   userValues: UserValues;
   collapsedEntries: Set<string>;
   collapsibleEntries: Set<string>;

src/components/FieldWithMetadataAndControls/FieldWithMetadataAndControls.tsx

@@ -1,10 +1,8 @@
 import { FC, ReactNode } from 'react';
 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 { useInputsState, useProfileState } from '@src/store';
 import { CompactLayout } from './CompactLayout';
 import { ExtendedLayout } from './ExtendedLayout';
 import './FieldWithMetadataAndControls.scss';
@@ -32,8 +30,8 @@ export const FieldWithMetadataAndControls: FC<IFieldWithMetadataAndControls> = (
   disabled = false,
   ...restProps
 }) => {
-  const selectedEntries = useRecoilValue(state.config.selectedEntries);
   const { schema } = useProfileState();
+  const { selectedEntries } = useInputsState();
   const { getSchemaWithCopiedEntries, getSchemaWithDeletedEntries } = useProfileSchema();
   const { uuid, displayName, htmlId } = entry;
 

src/components/Fields/Fields.tsx

@@ -8,7 +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';
+import { useInputsState, useProfileState } from '@src/store';
 
 export type IFields = {
   uuid: string | null;
@@ -38,9 +38,9 @@ export const Fields: FC<IFields> = memo(
     scrollToEnabled = false,
     groupingDisabled = false,
   }) => {
-    const selectedEntries = useRecoilValue(state.config.selectedEntries);
     const currentlyEditedEntityBfid = useRecoilValue(state.ui.currentlyEditedEntityBfid);
     const { schema } = useProfileState();
+    const { selectedEntries } = useInputsState();
 
     const entry = uuid && schema?.get(uuid);
 

src/components/Footer/Footer.tsx

@@ -1,17 +1,15 @@
 import { useRoutePathPattern } from '@common/hooks/useRoutePathPattern';
 import { EXTERNAL_RESOURCE_URLS, RESOURCE_EDIT_CREATE_URLS } from '@common/constants/routes.constants';
 import { RecordControls } from '@components/RecordControls';
-import state from '@state';
-import { useRecoilValue } from 'recoil';
 import { PreviewExternalResourceControls } from '@components/PreviewExternalResourceControls';
+import { useInputsState, useMarcPreviewState } from '@src/store';
 import './Footer.scss';
-import { useMarcPreviewState } from '@src/store';
 
 export const Footer = () => {
   const showRecordControls = useRoutePathPattern(RESOURCE_EDIT_CREATE_URLS);
   const showExternalResourceControls = useRoutePathPattern(EXTERNAL_RESOURCE_URLS);
   const { basicValue: marcPreviewData } = useMarcPreviewState();
-  const record = useRecoilValue(state.inputs.record);
+  const { record } = useInputsState();
   const isVisible = (showRecordControls || (showExternalResourceControls && record)) && !marcPreviewData;
 
   return (

src/components/FullDisplay/FullDisplay.tsx

@@ -1,11 +1,10 @@
-import { useRecoilValue } from 'recoil';
 import { DOM_ELEMENTS } from '@common/constants/domElementsIdentifiers.constants';
-import state from '@state';
+import { useInputsState } from '@src/store';
 import './FullDisplay.scss';
 import { PreviewContent } from './PreviewContent';
 
 export const FullDisplay = () => {
-  const previewContent = useRecoilValue(state.inputs.previewContent);
+  const { previewContent } = useInputsState();
 
   return (
     !!previewContent.length && (

src/components/FullDisplay/PreviewContent.tsx

@@ -1,16 +1,15 @@
-import { useRecoilState } from 'recoil';
 import { FormattedMessage } from 'react-intl';
 import { RESOURCE_TEMPLATE_IDS } from '@common/constants/bibframe.constants';
 import { generateEditResourceUrl } from '@common/helpers/navigation.helper';
 import { useNavigateToEditPage } from '@common/hooks/useNavigateToEditPage';
 import { Button, ButtonType } from '@components/Button';
 import { Preview } from '@components/Preview';
+import { useInputsState } from '@src/store';
 import Times16 from '@src/assets/times-16.svg?react';
-import state from '@state';
 import './FullDisplay.scss';
 
 export const PreviewContent = () => {
-  const [previewContent, setPreviewContent] = useRecoilState(state.inputs.previewContent);
+  const { previewContent, setPreviewContent } = useInputsState();
   const { navigateToEditPage } = useNavigateToEditPage();
 
   return previewContent.map(({ id, base, userValues, initKey, title, entities }) => {

src/components/Nav/Nav.tsx

@@ -2,18 +2,16 @@ import { EXTERNAL_RESOURCE_URLS, RESOURCE_EDIT_CREATE_URLS } from '@common/const
 import { DOM_ELEMENTS } from '@common/constants/domElementsIdentifiers.constants';
 import { useRoutePathPattern } from '@common/hooks/useRoutePathPattern';
 import { EditControlPane } from '@components/EditControlPane';
-import state from '@state';
-import { useRecoilValue } from 'recoil';
 import { ViewMarcControlPane } from '@components/ViewMarcControlPane';
 import { PreviewExternalResourcePane } from '@components/PreviewExternalResourcePane';
+import { useInputsState, useMarcPreviewState } from '@src/store';
 import './Nav.scss';
-import { useMarcPreviewState } from '@src/store';
 
 export const Nav = () => {
   const isEditSectionOpen = useRoutePathPattern(RESOURCE_EDIT_CREATE_URLS);
   const isExternalResourceSectionOpen = useRoutePathPattern(EXTERNAL_RESOURCE_URLS);
   const { basicValue: marcPreviewData } = useMarcPreviewState();
-  const record = useRecoilValue(state.inputs.record);
+  const { record } = useInputsState();
   const isVisible = isEditSectionOpen || (isExternalResourceSectionOpen && record);
 
   return (

src/components/Preview/Fields.tsx

@@ -76,10 +76,8 @@ export const Fields = ({
   hideActions,
   forceRenderAllTopLevelEntities,
 }: FieldsProps) => {
-  const selectedEntries = useRecoilValue(state.config.selectedEntries);
-  const record = useRecoilValue(state.inputs.record);
   const currentlyPreviewedEntityBfid = useRecoilValue(state.ui.currentlyPreviewedEntityBfid);
-  const { userValues: userValuesFromState } = useInputsState();
+  const { userValues: userValuesFromState, record, selectedEntries } = useInputsState();
   const { schema: schemaFromState } = useProfileState();
   const { isEditedRecord: isEdited, setRecordStatus } = useStatusState();
   const { navigateToEditPage } = useNavigateToEditPage();

src/components/PreviewExternalResourcePane/PreviewExternalResourcePane.tsx

@@ -1,12 +1,11 @@
 import { Button, ButtonType } from '@components/Button';
 import Times16 from '@src/assets/times-16.svg?react';
-import { useRecoilValue } from 'recoil';
-import state from '@state';
 import { getRecordTitle } from '@common/helpers/record.helper';
 import { useContainerEvents } from '@common/hooks/useContainerEvents';
+import { useInputsState } from '@src/store';
 
 export const PreviewExternalResourcePane = () => {
-  const record = useRecoilValue(state.inputs.record);
+  const { record } = useInputsState();
   const { dispatchNavigateToOriginEventWithFallback } = useContainerEvents();
 
   return (
@@ -21,9 +20,7 @@ export const PreviewExternalResourcePane = () => {
           <Times16 />
         </Button>
       </nav>
-      <div className="heading">
-        {record && getRecordTitle(record)}
-      </div>
+      <div className="heading">{record && getRecordTitle(record)}</div>
       <span className="empty-block" />
     </div>
   );

src/components/SearchResultEntry/SearchResultEntry.tsx

@@ -17,7 +17,7 @@ import CommentIcon from '@src/assets/comment-lines-12.svg?react';
 import { useRecordControls } from '@common/hooks/useRecordControls';
 import { UserNotificationFactory } from '@common/services/userNotification';
 import { StatusType } from '@common/constants/status.constants';
-import { useLoadingState, useStatusState } from '@src/store';
+import { useInputsState, useLoadingState, useStatusState } from '@src/store';
 import './SearchResultEntry.scss';
 
 type SearchResultEntry = {
@@ -63,7 +63,7 @@ export const SearchResultEntry: FC<SearchResultEntry> = ({ instances, ...restOfW
   const [isOpen, setIsOpen] = useState(true);
   const { setIsLoading } = useLoadingState();
   const { addStatusMessage } = useStatusState();
-  const previewContent = useRecoilValue(state.inputs.previewContent);
+  const { previewContent } = useInputsState();
   const toggleIsOpen = () => setIsOpen(!isOpen);
   const { fetchRecord } = useRecordControls();