From f8a241c2c2eb20732dfe694b6f1122b8cb285a3e Mon Sep 17 00:00:00 2001
From: Siarhei Karol <skarol@ebsco.com>
Date: Mon, 2 Dec 2024 11:57:09 +0300
Subject: [PATCH] code refactoring: rename properties and methods; disable
 devtools in prod mode

---
 src/common/constants/bundle.constants.ts      |  1 +
 src/common/hooks/useComplexLookup.ts          |  6 ++---
 src/common/hooks/useMarcData.ts               |  2 +-
 .../MarcPreviewComplexLookup.tsx              |  2 +-
 .../ComplexLookupField/ModalComplexLookup.tsx |  8 +++---
 .../EditControlPane/EditControlPane.tsx       |  4 +--
 src/components/Footer/Footer.tsx              |  2 +-
 src/components/Nav/Nav.tsx                    |  2 +-
 .../ViewMarcControlPane.tsx                   |  2 +-
 .../ViewMarcModal/ViewMarcModal.tsx           |  2 +-
 src/store/marcPreview.ts                      | 18 ++++++++-----
 src/store/status.ts                           | 26 +++++++++++--------
 .../common/constants/bundle.constants.mock.ts |  1 +
 src/test/__mocks__/setupMocks.ts              |  1 +
 src/test/__mocks__/store/index.ts             |  2 +-
 .../common/hooks/useContainerEvents.test.ts   |  4 +--
 .../common/hooks/useRecordStatus.test.ts      |  4 +--
 .../components/CommonStatus.test.tsx          |  6 ++---
 .../MarcPreviewComplexLookup.test.tsx         |  4 +--
 .../__tests__/components/SaveRecord.test.tsx  |  4 +--
 .../components/ViewMarcModal.test.tsx         |  4 +--
 src/views/Edit/Edit.tsx                       |  2 +-
 22 files changed, 59 insertions(+), 48 deletions(-)
 create mode 100644 src/common/constants/bundle.constants.ts
 create mode 100644 src/test/__mocks__/common/constants/bundle.constants.mock.ts

diff --git a/src/common/constants/bundle.constants.ts b/src/common/constants/bundle.constants.ts
new file mode 100644
index 00000000..53d96c17
--- /dev/null
+++ b/src/common/constants/bundle.constants.ts
@@ -0,0 +1 @@
+export const IS_PROD_MODE = import.meta.env.PROD;
\ No newline at end of file
diff --git a/src/common/hooks/useComplexLookup.ts b/src/common/hooks/useComplexLookup.ts
index bb67b06d..2ed56211 100644
--- a/src/common/hooks/useComplexLookup.ts
+++ b/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 });
 
diff --git a/src/common/hooks/useMarcData.ts b/src/common/hooks/useMarcData.ts
index c530f7c0..059baebe 100644
--- a/src/common/hooks/useMarcData.ts
+++ b/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);
diff --git a/src/components/ComplexLookupField/MarcPreviewComplexLookup.tsx b/src/components/ComplexLookupField/MarcPreviewComplexLookup.tsx
index 3761a182..7ef8a8db 100644
--- a/src/components/ComplexLookupField/MarcPreviewComplexLookup.tsx
+++ b/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">
diff --git a/src/components/ComplexLookupField/ModalComplexLookup.tsx b/src/components/ComplexLookupField/ModalComplexLookup.tsx
index 44db85e9..09dc39b6 100644
--- a/src/components/ComplexLookupField/ModalComplexLookup.tsx
+++ b/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();
     };
diff --git a/src/components/EditControlPane/EditControlPane.tsx b/src/components/EditControlPane/EditControlPane.tsx
index 59e961e4..64099a35 100644
--- a/src/components/EditControlPane/EditControlPane.tsx
+++ b/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);
 
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index d09e5452..8bca9385 100644
--- a/src/components/Footer/Footer.tsx
+++ b/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;
 
diff --git a/src/components/Nav/Nav.tsx b/src/components/Nav/Nav.tsx
index 596bc776..039f6b5c 100644
--- a/src/components/Nav/Nav.tsx
+++ b/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);
 
diff --git a/src/components/ViewMarcControlPane/ViewMarcControlPane.tsx b/src/components/ViewMarcControlPane/ViewMarcControlPane.tsx
index 3679d626..ef0beaf6 100644
--- a/src/components/ViewMarcControlPane/ViewMarcControlPane.tsx
+++ b/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();
 
diff --git a/src/components/ViewMarcModal/ViewMarcModal.tsx b/src/components/ViewMarcModal/ViewMarcModal.tsx
index b12cc654..014b87bb 100644
--- a/src/components/ViewMarcModal/ViewMarcModal.tsx
+++ b/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 && (
diff --git a/src/store/marcPreview.ts b/src/store/marcPreview.ts
index d51f81e5..a4355a16 100644
--- a/src/store/marcPreview.ts
+++ b/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 },
+  ),
 );
diff --git a/src/store/status.ts b/src/store/status.ts
index 47a7b7a1..4b812bf4 100644
--- a/src/store/status.ts
+++ b/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 },
+  ),
 );
diff --git a/src/test/__mocks__/common/constants/bundle.constants.mock.ts b/src/test/__mocks__/common/constants/bundle.constants.mock.ts
new file mode 100644
index 00000000..959f455c
--- /dev/null
+++ b/src/test/__mocks__/common/constants/bundle.constants.mock.ts
@@ -0,0 +1 @@
+jest.mock('@common/constants/bundle.constants', () => ({ IS_PROD_MODE: false }));
diff --git a/src/test/__mocks__/setupMocks.ts b/src/test/__mocks__/setupMocks.ts
index 22757a4a..614dd3a8 100644
--- a/src/test/__mocks__/setupMocks.ts
+++ b/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';
diff --git a/src/test/__mocks__/store/index.ts b/src/test/__mocks__/store/index.ts
index 57d1a916..beb1c47c 100644
--- a/src/test/__mocks__/store/index.ts
+++ b/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,
diff --git a/src/test/__tests__/common/hooks/useContainerEvents.test.ts b/src/test/__tests__/common/hooks/useContainerEvents.test.ts
index 1c3f10bb..c2025cc9 100644
--- a/src/test/__tests__/common/hooks/useContainerEvents.test.ts
+++ b/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 }));
   };
diff --git a/src/test/__tests__/common/hooks/useRecordStatus.test.ts b/src/test/__tests__/common/hooks/useRecordStatus.test.ts
index fa4097be..7e0e3260 100644
--- a/src/test/__tests__/common/hooks/useRecordStatus.test.ts
+++ b/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 },
diff --git a/src/test/__tests__/components/CommonStatus.test.tsx b/src/test/__tests__/components/CommonStatus.test.tsx
index cb357c53..731949f4 100644
--- a/src/test/__tests__/components/CommonStatus.test.tsx
+++ b/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 />);
   };
diff --git a/src/test/__tests__/components/MarcPreviewComplexLookup.test.tsx b/src/test/__tests__/components/MarcPreviewComplexLookup.test.tsx
index 507d97c8..0f386af7 100644
--- a/src/test/__tests__/components/MarcPreviewComplexLookup.test.tsx
+++ b/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
diff --git a/src/test/__tests__/components/SaveRecord.test.tsx b/src/test/__tests__/components/SaveRecord.test.tsx
index b92fc797..e8ae6090 100644
--- a/src/test/__tests__/components/SaveRecord.test.tsx
+++ b/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>
diff --git a/src/test/__tests__/components/ViewMarcModal.test.tsx b/src/test/__tests__/components/ViewMarcModal.test.tsx
index 3190ee33..9e7d358d 100644
--- a/src/test/__tests__/components/ViewMarcModal.test.tsx
+++ b/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 />);
 
diff --git a/src/views/Edit/Edit.tsx b/src/views/Edit/Edit.tsx
index e2c704fa..a7acbb53 100644
--- a/src/views/Edit/Edit.tsx
+++ b/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);