refactor selectors usage

src/common/hooks/useCommonStatus.ts

@@ -1,8 +1,8 @@
 import { UserNotificationFactory } from '@common/services/userNotification';
-import { useStoreSelector } from '@common/hooks/useStoreSelectors';
+import { useStatusStore } from '@src/store';
 
 export const useCommonStatus = () => {
-  const { addStatusMessages } = useStoreSelector().status;
+  const { addStatusMessages } = useStatusStore();
 
   return {
     set: (l10nId: string, type: StatusType) => {

src/common/hooks/useComplexLookup.ts

@@ -12,7 +12,7 @@ import state from '@state';
 import { useModalControls } from './useModalControls';
 import { useMarcData } from './useMarcData';
 import { useServicesContext } from './useServicesContext';
-import { useStoreSelector } from './useStoreSelectors';
+import { useMarcPreviewStore } from '@src/store';
 
 export const useComplexLookup = ({
   entry,
@@ -34,7 +34,7 @@ export const useComplexLookup = ({
     resetData: resetMarcPreviewData,
     metaData: marcPreviewMetadata,
     resetMetaData: resetMarcPreviewMetadata,
-  } = useStoreSelector().marcPreview;
+  } = useMarcPreviewStore();
   const resetIsMarcPreviewOpen = useResetRecoilState(state.ui.isMarcPreviewOpen);
   const { isModalOpen, setIsModalOpen, openModal } = useModalControls();
   const { fetchMarcData } = useMarcData(setData);

src/common/hooks/useContainerEvents.ts

@@ -5,7 +5,7 @@ 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 { useStoreSelector } from '@common/hooks/useStoreSelectors';
+import { useStatusStore } from '@src/store';
 import state from '@state';
 
 type IUseContainerEvents =
@@ -17,7 +17,7 @@ type IUseContainerEvents =
 
 export const useContainerEvents = ({ onTriggerModal, watchEditedState = false }: IUseContainerEvents = {}) => {
   const hasNavigationOrigin = useRecoilValue(state.config.hasNavigationOrigin);
-  const { isEditedRecord: isEdited } = useStoreSelector().status;
+  const { isEditedRecord: isEdited } = useStatusStore();
   const {
     BLOCK_NAVIGATION,
     UNBLOCK_NAVIGATION,

src/common/hooks/useFetchSearchData.ts

@@ -9,7 +9,7 @@ import { normalizeLccn } from '@common/helpers/validations.helper';
 import { UserNotificationFactory } from '@common/services/userNotification';
 import state from '@state';
 import { useSearchContext } from './useSearchContext';
-import { useStoreSelector } from '@common/hooks/useStoreSelectors';
+import { useStatusStore } from '@src/store';
 
 export const useFetchSearchData = () => {
   const {
@@ -30,7 +30,7 @@ export const useFetchSearchData = () => {
   const [data, setData] = useRecoilState(state.search.data);
   const resetData = useResetRecoilState(state.search.data);
   const setPageMetadata = useSetRecoilState(state.search.pageMetadata);
-  const { addStatusMessages, resetStatusMessages } = useStoreSelector().status;
+  const { addStatusMessages, resetStatusMessages } = useStatusStore();
 
   const validateAndNormalizeQuery = useCallback(
     (type: SearchIdentifiers, query: string) => {

src/common/hooks/useMarcData.ts

@@ -3,11 +3,11 @@ import { getMarcRecord } from '@common/api/records.api';
 import { StatusType } from '@common/constants/status.constants';
 import { UserNotificationFactory } from '@common/services/userNotification';
 import state from '@state';
-import { useStoreSelector } from '@common/hooks/useStoreSelectors';
+import { useStatusStore } from '@src/store';
 
 export const useMarcData = (setMarcPreviewData: (value: any) => void) => {
   const setIsLoading = useSetRecoilState(state.loadingState.isLoading);
-  const { addStatusMessages } = useStoreSelector().status;
+  const { addStatusMessages } = useStatusStore();
 
   const fetchMarcData = async (recordId?: string, endpointUrl?: string): Promise<MarcDTO | undefined> => {
     if (!recordId) return undefined;

src/common/hooks/useProcessedRecordAndSchema.hook.ts

@@ -12,7 +12,7 @@ import { UserNotificationFactory } from '@common/services/userNotification';
 import { StatusType } from '@common/constants/status.constants';
 import state from '@state';
 import { useServicesContext } from './useServicesContext';
-import { useStoreSelector } from '@common/hooks/useStoreSelectors';
+import { useStatusStore } from '@src/store';
 
 type IGetProcessedRecordAndSchema = {
   baseSchema: Schema;
@@ -23,7 +23,7 @@ type IGetProcessedRecordAndSchema = {
 
 export const useProcessedRecordAndSchema = () => {
   const setRecord = useSetRecoilState(state.inputs.record);
-  const { addStatusMessages } = useStoreSelector().status;
+  const { addStatusMessages } = useStatusStore();
   const { formatMessage } = useIntl();
   const { userValuesService, schemaWithDuplicatesService, recordNormalizingService, recordToSchemaMappingService } =
     useServicesContext() as Required<ServicesParams>;

src/common/hooks/useProfileSchema.ts

@@ -2,14 +2,14 @@ import { useRecoilState, useSetRecoilState } from 'recoil';
 import state from '@state';
 import { useServicesContext } from './useServicesContext';
 import { deleteFromSetImmutable } from '@common/helpers/common.helper';
-import { useStoreSelector } from '@common/hooks/useStoreSelectors';
+import { useStatusStore } 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 { setIsEditedRecord: setIsEdited } = useStoreSelector().status;
+  const { setIsEditedRecord: setIsEdited } = useStatusStore();
   const setUserValues = useSetRecoilState(state.inputs.userValues);
 
   const getSchemaWithCopiedEntries = (entry: SchemaEntry, selectedEntries: string[]) => {

src/common/hooks/useRecordControls.ts

@@ -32,7 +32,7 @@ import { useContainerEvents } from './useContainerEvents';
 import { ApiErrorCodes, ExternalResourceIdType } from '@common/constants/api.constants';
 import { checkHasErrorOfCodeType } from '@common/helpers/api.helper';
 import { useRecordGeneration } from './useRecordGeneration';
-import { useStoreSelector } from '@common/hooks/useStoreSelectors';
+import { useStatusStore } from '@src/store';
 
 type SaveRecordProps = {
   asRefToNewRecord?: boolean;
@@ -53,7 +53,7 @@ export const useRecordControls = () => {
   const setUserValues = useSetRecoilState(state.inputs.userValues);
   const setSelectedProfile = useSetRecoilState(state.config.selectedProfile);
   const [record, setRecord] = useRecoilState(state.inputs.record);
-  const { setRecordStatus, setLastSavedRecordId, setIsEditedRecord: setIsEdited, addStatusMessages } = useStoreSelector().status;
+  const { setRecordStatus, setLastSavedRecordId, setIsEditedRecord: setIsEdited, addStatusMessages } = useStatusStore();
   const setCurrentlyEditedEntityBfid = useSetRecoilState(state.ui.currentlyEditedEntityBfid);
   const setCurrentlyPreviewedEntityBfid = useSetRecoilState(state.ui.currentlyPreviewedEntityBfid);
   const [selectedRecordBlocks, setSelectedRecordBlocks] = useRecoilState(state.inputs.selectedRecordBlocks);

src/common/hooks/useRecordStatus.ts

@@ -1,8 +1,8 @@
-import { useStoreSelector } from '@common/hooks/useStoreSelectors';
+import { useStatusStore } from '@src/store';
 import { useParams } from 'react-router-dom';
 
 export const useRecordStatus = () => {
-  const { lastSavedRecordId } = useStoreSelector().status;
+  const { lastSavedRecordId } = useStatusStore();
   const { resourceId } = useParams();
 
   const hasBeenSaved = resourceId && resourceId === lastSavedRecordId;

src/common/hooks/useResetRecordStatus.ts

@@ -1,10 +1,10 @@
 import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { RecordStatus } from '@common/constants/record.constants';
-import { useStoreSelector } from '@common/hooks/useStoreSelectors';
+import { useStatusStore } from '@src/store';
 
 export const useResetRecordStatus = () => {
-  const { recordStatus, setRecordStatus } = useStoreSelector().status;
+  const { recordStatus, setRecordStatus } = useStatusStore();
   const [prevResourceId, setPrevResourceId] = useState<string | null>(null);
   const { resourceId } = useParams();
   const setRecordStatusAsOpen = () => setRecordStatus({ type: RecordStatus.open });

src/common/hooks/useSearchFiltersData.ts

@@ -4,7 +4,7 @@ import { StatusType } from '@common/constants/status.constants';
 import { UserNotificationFactory } from '@common/services/userNotification';
 import * as SearchApi from '@common/api/search.api';
 import state from '@state';
-import { useStoreSelector } from '@common/hooks/useStoreSelectors';
+import { useStatusStore } from '@src/store';
 
 const DEFAULT_SEARCH_SOURCE_LIMIT = '50';
 const DEFAULT_SEARCH_FACETS_QUERY = 'id=*';
@@ -14,7 +14,7 @@ export const useSearchFiltersData = () => {
   const resetSelectedFacetsGroups = useResetRecoilState(state.search.selectedFacetsGroups);
   const setFacetsData = useSetRecoilState(state.search.facetsData);
   const setSourceData = useSetRecoilState(state.search.sourceData);
-  const { addStatusMessages } = useStoreSelector().status;
+  const { addStatusMessages } = useStatusStore();
 
   useEffect(() => {
     return resetSelectedFacetsGroups();

src/components/CommonStatus/CommonStatus.tsx

@@ -8,12 +8,12 @@ import CheckCircleIcon from '@src/assets/check-circle.svg?react';
 import WarningIcon from '@src/assets/exclamation-triangle.svg?react';
 import ErrorIcon from '@src/assets/exclamation-circle.svg?react';
 import './CommonStatus.scss';
-import { useStoreSelector } from '@common/hooks/useStoreSelectors';
+import { useStatusStore } from '@src/store';
 
 const DELETE_TIMEOUT = 10000;
 
 export const CommonStatus: FC = () => {
-  const { statusMessages, setStatusMessages } = useStoreSelector().status;
+  const { statusMessages, setStatusMessages } = useStatusStore();
 
   const deleteMessage = (messageId?: string) => {
     setStatusMessages(statusMessages.filter(({ id }) => id !== messageId));

src/components/ComplexLookupField/MarcPreviewComplexLookup.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { useRecoilValue } from 'recoil';
 import { FormattedDate, FormattedMessage } from 'react-intl';
 import { useSearchContext } from '@common/hooks/useSearchContext';
-import { useStoreSelector } from '@common/hooks/useStoreSelectors';
+import { useMarcPreviewStore } from '@src/store';
 import { SearchControlPane } from '@components/SearchControlPane';
 import { MarcContent } from '@components/MarcContent';
 import { Button, ButtonType } from '@components/Button';
@@ -17,7 +17,7 @@ type MarcPreviewComplexLookupProps = {
 export const MarcPreviewComplexLookup: FC<MarcPreviewComplexLookupProps> = ({ onClose }) => {
   const { onAssignRecord } = useSearchContext();
   const isMarcPreviewOpen = useRecoilValue(state.ui.isMarcPreviewOpen);
-  const { data: marcPreviewData, metaData: marcPreviewMetadata } = useStoreSelector().marcPreview;
+  const { data: marcPreviewData, metaData: marcPreviewMetadata } = useMarcPreviewStore();
 
   const renderCloseButton = () => (
     <Button data-testid="nav-close-button" type={ButtonType.Icon} onClick={onClose} className="nav-close">

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 { useStoreSelector } from '@common/hooks/useStoreSelectors';
+import { useMarcPreviewStore } from '@src/store';
 
 interface ModalComplexLookupProps {
   isOpen: boolean;
@@ -60,7 +60,7 @@ export const ModalComplexLookup: FC<ModalComplexLookupProps> = memo(
       resetData,
       setMetaData: setMarcMetadata,
       resetMetaData: clearMarcMetadata,
-    } = useStoreSelector().marcPreview;
+    } = useMarcPreviewStore();
     const { fetchMarcData } = useMarcData(setData);
 
     useEffect(() => {

src/components/DeleteRecord/DeleteRecord.tsx

@@ -12,11 +12,11 @@ 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 { useStoreSelector } from '@common/hooks/useStoreSelectors';
+import { useStatusStore } from '@src/store';
 
 const DeleteRecord: FC = () => {
   const record = useRecoilValue(state.inputs.record);
-  const { isEditedRecord: isEdited } = useStoreSelector().status;
+  const { isEditedRecord: isEdited } = useStatusStore();
   const resourceRoutePattern = useRoutePathPattern(RESOURCE_URLS);
   const { deleteRecord } = useRecordControls();
   const { isModalOpen, setIsModalOpen, openModal } = useModalControls();

src/components/EditControlPane/EditControlPane.tsx

@@ -13,7 +13,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 { useStoreSelector } from '@common/hooks/useStoreSelectors';
+import { useMarcPreviewStore, useStatusStore } from '@src/store';
 import state from '@state';
 import EyeOpen16 from '@src/assets/eye-open-16.svg?react';
 import ExternalLink16 from '@src/assets/external-link-16.svg?react';
@@ -25,9 +25,8 @@ export const EditControlPane = () => {
   const isInCreateMode = useRoutePathPattern(RESOURCE_CREATE_URLS);
   const isLoading = useRecoilValue(state.loadingState.isLoading);
   const currentlyEditedEntityBfid = useRecoilValue(state.ui.currentlyEditedEntityBfid);
-  const { status, marcPreview } = useStoreSelector();
-  const { setRecordStatus } = status;
-  const { setValue } = marcPreview;
+  const { setRecordStatus } = useStatusStore();
+  const { setValue } = useMarcPreviewStore();
   const navigate = useNavigate();
   const searchResultsUri = useBackToSearchUri();
   const { resourceId } = useParams();

src/components/EditPreview/EditPreview.tsx

@@ -12,12 +12,12 @@ 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 { useStoreSelector } from '@common/hooks/useStoreSelectors';
+import { useStatusStore } from '@src/store';
 import './EditPreview.scss';
 
 export const EditPreview = () => {
   const currentlyPreviewedEntityBfid = useRecoilValue(state.ui.currentlyPreviewedEntityBfid);
-  const { isEditedRecord: isEdited } = useStoreSelector().status;
+  const { isEditedRecord: isEdited } = useStatusStore();
   const record = useRecoilValue(state.inputs.record);
   const isPositionedSecond =
     currentlyPreviewedEntityBfid.has(PROFILE_BFIDS.INSTANCE) && currentlyPreviewedEntityBfid.values.length <= 1;

src/components/EditSection/EditSection.tsx

@@ -13,15 +13,15 @@ import { useServicesContext } from '@common/hooks/useServicesContext';
 import { renderDrawComponent } from './renderDrawComponent';
 import './EditSection.scss';
 import { useRecordGeneration } from '@common/hooks/useRecordGeneration';
-import { useStoreSelector } from '@common/hooks/useStoreSelectors';
+import { useStatusStore } 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 [selectedEntries, setSelectedEntries] = useRecoilState(state.config.selectedEntries);
   const [userValues, setUserValues] = useRecoilState(state.inputs.userValues);
-  const { isEditedRecord: isEdited, setIsEditedRecord: setIsEdited } = useStoreSelector().status;
+  const { isEditedRecord: isEdited, setIsEditedRecord: setIsEdited } = useStatusStore();
   const record = useRecoilValue(state.inputs.record);
   const selectedRecordBlocks = useRecoilValue(state.inputs.selectedRecordBlocks);
   const [collapsedEntries, setCollapsedEntries] = useRecoilState(state.ui.collapsedEntries);

src/components/Footer/Footer.tsx

@@ -5,12 +5,12 @@ import state from '@state';
 import { useRecoilValue } from 'recoil';
 import { PreviewExternalResourceControls } from '@components/PreviewExternalResourceControls';
 import './Footer.scss';
-import { useStoreSelector } from '@common/hooks/useStoreSelectors';
+import { useMarcPreviewStore } from '@src/store';
 
 export const Footer = () => {
   const showRecordControls = useRoutePathPattern(RESOURCE_EDIT_CREATE_URLS);
   const showExternalResourceControls = useRoutePathPattern(EXTERNAL_RESOURCE_URLS);
-  const { value: marcPreviewData } = useStoreSelector().marcPreview;
+  const { value: marcPreviewData } = useMarcPreviewStore();
   const record = useRecoilValue(state.inputs.record);
   const isVisible = (showRecordControls || (showExternalResourceControls && record)) && !marcPreviewData;
 

src/components/Nav/Nav.tsx

@@ -7,12 +7,12 @@ import { useRecoilValue } from 'recoil';
 import { ViewMarcControlPane } from '@components/ViewMarcControlPane';
 import { PreviewExternalResourcePane } from '@components/PreviewExternalResourcePane';
 import './Nav.scss';
-import { useStoreSelector } from '@common/hooks/useStoreSelectors';
+import { useMarcPreviewStore } from '@src/store';
 
 export const Nav = () => {
   const isEditSectionOpen = useRoutePathPattern(RESOURCE_EDIT_CREATE_URLS);
   const isExternalResourceSectionOpen = useRoutePathPattern(EXTERNAL_RESOURCE_URLS);
-  const { value: marcPreviewData } = useStoreSelector().marcPreview;
+  const { value: marcPreviewData } = useMarcPreviewStore();
   const record = useRecoilValue(state.inputs.record);
   const isVisible = isEditSectionOpen || (isExternalResourceSectionOpen && record);
 

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 { useStoreSelector } from '@common/hooks/useStoreSelectors';
+import { useStatusStore } from '@src/store';
 import state from '@state';
 import { Labels } from './Labels';
 import { Values } from './Values';
@@ -81,7 +81,7 @@ export const Fields = ({
   const selectedEntries = useRecoilValue(state.config.selectedEntries);
   const record = useRecoilValue(state.inputs.record);
   const currentlyPreviewedEntityBfid = useRecoilValue(state.ui.currentlyPreviewedEntityBfid);
-  const { isEditedRecord: isEdited, setRecordStatus } = useStoreSelector().status;
+  const { isEditedRecord: isEdited, setRecordStatus } = useStatusStore();
   const { navigateToEditPage } = useNavigateToEditPage();
   const userValues = altUserValues || userValuesFromState;
   const schema = altSchema || schemaFromState;

src/components/Prompt/Prompt.tsx

@@ -12,7 +12,7 @@ import { RecordStatus } from '@common/constants/record.constants';
 import { getForceNavigateToDest } from '@common/helpers/navigation.helper';
 import { useContainerEvents } from '@common/hooks/useContainerEvents';
 import './Prompt.scss';
-import { useStoreSelector } from '@common/hooks/useStoreSelectors';
+import { useStatusStore } from '@src/store';
 
 interface Props {
   when: boolean;
@@ -30,7 +30,7 @@ export const Prompt: FC<Props> = ({ when: shouldPrompt }) => {
     setIsModalOpen: setIsSwitchToNewRecordModalOpen,
     openModal: openSwitchToNewRecordModal,
   } = useModalControls();
-  const { setIsEditedRecord: setIsEdited } = useStoreSelector().status;
+  const { setIsEditedRecord: setIsEdited } = useStatusStore();
   const setRecordStatus = useSetRecoilState(state.status.recordStatus);
   const [forceNavigateTo, setForceNavigateTo] = useState<{
     pathname: string;