-
- }
- onChange={onSearchQueryChange}
- onClearClicked={onClearClicked}
- inputRef={searchInputRef}
- clearable
- value={searchQuery}
- disabled={isSearching}
- placeholder={t('search.title')}
- fixedWidth={false}
- variant={InputVariant.Main}
- />
-
+
+
- {
+ return (
+
+ );
+ }}
+ fetcher={fetcher}
/>
@@ -245,4 +189,4 @@ export const getStaticProps: GetStaticProps = async ({ locale }) => {
}
};
-export default Search;
+export default SearchPage;
diff --git a/src/redux/slices/CommandBar/persistConfig.ts b/src/redux/slices/CommandBar/persistConfig.ts
index a86f006323..f6fc7a4c05 100644
--- a/src/redux/slices/CommandBar/persistConfig.ts
+++ b/src/redux/slices/CommandBar/persistConfig.ts
@@ -6,7 +6,7 @@ const commandBarPersistConfig = {
key: SliceName.COMMAND_BAR,
storage,
version: 1,
- blacklist: ['isOpen', 'initialSearchQuery'],
+ blacklist: ['isExpanded'],
};
export default commandBarPersistConfig;
diff --git a/src/redux/slices/CommandBar/state.ts b/src/redux/slices/CommandBar/state.ts
index e38751d576..596109ac7e 100644
--- a/src/redux/slices/CommandBar/state.ts
+++ b/src/redux/slices/CommandBar/state.ts
@@ -5,28 +5,18 @@ import SliceName from '@/redux/types/SliceName';
import { SearchNavigationResult } from 'types/Search/SearchNavigationResult';
export type CommandBar = {
- isOpen: boolean;
recentNavigations: SearchNavigationResult[];
- initialSearchQuery: string;
+ isExpanded: boolean;
};
const MAXIMUM_RECENT_NAVIGATIONS = 5;
-const initialState: CommandBar = { isOpen: false, recentNavigations: [], initialSearchQuery: '' };
+const initialState: CommandBar = { recentNavigations: [], isExpanded: false };
export const commandBarSlice = createSlice({
name: SliceName.COMMAND_BAR,
initialState,
reducers: {
- setIsOpen: (state: CommandBar, action: PayloadAction
) => ({
- ...state,
- isOpen: action.payload,
- }),
- toggleIsOpen: (state: CommandBar) => ({
- ...state,
- isOpen: !state.isOpen,
- initialSearchQuery: '', // we reset the initial search query when the command bar is toggled
- }),
addRecentNavigation: (state: CommandBar, action: PayloadAction) => {
let newRecentNavigations = [...state.recentNavigations];
const newRecentNavigation = action.payload;
@@ -55,22 +45,24 @@ export const commandBarSlice = createSlice({
recentNavigations: newRecentNavigations,
};
},
- setInitialSearchQuery: (state: CommandBar, action: PayloadAction) => ({
- ...state,
- initialSearchQuery: action.payload,
- }),
+ toggleIsExpanded: (state: CommandBar) => {
+ return {
+ ...state,
+ isExpanded: !state.isExpanded,
+ };
+ },
+ setIsExpanded: (state: CommandBar, action: PayloadAction) => {
+ return {
+ ...state,
+ isExpanded: action.payload,
+ };
+ },
},
});
-export const {
- setIsOpen,
- toggleIsOpen,
- addRecentNavigation,
- removeRecentNavigation,
- setInitialSearchQuery,
-} = commandBarSlice.actions;
+export const { addRecentNavigation, removeRecentNavigation, toggleIsExpanded, setIsExpanded } =
+ commandBarSlice.actions;
-export const selectCommandBarIsOpen = (state: RootState) => state.commandBar.isOpen;
export const selectRecentNavigations = (state: RootState) => state.commandBar.recentNavigations;
-export const selectInitialSearchQuery = (state: RootState) => state.commandBar.initialSearchQuery;
+export const selectIsExpanded = (state: RootState) => state.commandBar.isExpanded;
export default commandBarSlice.reducer;
diff --git a/src/redux/slices/navbar.ts b/src/redux/slices/navbar.ts
index 21544ba6f9..541a059004 100644
--- a/src/redux/slices/navbar.ts
+++ b/src/redux/slices/navbar.ts
@@ -43,6 +43,10 @@ export const navbarSlice = createSlice({
...state,
isSearchDrawerOpen: action.payload,
}),
+ toggleSearchDrawerIsOpen: (state: Navbar) => ({
+ ...state,
+ isSearchDrawerOpen: !state.isSearchDrawerOpen,
+ }),
setIsSettingsDrawerOpen: (state: Navbar, action: PayloadAction) => ({
...state,
isSettingsDrawerOpen: action.payload,
@@ -60,8 +64,10 @@ export const {
setIsSearchDrawerOpen,
setIsSettingsDrawerOpen,
setSettingsView,
+ toggleSearchDrawerIsOpen,
} = navbarSlice.actions;
export const selectNavbar = (state: RootState) => state.navbar;
+export const selectIsSearchDrawerOpen = (state: RootState) => state.navbar.isSearchDrawerOpen;
export default navbarSlice.reducer;
diff --git a/src/redux/slices/voiceSearch.ts b/src/redux/slices/voiceSearch.ts
index fc33a69ad0..0f74219778 100644
--- a/src/redux/slices/voiceSearch.ts
+++ b/src/redux/slices/voiceSearch.ts
@@ -26,10 +26,6 @@ export const voiceSearchSlice = createSlice({
...state,
isSearchDrawerVoiceFlowStarted: false,
}),
- stopCommandBarVoiceFlow: (state) => ({
- ...state,
- isCommandBardVoiceFlowStarted: false,
- }),
toggleIsCommandBarVoiceFlowStarted: (state) => ({
...state,
isCommandBardVoiceFlowStarted: !state.isCommandBardVoiceFlowStarted,
@@ -45,6 +41,5 @@ export const {
toggleIsSearchDrawerVoiceFlowStarted,
toggleIsCommandBarVoiceFlowStarted,
stopSearchDrawerVoiceFlow,
- stopCommandBarVoiceFlow,
} = voiceSearchSlice.actions;
export default voiceSearchSlice.reducer;
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 0617782309..a374613897 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -38,6 +38,7 @@
--border-radius-default: 0.25rem;
--border-radius-rounded: 0.5rem;
--border-radius-circle: 50%;
+ --border-radius-circle-small: 30px;
--opacity-10: 10%;
--opacity-30: 30%;
diff --git a/src/styles/themes/_dark.scss b/src/styles/themes/_dark.scss
index e723347e08..0dcf2cdce9 100644
--- a/src/styles/themes/_dark.scss
+++ b/src/styles/themes/_dark.scss
@@ -57,6 +57,7 @@
--shadow-jumbo: 0 30px 60px var(--shade-9);
--shadow-hover: 0 30px 60px var(--shade-9);
--shadow-sticky: 0 12px 10px -10px var(--shade-9);
+ --shadow-strong: 0px 4px 4px 0px rgba(0, 0, 0, 0.5);
font-palette: --Dark;
// scrollbar styles
diff --git a/src/styles/themes/_light.scss b/src/styles/themes/_light.scss
index 15d4000dea..9c2c0a3383 100644
--- a/src/styles/themes/_light.scss
+++ b/src/styles/themes/_light.scss
@@ -49,6 +49,7 @@
--color-borders-hairline: rgb(235, 238, 240);
--color-highlight: #79ffe1;
+ --color-highlight-dark: #22a5ad;
--shadow-small: 0px 2px 4px rgba(0, 0, 0, 0.1);
--shadow-normal: 0px 4px 8px rgba(0, 0, 0, 0.12);
@@ -57,6 +58,7 @@
--shadow-jumbo: 0 30px 60px rgba(0, 0, 0, 0.12);
--shadow-hover: 0 30px 60px rgba(0, 0, 0, 0.12);
--shadow-sticky: 0 12px 10px -10px rgba(0, 0, 0, 0.12);
+ --shadow-strong: 0px 4px 4px 0px rgba(0, 0, 0, 0.5);
font-palette: --Light;
// scrollbar styles
@@ -64,4 +66,4 @@
--scrollbar-thumb: var(--shade-4);
--scrollbar-thumb-hover: var(--shade-6);
--scrollbar-thumb-active: var(--shade-7);
-}
\ No newline at end of file
+}
diff --git a/src/styles/themes/_sepia.scss b/src/styles/themes/_sepia.scss
index 222864d62a..43dd9bdba5 100644
--- a/src/styles/themes/_sepia.scss
+++ b/src/styles/themes/_sepia.scss
@@ -57,6 +57,7 @@
--shadow-jumbo: 0 30px 60px rgba(0, 0, 0, 0.12);
--shadow-hover: 0 30px 60px rgba(0, 0, 0, 0.12);
--shadow-sticky: 0 12px 10px -10px rgba(0, 0, 0, 0.12);
+ --shadow-strong: 0px 4px 4px 0px rgba(0, 0, 0, 0.5);
font-palette: --Sepia;
// scrollbar styles
@@ -64,4 +65,4 @@
--scrollbar-thumb: #f0cd8c;
--scrollbar-thumb-hover: #d4b478;
--scrollbar-thumb-active: #8d774e;
-}
\ No newline at end of file
+}
diff --git a/src/utils/search.ts b/src/utils/search.ts
index ceaed36148..ed22989db1 100644
--- a/src/utils/search.ts
+++ b/src/utils/search.ts
@@ -6,18 +6,15 @@ import groupBy from 'lodash/groupBy';
import { Translate } from 'next-translate';
import { AnyAction } from 'redux';
-import { logEmptySearchResults, logSearchResults, logTextSearchQuery } from './eventLogger';
+import { logTextSearchQuery } from './eventLogger';
-import { getNewSearchResults } from '@/api';
import { addSearchHistoryRecord } from '@/redux/slices/Search/search';
-import { SearchResponse } from '@/types/ApiResponses';
import AvailableTranslation from '@/types/AvailableTranslation';
import ChaptersData from '@/types/ChaptersData';
import { SearchMode, SearchRequestParams } from '@/types/Search/SearchRequestParams';
-import SearchService from '@/types/Search/SearchService';
import SearchQuerySource from '@/types/SearchQuerySource';
import { getChapterData } from '@/utils/chapter';
-import { toLocalizedNumber } from '@/utils/locale';
+import { toLocalizedNumber, toLocalizedVerseKey } from '@/utils/locale';
import { getVerseAndChapterNumbersFromKey, getVerseNumberRangeFromKey } from '@/utils/verse';
import { SearchNavigationResult, SearchNavigationType } from 'types/Search/SearchNavigationResult';
@@ -115,14 +112,15 @@ export const getSearchNavigationResult = (
result: SearchNavigationResult,
t: Translate,
locale: string,
- shouldUseOriginalAyahName = false,
): SearchNavigationResult & { name: string } => {
const { key, resultType } = result;
+ const resultSuffix = getResultSuffix(resultType, key as string, locale, chaptersData);
+ let returnedResult = null;
if (resultType === SearchNavigationType.JUZ) {
const juzNumber = idToJuzNumber(key as string);
- return {
+ returnedResult = {
name: `${t('common:juz')} ${toLocalizedNumber(Number(juzNumber), locale)}`,
key: juzNumber,
resultType: SearchNavigationType.JUZ,
@@ -132,16 +130,32 @@ export const getSearchNavigationResult = (
if (resultType === SearchNavigationType.PAGE) {
const pageNumber = idToPageNumber(key as string);
- return {
+ returnedResult = {
name: `${t('common:page')} ${toLocalizedNumber(Number(pageNumber), locale)}`,
key: pageNumber,
resultType: SearchNavigationType.PAGE,
};
}
+ if (resultType === SearchNavigationType.RUB_EL_HIZB) {
+ returnedResult = {
+ name: `${t('common:rub')} ${toLocalizedNumber(Number(key), locale)}`,
+ key,
+ resultType: SearchNavigationType.RUB_EL_HIZB,
+ };
+ }
+
+ if (resultType === SearchNavigationType.HIZB) {
+ returnedResult = {
+ name: `${t('common:hizb')} ${toLocalizedNumber(Number(key), locale)}`,
+ key,
+ resultType: SearchNavigationType.HIZB,
+ };
+ }
+
if (resultType === SearchNavigationType.RANGE) {
const { surah, from, to } = getVerseNumberRangeFromKey(key as string);
- return {
+ returnedResult = {
name: `${t('common:surah')} ${
getChapterData(chaptersData, `${surah}`).transliteratedName
} ${t('common:ayah')} ${toLocalizedNumber(from, locale)} - ${toLocalizedNumber(to, locale)}`,
@@ -151,91 +165,24 @@ export const getSearchNavigationResult = (
}
if (resultType === SearchNavigationType.AYAH) {
- if (shouldUseOriginalAyahName) {
- return {
- name: `${result.name} - (${key})`,
- key,
- resultType: SearchNavigationType.AYAH,
- };
- }
- const [surahNumber, ayahNumber] = getVerseAndChapterNumbersFromKey(key as string);
- return {
- name: `${t('common:surah')} ${
- getChapterData(chaptersData, `${surahNumber}`).transliteratedName
- }, ${t('common:ayah')} ${toLocalizedNumber(Number(ayahNumber), locale)}`,
+ returnedResult = {
+ name: result.name,
key,
resultType: SearchNavigationType.AYAH,
};
}
- // when it's a chapter
- return {
- name: `${t('common:surah')} ${getChapterData(chaptersData, key as string).transliteratedName}`,
- key,
- resultType: SearchNavigationType.SURAH,
- };
-};
-
-/**
- * Call Kalimat API to fetch the search results using the passed filters.
- *
- * @param {SearchQuerySource} source
- * @param {string} query
- * @param {number} page
- * @param {number} pageSize
- * @param {(arg: boolean) => void} setIsSearching
- * @param {(arg: boolean) => void} setHasError
- * @param {(data: SearchResponse) => void} setSearchResult
- * @param {string} languages
- */
-export const searchGetResults = (
- source: SearchQuerySource,
- query: string,
- page: number,
- pageSize: number,
- setIsSearching: (arg: boolean) => void,
- setHasError: (arg: boolean) => void,
- setSearchResult: (data: SearchResponse) => void,
- languages?: string,
-) => {
- setIsSearching(true);
- logTextSearchQuery(query, source);
- getNewSearchResults({
- mode: SearchMode.Advanced,
- query,
- size: pageSize,
- filterLanguages: languages,
- page,
- exactMatchesOnly: 0,
- getText: 1,
- highlight: 1,
- })
- .then(async (kalimatResponse) => {
- setSearchResult({
- ...kalimatResponse,
- service: SearchService.KALIMAT,
- });
+ if (resultType === SearchNavigationType.SURAH) {
+ returnedResult = {
+ name: `${t('common:surah')} ${
+ getChapterData(chaptersData, key as string).transliteratedName
+ }`,
+ key,
+ resultType: SearchNavigationType.SURAH,
+ };
+ }
- if (kalimatResponse.pagination.totalRecords === 0) {
- logEmptySearchResults({
- query,
- source,
- service: SearchService.KALIMAT,
- });
- } else {
- logSearchResults({
- query,
- source,
- service: SearchService.KALIMAT,
- });
- }
- })
- .catch(() => {
- setHasError(true);
- })
- .finally(() => {
- setIsSearching(false);
- });
+ return { ...returnedResult, name: `${returnedResult.name} ${resultSuffix}` };
};
/**
@@ -268,3 +215,65 @@ export const getQuickSearchQuery = (query: string): SearchRequestParams}
+ */
+export const getAdvancedSearchQuery = (
+ query: string,
+ page: number,
+ pageSize: number,
+): SearchRequestParams => {
+ return {
+ mode: SearchMode.Advanced,
+ query,
+ size: pageSize,
+ page,
+ exactMatchesOnly: 0,
+ getText: 1,
+ highlight: 1,
+ };
+};
+
+export const getResultType = (result: SearchNavigationResult) => {
+ const { resultType, isArabic, isTransliteration } = result;
+ if (resultType === SearchNavigationType.AYAH) {
+ if (isArabic) {
+ return SearchNavigationType.AYAH;
+ }
+ if (isTransliteration) {
+ return SearchNavigationType.TRANSLITERATION;
+ }
+ return SearchNavigationType.TRANSLATION;
+ }
+ return resultType;
+};
+
+export const getResultSuffix = (
+ type: SearchNavigationType,
+ resultKey: string,
+ lang: string,
+ chaptersData: ChaptersData,
+) => {
+ const [surahNumber] = getVerseAndChapterNumbersFromKey(resultKey as string);
+ if (type === SearchNavigationType.SURAH) {
+ return `- ${toLocalizedNumber(Number(surahNumber), lang)}`;
+ }
+
+ if (
+ type === SearchNavigationType.AYAH ||
+ type === SearchNavigationType.TRANSLITERATION ||
+ type === SearchNavigationType.TRANSLATION
+ ) {
+ return `(${
+ getChapterData(chaptersData, `${surahNumber}`).transliteratedName
+ } ${toLocalizedVerseKey(resultKey as string, lang)})`;
+ }
+
+ return '';
+};
diff --git a/types/QueryParam.ts b/types/QueryParam.ts
index b3b2f5a562..f93fbe49f1 100644
--- a/types/QueryParam.ts
+++ b/types/QueryParam.ts
@@ -7,6 +7,7 @@ enum QueryParam {
FLOW = 'flow',
STARTING_VERSE = 'startingVerse',
QUERY = 'query',
+ QUERY_OLD = 'q',
REDIRECT_TO = 'r',
VERSE_TO = 'verseTo',
VERSE_FROM = 'verseFrom',
@@ -23,6 +24,7 @@ enum QueryParam {
ORIENTATION = 'orientation',
VIDEO_ID = 'videoId',
SURAH = 'surah',
+ PAGE = 'page',
}
export default QueryParam;
diff --git a/types/Search/SearchNavigationResult.ts b/types/Search/SearchNavigationResult.ts
index bd3faa3100..50eb5d0107 100644
--- a/types/Search/SearchNavigationResult.ts
+++ b/types/Search/SearchNavigationResult.ts
@@ -2,15 +2,20 @@ export enum SearchNavigationType {
SURAH = 'surah',
JUZ = 'juz',
HIZB = 'hizb',
- AYAH = 'ayah',
RUB_EL_HIZB = 'rub_el_hizb',
SEARCH_PAGE = 'search_page',
PAGE = 'page',
RANGE = 'range',
+ HISTORY = 'history',
+ AYAH = 'ayah',
+ TRANSLITERATION = 'transliteration',
+ TRANSLATION = 'translation',
}
export interface SearchNavigationResult {
resultType: SearchNavigationType;
name: string;
key: number | string;
+ isArabic?: boolean;
+ isTransliteration?: boolean;
}
diff --git a/types/Search/SearchRequestParams.ts b/types/Search/SearchRequestParams.ts
index 1d2daa92b9..61704edd6a 100644
--- a/types/Search/SearchRequestParams.ts
+++ b/types/Search/SearchRequestParams.ts
@@ -11,7 +11,6 @@ interface AdvancedSearchRequestParams {
interface QuickSearchRequestParams {
indexes?: string;
- highlight?: SearchBoolean;
}
export type SearchRequestParams = {
@@ -24,4 +23,5 @@ export type SearchRequestParams = {
fields?: string;
translationFields?: string;
words?: boolean;
+ highlight?: SearchBoolean;
} & (Mode extends SearchMode.Advanced ? AdvancedSearchRequestParams : QuickSearchRequestParams);