From 7177638b49c1783c25b41de5542c70e23c43ee23 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Tue, 11 Apr 2023 12:19:46 +0600
Subject: [PATCH] chore: toggle topic done

---
 src/components/TopicOverlay/topic.js | 40 +++++++++++++++++++++-------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/components/TopicOverlay/topic.js b/src/components/TopicOverlay/topic.js
index aae7e8163..5861bca5b 100644
--- a/src/components/TopicOverlay/topic.js
+++ b/src/components/TopicOverlay/topic.js
@@ -1,3 +1,4 @@
+import { toggleMarkResourceDoneApi } from '../../lib/progress-api.ts';
 export class Topic {
   constructor() {
     this.overlayId = 'topic-overlay';
@@ -244,22 +245,41 @@ export class Topic {
     return matchingElements;
   }
 
-  markAsDone(topicId) {
+  async markAsDone(topicId) {
     const updatedTopicId = topicId.replace(/^\d+-/, '');
-    localStorage.setItem(updatedTopicId, 'done');
-
-    this.querySvgElementsByTopicId(updatedTopicId).forEach((item) => {
-      item?.classList?.add('done');
+    const { response, error } = await toggleMarkResourceDoneApi({
+      resourceId: this.activeResourceId,
+      topicId: updatedTopicId,
+      resourceType: this.activeResourceType,
     });
+
+    if (response) {
+      this.close();
+      this.querySvgElementsByTopicId(updatedTopicId).forEach((item) => {
+        item?.classList?.add('done');
+      });
+    } else {
+      console.error(error);
+    }
   }
 
-  markAsPending(topicId) {
+  async markAsPending(topicId) {
     const updatedTopicId = topicId.replace(/^\d+-/, '');
 
-    localStorage.removeItem(updatedTopicId);
-    this.querySvgElementsByTopicId(updatedTopicId).forEach((item) => {
-      item?.classList?.remove('done');
+    const { response, error } = await toggleMarkResourceDoneApi({
+      resourceId: this.activeResourceId,
+      topicId: updatedTopicId,
+      resourceType: this.activeResourceType,
     });
+
+    if (response) {
+      this.close();
+      this.querySvgElementsByTopicId(updatedTopicId).forEach((item) => {
+        item?.classList?.remove('done');
+      });
+    } else {
+      console.error(error);
+    }
   }
 
   handleOverlayClick(e) {
@@ -275,7 +295,7 @@ export class Topic {
       e.target.closest(`#${this.markTopicDoneId}`);
     if (isClickedDone) {
       this.markAsDone(this.activeTopicId);
-      this.close();
+      // this.close();
     }
 
     const isClickedPending =