feat(Category Menu): go back to id for active category

Makes it easier to use component in storybook
StampyAI · Feb 10, 2024 · fff1254 · fff1254
1 parent ac34530
commit fff1254
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/app/components/CategoriesNav/Menu.tsx b/app/components/CategoriesNav/Menu.tsx
@@ -4,15 +4,15 @@ import './menu.css'
 
 interface CategoriesNavProps {
   /**
-   * Articles List
+   * Categories List
    */
   categories: TagType[]
   /**
-   * Selected article
+   * Id of selected category
    */
-  active: TagType
+  activeCategoryId: number
   /**
-   * Callback function to handle click on article
+   * Callback function to handle click on category
    */
   onClick?: (t: TagType) => void
   /**
@@ -21,7 +21,12 @@ interface CategoriesNavProps {
   onChange?: (search: string) => void
 }
 
-export const CategoriesNav = ({categories, active, onChange, onClick}: CategoriesNavProps) => {
+export const CategoriesNav = ({
+  categories,
+  activeCategoryId,
+  onChange,
+  onClick,
+}: CategoriesNavProps) => {
   const handleClick = (newTag: TagType) => {
     if (onClick) {
       onClick(newTag)
@@ -40,7 +45,7 @@ export const CategoriesNav = ({categories, active, onChange, onClick}: Categorie
             key={`category-${category.tagId}`}
             className={[
               'category-autoLayoutHorizontal',
-              active?.tagId == category.tagId ? ['active'].join(' ') : '',
+              activeCategoryId == category.tagId ? ['active'].join(' ') : '',
             ].join(' ')}
             onClick={() => handleClick(category)}
           >

diff --git a/app/routes/tags.$tag.tsx b/app/routes/tags.$tag.tsx
@@ -63,7 +63,7 @@ export default function App() {
 
               // {title: "AI Safety", id: 1},
             }
-            active={selectedTag}
+            activeCategoryId={selectedTag.tagId}
             onClick={(selectedTag) => {
               navigate(`../${selectedTag.name}`, {relative: 'path'})
             }}