refactor(sidebar-section): componentize the filter

src/components/sidebar-section-filter/index.tsx

@@ -0,0 +1,92 @@
+import { Box, Flex, Text } from '@vtex/brand-ui'
+import MethodCategory from 'components/method-category'
+import { Dispatch, SetStateAction, useState } from 'react'
+import { getMessages } from 'utils/get-messages'
+import { MethodType } from 'utils/typings/unionTypes'
+
+import styles from './styles'
+
+type MethodFilter = {
+  name: string
+  active: boolean
+}
+
+interface MethodButtonProps {
+  methodFilter: MethodFilter
+}
+
+interface SectionFilterProps {
+  methodFilterList: MethodFilter[]
+  setMethodFilter: Dispatch<SetStateAction<MethodFilter[]>>
+}
+
+const SectionFilter = ({
+  methodFilterList,
+  setMethodFilter,
+}: SectionFilterProps) => {
+  const messages = getMessages()
+  const [activeFilters, setActiveFilters] = useState<MethodType[]>([])
+
+  const setFilter = (methodFilterChanged: MethodType | null) => {
+    if (methodFilterChanged) {
+      const index = activeFilters.indexOf(methodFilterChanged)
+      index === -1
+        ? setActiveFilters([...activeFilters, methodFilterChanged])
+        : setActiveFilters(
+            activeFilters.filter((filter) => filter !== methodFilterChanged)
+          )
+      setMethodFilter(
+        methodFilterList.map((methodFilter) => {
+          if (methodFilter.name === methodFilterChanged)
+            methodFilter.active = !methodFilter.active
+          return methodFilter
+        })
+      )
+    } else {
+      setActiveFilters([])
+      setMethodFilter(
+        methodFilterList.map((methodFilter) => {
+          methodFilter.active = false
+          return methodFilter
+        })
+      )
+    }
+  }
+
+  const MethodButton = ({ methodFilter }: MethodButtonProps) => {
+    return (
+      <Box
+        key={`filter-category-${methodFilter.name}`}
+        onClick={() => setFilter(methodFilter.name as MethodType)}
+      >
+        <MethodCategory
+          sx={styles.category}
+          active={methodFilter.active}
+          method={methodFilter.name as MethodType}
+          origin={'filter'}
+        />
+      </Box>
+    )
+  }
+
+  return (
+    <Box sx={styles.container}>
+      <Text sx={styles.text}>{messages['api_reference_sidebar_filter']}</Text>
+      <Flex>
+        {methodFilterList.map((methodFilter) => (
+          <MethodButton
+            key={`filter-category-${methodFilter.name}`}
+            methodFilter={methodFilter}
+          />
+        ))}
+        {activeFilters.length > 1 && (
+          <Text onClick={() => setFilter(null)} sx={styles.clear}>
+            {messages['api_reference_sidebar_filter_clear']}
+          </Text>
+        )}
+      </Flex>
+    </Box>
+  )
+}
+
+export default SectionFilter

src/components/sidebar-section-filter/styles.ts

@@ -0,0 +1,41 @@
+import { SxStyleProp } from '@vtex/brand-ui'
+
+const container: SxStyleProp = {
+  px: '17px',
+  paddingTop: '6px',
+  borderBottom: '1px solid #E7E9EE',
+  paddingBottom: '16px',
+  mb: '24px',
+}
+
+const text: SxStyleProp = {
+  mb: '8px',
+}
+
+const category: SxStyleProp = {
+  mr: '8px',
+  px: '4px',
+  width: 'auto',
+  cursor: 'pointer',
+  ':hover': {
+    borderWidth: '2px',
+  },
+}
+
+const clear: SxStyleProp = {
+  display: 'flex',
+  alignItems: 'center',
+  color: 'muted.0',
+  fontSize: '12px',
+  cursor: 'pointer',
+  ':hover': {
+    color: '#000711',
+  },
+}
+
+export default {
+  container,
+  text,
+  category,
+  clear,
+}

src/components/sidebar-section/index.tsx

@@ -7,43 +7,32 @@ import SideBarElements from 'components/sidebar-elements'
 
 import { SidebarContext } from 'utils/contexts/sidebar'
 import type { SidebarElement } from 'components/sidebar-elements'
-import MethodCategory from 'components/method-category'
-import { MethodType } from 'utils/typings/unionTypes'
 
 import type { DocumentationTitle, UpdatesTitle } from 'utils/typings/unionTypes'
 import styles from './styles'
-import { getMessages } from 'utils/get-messages'
+import SectionFilter from 'components/sidebar-section-filter'
 export interface SidebarSectionProps {
   documentation: DocumentationTitle | UpdatesTitle
   categories: SidebarElement[]
 }
 
 const SidebarSection = ({ documentation, categories }: SidebarSectionProps) => {
-  const messages = getMessages()
   const [searchValue, setSearchValue] = useState('')
   const { sidebarSectionHidden, setSidebarSectionHidden } =
     useContext(SidebarContext)
   const [filterStatus, setFilterStatus] = useState(false)
-  const [methodFilter, setMethodFilter] = useState([
+  const [methodFilterList, setMethodFilterList] = useState([
     { name: 'POST', active: false },
     { name: 'GET', active: false },
     { name: 'PUT', active: false },
     { name: 'DELETE', active: false },
   ])
 
-  const setFilter = (methodChanged: MethodType) => {
-    setMethodFilter(
-      methodFilter.map((method) =>
-        method.name === methodChanged
-          ? { name: methodChanged, active: !method.active }
-          : method
-      )
-    )
-  }
-
   useEffect(() => {
-    setFilterStatus(methodFilter.some((method) => method.active))
-  }, [methodFilter])
+    setFilterStatus(
+      methodFilterList.some((methodFilter) => methodFilter.active)
+    )
+  }, [methodFilterList])
 
   const filteredResult = useMemo(() => {
     if (!filterStatus) return categories
@@ -58,8 +47,9 @@ const SidebarSection = ({ documentation, categories }: SidebarSectionProps) => {
               (endpoint) =>
                 endpoint.method &&
                 filterStatus &&
-                methodFilter.find((method) => method.name === endpoint.method)
-                  ?.active
+                methodFilterList.find(
+                  (methodFilter) => methodFilter.name === endpoint.method
+                )?.active
             )
             return subcategory
           })
@@ -69,7 +59,7 @@ const SidebarSection = ({ documentation, categories }: SidebarSectionProps) => {
       .filter((category: SidebarElement) => category.childrens.length > 0)
 
     return filteredCategories
-  }, [filterStatus, methodFilter, categories])
+  }, [filterStatus, methodFilterList, categories])
 
   return (
     <Box
@@ -95,26 +85,10 @@ const SidebarSection = ({ documentation, categories }: SidebarSectionProps) => {
           </Flex>
         </Box>
         {documentation == 'API Reference' && (
-          <Box sx={styles.filterContainer}>
-            <Text sx={styles.filterText}>
-              {messages['api_reference_sidebar_filter']}
-            </Text>
-            <Flex>
-              {methodFilter.map((item) => (
-                <Box
-                  key={`filter-category-${item.name}`}
-                  onClick={() => setFilter(item.name as MethodType)}
-                >
-                  <MethodCategory
-                    sx={styles.filterCategory}
-                    active={item.active}
-                    method={item.name as MethodType}
-                    origin={'filter'}
-                  />
-                </Box>
-              ))}
-            </Flex>
-          </Box>
+          <SectionFilter
+            methodFilterList={methodFilterList}
+            setMethodFilter={setMethodFilterList}
+          />
         )}
         <Box sx={styles.sidebarContainerBody}>
           <SideBarElements items={filteredResult} subItemLevel={0} />

src/components/sidebar-section/styles.ts

@@ -102,28 +102,6 @@ const toggleIcon: SxStyleProp = {
   transform: 'scaleX(-1)',
 }
 
-const filterContainer: SxStyleProp = {
-  px: '17px',
-  paddingTop: '6px',
-  borderBottom: '1px solid #E7E9EE',
-  paddingBottom: '16px',
-  mb: '24px',
-}
-
-const filterText: SxStyleProp = {
-  mb: '8px',
-}
-
-const filterCategory: SxStyleProp = {
-  mr: '8px',
-  px: '4px',
-  width: 'auto',
-  cursor: 'pointer',
-  ':hover': {
-    borderWidth: '2px',
-  },
-}
-
 export default {
   sidebarContainer,
   sidebarContainerBox,
@@ -137,7 +115,4 @@ export default {
   toggleIconBox,
   toggleIconBoxActive,
   toggleIcon,
-  filterContainer,
-  filterText,
-  filterCategory,
 }

src/messages/language.json

@@ -49,6 +49,7 @@
   "api_guide_documentation_page_contributors.toggleText": "See less",
   "api_guide_documentation_page_on_this_page.title": "On this page",
   "api_reference_sidebar_filter": "Filter by",
+  "api_reference_sidebar_filter_clear": "Clear all",
   "release_notes_page.title": "Release Notes",
   "release_notes_page.subtitle": "VTEX platform documentation release notes",
   "vtex_io_page.title": "Welcome to the VTEX IO Developer Documentation",