refactor(category): linking category update
This commit is contained in:
enes
parent
579063e073
commit
3f237ab2af
@ -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
|
||||
|
||||
@ -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'>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user