From a0bc3200ed70dc711f6f2db58d65c2ff9d34f31b Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 13 Dec 2022 14:32:16 +0400
Subject: [PATCH] Add functionality to mark as done on right click

---
 components/roadmap/content-drawer.tsx | 13 +++++++++----
 pages/[roadmap]/interactive.tsx       | 23 +++++++++++++++++++----
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/components/roadmap/content-drawer.tsx b/components/roadmap/content-drawer.tsx
index f8483c19e..77ddeb74d 100644
--- a/components/roadmap/content-drawer.tsx
+++ b/components/roadmap/content-drawer.tsx
@@ -11,6 +11,14 @@ type ContentDrawerProps = {
   onClose?: () => void;
 };
 
+export function markTopicDone(groupId: string) {
+  localStorage.setItem(groupId, 'done');
+
+  queryGroupElementsById(groupId).forEach((item) =>
+    item?.classList?.add('done')
+  );
+}
+
 export function ContentDrawer(props: ContentDrawerProps) {
   const { roadmap, groupId, onClose = () => null } = props;
   if (!groupId) {
@@ -52,10 +60,7 @@ export function ContentDrawer(props: ContentDrawerProps) {
             {!isDone && (
               <Button
                 onClick={() => {
-                  localStorage.setItem(groupId, 'done');
-                  queryGroupElementsById(groupId).forEach((item) =>
-                    item?.classList?.add('done')
-                  );
+                  markTopicDone(groupId);
                   onClose();
                 }}
                 colorScheme="green"
diff --git a/pages/[roadmap]/interactive.tsx b/pages/[roadmap]/interactive.tsx
index 46ac86d8e..34b7378b7 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 } from '../../components/roadmap/content-drawer';
+import { ContentDrawer, markTopicDone } from '../../components/roadmap/content-drawer';
 import { RoadmapError } from '../../components/roadmap/roadmap-error';
 import { RoadmapLoader } from '../../components/roadmap/roadmap-loader';
 import { removeSortingInfo } from '../../lib/renderer';
@@ -53,10 +53,14 @@ export function InteractiveRoadmapRenderer(props: RoadmapProps) {
       }
     }
 
+    function getClosestGroupId(target: HTMLElement) {
+      const targetGroup = target?.closest('g');
+      return targetGroup?.dataset?.groupId;
+    }
+
     function clickListener(event: MouseEvent) {
-      const targetGroup = (event?.target as HTMLElement)?.closest('g');
-      const groupId = targetGroup?.dataset?.groupId;
-      if (!targetGroup || !groupId) {
+      const groupId = getClosestGroupId(event.target as HTMLElement);
+      if (!groupId) {
         return;
       }
 
@@ -70,8 +74,19 @@ export function InteractiveRoadmapRenderer(props: RoadmapProps) {
       setGroupId(removeSortingInfo(groupId));
     }
 
+    function rightClickListener(event: MouseEvent) {
+      const groupId = getClosestGroupId(event.target as HTMLElement);
+      if (!groupId) {
+        return;
+      }
+
+      event.preventDefault();
+      markTopicDone(removeSortingInfo(groupId));
+    }
+
     window.addEventListener('keydown', keydownListener);
     window.addEventListener('click', clickListener);
+    window.addEventListener('contextmenu', rightClickListener)
 
     return () => {
       window.removeEventListener('keydown', keydownListener);