Support searching on 2nd level facet modal

adsabs · Oct 30, 2023 · 0703b5d · 0703b5d
1 parent 099658d
commit 0703b5d
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 43 deletions.
diff --git a/src/components/SearchFacet/FacetList.tsx b/src/components/SearchFacet/FacetList.tsx
@@ -56,13 +56,13 @@ export const FacetList = (props: IFacetListProps) => {
       <SearchFacetModal onFilter={onFilter}>
         {({ searchTerm }) =>
           focused ? (
-            <NodeListModal onError={onError} level="child" prefix={focused.id} />
+            <NodeListModal onError={onError} level="child" prefix={focused.id} searchTerm={searchTerm} />
           ) : (
-            <NodeListModal onError={onError} level="root" prefix={searchTerm} />
+            <NodeListModal onError={onError} level="root" prefix="" searchTerm={searchTerm} />
           )
         }
       </SearchFacetModal>
-      <NodeList level="root" prefix="" onError={onError} noLoadMore={noLoadMore} />
+      <NodeList level="root" prefix="" onError={onError} noLoadMore={noLoadMore} searchTerm="" />
       <LogicSelect mt="2" onFilter={onFilter} />
     </>
   );
@@ -72,6 +72,7 @@ export interface INodeListProps extends Pick<IUseGetFacetDataProps, 'prefix' | '
   noLoadMore?: boolean;
   onLoadMore?: () => void;
   onError: () => void;
+  searchTerm: string;
 }
 
 export const NodeList = (props: INodeListProps) => {
@@ -138,14 +139,15 @@ export const NodeList = (props: INodeListProps) => {
 };
 
 export const NodeListModal = (props: INodeListProps) => {
-  const { prefix, level, onError } = props;
+  const { prefix, searchTerm, level, onError } = props;
 
   const params = useFacetStore((state) => state.params);
   const sortDir = useFacetStore((state) => state.sort[1]);
 
   const { treeData, isFetching, isError, pagination, handleLoadMore, handlePrevious, handlePageChange, totalResults } =
     useGetFacetData({
       ...params,
+      searchTerm,
       prefix,
       level,
       sortDir,
@@ -284,7 +286,7 @@ export const Item = (props: IItemProps) => {
         </Text>
       </ListItem>
       {expandable && expanded ? (
-        <NodeList prefix={node.val} level="child" onError={onError} onLoadMore={() => setFocused(node)} />
+        <NodeList prefix={node.val} level="child" onError={onError} onLoadMore={() => setFocused(node)} searchTerm="" />
       ) : null}
     </>
   );
@@ -339,10 +341,8 @@ export const NodeCheckbox = forwardRef<HTMLInputElement, INodeCheckboxProps>((pr
     <Checkbox
       {...checkboxProps}
       ref={ref}
-      name={`${label}
-    _checkbox`}
-      aria-label={`
-    select ${label}`}
+      name={`${label}_checkbox`}
+      aria-label={`select ${label}`}
       sx={{
         '.chakra-checkbox__label': { width: '100%', maxWidth: 'auto' },
       }}
@@ -351,8 +351,7 @@ export const NodeCheckbox = forwardRef<HTMLInputElement, INodeCheckboxProps>((pr
       isIndeterminate={isPartSelected}
       onChange={() => select(node)}
       value={node.id}
-      data-testid={`
-    search - facet -${isRoot ? 'root' : 'child'} -checkbox`}
+      data-testid={`search-facet-${isRoot ? 'root' : 'child'}-checkbox`}
       my={0.5}
     >
       <Text as="span" display="inline-flex" justifyContent="space-between" w="full">

diff --git a/src/components/SearchFacet/SearchFacetModal/SearchFacetModal.tsx b/src/components/SearchFacet/SearchFacetModal/SearchFacetModal.tsx
@@ -71,29 +71,27 @@ const ModalFacet = (props: ISearchFacetModalProps) => {
       </ModalHeader>
       <ModalBody>
         <Flex direction="column" w="full" mb="3">
-          {focused ? null : (
-            <>
-              <Stack spacing={[1, 12]} justify="space-between" alignItems="end" direction={['column', 'row']} mb="4">
-                {sort[0] === 'index' ? (
-                  <Box flex="1" />
-                ) : (
-                  <SearchInput flex="2" search={search} onSearchChange={setSearch} />
-                )}
-                <SortControl sort={sort} onSortChange={setSort} minW="150px" />
-              </Stack>
+          <>
+            <Stack spacing={[1, 12]} justify="space-between" alignItems="end" direction={['column', 'row']} mb="4">
               {sort[0] === 'index' ? (
-                <AlphaSorter
-                  justify="center"
-                  w="full"
-                  mb="2"
-                  px="2"
-                  flexWrap="wrap"
-                  letter={letter}
-                  onLetterChange={setLetter}
-                />
-              ) : null}
-            </>
-          )}
+                <Box flex="1" />
+              ) : (
+                <SearchInput flex="2" search={search} onSearchChange={setSearch} />
+              )}
+              <SortControl sort={sort} onSortChange={setSort} minW="150px" />
+            </Stack>
+            {sort[0] === 'index' ? (
+              <AlphaSorter
+                justify="center"
+                w="full"
+                mb="2"
+                px="2"
+                flexWrap="wrap"
+                letter={letter}
+                onLetterChange={setLetter}
+              />
+            ) : null}
+          </>
           <UnExpandButton />
           {children({ searchTerm })}
         </Flex>

diff --git a/src/components/SearchFacet/SearchFacetModal/SearchInput.tsx b/src/components/SearchFacet/SearchFacetModal/SearchInput.tsx
@@ -28,7 +28,7 @@ export const SearchInput: FC<ISearchInputProps> = (props) => {
     // disallow forward slashes
     const value = ev.currentTarget.value.replaceAll('/', '');
 
-    // if flag is set, this captialize the search term
+    // if flag is set, this capitalizes the search term
     onSearchChange(forceUppercaseInitial ? capitalizeString(value) : value);
   };
 

diff --git a/src/components/SearchFacet/store/FacetStore.ts b/src/components/SearchFacet/store/FacetStore.ts
@@ -80,9 +80,9 @@ const createStore = (preloadedState: Partial<IFacetStoreState>) => () =>
         selection: !isOpen ? initialState.selection : get().selection,
         selected: !isOpen ? initialState.selected : get().selected,
       }),
-    setFocused: (focused) => set({ focused }),
-    setSearch: (search) => set({ search, focused: search.length === 0 ? null : get().focused }),
-    setLetter: (letter) => set({ letter, focused: null }),
+    setFocused: (focused) => set({ focused, search: '', letter: 'All' }),
+    setSearch: (search) => set({ search }),
+    setLetter: (letter) => set({ letter }),
     addNodes: (nodes) => set({ selection: createNodes(nodes, get().selection) }),
     setSort: (sort) => set({ sort }),
     reset: () => set(omit(['params'], initialState)),

diff --git a/src/components/SearchFacet/useGetFacetData.ts b/src/components/SearchFacet/useGetFacetData.ts
@@ -21,6 +21,7 @@ export interface IUseGetFacetDataProps {
   filter?: string[];
   enabled?: boolean;
   hasChildren?: boolean;
+  searchTerm?: string;
 }
 
 export const FACET_DEFAULT_LIMIT = 10;
@@ -41,6 +42,7 @@ export const useGetFacetData = (props: IUseGetFacetDataProps) => {
     enabled = true,
     hasChildren = false,
     filter = [],
+    searchTerm,
   } = props;
 
   const [pagination, setPagination] = useState(() => calculatePagination({ page: 0, numPerPage: FACET_DEFAULT_LIMIT }));
@@ -62,10 +64,11 @@ export const useGetFacetData = (props: IUseGetFacetDataProps) => {
           sortDir,
           offset: pagination.startIndex,
           hasChildren,
+          searchTerm,
         }),
         ...searchQuery,
       }),
-      [searchQuery, field, prefix, query, level, sortDir, sortField, pagination.startIndex, hasChildren],
+      [searchQuery, searchTerm, field, prefix, query, level, sortDir, sortField, pagination.startIndex, hasChildren],
     ),
     300,
   );
@@ -158,10 +161,11 @@ export const useGetFacetData = (props: IUseGetFacetDataProps) => {
  * @param level
  * @param key
  */
-const getPrefix = (level: IUseGetFacetDataProps['level'], key: string) =>
-  `${level === 'root' ? FACET_DEFAULT_PREFIX : FACET_DEFAULT_CHILD_PREFIX}${parseRootFromKey(key) ?? ''}${
-    level === 'child' ? '/' : ''
+const getPrefix = (level: IUseGetFacetDataProps['level'], key: string, searchTerm: string) => {
+  return `${level === 'root' ? FACET_DEFAULT_PREFIX : FACET_DEFAULT_CHILD_PREFIX}${parseRootFromKey(key) ?? ''}${
+    level === 'child' ? `/${searchTerm}` : searchTerm
   }`;
+};
 
 const getSearchFacetParams = (props: IUseGetFacetDataProps & { offset: number }) => {
   if (!props || !props.field) {
@@ -180,8 +184,8 @@ const getSearchFacetParams = (props: IUseGetFacetDataProps & { offset: number })
       sort: `count ${props.sortDir}`,
       ...(props.query ? { query: props.query } : {}),
       ...(props.hasChildren
-        ? { prefix: getPrefix(props.level, sanitize(props.prefix)) }
-        : { prefix: sanitize(props.prefix) }),
+        ? { prefix: getPrefix(props.level, props.prefix, sanitize(props.searchTerm)) }
+        : { prefix: sanitize(props.searchTerm) }),
     },
   });
 };