feat:refactored sidebar component removed internal state

nodejs · Nov 2, 2023 · 37941ae · 37941ae
1 parent 12e4183
commit 37941ae
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 46 deletions.
diff --git a/components/Common/Sidebar/SidebarGroup/index.tsx b/components/Common/Sidebar/SidebarGroup/index.tsx
@@ -1,38 +1,33 @@
-import type { FC } from 'react';
+import type { ComponentProps, FC } from 'react';
 
 import SidebarItem from '@/components/Common/Sidebar/SidebarItem';
 
 import styles from './index.module.css';
-import type { ActiveItem, SidebarGroupType } from '..';
 
-type SideBarGroupProps = SidebarGroupType & {
-  activeItem?: ActiveItem;
-  setActiveItem: (item: ActiveItem) => void;
+type SidebarGroupProps = {
+  groupName: string;
+  items: ComponentProps<typeof SidebarItem>[];
+  activeItem?: ComponentProps<typeof SidebarItem>;
 };
 
-const SidebarGroup: FC<SideBarGroupProps> = ({
+const SidebarGroup: FC<SidebarGroupProps> = ({
   groupName,
   items,
   activeItem,
-  setActiveItem,
 }) => {
-  const handleSideBarItemClick = (title: string) => {
-    setActiveItem({ groupName, title });
-  };
-
   return (
     <section className={styles.group}>
       <label className={styles.groupName}>{groupName}</label>
       <ul className={styles.itemList}>
-        {items.map(item => (
+        {items.map(({ title, url, isActive }) => (
           <SidebarItem
-            key={item.title}
-            {...item}
+            key={title}
+            title={title}
+            url={url}
             isActive={
-              activeItem?.groupName === groupName &&
-              activeItem?.title === item.title
+              isActive ||
+              (activeItem?.title === title && activeItem.url === activeItem.url)
             }
-            onClick={handleSideBarItemClick}
           />
         ))}
       </ul>

diff --git a/components/Common/Sidebar/SidebarItem/index.tsx b/components/Common/Sidebar/SidebarItem/index.tsx
@@ -4,24 +4,22 @@ import type { FC } from 'react';
 import LocalizedLink from '@/components/LocalizedLink';
 
 import styles from './index.module.css';
-import type { SidebarItemType } from '..';
 
-type SideBarItemProps = SidebarItemType & {
+type SidebarItemProps = {
+  title: string;
+  url: string;
   isActive?: boolean;
-  onClick: (title: string) => void;
 };
 
-const SidebarItem: FC<SideBarItemProps> = ({
+const SidebarItem: FC<SidebarItemProps> = ({
   url,
   title,
-  onClick,
-  isActive,
+  isActive = false,
 }) => (
   <li
     className={classNames(styles.sideBarItem, {
       [styles.active]: isActive,
     })}
-    onClick={() => onClick(title)}
   >
     <LocalizedLink href={url}>{title}</LocalizedLink>
   </li>

diff --git a/components/Common/Sidebar/index.stories.tsx b/components/Common/Sidebar/index.stories.tsx
@@ -38,4 +38,41 @@ export const Default: Story = {
   },
 };
 
+export const ActiveItem: Story = {
+  args: {
+    groups: [
+      {
+        groupName: 'group1',
+        items: [
+          {
+            url: '/item1',
+            title: 'item1',
+          },
+          {
+            url: '/item2',
+            title: 'item2',
+          },
+        ],
+      },
+      {
+        groupName: 'group2',
+        items: [
+          {
+            url: '/item3',
+            title: 'item3',
+          },
+          {
+            url: '/item4',
+            title: 'item4',
+          },
+        ],
+      },
+    ],
+    activeItem: {
+      url: '/item2',
+      title: 'item2',
+    },
+  },
+};
+
 export default { component: Sidebar } as Meta;
diff --git a/components/Common/Sidebar/index.tsx b/components/Common/Sidebar/index.tsx
@@ -1,31 +1,16 @@
-import type { Url } from 'url';
+import type { ComponentProps, FC } from 'react';
 
-import { useState } from 'react';
-import type { FC } from 'react';
+import SidebarGroup from '@/components/Common/Sidebar/SidebarGroup';
+import type SidebarItem from '@/components/Common/Sidebar/SidebarItem';
 
 import styles from './index.module.css';
-import SidebarGroup from './SidebarGroup';
-
-export type SidebarItemType = {
-  url: string | Url;
-  title: string;
-};
-
-export type SidebarGroupType = {
-  groupName: string;
-  items: SidebarItemType[];
-};
-
-export type ActiveItem = Pick<SidebarGroupType, 'groupName'> &
-  Pick<SidebarItemType, 'title'>;
 
 type SidebarProps = {
-  groups: SidebarGroupType[];
+  groups: ComponentProps<typeof SidebarGroup>[];
+  activeItem?: ComponentProps<typeof SidebarItem>;
 };
 
-const SideBar: FC<SidebarProps> = ({ groups }) => {
-  const [activeItem, setActiveItem] = useState<ActiveItem>();
-
+const SideBar: FC<SidebarProps> = ({ groups, activeItem }) => {
   return (
     <aside className={styles.sideBar}>
       {groups.map(({ groupName, items }) => (
@@ -34,7 +19,6 @@ const SideBar: FC<SidebarProps> = ({ groups }) => {
           groupName={groupName}
           items={items}
           activeItem={activeItem}
-          setActiveItem={setActiveItem}
         />
       ))}
     </aside>