migrate UI controls store

folio-org · Dec 5, 2024 · 025aa70 · 025aa70
1 parent a3fd6f7
commit 025aa70
Show file tree

Hide file tree

Showing 30 changed files with 160 additions and 163 deletions.
diff --git a/src/common/hooks/useComplexLookup.ts b/src/common/hooks/useComplexLookup.ts
@@ -1,5 +1,4 @@
 import { ChangeEvent, useCallback, useState } from 'react';
-import { useResetRecoilState } from 'recoil';
 import {
   generateEmptyValueUuid,
   getLinkedField,
@@ -8,11 +7,10 @@ import {
 } from '@common/helpers/complexLookup.helper';
 import { __MOCK_URI_CHANGE_WHEN_IMPLEMENTING } from '@common/constants/complexLookup.constants';
 import { AdvancedFieldType } from '@common/constants/uiControls.constants';
-import state from '@state';
 import { useModalControls } from './useModalControls';
 import { useMarcData } from './useMarcData';
 import { useServicesContext } from './useServicesContext';
-import { useInputsState, useMarcPreviewState, useProfileState } from '@src/store';
+import { useInputsState, useMarcPreviewState, useProfileState, useUIState } from '@src/store';
 
 export const useComplexLookup = ({
   entry,
@@ -35,7 +33,7 @@ export const useComplexLookup = ({
     metaData: marcPreviewMetadata,
     resetMetaData: resetMarcPreviewMetadata,
   } = useMarcPreviewState();
-  const resetIsMarcPreviewOpen = useResetRecoilState(state.ui.isMarcPreviewOpen);
+  const { resetIsMarcPreviewOpen } = useUIState();
   const { isModalOpen, setIsModalOpen, openModal } = useModalControls();
   const { fetchMarcData } = useMarcData(setComplexValue);
   const { uuid, linkedEntry } = entry;

diff --git a/src/common/hooks/useProfileSchema.ts b/src/common/hooks/useProfileSchema.ts
@@ -1,12 +1,10 @@
-import { useSetRecoilState } from 'recoil';
-import state from '@state';
 import { useServicesContext } from './useServicesContext';
 import { deleteFromSetImmutable } from '@common/helpers/common.helper';
-import { useInputsState, useProfileState, useStatusState } from '@src/store';
+import { useInputsState, useProfileState, useStatusState, useUIState } from '@src/store';
 
 export const useProfileSchema = () => {
   const { selectedEntriesService, schemaWithDuplicatesService } = useServicesContext() as Required<ServicesParams>;
-  const setCollapsibleEntries = useSetRecoilState(state.ui.collapsibleEntries);
+  const { setCollapsibleEntries } = useUIState();
   const { userValues, setUserValues, setSelectedEntries } = useInputsState();
   const { setIsEditedRecord: setIsEdited } = useStatusState();
   const { schema, setSchema } = useProfileState();

diff --git a/src/common/hooks/useRecordControls.ts b/src/common/hooks/useRecordControls.ts
@@ -1,6 +1,5 @@
 import { flushSync } from 'react-dom';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
-import { useSetRecoilState } from 'recoil';
 import {
   postRecord,
   putRecord,
@@ -28,8 +27,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, useProfileState, useInputsState } from '@src/store';
-import state from '@state';
+import { useLoadingState, useStatusState, useProfileState, useInputsState, useUIState } from '@src/store';
 import { useRecordGeneration } from './useRecordGeneration';
 import { useBackToSearchUri } from './useBackToSearchUri';
 import { useContainerEvents } from './useContainerEvents';
@@ -52,10 +50,9 @@ export const useRecordControls = () => {
   const { setIsLoading } = useLoadingState();
   const { resetUserValues, selectedRecordBlocks, setSelectedRecordBlocks, record, setRecord } = useInputsState();
   const { setSelectedProfile } = useProfileState();
+  const { setIsDuplicateImportedResourceModalOpen, setCurrentlyEditedEntityBfid, setCurrentlyPreviewedEntityBfid } =
+    useUIState();
   const { setRecordStatus, setLastSavedRecordId, setIsEditedRecord: setIsEdited, addStatusMessage } = useStatusState();
-  const setCurrentlyEditedEntityBfid = useSetRecoilState(state.ui.currentlyEditedEntityBfid);
-  const setCurrentlyPreviewedEntityBfid = useSetRecoilState(state.ui.currentlyPreviewedEntityBfid);
-  const setIsDuplicateImportedResourceModalOpen = useSetRecoilState(state.ui.isDuplicateImportedResourceModalOpen);
   const profile = PROFILE_BFIDS.MONOGRAPH;
   const currentRecordId = getRecordId(record);
   const { getProfiles } = useConfig();

diff --git a/src/components/AdvancedSearchModal/AdvancedSearchModal.tsx b/src/components/AdvancedSearchModal/AdvancedSearchModal.tsx
@@ -1,6 +1,6 @@
 import { FC, memo, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { useRecoilState, useSetRecoilState } from 'recoil';
+import { useSetRecoilState } from 'recoil';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Modal } from '@components/Modal';
 import { Input } from '@components/Input';
@@ -12,6 +12,7 @@ import {
 } from '@common/constants/search.constants';
 import { formatRawQuery, generateSearchParamsState } from '@common/helpers/search.helper';
 import { Select } from '@components/Select';
+import { useUIState } from '@src/store';
 import state from '@state';
 import './AdvancedSearchModal.scss';
 
@@ -29,7 +30,7 @@ type Props = {
 export const AdvancedSearchModal: FC<Props> = memo(({ clearValues }) => {
   const [, setSearchParams] = useSearchParams();
   const { formatMessage } = useIntl();
-  const [isOpen, setIsOpen] = useRecoilState(state.ui.isAdvancedSearchOpen);
+  const { isAdvancedSearchOpen: isOpen, setIsAdvancedSearchOpen: setIsOpen } = useUIState();
   const setForceRefreshSearch = useSetRecoilState(state.search.forceRefresh);
   const [rawQuery, setRawQuery] = useState(DEFAULT_ADVANCED_SEARCH_QUERY);
 

diff --git a/src/components/ComplexLookupField/MarcPreviewComplexLookup.tsx b/src/components/ComplexLookupField/MarcPreviewComplexLookup.tsx
@@ -1,13 +1,11 @@
 import { FC } from 'react';
-import { useRecoilValue } from 'recoil';
 import { FormattedDate, FormattedMessage } from 'react-intl';
 import { useSearchContext } from '@common/hooks/useSearchContext';
-import { useMarcPreviewState } from '@src/store';
+import { useMarcPreviewState, useUIState } from '@src/store';
 import { SearchControlPane } from '@components/SearchControlPane';
 import { MarcContent } from '@components/MarcContent';
 import { Button, ButtonType } from '@components/Button';
 import Times16 from '@src/assets/times-16.svg?react';
-import state from '@state';
 import './MarcPreviewComplexLookup.scss';
 
 type MarcPreviewComplexLookupProps = {
@@ -16,7 +14,7 @@ type MarcPreviewComplexLookupProps = {
 
 export const MarcPreviewComplexLookup: FC<MarcPreviewComplexLookupProps> = ({ onClose }) => {
   const { onAssignRecord } = useSearchContext();
-  const isMarcPreviewOpen = useRecoilValue(state.ui.isMarcPreviewOpen);
+  const { isMarcPreviewOpen } = useUIState();
   const { complexValue: marcPreviewData, metaData: marcPreviewMetadata } = useMarcPreviewState();
 
   const renderCloseButton = () => (

diff --git a/src/components/ComplexLookupField/ModalComplexLookup.tsx b/src/components/ComplexLookupField/ModalComplexLookup.tsx
@@ -19,7 +19,7 @@ import { ComplexLookupSearchResults } from './ComplexLookupSearchResults';
 import { MarcPreviewComplexLookup } from './MarcPreviewComplexLookup';
 import { SEARCH_RESULTS_TABLE_CONFIG } from './configs';
 import './ModalComplexLookup.scss';
-import { useMarcPreviewState } from '@src/store';
+import { useMarcPreviewState, useUIState } from '@src/store';
 
 interface ModalComplexLookupProps {
   isOpen: boolean;
@@ -51,10 +51,10 @@ export const ModalComplexLookup: FC<ModalComplexLookupProps> = memo(
     const searchResultsFormatter = SEARCH_RESULTS_FORMATTER[assignEntityName] || SEARCH_RESULTS_FORMATTER.default;
     const buildSearchQuery = SEARCH_QUERY_BUILDER[assignEntityName] || SEARCH_QUERY_BUILDER.default;
 
-    const setIsMarcPreviewOpen = useSetRecoilState(state.ui.isMarcPreviewOpen);
     const setSearchQuery = useSetRecoilState(state.search.query);
     const clearSearchQuery = useResetRecoilState(state.search.query);
     const { getFacetsData, getSourceData } = useComplexLookupApi(api, filters);
+    const { setIsMarcPreviewOpen } = useUIState();
     const {
       setComplexValue,
       resetComplexValue: resetMarcPreviewValue,

diff --git a/src/components/DuplicateGroupContainer/DuplicateGroupContainer.tsx b/src/components/DuplicateGroupContainer/DuplicateGroupContainer.tsx
@@ -1,12 +1,11 @@
 import { FC, ReactNode } from 'react';
-import { Button } from '@components/Button';
-import state from '@state';
-import { useRecoilState } from 'recoil';
-import { IFields } from '@components/Fields';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
+import { Button } from '@components/Button';
+import { IFields } from '@components/Fields';
 import ArrowChevronUp from '@src/assets/arrow-chevron-up.svg?react';
 import { deleteFromSetImmutable } from '@common/helpers/common.helper';
+import { useUIState } from '@src/store';
 import './DuplicateGroupContainer.scss';
 
 interface IDuplicateGroupContainer {
@@ -22,7 +21,7 @@ export const DuplicateGroupContainer: FC<IDuplicateGroupContainer> = ({
   generateComponent,
   groupClassName,
 }) => {
-  const [collapsedEntries, setCollapsedEntries] = useRecoilState(state.ui.collapsedEntries);
+  const { collapsedEntries, setCollapsedEntries } = useUIState();
   const twinsAmount = twins.length;
   const visibleTwins = twins.filter(twinUuid => !collapsedEntries.has(twinUuid));
   const isCollapsed = visibleTwins.length === 0;
@@ -31,7 +30,6 @@ export const DuplicateGroupContainer: FC<IDuplicateGroupContainer> = ({
     setCollapsedEntries(prev => {
       const twinsAndPrevCombined = new Set([...(twins ?? []), ...prev]);
 
-      // Can use .difference method of Set() once it's been available for some time
       return twinsAndPrevCombined.size === prev.size ? deleteFromSetImmutable(prev, twins) : twinsAndPrevCombined;
     });
 

diff --git a/src/components/EditControlPane/EditControlPane.tsx b/src/components/EditControlPane/EditControlPane.tsx
@@ -1,5 +1,4 @@
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
-import { useRecoilValue } from 'recoil';
 import { FormattedMessage } from 'react-intl';
 import { Dropdown } from '@components/Dropdown';
 import { DropdownItemType } from '@common/constants/uiElements.constants';
@@ -13,8 +12,7 @@ import { useRoutePathPattern } from '@common/hooks/useRoutePathPattern';
 import { useNavigateToEditPage } from '@common/hooks/useNavigateToEditPage';
 import { useMarcData } from '@common/hooks/useMarcData';
 import { getEditActionPrefix } from '@common/helpers/bibframe.helper';
-import { useLoadingState, useMarcPreviewState, useStatusState } from '@src/store';
-import state from '@state';
+import { useLoadingState, useMarcPreviewState, useStatusState, useUIState } from '@src/store';
 import EyeOpen16 from '@src/assets/eye-open-16.svg?react';
 import ExternalLink16 from '@src/assets/external-link-16.svg?react';
 import Duplicate16 from '@src/assets/duplicate-16.svg?react';
@@ -24,7 +22,7 @@ import './EditControlPane.scss';
 export const EditControlPane = () => {
   const isInCreateMode = useRoutePathPattern(RESOURCE_CREATE_URLS);
   const { isLoading } = useLoadingState();
-  const currentlyEditedEntityBfid = useRecoilValue(state.ui.currentlyEditedEntityBfid);
+  const { currentlyEditedEntityBfid } = useUIState();
   const { setRecordStatus } = useStatusState();
   const { setBasicValue } = useMarcPreviewState();
   const navigate = useNavigate();

diff --git a/src/components/EditPreview/EditPreview.tsx b/src/components/EditPreview/EditPreview.tsx
@@ -1,22 +1,20 @@
-import { useRecoilValue } from 'recoil';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { Preview } from '@components/Preview';
 import { Button, ButtonType } from '@components/Button';
 import { PROFILE_BFIDS } from '@common/constants/bibframe.constants';
-import state from '@state';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { QueryParams, RESOURCE_CREATE_URLS, ROUTES } from '@common/constants/routes.constants';
 import { ResourceType } from '@common/constants/record.constants';
 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 { useInputsState, useStatusState } from '@src/store';
+import { useInputsState, useStatusState, useUIState } from '@src/store';
 import './EditPreview.scss';
 
 export const EditPreview = () => {
-  const currentlyPreviewedEntityBfid = useRecoilValue(state.ui.currentlyPreviewedEntityBfid);
+  const { currentlyPreviewedEntityBfid } = useUIState();
   const { isEditedRecord: isEdited } = useStatusState();
   const { record } = useInputsState();
   const isPositionedSecond =

diff --git a/src/components/EditSection/EditSection.tsx b/src/components/EditSection/EditSection.tsx
@@ -1,7 +1,5 @@
 import { useEffect, memo } from 'react';
-import { useRecoilValue, useRecoilState } from 'recoil';
 import classNames from 'classnames';
-import state from '@state';
 import { saveRecordLocally } from '@common/helpers/record.helper';
 import { PROFILE_BFIDS } from '@common/constants/bibframe.constants';
 import { AUTOSAVE_INTERVAL } from '@common/constants/storage.constants';
@@ -13,7 +11,7 @@ import { useServicesContext } from '@common/hooks/useServicesContext';
 import { renderDrawComponent } from './renderDrawComponent';
 import './EditSection.scss';
 import { useRecordGeneration } from '@common/hooks/useRecordGeneration';
-import { useInputsState, useProfileState, useStatusState } from '@src/store';
+import { useInputsState, useProfileState, useStatusState, useUIState } from '@src/store';
 
 export const EditSection = memo(() => {
   const { selectedEntriesService } = useServicesContext() as Required<ServicesParams>;
@@ -22,9 +20,7 @@ export const EditSection = memo(() => {
   const { userValues, addUserValues, selectedRecordBlocks, record, selectedEntries, setSelectedEntries } =
     useInputsState();
   const { isEditedRecord: isEdited, setIsEditedRecord: setIsEdited } = useStatusState();
-  const [collapsedEntries, setCollapsedEntries] = useRecoilState(state.ui.collapsedEntries);
-  const collapsibleEntries = useRecoilValue(state.ui.collapsibleEntries);
-  const currentlyEditedEntityBfid = useRecoilValue(state.ui.currentlyEditedEntityBfid);
+  const { collapsedEntries, setCollapsedEntries, collapsibleEntries, currentlyEditedEntityBfid } = useUIState();
   const { generateRecord } = useRecordGeneration();
 
   useContainerEvents({ watchEditedState: true });

diff --git a/src/components/Fields/Fields.tsx b/src/components/Fields/Fields.tsx
@@ -1,14 +1,12 @@
 import classNames from 'classnames';
 import { FC, memo, ReactElement, ReactNode } from 'react';
-import { useRecoilValue } from 'recoil';
 import { AdvancedFieldType } from '@common/constants/uiControls.constants';
-import state from '@state';
 import { IDrawComponent } from '@components/EditSection';
 import { ENTITY_LEVEL } from '@common/constants/bibframe.constants';
 import { DuplicateGroupContainer } from '@components/DuplicateGroupContainer';
 import { ConditionalWrapper } from '@components/ConditionalWrapper';
 import { DuplicateSubcomponentContainer } from '@components/DuplicateSubcomponentContainer';
-import { useInputsState, useProfileState } from '@src/store';
+import { useInputsState, useProfileState, useUIState } from '@src/store';
 
 export type IFields = {
   uuid: string | null;
@@ -38,7 +36,7 @@ export const Fields: FC<IFields> = memo(
     scrollToEnabled = false,
     groupingDisabled = false,
   }) => {
-    const currentlyEditedEntityBfid = useRecoilValue(state.ui.currentlyEditedEntityBfid);
+    const { currentlyEditedEntityBfid } = useUIState();
     const { schema } = useProfileState();
     const { selectedEntries } = useInputsState();
 

diff --git a/src/components/ItemSearch/ItemSearch.tsx b/src/components/ItemSearch/ItemSearch.tsx
@@ -1,4 +1,3 @@
-import { useRecoilValue } from 'recoil';
 import { FormattedMessage } from 'react-intl';
 import { AdvancedSearchModal } from '@components/AdvancedSearchModal';
 import { SEARCH_RESULTS_LIMIT } from '@common/constants/search.constants';
@@ -11,7 +10,7 @@ import { useLoadSearchResults } from '@common/hooks/useLoadSearchResults';
 import { useSearchContext } from '@common/hooks/useSearchContext';
 import { EmptyPlaceholder } from './SearchEmptyPlaceholder';
 import './ItemSearch.scss';
-import state from '@state';
+import { useUIState } from '@src/store';
 
 export const ItemSearch = () => {
   const {
@@ -40,7 +39,7 @@ export const ItemSearch = () => {
     fetchData,
     onChangeSegment,
   } = useSearch();
-  const isMarcPreviewOpen = useRecoilValue(state.ui.isMarcPreviewOpen);
+  const { isMarcPreviewOpen } = useUIState();
 
   useLoadSearchResults(fetchData);
 

diff --git a/src/components/ModalDuplicateImportedResource/ModalDuplicateImportedResource.tsx b/src/components/ModalDuplicateImportedResource/ModalDuplicateImportedResource.tsx
@@ -1,15 +1,12 @@
 import { memo } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Modal } from '@components/Modal';
-import { useRecoilState } from 'recoil';
-import state from '@state';
 import { useContainerEvents } from '@common/hooks/useContainerEvents';
+import { useUIState } from '@src/store';
 import './ModalDuplicateImportedResource.scss';
 
 export const ModalDuplicateImportedResource = memo(() => {
-  const [isDuplicateImportedResourceModalOpen, setIsDuplicateImportedResourceModalOpen] = useRecoilState(
-    state.ui.isDuplicateImportedResourceModalOpen,
-  );
+  const { isDuplicateImportedResourceModalOpen, setIsDuplicateImportedResourceModalOpen } = useUIState();
   const { formatMessage } = useIntl();
   const { dispatchNavigateToOriginEventWithFallback } = useContainerEvents();
 

diff --git a/src/components/Preview/Fields.tsx b/src/components/Preview/Fields.tsx
@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import { useRecoilValue } from 'recoil';
 import classNames from 'classnames';
 import { ENTITY_LEVEL, GROUP_BY_LEVEL } from '@common/constants/bibframe.constants';
 import { BFLITE_BFID_TO_BLOCK } from '@common/constants/bibframeMapping.constants';
@@ -10,8 +9,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 { useInputsState, useProfileState, useStatusState } from '@src/store';
-import state from '@state';
+import { useInputsState, useProfileState, useStatusState, useUIState } from '@src/store';
 import { Labels } from './Labels';
 import { Values } from './Values';
 
@@ -76,7 +74,7 @@ export const Fields = ({
   hideActions,
   forceRenderAllTopLevelEntities,
 }: FieldsProps) => {
-  const currentlyPreviewedEntityBfid = useRecoilValue(state.ui.currentlyPreviewedEntityBfid);
+  const { currentlyPreviewedEntityBfid } = useUIState();
   const { userValues: userValuesFromState, record, selectedEntries } = useInputsState();
   const { schema: schemaFromState } = useProfileState();
   const { isEditedRecord: isEdited, setRecordStatus } = useStatusState();

diff --git a/src/components/SearchControls/SearchControls.tsx b/src/components/SearchControls/SearchControls.tsx
@@ -17,6 +17,7 @@ import CaretDown from '@src/assets/caret-down.svg?react';
 import XInCircle from '@src/assets/x-in-circle.svg?react';
 import './SearchControls.scss';
 import { Announcement } from '@components/Announcement/Announcement';
+import { useUIState } from '@src/store';
 
 type Props = {
   submitSearch: VoidFunction;
@@ -42,8 +43,8 @@ export const SearchControls: FC<Props> = ({ submitSearch, changeSegment, clearVa
   const setMessage = useSetRecoilState(state.search.message);
   const setNavigationState = useSetRecoilState(state.search.navigationState);
   const resetControls = useResetRecoilState(state.search.limiters);
-  const setIsAdvancedSearchOpen = useSetRecoilState(state.ui.isAdvancedSearchOpen);
   const setFacetsBySegments = useSetRecoilState(state.search.facetsBySegments);
+  const { isAdvancedSearchOpen, setIsAdvancedSearchOpen } = useUIState();
   const [searchParams, setSearchParams] = useSearchParams();
   const [announcementMessage, setAnnouncementMessage] = useState('');
   const searchQueryParam = searchParams.get(SearchQueryParams.Query);
@@ -144,15 +145,12 @@ export const SearchControls: FC<Props> = ({ submitSearch, changeSegment, clearVa
           >
             <FormattedMessage id="ld.reset" />
           </Button>
-          <Announcement
-            message={announcementMessage}
-            onClear={() => setAnnouncementMessage('')}
-          />
+          <Announcement message={announcementMessage} onClear={() => setAnnouncementMessage('')} />
           {isVisibleAdvancedSearch && (
             <Button
               type={ButtonType.Link}
               className="search-button"
-              onClick={() => setIsAdvancedSearchOpen(isOpen => !isOpen)}
+              onClick={() => setIsAdvancedSearchOpen(!isAdvancedSearchOpen)}
             >
               <FormattedMessage id="ld.advanced" />
             </Button>

diff --git a/src/state/index.ts b/src/state/index.ts
@@ -1,7 +1,5 @@
-import ui from './ui';
 import search from './search';
 
 export default {
-  ui,
   search,
 };