From 3f237ab2af3006b55ae4ac45774b32761fdd4cf5 Mon Sep 17 00:00:00 2001
From: enes <enes@nostrdev.com>
Date: Mon, 16 Dec 2024 13:10:34 +0100
Subject: [PATCH 1/2] refactor(category): linking category update

---
 .../Filters/CategoryFilterPopup.tsx           | 48 ++++++++--
 src/pages/game.tsx                            | 94 ++++++-------------
 2 files changed, 70 insertions(+), 72 deletions(-)

diff --git a/src/components/Filters/CategoryFilterPopup.tsx b/src/components/Filters/CategoryFilterPopup.tsx
index d4abdfe..820caa0 100644
--- a/src/components/Filters/CategoryFilterPopup.tsx
+++ b/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
-    .join(' > ')
-    .toLowerCase()
-    .includes(inputValue.toLowerCase())
+  const hierarchy = path.join(' > ').toLowerCase()
+  const isMatching = hierarchy.includes(inputValue.toLowerCase())
+  const isLinked =
+    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)
-    handleCombinationSelection(path, !isCombinationChecked)
+    // If combination is linked, clicking it again we will delete it
+    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
diff --git a/src/pages/game.tsx b/src/pages/game.tsx
index c9557c9..a2812ed 100644
--- a/src/pages/game.tsx
+++ b/src/pages/game.tsx
@@ -237,73 +237,39 @@ export const GamePage = () => {
               </div>
             </div>
             <ModFilter>
-              {linkedHierarchy && linkedHierarchy !== '' ? (
-                <span
-                  className='IBMSMSMBSSTagsTag'
-                  style={{
-                    display: 'flex',
-                    gap: '10px',
-                    alignItems: 'center'
-                  }}
+              <div className='FiltersMainElement'>
+                <button
+                  className='btn btnMain btnMainDropdown'
+                  type='button'
                   onClick={() => {
-                    searchParams.delete('h')
-                    setSearchParams(searchParams)
+                    setShowCategoryPopup(true)
                   }}
                 >
-                  <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>
-                  {linkedHierarchy.replace(/:/g, ' > ')}
-                  <svg
-                    xmlns='http://www.w3.org/2000/svg'
-                    viewBox='0 0 512 512'
-                    width='0.8em'
-                    height='0.8em'
-                    fill='currentColor'
-                  >
-                    <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' />
-                  </svg>
-                </span>
-              ) : (
-                <div className='FiltersMainElement'>
-                  <button
-                    className='btn btnMain btnMainDropdown'
-                    type='button'
-                    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>
-              )}
+                  Categories
+                  {isCategoryFilterActive ||
+                  (linkedHierarchy && linkedHierarchy !== '') ? (
+                    <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'>

From 615b39a8d8bcba1bc6f41e23ff38acab005242cb Mon Sep 17 00:00:00 2001
From: enes <enes@nostrdev.com>
Date: Mon, 16 Dec 2024 13:14:05 +0100
Subject: [PATCH 2/2] fix(mod): add keys to categories list

---
 src/pages/mod/index.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/mod/index.tsx b/src/pages/mod/index.tsx
index dc94295..2edec2d 100644
--- a/src/pages/mod/index.tsx
+++ b/src/pages/mod/index.tsx
@@ -553,6 +553,7 @@ const Body = ({
                       return (
                         <ReactRouterLink
                           className='IBMSMSMBSSCategoriesBoxItem'
+                          key={`category-${i}`}
                           target='_blank'
                           to={{
                             pathname: getGamePageRoute(game),
@@ -563,9 +564,12 @@ const Body = ({
                         </ReactRouterLink>
                       )
                     })
-                    .reduce((prev, curr) => [
+                    .reduce((prev, curr, i) => [
                       prev,
-                      <div className='IBMSMSMBSSCategoriesBoxSeparator'>
+                      <div
+                        key={`separator-${i}`}
+                        className='IBMSMSMBSSCategoriesBoxSeparator'
+                      >
                         <p>&gt;</p>
                       </div>,
                       curr