From 1f7554df5be15916aa20d24d4bdfbe120571f4ec Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 13 Dec 2022 14:36:16 +0400
Subject: [PATCH] Add functionality to mark done topic as pending

---
 components/roadmap/content-drawer.tsx | 19 ++++++++++++++-----
 pages/[roadmap]/interactive.tsx       | 10 ++++++++--
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/components/roadmap/content-drawer.tsx b/components/roadmap/content-drawer.tsx
index 77ddeb74d..4a045e738 100644
--- a/components/roadmap/content-drawer.tsx
+++ b/components/roadmap/content-drawer.tsx
@@ -19,13 +19,25 @@ export function markTopicDone(groupId: string) {
   );
 }
 
+export function markTopicPending(groupId: string) {
+  localStorage.removeItem(groupId);
+
+  queryGroupElementsById(groupId).forEach((item) =>
+    item?.classList?.remove('done')
+  );
+}
+
+export function isTopicDone(groupId: string) {
+  return localStorage.getItem(groupId) === 'done';
+}
+
 export function ContentDrawer(props: ContentDrawerProps) {
   const { roadmap, groupId, onClose = () => null } = props;
   if (!groupId) {
     return null;
   }
 
-  const isDone = localStorage.getItem(groupId) === 'done';
+  const isDone = isTopicDone(groupId);
 
   return (
     <Box zIndex={99999} pos="relative">
@@ -80,10 +92,7 @@ export function ContentDrawer(props: ContentDrawerProps) {
             {isDone && (
               <Button
                 onClick={() => {
-                  localStorage.removeItem(groupId);
-                  queryGroupElementsById(groupId).forEach((item) =>
-                    item?.classList?.remove('done')
-                  );
+                  markTopicPending(groupId);
                   onClose();
                 }}
                 colorScheme="red"
diff --git a/pages/[roadmap]/interactive.tsx b/pages/[roadmap]/interactive.tsx
index 34b7378b7..65765ea20 100644
--- a/pages/[roadmap]/interactive.tsx
+++ b/pages/[roadmap]/interactive.tsx
@@ -8,7 +8,7 @@ import { Footer } from '../../components/footer';
 import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap';
 import Helmet from '../../components/helmet';
 import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header';
-import { ContentDrawer, markTopicDone } from '../../components/roadmap/content-drawer';
+import { ContentDrawer, isTopicDone, markTopicDone, markTopicPending } from '../../components/roadmap/content-drawer';
 import { RoadmapError } from '../../components/roadmap/roadmap-error';
 import { RoadmapLoader } from '../../components/roadmap/roadmap-loader';
 import { removeSortingInfo } from '../../lib/renderer';
@@ -81,7 +81,13 @@ export function InteractiveRoadmapRenderer(props: RoadmapProps) {
       }
 
       event.preventDefault();
-      markTopicDone(removeSortingInfo(groupId));
+      const normalizedGroupId = removeSortingInfo(groupId);
+
+      if (isTopicDone(normalizedGroupId)) {
+        markTopicPending(normalizedGroupId);
+      } else {
+        markTopicDone(normalizedGroupId);
+      }
     }
 
     window.addEventListener('keydown', keydownListener);