feat: categorized equivalents in comparator

Author: desoindx

src/components/comparateur/overscreens/Checkbox.tsx

@@ -13,10 +13,12 @@ const Checkbox = (
     equivalent,
     equivalents,
     setEquivalents,
+    simple,
   }: {
     equivalent: ComputedEquivalent
     equivalents: string[]
     setEquivalents: (value: string[]) => void
+    simple?: boolean
   },
   ref: ForwardedRef<HTMLInputElement>
 ) => {
@@ -66,7 +68,7 @@ const Checkbox = (
               </div>
             )}
           </div>
-          <EquivalentIcon height={2} equivalent={equivalent} />
+          {!simple && <EquivalentIcon height={2} equivalent={equivalent} />}
         </>
       }
     />

src/components/comparateur/overscreens/ComparisonEquivalents.tsx

@@ -9,10 +9,12 @@ const ComparisonEquivalents = ({
   onClose,
   equivalents,
   index,
+  simple,
 }: {
   onClose: () => void
   equivalents: Equivalent[]
   index: 0 | 1
+  simple?: boolean
 }) => {
   const {
     language,
@@ -37,7 +39,7 @@ const ComparisonEquivalents = ({
           onClose()
         }}>
         <span>{getName(language, equivalent, false, 1, false, true)}</span>
-        <EquivalentIcon height={2} equivalent={equivalent} />
+        {!simple && <EquivalentIcon height={2} equivalent={equivalent} />}
       </button>
     </li>
   ))

src/components/comparateur/overscreens/ComparisonOverscreen.tsx

@@ -1,34 +1,62 @@
 'use client'
 import { useTranslations } from 'next-intl'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import useParamContext from 'src/providers/ParamProvider'
 import { useSearchEquivalent } from 'src/providers/useSearchEquivalent'
+import { ComputedEquivalent } from 'types/equivalent'
 import { computedEquivalents } from 'data/categories/computedEquivalents'
 import { deplacements } from 'data/categories/deplacement'
 import { getEquivalentWithCarpool } from 'utils/carpool'
 import Button from 'components/base/buttons/Button'
 import HiddenLabel from 'components/form/HiddenLabel'
 import Input from 'components/form/Input'
 import ComparisonEquivalents from './ComparisonEquivalents'
+import SubCategoryEquivalent from './SubCategoryEquivalent'
+import { subCategories } from './equivalentCategories'
 import styles from './EquivalentsOverscreen.module.css'
 
+const allEquivalents = computedEquivalents('transport', deplacements).flatMap(getEquivalentWithCarpool)
+
 const ComparisonOverscreen = ({ index }: { index: 0 | 1 }) => {
   const { setOverscreen } = useParamContext()
   const [search, setSearch] = useState('')
-  const results = useSearchEquivalent(
-    search,
-    false,
-    4,
-    false,
-    computedEquivalents('transport', deplacements).flatMap(getEquivalentWithCarpool)
-  )
+  const results = useSearchEquivalent(search, false, 4, false, allEquivalents)
 
   const tSearch = useTranslations('comparateur.overscreen')
   const t = useTranslations('overscreen.transport')
   const tModal = useTranslations('modal')
   const onClose = () => {
     setOverscreen('transport', '')
   }
+
+  const { categoriesEquivalents, categorizedSlugs } = useMemo(() => {
+    const result = {} as Record<string, Record<string, ComputedEquivalent[]>>
+    Object.entries(subCategories).forEach(([category, categoryEquivalents]) => {
+      const categories = {} as Record<string, ComputedEquivalent[]>
+      Object.entries(categoryEquivalents).forEach(([subCategory, subCategoryEquivalents]) => {
+        const filteredEquivalents = subCategoryEquivalents
+          .map((subCategoryEquivalent) =>
+            allEquivalents.find((equivalent) => equivalent.slug === subCategoryEquivalent)
+          )
+          .filter((equivalent) => equivalent !== undefined)
+        if (filteredEquivalents.length > 0) {
+          categories[subCategory] = filteredEquivalents
+        }
+      })
+      if (Object.keys(categories).length > 0) {
+        result[category] = categories
+      }
+    })
+    return {
+      categoriesEquivalents: result,
+      categorizedSlugs: Object.values(result).flatMap((subCategories) =>
+        Object.values(subCategories).flatMap((subCategoryEquivalents) =>
+          subCategoryEquivalents.map((equivalent) => equivalent.slug)
+        )
+      ),
+    }
+  }, [])
+
   return (
     <>
       <div className={styles.header}>
@@ -68,7 +96,24 @@ const ComparisonOverscreen = ({ index }: { index: 0 | 1 }) => {
             </div>
           )
         ) : (
-          <ComparisonEquivalents onClose={onClose} equivalents={results} index={index} />
+          <>
+            {Object.entries(categoriesEquivalents)
+              .filter(([category]) => category.startsWith('voiture'))
+              .map(([category, subCategories]) => (
+                <SubCategoryEquivalent
+                  category={allEquivalents.find((equivalent) => equivalent.slug === category) as ComputedEquivalent}
+                  categoriesEquivalents={subCategories}
+                  onClose={onClose}
+                  index={index}
+                  key={category}
+                />
+              ))}
+            <ComparisonEquivalents
+              onClose={onClose}
+              equivalents={results.filter((equivalent) => !categorizedSlugs.includes(equivalent.slug))}
+              index={index}
+            />
+          </>
         )}
       </ul>
       <div className={styles.footerCenter}>

src/components/comparateur/overscreens/Equivalents.tsx

@@ -1,6 +1,8 @@
-import { RefObject } from 'react'
+import { RefObject, useMemo } from 'react'
 import { ComputedEquivalent } from 'types/equivalent'
 import Checkbox from './Checkbox'
+import SubCategoryEquivalent from './SubCategoryEquivalent'
+import { subCategories } from './equivalentCategories'
 
 const Equivalents = ({
   equivalentsToDisplay,
@@ -16,16 +18,63 @@ const Equivalents = ({
   list?: boolean
 }) => {
   const Container = list ? 'li' : 'div'
-  return equivalentsToDisplay.map((equivalent, index) => (
-    <Container key={equivalent.slug}>
-      <Checkbox
-        equivalents={equivalents}
-        equivalent={equivalent}
-        setEquivalents={setEquivalents}
-        ref={index === 0 ? firstRef : undefined}
-      />
-    </Container>
-  ))
+  const { categoriesEquivalents, categorizedSlugs } = useMemo(() => {
+    if (list) {
+      return { categoriesEquivalents: {}, categorizedSlugs: [] }
+    }
+    const result = {} as Record<string, Record<string, ComputedEquivalent[]>>
+    Object.entries(subCategories).forEach(([category, categoryEquivalents]) => {
+      const categories = {} as Record<string, ComputedEquivalent[]>
+      Object.entries(categoryEquivalents).forEach(([subCategory, subCategoryEquivalents]) => {
+        const filteredEquivalents = subCategoryEquivalents
+          .map((subCategoryEquivalent) =>
+            equivalentsToDisplay.find((equivalent) => equivalent.slug === subCategoryEquivalent)
+          )
+          .filter((equivalent) => equivalent !== undefined)
+        if (filteredEquivalents.length > 0) {
+          categories[subCategory] = filteredEquivalents
+        }
+      })
+      if (Object.keys(categories).length > 0) {
+        result[category] = categories
+      }
+    })
+    return {
+      categoriesEquivalents: result,
+      categorizedSlugs: Object.values(result).flatMap((subCategories) =>
+        Object.values(subCategories).flatMap((subCategoryEquivalents) =>
+          subCategoryEquivalents.map((equivalent) => equivalent.slug)
+        )
+      ),
+    }
+  }, [equivalentsToDisplay, list])
+
+  return (
+    <>
+      {Object.entries(categoriesEquivalents).map(([category, subCategories]) => (
+        <SubCategoryEquivalent
+          category={equivalentsToDisplay.find((equivalent) => equivalent.slug === category) as ComputedEquivalent}
+          categoriesEquivalents={subCategories}
+          equivalents={equivalents}
+          setEquivalents={setEquivalents}
+          checkbox
+          key={category}
+        />
+      ))}
+      {equivalentsToDisplay
+        .filter((equivalent) => !categorizedSlugs.includes(equivalent.slug))
+        .map((equivalent, index) => (
+          <Container key={equivalent.slug}>
+            <Checkbox
+              equivalents={equivalents}
+              equivalent={equivalent}
+              setEquivalents={setEquivalents}
+              ref={index === 0 ? firstRef : undefined}
+            />
+          </Container>
+        ))}
+    </>
+  )
 }
 
 export default Equivalents

src/components/comparateur/overscreens/SubCategoryEquivalent.module.css

@@ -0,0 +1,65 @@
+.header {
+  cursor: pointer;
+  display: flex;
+  padding: 0.75rem;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  background-color: transparent;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  color: var(--neutral-50);
+
+  &:hover {
+    color: var(--neutral-80);
+    background-color: var(--primary-10);
+  }
+}
+
+.coloredNumber {
+  color: var(--primary-60);
+  font-weight: 700;
+}
+
+.title {
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+}
+
+.button {
+  padding: 0.5rem;
+  border-radius: 50%;
+  border: solid 2px var(--primary-30);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--primary-50);
+
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+}
+
+.subCategories {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 0.5rem;
+  padding: 0.5rem 0 1.5rem 0.75rem;
+}
+
+.subCategory {
+  color: var(--neutral-50);
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  text-transform: uppercase;
+}
+
+.checkbox {
+  &:not(:last-child) {
+    border-bottom: 2px solid var(--neutral-20);
+  }
+}