feat: implement checklist (#5418)

src/components/CustomRoadmap/CustomRoadmap.tsx

@@ -1,17 +1,11 @@
 import { useEffect, useState } from 'react';
 import { getUrlParams } from '../../lib/browser';
-import {
+import { type AppError, type FetchError, httpGet } from '../../lib/http';
-  type AppError,
-  type FetchError,
-  httpGet,
-  httpPost,
-} 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 = [

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"
       />

src/lib/resource-progress.ts

@@ -112,11 +112,11 @@ export async function getResourceProgress(
     return loadFreshProgress(resourceType, resourceId);
   } else {
     setResourceProgress(
-        resourceType,
+      resourceType,
-        resourceId,
+      resourceId,
-        progress?.done || [],
+      progress?.done || [],
-        progress?.learning || [],
+      progress?.learning || [],
-        progress?.skipped || [],
+      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) => {