feat(web): Generic List - Display filter tags if only one tag group i…

…s present (#16118)
island-is · Sep 23, 2024 · 4c04c51 · 4c04c51
1 parent 52f1575
commit 4c04c51
Showing 1 changed file with 82 additions and 38 deletions.
diff --git a/apps/web/components/GenericList/GenericList.tsx b/apps/web/components/GenericList/GenericList.tsx
@@ -292,12 +292,53 @@ export const GenericList = ({
 
   const selectedFilters = extractFilterTags(filterCategories)
 
+  const selectedFiltersComponent = (
+    <Box className={styles.filterTagsContainer}>
+      <Inline space={1} alignY="top">
+        {selectedFilters.length > 0 && (
+          <Text>{activeLocale === 'is' ? 'Síað eftir:' : 'Filtered by:'}</Text>
+        )}
+        <Inline space={1}>
+          {selectedFilters.map(({ value, label, category }) => (
+            <FilterTag
+              key={value}
+              active={true}
+              onClick={() => {
+                setParameters((prevParameters) => {
+                  const updatedParameters = {
+                    ...prevParameters,
+                    [category]: (prevParameters?.[category] ?? []).filter(
+                      (prevValue) => prevValue !== value,
+                    ),
+                  }
+
+                  // Make sure we clear out the query params from the url when there is nothing selected
+                  if (
+                    Object.values(updatedParameters).every(
+                      (s) => !s || s.length === 0,
+                    )
+                  ) {
+                    return null
+                  }
+
+                  return updatedParameters
+                })
+              }}
+            >
+              {label}
+            </FilterTag>
+          ))}
+        </Inline>
+      </Inline>
+    </Box>
+  )
+
   return (
     <Box paddingBottom={3}>
       <GridContainer>
-        <Stack space={5}>
+        <Stack space={4}>
           <Box ref={ref}>
-            {filterCategories.length > 0 && (
+            {filterCategories.length > 1 && (
               <Stack space={4}>
                 <Stack space={3}>
                   {isMobile && filterInputComponent}
@@ -386,49 +427,52 @@ export const GenericList = ({
                     />
                   </Filter>
                 </Stack>
+                {selectedFiltersComponent}
+              </Stack>
+            )}
 
-                <Box className={styles.filterTagsContainer}>
-                  <Inline space={1} alignY="top">
-                    {selectedFilters.length > 0 && (
-                      <Text>
-                        {activeLocale === 'is' ? 'Síað eftir:' : 'Filtered by:'}
-                      </Text>
-                    )}
-                    <Inline space={1}>
-                      {selectedFilters.map(({ value, label, category }) => (
-                        <FilterTag
-                          key={value}
+            {filterCategories.length <= 1 && (
+              <Stack space={4}>
+                <Stack space={3}>
+                  {filterInputComponent}
+                  {selectedFilters.length > 0 && selectedFiltersComponent}
+                </Stack>
+                <Inline space={1}>
+                  {filterTags
+                    ?.filter((tag) => {
+                      const isActive = Boolean(
+                        selectedFilters.find(
+                          (filter) => filter.value === tag.slug,
+                        ),
+                      )
+                      return !isActive
+                    })
+                    .map((tag) => {
+                      const category = tag.genericTagGroup?.slug
+                      const value = tag.slug
+                      const label = tag.title
+                      return (
+                        <Tag
+                          key={tag.id}
                           onClick={() => {
-                            setParameters((prevParameters) => {
-                              const updatedParameters = {
-                                ...prevParameters,
-                                [category]: (
-                                  prevParameters?.[category] ?? []
-                                ).filter((prevValue) => prevValue !== value),
-                              }
-
-                              // Make sure we clear out the query params from the url when there is nothing selected
-                              if (
-                                Object.values(updatedParameters).every(
-                                  (s) => !s || s.length === 0,
-                                )
-                              ) {
-                                return null
-                              }
-
-                              return updatedParameters
-                            })
+                            if (!category) {
+                              return
+                            }
+                            setParameters((prevParameters) => ({
+                              ...prevParameters,
+                              [category]: (
+                                prevParameters?.[category] ?? []
+                              ).concat(value),
+                            }))
                           }}
                         >
                           {label}
-                        </FilterTag>
-                      ))}
-                    </Inline>
-                  </Inline>
-                </Box>
+                        </Tag>
+                      )
+                    })}
+                </Inline>
               </Stack>
             )}
-            {filterCategories.length === 0 && filterInputComponent}
           </Box>
           {displayError && (
             <AlertMessage