From 1cb29d0fc7187b510df294d32944c1edc73051d8 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Thu, 28 Mar 2024 02:56:05 +0600
Subject: [PATCH] feat: implement checklist (#5418)

---
 .../CustomRoadmap/CustomRoadmap.tsx           |  8 +-----
 .../CustomRoadmap/FlowRoadmapRenderer.tsx     | 28 +++++++++++++++++++
 src/lib/resource-progress.ts                  | 12 ++++----
 3 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/components/CustomRoadmap/CustomRoadmap.tsx b/src/components/CustomRoadmap/CustomRoadmap.tsx
index 9a039e0a6..e8c16008c 100644
--- a/src/components/CustomRoadmap/CustomRoadmap.tsx
+++ b/src/components/CustomRoadmap/CustomRoadmap.tsx
@@ -1,17 +1,11 @@
 import { useEffect, useState } from 'react';
 import { getUrlParams } from '../../lib/browser';
-import {
-  type AppError,
-  type FetchError,
-  httpGet,
-  httpPost,
-} from '../../lib/http';
+import { type AppError, type FetchError, httpGet } from '../../lib/http';
 import { RoadmapHeader } from './RoadmapHeader';
 import { TopicDetail } from '../TopicDetail/TopicDetail';
 import type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal';
 import { currentRoadmap } from '../../stores/roadmap';
 import { RestrictedPage } from './RestrictedPage';
-import { isLoggedIn } from '../../lib/jwt';
 import { FlowRoadmapRenderer } from './FlowRoadmapRenderer';
 
 export const allowedLinkTypes = [
diff --git a/src/components/CustomRoadmap/FlowRoadmapRenderer.tsx b/src/components/CustomRoadmap/FlowRoadmapRenderer.tsx
index b014ddc94..3ba55d01b 100644
--- a/src/components/CustomRoadmap/FlowRoadmapRenderer.tsx
+++ b/src/components/CustomRoadmap/FlowRoadmapRenderer.tsx
@@ -125,6 +125,32 @@ export function FlowRoadmapRenderer(props: FlowRoadmapRendererProps) {
     }
   }, []);
 
+  const handleChecklistCheckboxClick = useCallback(
+    (e: MouseEvent, checklistId: string) => {
+      const target = e?.currentTarget as HTMLDivElement;
+      if (!target) {
+        return;
+      }
+
+      const isCurrentStatusDone = target?.classList.contains('done');
+      updateTopicStatus(checklistId, isCurrentStatusDone ? 'pending' : 'done');
+    },
+    [],
+  );
+
+  const handleChecklistLabelClick = useCallback(
+    (e: MouseEvent, checklistId: string) => {
+      const target = e?.currentTarget as HTMLDivElement;
+      if (!target) {
+        return;
+      }
+
+      const isCurrentStatusDone = target?.classList.contains('done');
+      updateTopicStatus(checklistId, isCurrentStatusDone ? 'pending' : 'done');
+    },
+    [],
+  );
+
   return (
     <>
       {hideRenderer && (
@@ -162,6 +188,8 @@ export function FlowRoadmapRenderer(props: FlowRoadmapRendererProps) {
         onTopicAltClick={handleTopicAltClick}
         onButtonNodeClick={handleLinkClick}
         onLinkClick={handleLinkClick}
+        onChecklistCheckboxClick={handleChecklistCheckboxClick}
+        onChecklistLableClick={handleChecklistLabelClick}
         fontFamily="Balsamiq Sans"
         fontURL="/fonts/balsamiq.woff2"
       />
diff --git a/src/lib/resource-progress.ts b/src/lib/resource-progress.ts
index ebb10841b..0b32c9236 100644
--- a/src/lib/resource-progress.ts
+++ b/src/lib/resource-progress.ts
@@ -112,11 +112,11 @@ export async function getResourceProgress(
     return loadFreshProgress(resourceType, resourceId);
   } else {
     setResourceProgress(
-        resourceType,
-        resourceId,
-        progress?.done || [],
-        progress?.learning || [],
-        progress?.skipped || [],
+      resourceType,
+      resourceId,
+      progress?.done || [],
+      progress?.learning || [],
+      progress?.skipped || [],
     );
   }
 
@@ -229,6 +229,8 @@ export function topicSelectorAll(
       `[data-group-id="check:${topicId}"]`, // Matching "check:XXXX" box of the topic
       `[data-node-id="${topicId}"]`, // Matching custom roadmap nodes
       `[data-id="${topicId}"]`, // Matching custom roadmap nodes
+      `[data-checklist-checkbox][data-checklist-id="${topicId}"]`, // Matching checklist checkboxes
+      `[data-checklist-label][data-checklist-id="${topicId}"]`, // Matching checklist labels
     ],
     parentElement,
   ).forEach((element) => {