refactor(category): linking category update

src/components/Filters/CategoryFilterPopup.tsx

@@ -8,6 +8,7 @@ import {
   flattenCategories
 } from 'utils'
 import { useLocalStorage } from 'hooks'
+import { useSearchParams } from 'react-router-dom'
 import styles from './CategoryFilterPopup.module.scss'
 import categoriesData from './../../assets/categories/categories.json'
 
@@ -26,14 +27,31 @@ export const CategoryFilterPopup = ({
   setHierarchies,
   handleClose
 }: CategoryFilterPopupProps) => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const linkedHierarchy = searchParams.get('h')
+
   const [userHierarchies, setUserHierarchies] = useLocalStorage<
     (string | Category)[]
   >('user-hierarchies', [])
   const [filterCategories, setFilterCategories] = useState(categories)
   const [filterHierarchies, setFilterHierarchies] = useState(hierarchies)
   const handleApply = () => {
+    // Update selection with linked category if it exists
+    if (linkedHierarchy !== null && linkedHierarchy !== '') {
+      // Combine existing selection with the linked
+      setFilterHierarchies((prev) => {
+        prev.push(linkedHierarchy)
+        const newFilterHierarchies = Array.from(new Set([...prev]))
+        setHierarchies(newFilterHierarchies)
+        return newFilterHierarchies
+      })
+      // Clear hierarchy link in search params
+      searchParams.delete('h')
+      setSearchParams(searchParams)
+    } else {
+      setHierarchies(filterHierarchies)
+    }
     setCategories(filterCategories)
-    setHierarchies(filterHierarchies)
   }
   const [inputValue, setInputValue] = useState<string>('')
   const userHierarchiesMatching = useMemo(
@@ -290,6 +308,11 @@ export const CategoryFilterPopup = ({
                     className='btn btnMain btnMainPopup'
                     type='button'
                     onPointerDown={() => {
+                      // Clear the linked hierarchy
+                      searchParams.delete('h')
+                      setSearchParams(searchParams)
+
+                      // Clear current filters
                       setFilterCategories([])
                       setFilterHierarchies([])
                     }}
@@ -340,11 +363,14 @@ const CategoryCheckbox: React.FC<CategoryCheckboxProps> = ({
   indentLevel = 0,
   handleRemove
 }) => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const linkedHierarchy = searchParams.get('h')
   const name = typeof category === 'string' ? category : category.name
-  const isMatching = path
+  const hierarchy = path.join(' > ').toLowerCase()
-    .join(' > ')
+  const isMatching = hierarchy.includes(inputValue.toLowerCase())
-    .toLowerCase()
+  const isLinked =
-    .includes(inputValue.toLowerCase())
+    linkedHierarchy !== null &&
+    hierarchy === linkedHierarchy.replace(/:/g, ' > ')
   const [isSingleChecked, setIsSingleChecked] = useState<boolean>(false)
   const [isCombinationChecked, setIsCombinationChecked] =
     useState<boolean>(false)
@@ -390,8 +416,14 @@ const CategoryCheckbox: React.FC<CategoryCheckboxProps> = ({
   }
 
   const handleCombinationChange = () => {
-    setIsCombinationChecked(!isCombinationChecked)
+    // If combination is linked, clicking it again we will delete it
-    handleCombinationSelection(path, !isCombinationChecked)
+    if (isLinked) {
+      searchParams.delete('h')
+      setSearchParams(searchParams)
+    } else {
+      setIsCombinationChecked(!isCombinationChecked)
+      handleCombinationSelection(path, !isCombinationChecked)
+    }
   }
 
   return (
@@ -421,7 +453,7 @@ const CategoryCheckbox: React.FC<CategoryCheckboxProps> = ({
               className={`CheckboxMain  ${
                 isIndeterminate ? 'CheckboxIndeterminate' : ''
               }`}
-              checked={isCombinationChecked}
+              checked={isCombinationChecked || isLinked}
               onChange={handleCombinationChange}
             />
             <label

src/pages/game.tsx

@@ -237,73 +237,39 @@ export const GamePage = () => {
               </div>
             </div>
             <ModFilter>
-              {linkedHierarchy && linkedHierarchy !== '' ? (
+              <div className='FiltersMainElement'>
-                <span
+                <button
-                  className='IBMSMSMBSSTagsTag'
+                  className='btn btnMain btnMainDropdown'
-                  style={{
+                  type='button'
-                    display: 'flex',
-                    gap: '10px',
-                    alignItems: 'center'
-                  }}
                   onClick={() => {
-                    searchParams.delete('h')
+                    setShowCategoryPopup(true)
-                    setSearchParams(searchParams)
                   }}
                 >
-                  <svg
+                  Categories
-                    xmlns='http://www.w3.org/2000/svg'
+                  {isCategoryFilterActive ||
-                    viewBox='0 0 576 512'
+                  (linkedHierarchy && linkedHierarchy !== '') ? (
-                    width='1em'
+                    <svg
-                    height='1em'
+                      xmlns='http://www.w3.org/2000/svg'
-                    fill='currentColor'
+                      viewBox='0 0 576 512'
-                  >
+                      width='1em'
-                    <path d='M 3.9,22.9 C 10.5,8.9 24.5,0 40,0 h 432 c 15.5,0 29.5,8.9 36.1,22.9 6.6,14 4.6,30.5 -5.2,42.5 L 396.4,195.6 C 316.2,212.1 256,283 256,368 c 0,27.4 6.3,53.4 17.5,76.5 -1.6,-0.8 -3.2,-1.8 -4.7,-2.9 l -64,-48 C 196.7,387.6 192,378.1 192,368 V 288.9 L 9,65.3 C -0.7,53.4 -2.8,36.8 3.9,22.9 Z M 432,224 c 79.52906,0 143.99994,64.471 143.99994,144 0,79.529 -64.47088,144 -143.99994,144 -79.52906,0 -143.99994,-64.471 -143.99994,-144 0,-79.529 64.47088,-144 143.99994,-144 z' />
+                      height='1em'
-                  </svg>
+                      fill='currentColor'
-                  {linkedHierarchy.replace(/:/g, ' > ')}
+                    >
-                  <svg
+                      <path d='M 3.9,22.9 C 10.5,8.9 24.5,0 40,0 h 432 c 15.5,0 29.5,8.9 36.1,22.9 6.6,14 4.6,30.5 -5.2,42.5 L 396.4,195.6 C 316.2,212.1 256,283 256,368 c 0,27.4 6.3,53.4 17.5,76.5 -1.6,-0.8 -3.2,-1.8 -4.7,-2.9 l -64,-48 C 196.7,387.6 192,378.1 192,368 V 288.9 L 9,65.3 C -0.7,53.4 -2.8,36.8 3.9,22.9 Z M 432,224 c 79.52906,0 143.99994,64.471 143.99994,144 0,79.529 -64.47088,144 -143.99994,144 -79.52906,0 -143.99994,-64.471 -143.99994,-144 0,-79.529 64.47088,-144 143.99994,-144 z' />
-                    xmlns='http://www.w3.org/2000/svg'
+                    </svg>
-                    viewBox='0 0 512 512'
+                  ) : (
-                    width='0.8em'
+                    <svg
-                    height='0.8em'
+                      xmlns='http://www.w3.org/2000/svg'
-                    fill='currentColor'
+                      viewBox='0 0 512 512'
-                  >
+                      width='1em'
-                    <path d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z' />
+                      height='1em'
-                  </svg>
+                      fill='currentColor'
-                </span>
+                    >
-              ) : (
+                      <path d='M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z' />
-                <div className='FiltersMainElement'>
+                    </svg>
-                  <button
+                  )}
-                    className='btn btnMain btnMainDropdown'
+                </button>
-                    type='button'
+              </div>
-                    onClick={() => {
-                      setShowCategoryPopup(true)
-                    }}
-                  >
-                    Categories
-                    {isCategoryFilterActive ? (
-                      <svg
-                        xmlns='http://www.w3.org/2000/svg'
-                        viewBox='0 0 576 512'
-                        width='1em'
-                        height='1em'
-                        fill='currentColor'
-                      >
-                        <path d='M 3.9,22.9 C 10.5,8.9 24.5,0 40,0 h 432 c 15.5,0 29.5,8.9 36.1,22.9 6.6,14 4.6,30.5 -5.2,42.5 L 396.4,195.6 C 316.2,212.1 256,283 256,368 c 0,27.4 6.3,53.4 17.5,76.5 -1.6,-0.8 -3.2,-1.8 -4.7,-2.9 l -64,-48 C 196.7,387.6 192,378.1 192,368 V 288.9 L 9,65.3 C -0.7,53.4 -2.8,36.8 3.9,22.9 Z M 432,224 c 79.52906,0 143.99994,64.471 143.99994,144 0,79.529 -64.47088,144 -143.99994,144 -79.52906,0 -143.99994,-64.471 -143.99994,-144 0,-79.529 64.47088,-144 143.99994,-144 z' />
-                      </svg>
-                    ) : (
-                      <svg
-                        xmlns='http://www.w3.org/2000/svg'
-                        viewBox='0 0 512 512'
-                        width='1em'
-                        height='1em'
-                        fill='currentColor'
-                      >
-                        <path d='M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z' />
-                      </svg>
-                    )}
-                  </button>
-                </div>
-              )}
             </ModFilter>
 
             <div className='IBMSecMain IBMSMListWrapper'>