From 484471d72724fe9deb2bfc907512c629732f52a4 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Wed, 18 Sep 2024 19:45:05 +0600
Subject: [PATCH] feat: add mark favourite button

---
 src/components/Roadmaps/RoadmapCard.tsx  | 31 ++++++++++++++++++++++++
 src/components/Roadmaps/RoadmapsPage.tsx | 11 +++------
 src/hooks/use-is-mounted.ts              | 13 ++++++++++
 3 files changed, 47 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Roadmaps/RoadmapCard.tsx
 create mode 100644 src/hooks/use-is-mounted.ts

diff --git a/src/components/Roadmaps/RoadmapCard.tsx b/src/components/Roadmaps/RoadmapCard.tsx
new file mode 100644
index 000000000..f7e43ccaa
--- /dev/null
+++ b/src/components/Roadmaps/RoadmapCard.tsx
@@ -0,0 +1,31 @@
+import { useIsMounted } from '../../hooks/use-is-mounted';
+import { MarkFavorite } from '../FeaturedItems/MarkFavorite';
+import type { GroupType } from './RoadmapsPage';
+
+type RoadmapCardProps = {
+  roadmap: GroupType['roadmaps'][number];
+};
+
+export function RoadmapCard(props: RoadmapCardProps) {
+  const { roadmap } = props;
+
+  const isMounted = useIsMounted();
+
+  return (
+    <a
+      key={roadmap.link}
+      className="relative rounded-md border bg-white px-3 py-2 text-left text-sm shadow-sm transition-all hover:border-gray-300 hover:bg-gray-50"
+      href={roadmap.link}
+    >
+      {roadmap.title}
+
+      {isMounted && (
+        <MarkFavorite
+          resourceId={roadmap.link.split('/').pop()!}
+          resourceType="roadmap"
+          className="data-[is-favorite=true]:opacity-35"
+        />
+      )}
+    </a>
+  );
+}
diff --git a/src/components/Roadmaps/RoadmapsPage.tsx b/src/components/Roadmaps/RoadmapsPage.tsx
index eb1c4896a..fe37cf00c 100644
--- a/src/components/Roadmaps/RoadmapsPage.tsx
+++ b/src/components/Roadmaps/RoadmapsPage.tsx
@@ -8,6 +8,7 @@ import {
   getUrlParams,
   setUrlParams,
 } from '../../lib/browser.ts';
+import { RoadmapCard } from './RoadmapCard.tsx';
 
 const groupNames = [
   'Absolute Beginners',
@@ -27,7 +28,7 @@ const groupNames = [
 
 type AllowGroupNames = (typeof groupNames)[number];
 
-type GroupType = {
+export type GroupType = {
   group: AllowGroupNames;
   roadmaps: {
     title: string;
@@ -547,13 +548,7 @@ export function RoadmapsPage() {
 
               <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2 md:grid-cols-3">
                 {group.roadmaps.map((roadmap) => (
-                  <a
-                    key={roadmap.link}
-                    className="rounded-md border bg-white px-3 py-2 text-left text-sm shadow-sm transition-all hover:border-gray-300 hover:bg-gray-50"
-                    href={roadmap.link}
-                  >
-                    {roadmap.title}
-                  </a>
+                  <RoadmapCard roadmap={roadmap} key={roadmap.link} />
                 ))}
               </div>
             </div>
diff --git a/src/hooks/use-is-mounted.ts b/src/hooks/use-is-mounted.ts
new file mode 100644
index 000000000..ee266e9b2
--- /dev/null
+++ b/src/hooks/use-is-mounted.ts
@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+
+export function useIsMounted() {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+
+    return () => {
+      setIsMounted(false);
+    };
+  }, []);
+  return isMounted;
+}