QF-1276 full search (#2252)

Full search
quran · Dec 1, 2024 · 4a72b65 · 4a72b65
1 parent 6b8bd07
commit 4a72b65
Show file tree

Hide file tree

Showing 23 changed files with 244 additions and 384 deletions.
diff --git a/src/api.ts b/src/api.ts
@@ -11,7 +11,6 @@ import {
   makeAudioTimestampsUrl,
   makeChapterAudioDataUrl,
   makeAvailableRecitersUrl,
-  makeSearchResultsUrl,
   makeTranslationsInfoUrl,
   makeTranslationsUrl,
   makeVersesUrl,
@@ -31,10 +30,9 @@ import {
 } from '@/utils/apiPaths';
 import generateSignature from '@/utils/auth/signature';
 import { isStaticBuild } from '@/utils/build';
-import { SearchRequest, AdvancedCopyRequest, PagesLookUpRequest } from 'types/ApiRequests';
+import { AdvancedCopyRequest, PagesLookUpRequest } from 'types/ApiRequests';
 import {
   TranslationsResponse,
-  SearchResponse,
   AdvancedCopyRawResultResponse,
   LanguagesResponse,
   RecitersResponse,
@@ -244,15 +242,6 @@ export const getAdvancedCopyRawResult = async (
   params: AdvancedCopyRequest,
 ): Promise<AdvancedCopyRawResultResponse> => fetcher(makeAdvancedCopyUrl(params));
 
-/**
- * Get the search results of a query.
- *
- * @param {SearchRequest} params
- * @returns  {Promise<SearchResponse>}
- */
-export const getSearchResults = async (params: SearchRequest): Promise<SearchResponse> =>
-  fetcher(makeSearchResultsUrl(params));
-
 /**
  * Get the search results of a query.
  *

diff --git a/src/components/CommandBar/CommandBarBody/index.tsx b/src/components/CommandBar/CommandBarBody/index.tsx
@@ -25,7 +25,7 @@ import { areArraysEqual } from '@/utils/array';
 import { logButtonClick, logTextSearchQuery } from '@/utils/eventLogger';
 import { getQuickSearchQuery } from '@/utils/search';
 import { SearchResponse } from 'types/ApiResponses';
-import { SearchNavigationType } from 'types/SearchNavigationResult';
+import { SearchNavigationType } from 'types/Search/SearchNavigationResult';
 
 const NAVIGATE_TO = [
   {

diff --git a/src/components/CommandBar/CommandsList/CommandPrefix/index.tsx b/src/components/CommandBar/CommandsList/CommandPrefix/index.tsx
@@ -8,7 +8,7 @@ import styles from './CommandPrefix.module.scss';
 import DataContext from '@/contexts/DataContext';
 import NavigateIcon from '@/icons/east.svg';
 import { getSearchNavigationResult } from '@/utils/search';
-import { SearchNavigationType } from 'types/SearchNavigationResult';
+import { SearchNavigationType } from 'types/Search/SearchNavigationResult';
 
 interface Props {
   name: string;

diff --git a/src/components/CommandBar/CommandsList/index.tsx b/src/components/CommandBar/CommandsList/index.tsx
@@ -22,7 +22,7 @@ import {
 } from '@/redux/slices/CommandBar/state';
 import { logButtonClick } from '@/utils/eventLogger';
 import { resolveUrlBySearchNavigationType } from '@/utils/navigation';
-import { SearchNavigationResult } from 'types/SearchNavigationResult';
+import { SearchNavigationResult } from 'types/Search/SearchNavigationResult';
 
 export interface Command extends SearchNavigationResult {
   group: string;

diff --git a/src/components/Search/NavigationItem/index.tsx b/src/components/Search/NavigationItem/index.tsx
@@ -13,7 +13,7 @@ import { logButtonClick } from '@/utils/eventLogger';
 import { toLocalizedNumber, toLocalizedVerseKey } from '@/utils/locale';
 import { resolveUrlBySearchNavigationType } from '@/utils/navigation';
 import { getSearchNavigationResult } from '@/utils/search';
-import { SearchNavigationResult, SearchNavigationType } from 'types/SearchNavigationResult';
+import { SearchNavigationResult, SearchNavigationType } from 'types/Search/SearchNavigationResult';
 
 interface Props {
   navigation: SearchNavigationResult;
@@ -24,7 +24,7 @@ interface Props {
 const NavigationItem: React.FC<Props> = ({
   navigation,
   isSearchDrawer,
-  service = SearchService.QDC,
+  service = SearchService.KALIMAT,
 }) => {
   const { t, lang } = useTranslation('common');
   const chaptersData = useContext(DataContext);

diff --git a/src/components/Search/SearchResults/KalimatNavigationSearchResultItem.tsx b/src/components/Search/SearchResults/KalimatNavigationSearchResultItem.tsx
@@ -8,8 +8,8 @@ import styles from './SearchResultItem.module.scss';
 
 import DataContext from '@/contexts/DataContext';
 import Link from '@/dls/Link/Link';
+import { SearchNavigationType } from '@/types/Search/SearchNavigationResult';
 import SearchService from '@/types/Search/SearchService';
-import { SearchNavigationType } from '@/types/SearchNavigationResult';
 import SearchQuerySource from '@/types/SearchQuerySource';
 import { getChapterData } from '@/utils/chapter';
 import { logButtonClick } from '@/utils/eventLogger';

diff --git a/src/components/Search/SearchResults/SearchResultItem.module.scss b/src/components/Search/SearchResults/SearchResultItem.module.scss
@@ -1,19 +1,3 @@
-.translationName {
-  font-size: var(--font-size-xsmall);
-  opacity: var(--opacity-75);
-}
-
-.translationContainer {
-  margin-block-start: var(--spacing-small);
-  margin-block-end: var(--spacing-small);
-  margin-inline-start: 0;
-  margin-inline-end: 0;
-  em {
-    font-weight: var(--font-weight-semibold);
-    text-decoration: underline;
-  }
-}
-
 .container {
   text-decoration: none;
   border-block-end: 1px solid var(--color-borders-hairline);
@@ -30,11 +14,15 @@
 .quranTextResult {
   font-size: var(--font-size-xlarge);
   line-height: var(--line-height-large);
-  direction: rtl;
   padding-block-start: var(--spacing-micro);
   padding-block-end: var(--spacing-micro);
   padding-inline-start: var(--spacing-micro);
   padding-inline-end: var(--spacing-micro);
+
+  em {
+    font-weight: var(--font-weight-semibold);
+    text-decoration: underline;
+  }
 }
 
 .verseKey {

diff --git a/src/components/Search/SearchResults/SearchResultItem.tsx b/src/components/Search/SearchResults/SearchResultItem.tsx
@@ -1,42 +1,42 @@
-/* eslint-disable react/no-danger */
-
-import React, { useMemo } from 'react';
+import React from 'react';
 
 import useTranslation from 'next-translate/useTranslation';
 
+import KalimatNavigationSearchResultItem from './KalimatNavigationSearchResultItem';
 import styles from './SearchResultItem.module.scss';
 
-import Link from '@/dls/Link/Link';
-import QuranWord from '@/dls/QuranWord/QuranWord';
-import useGetChaptersData from '@/hooks/useGetChaptersData';
+import Button from '@/dls/Button/Button';
+import { SearchNavigationType } from '@/types/Search/SearchNavigationResult';
 import SearchService from '@/types/Search/SearchService';
+import SearchVerseItem from '@/types/Search/SearchVerseItem';
 import SearchQuerySource from '@/types/SearchQuerySource';
-import { getChapterData } from '@/utils/chapter';
 import { logButtonClick } from '@/utils/eventLogger';
-import { toLocalizedVerseKey } from '@/utils/locale';
-import { getChapterWithStartingVerseUrl } from '@/utils/navigation';
-import { getChapterNumberFromKey } from '@/utils/verse';
-import Verse from 'types/Verse';
+import { toLocalizedNumber, toLocalizedVerseKey } from '@/utils/locale';
+import { resolveUrlBySearchNavigationType } from '@/utils/navigation';
 
 interface Props {
-  result: Verse;
+  result: SearchVerseItem;
   source: SearchQuerySource;
   service?: SearchService;
 }
 
-const SearchResultItem: React.FC<Props> = ({ result, source, service = SearchService.QDC }) => {
+const SearchResultItem: React.FC<Props> = ({ result, source, service = SearchService.KALIMAT }) => {
   const { lang } = useTranslation('quran-reader');
-  const localizedVerseKey = useMemo(
-    () => toLocalizedVerseKey(result.verseKey, lang),
-    [lang, result.verseKey],
-  );
+  const url = resolveUrlBySearchNavigationType(result.resultType, result.key, true);
 
-  const chaptersData = useGetChaptersData(lang);
+  const getKalimatResultSuffix = () => {
+    if (result.resultType === SearchNavigationType.SURAH) {
+      return `(${toLocalizedNumber(Number(result.key), lang)})`;
+    }
 
-  if (!chaptersData) return null;
+    if (result.resultType === SearchNavigationType.AYAH) {
+      return `(${toLocalizedVerseKey(result.key as string, lang)})`;
+    }
+
+    return undefined;
+  };
 
-  const chapterNumber = getChapterNumberFromKey(result.verseKey);
-  const chapterData = getChapterData(chaptersData, chapterNumber.toString());
+  const suffix = getKalimatResultSuffix();
 
   const onResultItemClicked = () => {
     logButtonClick(`search_result_item`, {
@@ -48,35 +48,20 @@ const SearchResultItem: React.FC<Props> = ({ result, source, service = SearchSer
   return (
     <div className={styles.container}>
       <div className={styles.itemContainer}>
-        <Link
-          className={styles.verseKey}
-          href={getChapterWithStartingVerseUrl(result.verseKey)}
-          onClick={onResultItemClicked}
-        >
-          {chapterData.transliteratedName} {localizedVerseKey}
-        </Link>
-        <div className={styles.quranTextContainer}>
-          <div className={styles.quranTextResult} translate="no">
-            {result.words.map((word, index) => {
-              return (
-                <QuranWord
-                  isHighlighted={!!word.highlight}
-                  key={`${result.verseKey}:${index + 1}`}
-                  word={word}
-                  isWordByWordAllowed={false}
-                  isAudioHighlightingAllowed={false}
-                />
-              );
-            })}
-          </div>
+        <div className={styles.quranTextResult} translate="no">
+          {result.resultType === SearchNavigationType.AYAH ? (
+            <KalimatNavigationSearchResultItem
+              key={result.key}
+              name={result.name}
+              resultKey={result.key}
+              source={source}
+            />
+          ) : (
+            <Button onClick={onResultItemClicked} href={url} suffix={suffix}>
+              {result.name}
+            </Button>
+          )}
         </div>
-        {result.translations?.map((translation) => (
-          <div key={translation.resourceId} className={styles.translationContainer}>
-            <div dangerouslySetInnerHTML={{ __html: translation.text }} />
-            {/* eslint-disable-next-line i18next/no-literal-string */}
-            <p className={styles.translationName}> - {translation.resourceName}</p>
-          </div>
-        ))}
       </div>
     </div>
   );

diff --git a/src/components/Search/SearchResults/index.tsx b/src/components/Search/SearchResults/index.tsx
@@ -57,7 +57,7 @@ const SearchResults: React.FC<Props> = ({
         <>
           {searchResult.result.verses.map((result) => (
             <SearchResultItem
-              key={result.verseKey}
+              key={result.key}
               result={result}
               source={
                 isSearchDrawer ? SearchQuerySource.SearchDrawer : SearchQuerySource.SearchPage

diff --git a/src/components/TarteelVoiceSearch/BodyContainer/SearchResults.tsx b/src/components/TarteelVoiceSearch/BodyContainer/SearchResults.tsx
@@ -6,7 +6,7 @@ import { useSelector } from 'react-redux';
 
 import CommandsList from '@/components/CommandBar/CommandsList';
 import DataFetcher from '@/components/DataFetcher';
-import SearchResultItem from '@/components/Search/SearchResults/SearchResultItem';
+import TarteelSearchResultItem from '@/components/TarteelVoiceSearch/TarteelSearchResultItem';
 import { selectSelectedTranslations } from '@/redux/slices/QuranReader/translations';
 import SearchService from '@/types/Search/SearchService';
 import SearchQuerySource from '@/types/SearchQuerySource';
@@ -15,7 +15,7 @@ import { areArraysEqual } from '@/utils/array';
 import { toLocalizedVerseKey } from '@/utils/locale';
 import { truncateString } from '@/utils/string';
 import { VersesResponse } from 'types/ApiResponses';
-import { SearchNavigationType } from 'types/SearchNavigationResult';
+import { SearchNavigationType } from 'types/Search/SearchNavigationResult';
 import SearchResult from 'types/Tarteel/SearchResult';
 
 interface Props {
@@ -76,7 +76,7 @@ const SearchResults: React.FC<Props> = ({ searchResult, isCommandBar }) => {
       return (
         <>
           {data.verses.map((verse) => (
-            <SearchResultItem
+            <TarteelSearchResultItem
               key={verse.verseKey}
               result={verse}
               source={SearchQuerySource.Tarteel}

diff --git a/...components/TarteelVoiceSearch/TarteelSearchResultItem/TarteelSearchResultItem.module.scss b/...components/TarteelVoiceSearch/TarteelSearchResultItem/TarteelSearchResultItem.module.scss
@@ -0,0 +1,45 @@
+.translationName {
+  font-size: var(--font-size-xsmall);
+  opacity: var(--opacity-75);
+}
+
+.translationContainer {
+  margin-block-start: var(--spacing-small);
+  margin-block-end: var(--spacing-small);
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  em {
+    font-weight: var(--font-weight-semibold);
+    text-decoration: underline;
+  }
+}
+
+.container {
+  text-decoration: none;
+  border-block-end: 1px solid var(--color-borders-hairline);
+  padding-block: var(--spacing-medium);
+  margin-block-end: var(--spacing-xsmall);
+}
+
+.itemContainer {
+  border-radius: var(--border-radius-default);
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+}
+
+.quranTextResult {
+  font-size: var(--font-size-xlarge);
+  line-height: var(--line-height-large);
+  direction: rtl;
+  padding-block-start: var(--spacing-micro);
+  padding-block-end: var(--spacing-micro);
+  padding-inline-start: var(--spacing-micro);
+  padding-inline-end: var(--spacing-micro);
+}
+
+.verseKey {
+  color: var(--color-success-medium);
+  display: block;
+  margin-block-end: var(--spacing-medium);
+  font-weight: var(--font-weight-bold);
+}