code refactoring: rename properties and methods; disable devtools in …

…prod mode

src/common/constants/bundle.constants.ts

@@ -0,0 +1 @@
+export const IS_PROD_MODE = import.meta.env.PROD;

src/common/hooks/useComplexLookup.ts

@@ -30,14 +30,14 @@ export const useComplexLookup = ({
   const schema = useRecoilValue(state.config.schema);
   const [selectedEntries, setSelectedEntries] = useRecoilState(state.config.selectedEntries);
   const {
-    setData,
-    resetData: resetMarcPreviewData,
+    setComplexValue,
+    resetComplexValue: resetMarcPreviewData,
     metaData: marcPreviewMetadata,
     resetMetaData: resetMarcPreviewMetadata,
   } = useMarcPreviewState();
   const resetIsMarcPreviewOpen = useResetRecoilState(state.ui.isMarcPreviewOpen);
   const { isModalOpen, setIsModalOpen, openModal } = useModalControls();
-  const { fetchMarcData } = useMarcData(setData);
+  const { fetchMarcData } = useMarcData(setComplexValue);
   const { uuid, linkedEntry } = entry;
   const linkedField = getLinkedField({ schema, linkedEntry });
 

src/common/hooks/useMarcData.ts

@@ -2,8 +2,8 @@ import { useSetRecoilState } from 'recoil';
 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 { useStatusState } from '@src/store';
+import state from '@state';
 
 export const useMarcData = (setMarcPreviewData: (value: any) => void) => {
   const setIsLoading = useSetRecoilState(state.loadingState.isLoading);

src/components/ComplexLookupField/MarcPreviewComplexLookup.tsx

@@ -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 } = useMarcPreviewState();
+  const { complexValue: marcPreviewData, metaData: marcPreviewMetadata } = useMarcPreviewState();
 
   const renderCloseButton = () => (
     <Button data-testid="nav-close-button" type={ButtonType.Icon} onClick={onClose} className="nav-close">

src/components/ComplexLookupField/ModalComplexLookup.tsx

@@ -56,12 +56,12 @@ export const ModalComplexLookup: FC<ModalComplexLookupProps> = memo(
     const clearSearchQuery = useResetRecoilState(state.search.query);
     const { getFacetsData, getSourceData } = useComplexLookupApi(api, filters);
     const {
-      setData,
-      resetData,
+      setComplexValue,
+      resetComplexValue: resetMarcPreviewValue,
       setMetaData: setMarcMetadata,
       resetMetaData: clearMarcMetadata,
     } = useMarcPreviewState();
-    const { fetchMarcData } = useMarcData(setData);
+    const { fetchMarcData } = useMarcData(setComplexValue);
 
     useEffect(() => {
       if (!value) {
@@ -78,7 +78,7 @@ export const ModalComplexLookup: FC<ModalComplexLookupProps> = memo(
 
     const onCloseModal = () => {
       onCloseMarcPreview();
-      resetData();
+      resetMarcPreviewValue();
       clearMarcMetadata();
       onClose();
     };

src/components/EditControlPane/EditControlPane.tsx

@@ -26,13 +26,13 @@ export const EditControlPane = () => {
   const isLoading = useRecoilValue(state.loadingState.isLoading);
   const currentlyEditedEntityBfid = useRecoilValue(state.ui.currentlyEditedEntityBfid);
   const { setRecordStatus } = useStatusState();
-  const { setValue } = useMarcPreviewState();
+  const { setBasicValue } = useMarcPreviewState();
   const navigate = useNavigate();
   const searchResultsUri = useBackToSearchUri();
   const { resourceId } = useParams();
   const { navigateAsDuplicate } = useNavigateToEditPage();
   const [queryParams] = useSearchParams();
-  const { fetchMarcData } = useMarcData(setValue);
+  const { fetchMarcData } = useMarcData(setBasicValue);
 
   const handleFetchMarcData = async () => fetchMarcData(resourceId);
 

src/components/Footer/Footer.tsx

@@ -10,7 +10,7 @@ import { useMarcPreviewState } from '@src/store';
 export const Footer = () => {
   const showRecordControls = useRoutePathPattern(RESOURCE_EDIT_CREATE_URLS);
   const showExternalResourceControls = useRoutePathPattern(EXTERNAL_RESOURCE_URLS);
-  const { value: marcPreviewData } = useMarcPreviewState();
+  const { basicValue: marcPreviewData } = useMarcPreviewState();
   const record = useRecoilValue(state.inputs.record);
   const isVisible = (showRecordControls || (showExternalResourceControls && record)) && !marcPreviewData;
 

src/components/Nav/Nav.tsx

@@ -12,7 +12,7 @@ import { useMarcPreviewState } from '@src/store';
 export const Nav = () => {
   const isEditSectionOpen = useRoutePathPattern(RESOURCE_EDIT_CREATE_URLS);
   const isExternalResourceSectionOpen = useRoutePathPattern(EXTERNAL_RESOURCE_URLS);
-  const { value: marcPreviewData } = useMarcPreviewState();
+  const { basicValue: marcPreviewData } = useMarcPreviewState();
   const record = useRecoilValue(state.inputs.record);
   const isVisible = isEditSectionOpen || (isExternalResourceSectionOpen && record);
 

src/components/ViewMarcControlPane/ViewMarcControlPane.tsx

@@ -8,7 +8,7 @@ import { useMarcPreviewState } from '@src/store';
 
 export const ViewMarcControlPane = () => {
   const isLoading = useRecoilValue(state.loadingState.isLoading);
-  const { resetValue: resetMarcPreviewData } = useMarcPreviewState();
+  const { resetBasicValue: resetMarcPreviewData } = useMarcPreviewState();
   const record = useRecoilValue(state.inputs.record);
   const { formatMessage } = useIntl();
 

src/components/ViewMarcModal/ViewMarcModal.tsx

@@ -3,7 +3,7 @@ import { MarcContent } from '@components/MarcContent';
 import './ViewMarcModal.scss';
 
 export const ViewMarcModal = () => {
-  const { value: marcPreviewData } = useMarcPreviewState();
+  const { basicValue: marcPreviewData } = useMarcPreviewState();
 
   return (
     marcPreviewData && (

src/store/marcPreview.ts

@@ -1,20 +1,24 @@
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
+import { IS_PROD_MODE } from '@common/constants/bundle.constants';
 import { createBaseSlice, SliceState } from './utils/slice';
 
 type MarcPreviewData = MarcDTO | null;
 type MarcPreviewMetaData = MarcPreviewMetadata | null;
 
-export type MarcPreviewState = SliceState<'value', any> &
-  SliceState<'data', MarcPreviewData> &
+export type MarcPreviewState = SliceState<'basicValue', any> &
+  SliceState<'complexValue', MarcPreviewData> &
   SliceState<'metaData', MarcPreviewMetaData>;
 
 const STORE_NAME = 'MarcPreview';
 
 export const useMarcPreviewStore = create<MarcPreviewState>()(
-  devtools((...args) => ({
-    ...createBaseSlice('value', null, STORE_NAME)(...args),
-    ...createBaseSlice('data', null as MarcPreviewData, STORE_NAME)(...args),
-    ...createBaseSlice('metaData', null as MarcPreviewMetaData, STORE_NAME)(...args),
-  })),
+  devtools(
+    (...args) => ({
+      ...createBaseSlice('basicValue', null, STORE_NAME)(...args),
+      ...createBaseSlice('complexValue', null as MarcPreviewData, STORE_NAME)(...args),
+      ...createBaseSlice('metaData', null as MarcPreviewMetaData, STORE_NAME)(...args),
+    }),
+    { enabled: !IS_PROD_MODE },
+  ),
 );

src/store/status.ts

@@ -1,5 +1,6 @@
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
+import { IS_PROD_MODE } from '@common/constants/bundle.constants';
 import { createBaseSlice, SliceState } from './utils/slice';
 
 type LastSavedRecordId = string | null;
@@ -12,15 +13,18 @@ export type StatusState = SliceState<'lastSavedRecordId', LastSavedRecordId> &
 const STORE_NAME = 'Status';
 
 export const useStatusStore = create<StatusState>()(
-  devtools((...args) => ({
-    ...createBaseSlice('lastSavedRecordId', null as LastSavedRecordId, STORE_NAME)(...args),
-    ...createBaseSlice('isEditedRecord', false, STORE_NAME)(...args),
-    ...createBaseSlice('recordStatus', { type: undefined } as RecordStatus, STORE_NAME)(...args),
-    ...createBaseSlice<'statusMessages', StatusEntry[], StatusEntry>(
-      'statusMessages',
-      [] as StatusEntry[],
-      STORE_NAME,
-      true
-    )(...args),
-  })),
+  devtools(
+    (...args) => ({
+      ...createBaseSlice('lastSavedRecordId', null as LastSavedRecordId, STORE_NAME)(...args),
+      ...createBaseSlice('isEditedRecord', false, STORE_NAME)(...args),
+      ...createBaseSlice('recordStatus', { type: undefined } as RecordStatus, STORE_NAME)(...args),
+      ...createBaseSlice<'statusMessages', StatusEntry[], StatusEntry>(
+        'statusMessages',
+        [] as StatusEntry[],
+        STORE_NAME,
+        true,
+      )(...args),
+    }),
+    { enabled: !IS_PROD_MODE },
+  ),
 );

src/test/__mocks__/common/constants/bundle.constants.mock.ts

@@ -0,0 +1 @@
+jest.mock('@common/constants/bundle.constants', () => ({ IS_PROD_MODE: false }));

src/test/__mocks__/setupMocks.ts

@@ -1,3 +1,4 @@
 import './common/helpers/env.helper.mock';
+import './common/constants/bundle.constants.mock';
 import './lib/intl.mock';
 import './lib/window.mock';

src/test/__mocks__/store/index.ts

@@ -1,6 +1,6 @@
 import { StoreApi } from 'zustand';
 
-export const setInitialState = <T>(store: StoreApi<T>, initialState: any) =>
+export const setInitialGlobalState = <T>(store: StoreApi<T>, initialState: any) =>
   store.setState({
     ...store.getInitialState(),
     ...initialState,

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

@@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil';
 import { useContainerEvents } from '@common/hooks/useContainerEvents';
 import * as domHelper from '@common/helpers/dom.helper';
 import { useStatusStore } from '@src/store';
-import { setInitialState } from '@src/test/__mocks__/store';
+import { setInitialGlobalState } from '@src/test/__mocks__/store';
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -24,7 +24,7 @@ describe('useContainerEvents', () => {
     (useRecoilValue as jest.Mock).mockReturnValueOnce(false);
     (useRecoilValue as jest.Mock).mockReturnValueOnce(mockEvents);
 
-    setInitialState(useStatusStore, { isEditedRecord });
+    setInitialGlobalState(useStatusStore, { isEditedRecord });
 
     renderHook(() => useContainerEvents({ watchEditedState: true }));
   };

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

@@ -2,7 +2,7 @@ import { renderHook } from '@testing-library/react';
 import { useStatusStore } from '@src/store';
 import { useRecordStatus } from '@common/hooks/useRecordStatus';
 import { useParams } from 'react-router-dom';
-import { setInitialState } from '@src/test/__mocks__/store';
+import { setInitialGlobalState } from '@src/test/__mocks__/store';
 
 const mockResourceId = 'mockResourceId';
 
@@ -11,7 +11,7 @@ jest.mock('react-router-dom');
 describe('useRecordStatus', () => {
   const renderUseRecordStatusHook = (lastSavedIdEqual = false) => {
     (useParams as jest.Mock).mockReturnValueOnce({ resourceId: mockResourceId });
-    setInitialState(useStatusStore, { lastSavedRecordId: lastSavedIdEqual ? mockResourceId : 'anotherId' });
+    setInitialGlobalState(useStatusStore, { lastSavedRecordId: lastSavedIdEqual ? mockResourceId : 'anotherId' });
 
     const {
       result: { current },

src/test/__tests__/components/CommonStatus.test.tsx

@@ -2,11 +2,11 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { CommonStatus } from '@components/CommonStatus';
 import { StatusType } from '@common/constants/status.constants';
 import { useStatusStore } from '@src/store';
-import { setInitialState } from '@src/test/__mocks__/store';
+import { setInitialGlobalState } from '@src/test/__mocks__/store';
 
 describe('CommonStatus', () => {
-  const renderComponent = (commonMessagesState: StatusEntry[] = []) => {
-    setInitialState(useStatusStore, { statusMessages: commonMessagesState });
+  const renderComponent = (statusMessages: StatusEntry[] = []) => {
+    setInitialGlobalState(useStatusStore, { statusMessages });
 
     return render(<CommonStatus />);
   };

src/test/__tests__/components/MarcPreviewComplexLookup.test.tsx

@@ -3,7 +3,7 @@ import { RecoilRoot } from 'recoil';
 import { useSearchContext } from '@common/hooks/useSearchContext';
 import { MarcPreviewComplexLookup } from '@components/ComplexLookupField/MarcPreviewComplexLookup';
 import { useMarcPreviewStore } from '@src/store';
-import { setInitialState } from '@src/test/__mocks__/store';
+import { setInitialGlobalState } from '@src/test/__mocks__/store';
 import state from '@state';
 
 jest.mock('@common/hooks/useSearchContext');
@@ -35,7 +35,7 @@ describe('MarcPreviewComplexLookup', () => {
     marcPreviewData: MarcDTO,
     marcPreviewMetadata: MarcPreviewMetadata,
   ) => {
-    setInitialState(useMarcPreviewStore, { data: marcPreviewData, metaData: marcPreviewMetadata });
+    setInitialGlobalState(useMarcPreviewStore, { complexValue: marcPreviewData, metaData: marcPreviewMetadata });
 
     return render(
       <RecoilRoot

src/test/__tests__/components/SaveRecord.test.tsx

@@ -4,11 +4,11 @@ import { saveRecord } from '@src/test/__mocks__/common/hooks/useRecordControls.m
 import { SaveRecord } from '@components/SaveRecord';
 import { BrowserRouter } from 'react-router-dom';
 import { useStatusStore } from '@src/store';
-import { setInitialState } from '@src/test/__mocks__/store';
+import { setInitialGlobalState } from '@src/test/__mocks__/store';
 
 describe('SaveRecord', () => {
   function renderSaveRecordComponent(isEditedRecord = true) {
-    setInitialState(useStatusStore, { isEditedRecord });
+    setInitialGlobalState(useStatusStore, { isEditedRecord });
 
     render(
       <RecoilRoot>

src/test/__tests__/components/ViewMarcModal.test.tsx

@@ -1,6 +1,6 @@
 import { ViewMarcModal } from '@components/ViewMarcModal';
 import { useMarcPreviewStore } from '@src/store';
-import { setInitialState } from '@src/test/__mocks__/store';
+import { setInitialGlobalState } from '@src/test/__mocks__/store';
 import { render } from '@testing-library/react';
 
 const { leader, subfieldContent } = {
@@ -35,7 +35,7 @@ const mockMarcPreview = {
 
 describe('ViewMarcModal', () => {
   test('renders modal and its contents', async () => {
-    setInitialState(useMarcPreviewStore, { value: mockMarcPreview });
+    setInitialGlobalState(useMarcPreviewStore, { basicValue: mockMarcPreview });
 
     const { findByText } = render(<ViewMarcModal />);
 

src/views/Edit/Edit.tsx

@@ -26,7 +26,7 @@ export const Edit = () => {
   const { fetchRecord, clearRecordState, fetchRecordAndSelectEntityValues } = useRecordControls();
   const { resourceId } = useParams();
   const { recordStatus, addStatusMessages } = useStatusState();
-  const { value: marcPreviewData, resetValue: resetMarcPreviewData } = useMarcPreviewState();
+  const { basicValue: marcPreviewData, resetBasicValue: resetMarcPreviewData } = useMarcPreviewState();
   const recordStatusType = recordStatus?.type;
   const setIsLoading = useSetRecoilState(state.loadingState.isLoading);
   const setCurrentlyEditedEntityBfid = useSetRecoilState(state.ui.currentlyEditedEntityBfid);