Render definition_group filter

alpaca-tc · Apr 18, 2024 · 9f67ba0 · 9f67ba0
1 parent 910c890
commit 9f67ba0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git a/frontend/pages/Home/components/DefinitionList/ConfigureSearchOptionsDialog.tsx b/frontend/pages/Home/components/DefinitionList/ConfigureSearchOptionsDialog.tsx
@@ -8,6 +8,7 @@ export type SearchDefinitionsOptions = {
   title: string
   source: string
   folding: boolean
+  definitionGroup: string
 }
 
 type Props = {
@@ -38,6 +39,13 @@ export const ConfigureSearchOptionsDialog: React.FC<Props> = ({
     onClickClose()
   }
 
+  const onChangeDefinitionGroup = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setTemporarySearchDefinitionsOptions((prev) => ({ ...prev, definitionGroup: event.target.value }))
+    },
+    [setTemporarySearchDefinitionsOptions],
+  )
+
   const onChangeTitle = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       setTemporarySearchDefinitionsOptions((prev) => ({ ...prev, title: event.target.value }))
@@ -77,6 +85,15 @@ export const ConfigureSearchOptionsDialog: React.FC<Props> = ({
             <p>Configure settings related to the display of definitions.</p>
 
             <Stack gap={1.5}>
+              <FormControl title="Filtering definition group" helpMessage="Refine the definition with a definition group">
+                <Input
+                  name="definitionGroup"
+                  type="text"
+                  onChange={onChangeDefinitionGroup}
+                  value={temporarySearchDefinitionsOptions.definitionGroup}
+                />
+              </FormControl>
+
               <FormControl title="Filtering title" helpMessage="Refine the definition with a title">
                 <Input name="title" type="text" onChange={onChangeTitle} value={temporarySearchDefinitionsOptions.title} />
               </FormControl>

diff --git a/frontend/pages/Home/components/DefinitionList/DefinitionList.tsx b/frontend/pages/Home/components/DefinitionList/DefinitionList.tsx
@@ -20,12 +20,13 @@ type DialogType = 'configureSearchOptionsDiaglog'
 export const DefinitionList: FC<Props> = ({ selectedDefinitionIds, setSelectedDefinitionIds }) => {
   const [visibleDialog, setVisibleDialog] = useState<DialogType | null>(null)
   const [searchDefinitionsOptions, setSearchDefinitionsOptions] = useLocalStorage<SearchDefinitionsOptions>(
-    'Home-DefinitionList-SearchDefinitionOptions',
-    { title: '', source: '', folding: false },
+    'Home-DefinitionList-SearchDefinitionOptions-v1',
+    { definitionGroup: '', title: '', source: '', folding: false },
   )
   const [foldingSection, setFoldingSection] = useState<boolean>(false)
 
   const { isLoading, definitions, isValidating, setSize, isReachingEnd } = useDefinitionList({
+    definitionGroup: searchDefinitionsOptions.definitionGroup,
     title: searchDefinitionsOptions.title,
     source: searchDefinitionsOptions.source,
   })

diff --git a/frontend/repositories/definitionListRepository.ts b/frontend/repositories/definitionListRepository.ts
@@ -21,15 +21,20 @@ type DefinitionsResponse = {
 
 export const PER = 100
 
-export const useDefinitionList = (query: { title: string; source: string }, keepPreviousData: boolean = false) => {
+export const useDefinitionList = (
+  query: { definitionGroup: string; title: string; source: string },
+  keepPreviousData: boolean = false,
+) => {
   const getKey = (pageIndex: number, previousPageData: DefinitionReponse[] | null) => {
     if (previousPageData && previousPageData.length === 0) {
       return null
     }
     const params = {
       per: PER,
       page: pageIndex + 1,
-      ...query,
+      definition_group: query.definitionGroup,
+      title: query.title,
+      source: query.source,
     }
 
     return `${path.api.definitions.index()}?${stringify(params)}`