services refactoring

src/common/hooks/useComplexLookup.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, useCallback, useContext, useState } from 'react';
+import { ChangeEvent, useCallback, useState } from 'react';
 import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
 import {
   generateEmptyValueUuid,
@@ -8,10 +8,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 { ServicesContext } from '@src/contexts';
 import state from '@state';
 import { useModalControls } from './useModalControls';
 import { useMarcData } from './useMarcData';
+import { useServicesContext } from './useServicesContext';
 
 export const useComplexLookup = ({
   entry,
@@ -24,7 +24,7 @@ export const useComplexLookup = ({
   lookupConfig: ComplexLookupsConfigEntry;
   onChange: (uuid: string, contents: Array<UserValueContents>) => void;
 }) => {
-  const { selectedEntriesService } = useContext(ServicesContext) as Required<ServicesParams>;
+  const { selectedEntriesService } = useServicesContext() as Required<ServicesParams>;
   const [localValue, setLocalValue] = useState<UserValueContents[]>(value || []);
   const schema = useRecoilValue(state.config.schema);
   const marcPreviewMetadata = useRecoilValue(state.data.marcPreviewMetadata);

src/common/hooks/useConfig.hook.ts

@@ -1,12 +1,12 @@
-import { useContext, useRef } from 'react';
+import { useRef } from 'react';
 import { useRecoilState, 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';
-import { ServicesContext } from '@src/contexts';
 import { useProcessedRecordAndSchema } from './useProcessedRecordAndSchema.hook';
+import { useServicesContext } from './useServicesContext';
 
 export type PreviewParams = {
   singular?: boolean;
@@ -20,9 +20,8 @@ type GetProfiles = {
 };
 
 export const useConfig = () => {
-  const { schemaCreatorService, userValuesService, selectedEntriesService } = useContext(
-    ServicesContext,
-  ) as Required<ServicesParams>;
+  const { schemaCreatorService, userValuesService, selectedEntriesService } =
+    useServicesContext() as Required<ServicesParams>;
   const [profiles, setProfiles] = useRecoilState(state.config.profiles);
   const setSelectedProfile = useSetRecoilState(state.config.selectedProfile);
   const setUserValues = useSetRecoilState(state.inputs.userValues);
@@ -87,7 +86,7 @@ export const useConfig = () => {
     return { updatedSchema, initKey };
   };
 
-  const getProfiles = async ({ record, recordId, previewParams, asClone }: GetProfiles): Promise<any> => {
+  const getProfiles = async ({ record, recordId, previewParams, asClone }: GetProfiles): Promise<unknown> => {
     if (isProcessingProfiles.current && (record || recordId)) return;
 
     try {

src/common/hooks/useProcessedRecordAndSchema.hook.ts

@@ -1,4 +1,4 @@
-import { useCallback, useContext } from 'react';
+import { useCallback } from 'react';
 import { useSetRecoilState } from 'recoil';
 import { useIntl } from 'react-intl';
 import { DUPLICATE_RESOURCE_TEMPLATE } from '@common/constants/resourceTemplates.constants';
@@ -10,8 +10,8 @@ import {
 import { applyIntlToTemplates } from '@common/helpers/recordFormatting.helper';
 import { UserNotificationFactory } from '@common/services/userNotification';
 import { StatusType } from '@common/constants/status.constants';
-import { ServicesContext } from '@src/contexts';
 import state from '@state';
+import { useServicesContext } from './useServicesContext';
 
 type IGetProcessedRecordAndSchema = {
   baseSchema: Schema;
@@ -25,7 +25,7 @@ export const useProcessedRecordAndSchema = () => {
   const setStatusMessages = useSetRecoilState(state.status.commonMessages);
   const { formatMessage } = useIntl();
   const { userValuesService, schemaWithDuplicatesService, recordNormalizingService, recordToSchemaMappingService } =
-    useContext(ServicesContext) as Required<ServicesParams>;
+    useServicesContext() as Required<ServicesParams>;
 
   const getProcessedRecordAndSchema = useCallback(
     async ({ baseSchema, record, userValues, asClone = false }: IGetProcessedRecordAndSchema) => {

src/common/hooks/useProfileSchema.ts

@@ -1,12 +1,9 @@
-import { useContext } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
-import { ServicesContext } from '@src/contexts';
 import state from '@state';
+import { useServicesContext } from './useServicesContext';
 
 export const useProfileSchema = () => {
-  const { selectedEntriesService, schemaWithDuplicatesService } = useContext(
-    ServicesContext,
-  ) as Required<ServicesParams>;
+  const { selectedEntriesService, schemaWithDuplicatesService } = useServicesContext() as Required<ServicesParams>;
   const [schema, setSchema] = useRecoilState(state.config.schema);
   const setSelectedEntries = useSetRecoilState(state.config.selectedEntries);
   const setClonePrototypes = useSetRecoilState(state.config.clonePrototypes);

src/common/hooks/useServicesContext.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { ServicesContext } from '@src/contexts';
+
+export const useServicesContext = () => {
+  return useContext(ServicesContext);
+};

src/common/hooks/useSimpleLookupData.ts

@@ -1,11 +1,10 @@
-import { useContext } from 'react';
 import { loadSimpleLookup } from '@common/helpers/api.helper';
 import { alphabeticSortLabel } from '@common/helpers/common.helper';
 import { filterLookupOptionsByMappedValue, formatLookupOptions } from '@common/helpers/lookupOptions.helper';
-import { ServicesContext } from '@src/contexts';
+import { useServicesContext } from './useServicesContext';
 
 export const useSimpleLookupData = () => {
-  const { lookupCacheService } = useContext(ServicesContext) as Required<ServicesParams>;
+  const { lookupCacheService } = useServicesContext() as Required<ServicesParams>;
 
   const getLookupData = lookupCacheService.getAll;
 

src/components/EditSection/EditSection.tsx

@@ -1,4 +1,4 @@
-import { useEffect, memo, useCallback, useContext } from 'react';
+import { useEffect, memo, useCallback } from 'react';
 import { useRecoilValue, useRecoilState } from 'recoil';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
@@ -17,10 +17,10 @@ import { ComplexLookupField } from '@components/ComplexLookupField';
 import { Prompt } from '@components/Prompt';
 import { findParentEntryByProperty } from '@common/helpers/schema.helper';
 import { FieldWithMetadataAndControls } from '@components/FieldWithMetadataAndControls';
+import { useContainerEvents } from '@common/hooks/useContainerEvents';
+import { useServicesContext } from '@common/hooks/useServicesContext';
 import { Button, ButtonType } from '@components/Button';
-import { ServicesContext } from '@src/contexts';
 import './EditSection.scss';
-import { useContainerEvents } from '@common/hooks/useContainerEvents';
 
 export type IDrawComponent = {
   schema: Map<string, SchemaEntry>;
@@ -31,7 +31,7 @@ export type IDrawComponent = {
 };
 
 export const EditSection = memo(() => {
-  const { selectedEntriesService } = useContext(ServicesContext) as Required<ServicesParams>;
+  const { selectedEntriesService } = useServicesContext() as Required<ServicesParams>;
   const resourceTemplates = useRecoilValue(state.config.selectedProfile)?.json.Profile.resourceTemplates;
   const schema = useRecoilValue(state.config.schema);
   const initialSchemaKey = useRecoilValue(state.config.initialSchemaKey);

src/providers/SearchProvider.tsx

@@ -14,7 +14,7 @@ export const SearchProvider: FC<SearchProviderProps> = ({ value, children }) =>
       ...value,
       navigationSegment: { value: navigationSegment, set: setNavigationSegment },
     }),
-    [value, navigationSegment],
+    [navigationSegment, value],
   );
 
   return <SearchContext.Provider value={contextValue}>{children}</SearchContext.Provider>;

src/providers/ServicesProvider.tsx

@@ -66,4 +66,4 @@ export const ServicesProvider: FC<ServicesProviderProps> = ({ children }) => {
   );
 
   return <ServicesContext.Provider value={servicesValue}>{children}</ServicesContext.Provider>;
-};
+};

src/test/__mocks__/common/hooks/useServicesContext.mock.ts

@@ -0,0 +1,54 @@
+export const userValuesService = {
+  set: jest.fn(),
+  setValue: jest.fn(),
+  getAllValues: jest.fn(),
+  getValue: jest.fn(),
+} as unknown as IUserValuesService;
+
+export const selectedEntriesService = {
+  get: jest.fn(),
+  set: jest.fn(),
+  addNew: jest.fn(),
+  addDuplicated: jest.fn(),
+  remove: jest.fn(),
+} as unknown as ISelectedEntriesService;
+
+export const schemaWithDuplicatesService = {
+  get: jest.fn(),
+  set: jest.fn(),
+  duplicateEntry: jest.fn(),
+} as unknown as ISchemaWithDuplicatesService;
+
+export const lookupCacheService = {
+  save: jest.fn(),
+  getAll: jest.fn(),
+  getById: jest.fn(),
+} as unknown as ILookupCacheService;
+
+export const recordNormalizingService = {
+  init: jest.fn(),
+  get: jest.fn(),
+} as IRecordNormalizingService;
+
+export const recordToSchemaMappingService = {
+  init: jest.fn(),
+  get: jest.fn(),
+} as IRecordToSchemaMappingService;
+
+export const schemaCreatorService = {
+  init: jest.fn(),
+  get: jest.fn(),
+  generate: jest.fn(),
+} as ISchemaService;
+
+jest.mock('@common/hooks/useServicesContext.ts', () => ({
+  useServicesContext: () => ({
+    userValuesService,
+    selectedEntriesService,
+    schemaWithDuplicatesService,
+    lookupCacheService,
+    recordNormalizingService,
+    recordToSchemaMappingService,
+    schemaCreatorService,
+  }),
+}));

src/test/__mocks__/providers/ServicesProvider.mock.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, useMemo } from 'react';
 import { ServicesContext } from '@src/contexts';
 
 export const userValuesService = {
@@ -45,19 +45,18 @@ export const schemaCreatorService = {
 } as ISchemaService;
 
 export const MockServicesProvider = ({ children }: { children: ReactNode }) => {
-  return (
-    <ServicesContext.Provider
-      value={{
-        userValuesService,
-        selectedEntriesService,
-        schemaWithDuplicatesService,
-        lookupCacheService,
-        recordNormalizingService,
-        recordToSchemaMappingService,
-        schemaCreatorService,
-      }}
-    >
-      {children}
-    </ServicesContext.Provider>
+  const servicesValue = useMemo(
+    () => ({
+      userValuesService,
+      selectedEntriesService,
+      schemaWithDuplicatesService,
+      lookupCacheService,
+      recordNormalizingService,
+      recordToSchemaMappingService,
+      schemaCreatorService,
+    }),
+    [],
   );
+
+  return <ServicesContext.Provider value={servicesValue}>{children}</ServicesContext.Provider>;
 };

src/test/__tests__/common/hooks/useConfig.hook.test.ts

@@ -25,10 +25,7 @@ const profiles = [
 const lookupCacheService = jest.fn();
 const commonStatusService = jest.fn();
 
-jest.mock('recoil', () => ({
-  useRecoilState: jest.fn(),
-  useSetRecoilState: jest.fn(),
-}));
+jest.mock('recoil');
 jest.mock('@common/services/schema');
 jest.mock('@common/hooks/useLookupCache.hook', () => ({
   useLookupCacheService: () => lookupCacheService,
@@ -66,6 +63,11 @@ jest.mock('@common/helpers/record.helper', () => ({
   getRecordTitle: jest.fn(),
   getPrimaryEntitiesFromRecord: jest.fn(),
 }));
+jest.mock('@common/hooks/useProcessedRecordAndSchema.hook', () => ({
+  useProcessedRecordAndSchema: () => ({
+    getProcessedRecordAndSchema: jest.fn(),
+  }),
+}));
 
 describe('useConfig', () => {
   const setProfiles = jest.fn();