Make algolia filter by category

web/components/contract-search.tsx

@@ -3,6 +3,7 @@ import {
   InstantSearch,
   SearchBox,
   SortBy,
+  useCurrentRefinements,
   useInfiniteHits,
   useRange,
   useRefinementList,
@@ -53,8 +54,9 @@ export function ContractSearch(props: {
     tag?: string
     category?: string
   }
+  showCategorySelector: boolean
 }) {
-  const { querySortOptions, additionalFilter } = props
+  const { querySortOptions, additionalFilter, showCategorySelector } = props
 
   const user = useUser()
   const { initialSort } = useInitialQueryAndSort(querySortOptions)
@@ -110,12 +112,16 @@ export function ContractSearch(props: {
         </Row>
       </Row>
       <div>
-        <Spacer h={4} />
-        <CategorySelector
-          user={user}
-          category={category}
-          setCategory={setCategory}
-        />
+        {showCategorySelector && (
+          <>
+            <Spacer h={4} />
+            <CategorySelector
+              user={user}
+              category={category}
+              setCategory={setCategory}
+            />
+          </>
+        )}
         <Spacer h={4} />
 
         <ContractSearchInner
@@ -176,7 +182,7 @@ export function ContractSearchInner(props: {
 
   useFilterCreator(creatorId)
 
-  useFilterTag(category === 'all' ? tag : category)
+  useFilterTag(tag ?? (category === 'all' ? undefined : category))
 
   useFilterClosed(
     filter === 'closed'
@@ -215,10 +221,15 @@ const useFilterCreator = (creatorId: string | undefined) => {
 }
 
 const useFilterTag = (tag: string | undefined) => {
+  const { items, refine: deleteRefinement } = useCurrentRefinements({
+    includedAttributes: ['lowercaseTags'],
+  })
   const { refine } = useRefinementList({ attribute: 'lowercaseTags' })
   useEffect(() => {
+    const refinements = items[0]?.refinements ?? []
     if (tag) refine(tag.toLowerCase())
-  }, [tag, refine])
+    if (refinements[0]) deleteRefinement(refinements[0])
+  }, [tag])
 }
 
 const useFilterClosed = (value: boolean | undefined) => {

web/components/contract/contracts-list.tsx

@@ -60,6 +60,7 @@ export function CreatorContractsList(props: { creator: User }) {
       additionalFilter={{
         creatorId: creator.id,
       }}
+      showCategorySelector={false}
     />
   )
 }

web/pages/home.tsx

@@ -21,6 +21,7 @@ const Home = () => {
             shouldLoadFromStorage: false,
             defaultSort: '24-hour-vol',
           }}
+          showCategorySelector
         />
       </Col>
     </Page>

web/pages/markets.tsx

@@ -11,7 +11,7 @@ export default function Markets() {
         description="Discover what's new, trending, or soon-to-close. Or search among our hundreds of markets."
         url="/markets"
       />
-      <ContractSearch />
+      <ContractSearch showCategorySelector />
     </Page>
   )
 }

web/pages/tag/[tag].tsx

@@ -17,6 +17,7 @@ export default function TagPage() {
           shouldLoadFromStorage: false,
         }}
         additionalFilter={{ tag }}
+        showCategorySelector={false}
       />
     </Page>
   )