PR cleaup

src/components/Navbar/SearchDrawer/SearchDrawer.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable react-func/max-lines-per-function */
 /* eslint-disable max-lines */
 /* eslint-disable react/no-multi-comp */
-import React, { RefObject, useCallback, useEffect, useState } from 'react';
+import React, { RefObject, useEffect, useState } from 'react';
 
 import dynamic from 'next/dynamic';
+import useTranslation from 'next-translate/useTranslation';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 
 import SearchDrawerHeader from './Header';
@@ -17,7 +18,6 @@ import { selectSelectedTranslations } from '@/redux/slices/QuranReader/translati
 import { selectIsSearchDrawerVoiceFlowStarted } from '@/redux/slices/voiceSearch';
 import SearchQuerySource from '@/types/SearchQuerySource';
 import { areArraysEqual } from '@/utils/array';
-import { getLocaleCookie } from '@/utils/cookies';
 import { logButtonClick } from '@/utils/eventLogger';
 import { addToSearchHistory, searchGetResults } from '@/utils/search';
 import { SearchResponse } from 'types/ApiResponses';
@@ -39,6 +39,7 @@ const PAGE_SIZE = 10;
 const DEBOUNCING_PERIOD_MS = 1000;
 
 const SearchDrawer: React.FC = () => {
+  const { lang } = useTranslation();
   const selectedTranslations = useSelector(selectSelectedTranslations, areArraysEqual);
   const [focusInput, searchInputRef]: [() => void, RefObject<HTMLInputElement>] = useFocus();
   const [searchQuery, setSearchQuery] = useState<string>('');
@@ -57,37 +58,23 @@ const SearchDrawer: React.FC = () => {
     }
   }, [isOpen, focusInput]);
 
-  /**
-   * Call BE to fetch the results using the passed filters.
-   *
-   * @param {string} query
-   * @param {number} page
-   */
-  const getResults = useCallback(
-    (query: string, page: number) => {
+  useEffect(() => {
+    // only when the search query has a value we call the API.
+    if (debouncedSearchQuery) {
+      addToSearchHistory(dispatch, debouncedSearchQuery, SearchQuerySource.SearchDrawer);
       searchGetResults(
         SearchQuerySource.SearchDrawer,
-        query,
-        page,
+        debouncedSearchQuery,
+        FIRST_PAGE_NUMBER,
         PAGE_SIZE,
         setIsSearching,
         setHasError,
         setSearchResult,
-        getLocaleCookie(),
+        lang,
         selectedTranslations?.length && selectedTranslations.join(','),
       );
-    },
-    [selectedTranslations],
-  );
-
-  useEffect(() => {
-    // only when the search query has a value we call the API.
-    if (debouncedSearchQuery) {
-      addToSearchHistory(dispatch, debouncedSearchQuery, SearchQuerySource.SearchDrawer);
-
-      getResults(debouncedSearchQuery, FIRST_PAGE_NUMBER);
     }
-  }, [debouncedSearchQuery, selectedTranslations, dispatch, getResults]);
+  }, [debouncedSearchQuery, selectedTranslations, dispatch, lang]);
 
   const resetQueryAndResults = () => {
     logButtonClick('search_drawer_clear_input');

src/utils/cookies.ts

@@ -1,21 +1,9 @@
-import Cookies from 'js-cookie';
-
-const NEXT_LOCALE = 'NEXT_LOCALE';
 const LOCALE_COOKIE_PERSISTENCE_PERIOD_MS = 86400000000000; // maximum milliseconds-since-the-epoch value https://stackoverflow.com/a/56980560/1931451
 
 // eslint-disable-next-line import/prefer-default-export
 export const setLocaleCookie = (newLocale: string) => {
   const date = new Date();
   date.setTime(LOCALE_COOKIE_PERSISTENCE_PERIOD_MS);
   // eslint-disable-next-line i18next/no-literal-string
-  document.cookie = `${NEXT_LOCALE}=${newLocale};expires=${date.toUTCString()};path=/`;
-};
-
-export const getLocaleCookie = () => {
-  const value = Cookies.get(NEXT_LOCALE);
-  if (!value) {
-    return null;
-  }
-
-  return value;
+  document.cookie = `NEXT_LOCALE=${newLocale};expires=${date.toUTCString()};path=/`;
 };