refactor: FeedType

heyxyz · Jun 25, 2024 · 40f595e · 40f595e · vercel · Jun 25, 2024
1 parent 7e87b3e
commit 40f595e
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 38 deletions.
diff --git a/apps/web/src/components/Notification/FeedType.tsx b/apps/web/src/components/Notification/FeedType.tsx
@@ -13,54 +13,57 @@ import { TabButton } from '@hey/ui';
 import { NotificationTabType } from 'src/enums';
 
 interface FeedTypeProps {
-  feedType: string;
+  feedType: NotificationTabType;
 }
 
 const FeedType: FC<FeedTypeProps> = ({ feedType }) => {
-  const switchTab = (type: string) => {
+  const switchTab = (type: NotificationTabType) => {
     Leafwatch.track(NOTIFICATION.SWITCH_NOTIFICATION_TAB, {
       notification_type: type.toLowerCase()
     });
   };
 
+  const tabs = [
+    {
+      icon: <BellIcon className="size-4" />,
+      name: 'All notifications',
+      type: NotificationTabType.All
+    },
+    {
+      icon: <AtSymbolIcon className="size-4" />,
+      name: 'Mentions',
+      type: NotificationTabType.Mentions
+    },
+    {
+      icon: <ChatBubbleLeftIcon className="size-4" />,
+      name: 'Comments',
+      type: NotificationTabType.Comments
+    },
+    {
+      icon: <HeartIcon className="size-4" />,
+      name: 'Likes',
+      type: NotificationTabType.Likes
+    },
+    {
+      icon: <RectangleStackIcon className="size-4" />,
+      name: 'Collects',
+      type: NotificationTabType.Collects
+    }
+  ];
+
   return (
     <div className="flex items-center justify-between">
       <div className="mt-3 flex gap-3 overflow-x-auto px-5 pb-2 sm:mt-0 sm:px-0 md:pb-0">
-        <TabButton
-          active={feedType === NotificationTabType.All}
-          icon={<BellIcon className="size-4" />}
-          name="All notifications"
-          onClick={() => switchTab(NotificationTabType.All)}
-          type={NotificationTabType.All.toLowerCase()}
-        />
-        <TabButton
-          active={feedType === NotificationTabType.Mentions}
-          icon={<AtSymbolIcon className="size-4" />}
-          name="Mentions"
-          onClick={() => switchTab(NotificationTabType.Mentions)}
-          type={NotificationTabType.Mentions.toLowerCase()}
-        />
-        <TabButton
-          active={feedType === NotificationTabType.Comments}
-          icon={<ChatBubbleLeftIcon className="size-4" />}
-          name="Comments"
-          onClick={() => switchTab(NotificationTabType.Comments)}
-          type={NotificationTabType.Comments.toLowerCase()}
-        />
-        <TabButton
-          active={feedType === NotificationTabType.Likes}
-          icon={<HeartIcon className="size-4" />}
-          name="Likes"
-          onClick={() => switchTab(NotificationTabType.Likes)}
-          type={NotificationTabType.Likes.toLowerCase()}
-        />
-        <TabButton
-          active={feedType === NotificationTabType.Collects}
-          icon={<RectangleStackIcon className="size-4" />}
-          name="Collects"
-          onClick={() => switchTab(NotificationTabType.Collects)}
-          type={NotificationTabType.Collects.toLowerCase()}
-        />
+        {tabs.map((tab) => (
+          <TabButton
+            active={feedType === tab.type}
+            icon={tab.icon}
+            key={tab.type}
+            name={tab.name}
+            onClick={() => switchTab(tab.type)}
+            type={tab.type.toLowerCase()}
+          />
+        ))}
       </div>
     </div>
   );

diff --git a/apps/web/src/components/Notification/index.tsx b/apps/web/src/components/Notification/index.tsx
@@ -1,4 +1,5 @@
 import type { NextPage } from 'next';
+import type { NotificationTabType } from 'src/enums';
 
 import MetaTags from '@components/Common/MetaTags';
 import NotLoggedIn from '@components/Shared/NotLoggedIn';
@@ -47,7 +48,7 @@ const Notification: NextPage = () => {
       <MetaTags title={`Notifications • ${APP_NAME}`} />
       <div className="w-full max-w-4xl space-y-3">
         <div className="flex flex-wrap justify-between gap-3 pb-2">
-          <FeedType feedType={feedType} />
+          <FeedType feedType={feedType as NotificationTabType} />
           <Settings />
         </div>
         <List feedType={feedType} />