From cac19a11288cc8180e8fb0fd47cc1300b806fe6a Mon Sep 17 00:00:00 2001 From: Daniel Valenzuela Date: Fri, 13 Dec 2024 18:41:50 -0300 Subject: [PATCH] feat: implement pills and filter --- src/search-manager/FilterByPublished.tsx | 19 +++++++++---------- src/search-manager/SearchManager.ts | 13 +++++++------ src/search-manager/data/api.ts | 18 ++++++------------ src/search-manager/data/apiHooks.ts | 9 +++++---- 4 files changed, 27 insertions(+), 32 deletions(-) diff --git a/src/search-manager/FilterByPublished.tsx b/src/search-manager/FilterByPublished.tsx index 9f369f18f7..b0d7ee18ec 100644 --- a/src/search-manager/FilterByPublished.tsx +++ b/src/search-manager/FilterByPublished.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { FormattedMessage } from '@edx/frontend-platform/i18n'; import { Badge, Form, @@ -8,7 +7,6 @@ import { } from '@openedx/paragon'; import { FilterList } from '@openedx/paragon/icons'; import SearchFilterWidget from './SearchFilterWidget'; -import messages from './messages'; import { useSearchContext } from './SearchManager'; import { PublishStatus } from './data/api'; @@ -17,16 +15,17 @@ import { PublishStatus } from './data/api'; */ const FilterByPublished: React.FC> = () => { const { - publishedFilter, - setPublishedFilter, + publishStatus, + publishStatusFilter, + setPublishStatusFilter, } = useSearchContext(); const clearFilters = React.useCallback(() => { - setPublishedFilter([]); + setPublishStatusFilter([]); }, []); const toggleFilterMode = React.useCallback((mode: PublishStatus) => { - setPublishedFilter(oldList => { + setPublishStatusFilter(oldList => { if (oldList.includes(mode)) { return oldList.filter(m => m !== mode); } @@ -44,7 +43,7 @@ const FilterByPublished: React.FC> = () => { > = () => { >
Published - {' '}15 + {' '}{publishStatus[PublishStatus.Published] ?? 0}
> = () => { >
Modified since publish - {' '}5 + {' '}{publishStatus[PublishStatus.Modified] ?? 0}
> = () => { >
Never published - {' '}2 + {' '}{publishStatus[PublishStatus.NeverPublished] ?? 0}
diff --git a/src/search-manager/SearchManager.ts b/src/search-manager/SearchManager.ts index bce30f47d7..6fdf5ec744 100644 --- a/src/search-manager/SearchManager.ts +++ b/src/search-manager/SearchManager.ts @@ -27,12 +27,13 @@ export interface SearchContextData { setBlockTypesFilter: React.Dispatch>; problemTypesFilter: string[]; setProblemTypesFilter: React.Dispatch>; - publishedFilter: PublishStatus[]; - setPublishedFilter: React.Dispatch>; + publishStatusFilter: PublishStatus[]; + setPublishStatusFilter: React.Dispatch>; tagsFilter: string[]; setTagsFilter: React.Dispatch>; blockTypes: Record; problemTypes: Record; + publishStatus: Record; extraFilter?: Filter; canClearFilters: boolean; clearFilters: () => void; @@ -105,7 +106,7 @@ export const SearchContextProvider: React.FC<{ const [searchKeywords, setSearchKeywords] = React.useState(''); const [blockTypesFilter, setBlockTypesFilter] = React.useState([]); const [problemTypesFilter, setProblemTypesFilter] = React.useState([]); - const [publishedFilter, setPublishedFilter] = React.useState([]); + const [publishStatusFilter, setPublishStatusFilter] = React.useState([]); const [tagsFilter, setTagsFilter] = React.useState([]); const [usageKey, setUsageKey] = useStateWithUrlSearchParam( '', @@ -170,7 +171,7 @@ export const SearchContextProvider: React.FC<{ searchKeywords, blockTypesFilter, problemTypesFilter, - publishedFilter, + publishStatusFilter, tagsFilter, sort, skipBlockTypeFetch, @@ -186,8 +187,8 @@ export const SearchContextProvider: React.FC<{ setBlockTypesFilter, problemTypesFilter, setProblemTypesFilter, - publishedFilter, - setPublishedFilter, + publishStatusFilter, + setPublishStatusFilter, tagsFilter, setTagsFilter, extraFilter, diff --git a/src/search-manager/data/api.ts b/src/search-manager/data/api.ts index f00a675d24..f1a0f0a288 100644 --- a/src/search-manager/data/api.ts +++ b/src/search-manager/data/api.ts @@ -185,7 +185,7 @@ interface FetchSearchParams { searchKeywords: string, blockTypesFilter?: string[], problemTypesFilter?: string[], - publishedFilter?: PublishStatus[], + publishStatusFilter?: PublishStatus[], /** The full path of tags that each result MUST have, e.g. ["Difficulty > Hard", "Subject > Math"] */ tagsFilter?: string[], extraFilter?: Filter, @@ -201,7 +201,7 @@ export async function fetchSearchResults({ searchKeywords, blockTypesFilter, problemTypesFilter, - publishedFilter, + publishStatusFilter, tagsFilter, extraFilter, sort, @@ -213,6 +213,7 @@ export async function fetchSearchResults({ totalHits: number, blockTypes: Record, problemTypes: Record, + publishStatus: Record, }> { const queries: MultiSearchQuery[] = []; @@ -223,15 +224,7 @@ export async function fetchSearchResults({ const problemTypesFilterFormatted = problemTypesFilter?.length ? [problemTypesFilter.map(pt => `content.problem_types = ${pt}`)] : []; - /* eslint-disable */ - const publishStatusFilterFormatted = publishedFilter?.length ? publishedFilter.map(pt => ( - pt === PublishStatus.Published ? 'modified = last_published' : - pt === PublishStatus.Modified ? 'modified > last_published' : - pt === PublishStatus.NeverPublished ? 'last_published IS NULL' : - 'false' - )) : []; - console.log(publishStatusFilterFormatted) - /* eslint-enable */ + const publishStatusFilterFormatted = publishStatusFilter?.length ? [publishStatusFilter.map(ps => `publish_status = ${ps}`)] : []; const tagsFilterFormatted = formatTagsFilter(tagsFilter); @@ -268,7 +261,7 @@ export async function fetchSearchResults({ if (!skipBlockTypeFetch) { queries.push({ indexUid: indexName, - facets: ['block_type', 'content.problem_types'], + facets: ['block_type', 'content.problem_types', 'publish_status'], filter: [ ...extraFilterFormatted, // We exclude the block type filter here so we get all the other available options for it. @@ -285,6 +278,7 @@ export async function fetchSearchResults({ totalHits: results[0].totalHits ?? results[0].estimatedTotalHits ?? hitLength, blockTypes: results[1]?.facetDistribution?.block_type ?? {}, problemTypes: results[1]?.facetDistribution?.['content.problem_types'] ?? {}, + publishStatus: results[1]?.facetDistribution?.publish_status ?? {}, nextOffset: hitLength === limit ? offset + limit : undefined, }; } diff --git a/src/search-manager/data/apiHooks.ts b/src/search-manager/data/apiHooks.ts index 1e759fb6ac..c2fe73bf7c 100644 --- a/src/search-manager/data/apiHooks.ts +++ b/src/search-manager/data/apiHooks.ts @@ -54,7 +54,7 @@ export const useContentSearchResults = ({ searchKeywords, blockTypesFilter = [], problemTypesFilter = [], - publishedFilter = [], + publishStatusFilter = [], tagsFilter = [], sort = [], skipBlockTypeFetch = false, @@ -71,7 +71,7 @@ export const useContentSearchResults = ({ blockTypesFilter?: string[]; /** Only search for these problem types (e.g. `["choiceresponse", "multiplechoiceresponse"]`) */ problemTypesFilter?: string[]; - publishedFilter?: PublishStatus[]; + publishStatusFilter?: PublishStatus[]; /** Required tags (all must match), e.g. `["Difficulty > Hard", "Subject > Math"]` */ tagsFilter?: string[]; /** Sort search results using these options */ @@ -91,7 +91,7 @@ export const useContentSearchResults = ({ searchKeywords, blockTypesFilter, problemTypesFilter, - publishedFilter, + publishStatusFilter, tagsFilter, sort, ], @@ -107,7 +107,7 @@ export const useContentSearchResults = ({ searchKeywords, blockTypesFilter, problemTypesFilter, - publishedFilter, + publishStatusFilter, tagsFilter, sort, // For infinite pagination of results, we can retrieve additional pages if requested. @@ -133,6 +133,7 @@ export const useContentSearchResults = ({ // The distribution of block type filter options blockTypes: pages?.[0]?.blockTypes ?? {}, problemTypes: pages?.[0]?.problemTypes ?? {}, + publishStatus: pages?.[0]?.publishStatus ?? {}, status: query.status, isLoading: query.isLoading, isError: query.isError,