migrate search store

folio-org · Dec 6, 2024 · 1baf4bc · 1baf4bc
1 parent 02d7928
commit 1baf4bc
Show file tree

Hide file tree

Showing 35 changed files with 361 additions and 354 deletions.
diff --git a/src/common/hooks/useComplexLookupSearchResults.ts b/src/common/hooks/useComplexLookupSearchResults.ts
@@ -1,19 +1,17 @@
 import { useCallback, useMemo } from 'react';
-import { useRecoilValue } from 'recoil';
 import { useIntl } from 'react-intl';
 import { type Row } from '@components/Table';
 import { useSearchContext } from '@common/hooks/useSearchContext';
 import { ComplexLookupSearchResultsProps } from '@components/ComplexLookupField/ComplexLookupSearchResults';
-import state from '@state';
+import { useSearchState } from '@src/store';
 
 export const useComplexLookupSearchResults = ({
   onTitleClick,
   tableConfig,
   searchResultsFormatter,
 }: ComplexLookupSearchResultsProps) => {
   const { onAssignRecord } = useSearchContext();
-  const data = useRecoilValue(state.search.data);
-  const sourceData = useRecoilValue(state.search.sourceData);
+  const { data, sourceData } = useSearchState();
   const { formatMessage } = useIntl();
 
   const applyActionItems = useCallback(

diff --git a/src/common/hooks/useFetchSearchData.ts b/src/common/hooks/useFetchSearchData.ts
@@ -1,14 +1,12 @@
 import { useCallback } from 'react';
-import { useSetRecoilState, useRecoilState, useResetRecoilState } from 'recoil';
 import { getByIdentifier } from '@common/api/search.api';
 import { SearchIdentifiers, SearchSegment } from '@common/constants/search.constants';
 import { SearchableIndexQuerySelector } from '@common/constants/complexLookup.constants';
 import { StatusType } from '@common/constants/status.constants';
 import { normalizeQuery } from '@common/helpers/search.helper';
 import { normalizeLccn } from '@common/helpers/validations.helper';
 import { UserNotificationFactory } from '@common/services/userNotification';
-import { useLoadingState, useStatusState } from '@src/store';
-import state from '@state';
+import { useLoadingState, useSearchState, useStatusState } from '@src/store';
 import { useSearchContext } from './useSearchContext';
 
 export const useFetchSearchData = () => {
@@ -26,10 +24,7 @@ export const useFetchSearchData = () => {
     precedingRecordsCount,
   } = useSearchContext();
   const { setIsLoading } = useLoadingState();
-  const setMessage = useSetRecoilState(state.search.message);
-  const [data, setData] = useRecoilState(state.search.data);
-  const resetData = useResetRecoilState(state.search.data);
-  const setPageMetadata = useSetRecoilState(state.search.pageMetadata);
+  const { setMessage, data, setData, resetData, setPageMetadata } = useSearchState();
   const { addStatusMessage, resetStatusMessages } = useStatusState();
 
   const validateAndNormalizeQuery = useCallback(

diff --git a/src/common/hooks/useLoadSearchResults.ts b/src/common/hooks/useLoadSearchResults.ts
@@ -1,23 +1,17 @@
 import { useEffect, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { useRecoilState, useResetRecoilState, useSetRecoilState } from 'recoil';
 import { SearchQueryParams } from '@common/constants/routes.constants';
 import { SEARCH_RESULTS_LIMIT, SearchIdentifiers } from '@common/constants/search.constants';
-import { useLoadingState } from '@src/store';
-import state from '@state';
+import { useLoadingState, useSearchState } from '@src/store';
 import { useSearchContext } from './useSearchContext';
 
 export const useLoadSearchResults = (
   fetchData: ({ query, searchBy, offset, selectedSegment, baseQuerySelector }: FetchDataParams) => Promise<void>,
 ) => {
   const { hasSearchParams, defaultSearchBy, defaultQuery, getSearchSourceData, getSearchFacetsData } =
     useSearchContext();
-  const setData = useSetRecoilState(state.search.data);
-  const setSearchBy = useSetRecoilState(state.search.index);
   const { setIsLoading } = useLoadingState();
-  const setQuery = useSetRecoilState(state.search.query);
-  const [forceRefresh, setForceRefresh] = useRecoilState(state.search.forceRefresh);
-  const resetFacetsData = useResetRecoilState(state.search.facetsData);
+  const { setQuery, setData, setSearchBy, forceRefresh, setForceRefresh, resetFacetsData } = useSearchState();
   const [searchParams] = useSearchParams();
   const queryParam = searchParams.get(SearchQueryParams.Query);
   const searchByParam = searchParams.get(SearchQueryParams.SearchBy);

diff --git a/src/common/hooks/useNavigateToEditPage.ts b/src/common/hooks/useNavigateToEditPage.ts
@@ -1,11 +1,10 @@
 import { ROUTES, QueryParams } from '@common/constants/routes.constants';
-import state from '@state';
+import { useSearchState } from '@src/store';
 import { useNavigate } from 'react-router-dom';
-import { useRecoilValue } from 'recoil';
 
 export const useNavigateToEditPage = () => {
   const navigate = useNavigate();
-  const navigationState = useRecoilValue(state.search.navigationState);
+  const { navigationState } = useSearchState();
 
   const navigateAsDuplicate = (duplicateId: string) => {
     navigate(`${ROUTES.RESOURCE_CREATE.uri}?${QueryParams.CloneOf}=${duplicateId}`, { state: navigationState });

diff --git a/src/common/hooks/usePagination.ts b/src/common/hooks/usePagination.ts
@@ -1,13 +1,12 @@
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { useRecoilValue } from 'recoil';
 import { SearchQueryParams } from '@common/constants/routes.constants';
-import state from '@state';
+import { useSearchState } from '@src/store';
 
 export const usePagination = (hasSearchParams = true, defaultPageNumber = 0, hasCycledPagination = false) => {
   const [searchParams, setSearchParams] = useSearchParams();
   const offsetSearchParam = searchParams.get(SearchQueryParams.Offset);
-  const pageMetadata = useRecoilValue<PageMetadata>(state.search.pageMetadata);
+  const { pageMetadata } = useSearchState();
   const [currentPageNumber, setCurrentPageNumber] = useState(
     offsetSearchParam ? parseInt(offsetSearchParam) : defaultPageNumber,
   );

diff --git a/src/common/hooks/useSearch.ts b/src/common/hooks/useSearch.ts
@@ -1,15 +1,13 @@
 import { useCallback, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { useSetRecoilState, useRecoilState, useResetRecoilState } from 'recoil';
 import { SearchableIndexQuerySelector } from '@common/constants/complexLookup.constants';
 import { DEFAULT_PAGES_METADATA } from '@common/constants/api.constants';
 import { SearchIdentifiers, SearchSegment } from '@common/constants/search.constants';
 import { generateSearchParamsState } from '@common/helpers/search.helper';
 import { usePagination } from '@common/hooks/usePagination';
 import { useSearchContext } from '@common/hooks/useSearchContext';
 import { useFetchSearchData } from '@common/hooks/useFetchSearchData';
-import { useInputsState, useLoadingState } from '@src/store';
-import state from '@state';
+import { useInputsState, useLoadingState, useSearchState } from '@src/store';
 
 export const useSearch = () => {
   const {
@@ -23,15 +21,24 @@ export const useSearch = () => {
   } = useSearchContext();
   const { setIsLoading } = useLoadingState();
   const { resetPreviewContent } = useInputsState();
-  const [searchBy, setSearchBy] = useRecoilState(state.search.index);
-  const [query, setQuery] = useRecoilState(state.search.query);
-  const [facets, setFacets] = useRecoilState(state.search.limiters);
-  const [message, setMessage] = useRecoilState(state.search.message);
-  const [data, setData] = useRecoilState(state.search.data);
-  const [pageMetadata, setPageMetadata] = useRecoilState(state.search.pageMetadata);
-  const setForceRefreshSearch = useSetRecoilState(state.search.forceRefresh);
-  const [facetsBySegments, setFacetsBySegments] = useRecoilState(state.search.facetsBySegments);
-  const clearFacetsBySegments = useResetRecoilState(state.search.facetsBySegments);
+  const {
+    searchBy,
+    setSearchBy,
+    query,
+    setQuery,
+    facets,
+    setFacets,
+    message,
+    setMessage,
+    data,
+    setData,
+    pageMetadata,
+    setPageMetadata,
+    setForceRefresh: setForceRefreshSearch,
+    facetsBySegments,
+    setFacetsBySegments,
+    resetFacetsBySegments,
+  } = useSearchState();
 
   const { fetchData } = useFetchSearchData();
   const {
@@ -199,8 +206,8 @@ export const useSearch = () => {
 
   // Reset Segments selection on unmount
   useEffect(() => {
-    return clearFacetsBySegments;
-  }, [clearFacetsBySegments]);
+    return resetFacetsBySegments;
+  }, [resetFacetsBySegments]);
 
   return {
     submitSearch,

diff --git a/src/common/hooks/useSearchFilterLookupOptions.ts b/src/common/hooks/useSearchFilterLookupOptions.ts
@@ -1,6 +1,5 @@
-import { useRecoilValue } from 'recoil';
 import { useIntl } from 'react-intl';
-import state from '@state';
+import { useSearchState } from '@src/store';
 
 export const useSearchFilterLookupOptions = ({
   facet,
@@ -10,8 +9,7 @@ export const useSearchFilterLookupOptions = ({
   hasMappedSourceData?: boolean;
   excludedOptions?: string[];
 }) => {
-  const sourceData = useRecoilValue(state.search.sourceData);
-  const facetsData = useRecoilValue(state.search.facetsData);
+  const { sourceData, facetsData } = useSearchState();
   const { formatMessage } = useIntl();
 
   const facetValues = facet && facetsData ? facetsData?.[facet]?.values : undefined;

diff --git a/src/common/hooks/useSearchFilters.ts b/src/common/hooks/useSearchFilters.ts
@@ -1,20 +1,19 @@
 import { ChangeEvent } from 'react';
-import { useRecoilState } from 'recoil';
 import { SearchLimiterNames } from '@common/constants/search.constants';
-import state from '@state';
+import { useSearchState } from '@src/store';
 
 export const useSearchFilters = () => {
-  const [limiters, setLimiters] = useRecoilState(state.search.limiters);
+  const { facets, setFacets } = useSearchState();
 
   const onChangeLimiters = ({ target: { id, name } }: ChangeEvent<HTMLInputElement>) => {
-    setLimiters(prev => ({
+    setFacets(prev => ({
       ...prev,
       [name]: id,
     }));
   };
 
   const onChangeLimitersMulti = ({ target: { id, name } }: ChangeEvent<HTMLInputElement>) => {
-    setLimiters(prev => {
+    setFacets(prev => {
       const initialLimiters = (prev[name as SearchLimiterNames] as any[]) || [];
 
       return {
@@ -29,7 +28,7 @@ export const useSearchFilters = () => {
   const onChange = (_e: ChangeEvent<HTMLInputElement>) => {};
 
   return {
-    limiters,
+    facets,
     onChangeLimiters,
     onChangeLimitersMulti,
     onChange,

diff --git a/src/common/hooks/useSearchFiltersData.ts b/src/common/hooks/useSearchFiltersData.ts
@@ -1,19 +1,15 @@
 import { useEffect } from 'react';
-import { useRecoilState, useResetRecoilState, useSetRecoilState } from 'recoil';
 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 { useStatusState } from '@src/store';
+import { useSearchState, useStatusState } from '@src/store';
 
 const DEFAULT_SEARCH_SOURCE_LIMIT = '50';
 const DEFAULT_SEARCH_FACETS_QUERY = 'id=*';
 
 export const useSearchFiltersData = () => {
-  const [selectedFacetsGroups, setSelectedFacetsGroups] = useRecoilState(state.search.selectedFacetsGroups);
-  const resetSelectedFacetsGroups = useResetRecoilState(state.search.selectedFacetsGroups);
-  const setFacetsData = useSetRecoilState(state.search.facetsData);
-  const setSourceData = useSetRecoilState(state.search.sourceData);
+  const { selectedFacetsGroups, setSelectedFacetsGroups, resetSelectedFacetsGroups, setFacetsData, setSourceData } =
+    useSearchState();
   const { addStatusMessage } = useStatusState();
 
   useEffect(() => {

diff --git a/src/common/hooks/useSearchNavigationState.ts b/src/common/hooks/useSearchNavigationState.ts
@@ -1,17 +1,16 @@
 import { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { useSetRecoilState } from 'recoil';
 import { SearchQueryParams } from '@common/constants/routes.constants';
 import { generateSearchParamsState } from '@common/helpers/search.helper';
-import state from '@state';
+import { useSearchState } from '@src/store';
 
 export const useSearchNavigationState = () => {
   const [searchParams] = useSearchParams();
   const querySearchParam = searchParams.get(SearchQueryParams.Query);
   const searchBySearchParam = searchParams.get(SearchQueryParams.SearchBy);
   const offsetSearchParam = searchParams.get(SearchQueryParams.Offset);
 
-  const setNavigationState = useSetRecoilState(state.search.navigationState);
+  const { setNavigationState } = useSearchState();
 
   useEffect(() => {
     const generatedState = generateSearchParamsState(

diff --git a/src/components/AdvancedSearchModal/AdvancedSearchModal.tsx b/src/components/AdvancedSearchModal/AdvancedSearchModal.tsx
@@ -1,6 +1,5 @@
 import { FC, memo, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { useSetRecoilState } from 'recoil';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Modal } from '@components/Modal';
 import { Input } from '@components/Input';
@@ -12,8 +11,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 { useSearchState, useUIState } from '@src/store';
 import './AdvancedSearchModal.scss';
 
 enum AdvancedSearchInputs {
@@ -31,7 +29,7 @@ export const AdvancedSearchModal: FC<Props> = memo(({ clearValues }) => {
   const [, setSearchParams] = useSearchParams();
   const { formatMessage } = useIntl();
   const { isAdvancedSearchOpen: isOpen, setIsAdvancedSearchOpen: setIsOpen } = useUIState();
-  const setForceRefreshSearch = useSetRecoilState(state.search.forceRefresh);
+  const { setForceRefresh: setForceRefreshSearch } = useSearchState();
   const [rawQuery, setRawQuery] = useState(DEFAULT_ADVANCED_SEARCH_QUERY);
 
   const closeModal = () => {

diff --git a/src/components/Announcement/index.ts b/src/components/Announcement/index.ts
@@ -0,0 +1 @@
+export { Announcement } from './Announcement';
diff --git a/src/components/ComplexLookupField/ModalComplexLookup.tsx b/src/components/ComplexLookupField/ModalComplexLookup.tsx
@@ -1,5 +1,4 @@
 import { FC, memo, useCallback, useEffect } from 'react';
-import { useResetRecoilState, useSetRecoilState } from 'recoil';
 import classNames from 'classnames';
 import { FormattedMessage, FormattedNumber } from 'react-intl';
 import { getSearchResults } from '@common/api/search.api';
@@ -13,13 +12,12 @@ import { useMarcData } from '@common/hooks/useMarcData';
 import { COMPLEX_LOOKUPS_CONFIG } from '@src/configs';
 import { Modal } from '@components/Modal';
 import { Search } from '@components/Search';
+import { useMarcPreviewState, useSearchState, useUIState } from '@src/store';
 import { SearchControlPane } from '@components/SearchControlPane';
-import state from '@state';
 import { ComplexLookupSearchResults } from './ComplexLookupSearchResults';
 import { MarcPreviewComplexLookup } from './MarcPreviewComplexLookup';
 import { SEARCH_RESULTS_TABLE_CONFIG } from './configs';
 import './ModalComplexLookup.scss';
-import { useMarcPreviewState, useUIState } from '@src/store';
 
 interface ModalComplexLookupProps {
   isOpen: boolean;
@@ -51,8 +49,7 @@ 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 setSearchQuery = useSetRecoilState(state.search.query);
-    const clearSearchQuery = useResetRecoilState(state.search.query);
+    const { setQuery: setSearchQuery, resetQuery: clearSearchQuery } = useSearchState();
     const { getFacetsData, getSourceData } = useComplexLookupApi(api, filters);
     const { setIsMarcPreviewOpen } = useUIState();
     const {

diff --git a/src/components/SearchControlPane/SearchControlPane.tsx b/src/components/SearchControlPane/SearchControlPane.tsx
@@ -1,10 +1,9 @@
 import { FC } from 'react';
-import { useRecoilValue } from 'recoil';
 import classNames from 'classnames';
 import { IS_EMBEDDED_MODE } from '@common/constants/build.constants';
 import { useSearchContext } from '@common/hooks/useSearchContext';
 import { SearchSegment } from '@common/constants/search.constants';
-import state from '@state';
+import { useSearchState } from '@src/store';
 import './SearchControlPane.scss';
 
 type SearchControlPaneProps = {
@@ -22,7 +21,7 @@ export const SearchControlPane: FC<SearchControlPaneProps> = ({
   renderCloseButton,
   segmentsConfig,
 }) => {
-  const searchResultsMetadata = useRecoilValue(state.search.pageMetadata);
+  const { pageMetadata: searchResultsMetadata } = useSearchState();
   const { navigationSegment } = useSearchContext();
   const selectedSegment = navigationSegment?.value;
   const isVisibleSubLabel = segmentsConfig

diff --git a/src/components/SearchControls/SearchControls.tsx b/src/components/SearchControls/SearchControls.tsx
@@ -1,6 +1,5 @@
 import { ChangeEvent, FC, FormEventHandler, useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { useRecoilState, useResetRecoilState, useSetRecoilState } from 'recoil';
 import { FormattedMessage, useIntl } from 'react-intl';
 import classNames from 'classnames';
 import { DEFAULT_FACET_BY_SEGMENT, SearchIdentifiers } from '@common/constants/search.constants';
@@ -11,13 +10,12 @@ import { Input } from '@components/Input';
 import { Select } from '@components/Select';
 import { SearchFilters } from '@components/SearchFilters';
 import { Textarea } from '@components/Textarea';
+import { Announcement } from '@components/Announcement';
+import { useSearchState, useUIState } from '@src/store';
 import SearchSegments from './SearchSegments';
-import state from '@state';
 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;
@@ -38,12 +36,17 @@ export const SearchControls: FC<Props> = ({ submitSearch, changeSegment, clearVa
     defaultSearchBy,
     navigationSegment,
   } = useSearchContext();
-  const [searchBy, setSearchBy] = useRecoilState(state.search.index);
-  const [query, setQuery] = useRecoilState(state.search.query);
-  const setMessage = useSetRecoilState(state.search.message);
-  const setNavigationState = useSetRecoilState(state.search.navigationState);
-  const resetControls = useResetRecoilState(state.search.limiters);
-  const setFacetsBySegments = useSetRecoilState(state.search.facetsBySegments);
+
+  const {
+    searchBy,
+    setSearchBy,
+    query,
+    setQuery,
+    setMessage,
+    setNavigationState,
+    resetFacets: resetControls,
+    setFacetsBySegments,
+  } = useSearchState();
   const { setIsAdvancedSearchOpen } = useUIState();
   const [searchParams, setSearchParams] = useSearchParams();
   const [announcementMessage, setAnnouncementMessage] = useState('');