Resource progress functionality

src/components/TopicDetail/TopicDetail.tsx

@@ -65,11 +65,7 @@ export function TopicDetail() {
       .then(() => {
         setProgress(progress);
         setIsActive(false);
-        renderTopicProgress(
+        renderTopicProgress(topicId, progress);
-          topicId,
-          progress === 'done',
-          progress === 'learning'
-        );
       })
       .catch((err) => {
         alert(err.message);
@@ -117,20 +113,22 @@ export function TopicDetail() {
 
     // Toggle the topic status
     isTopicDone({ topicId, resourceId, resourceType })
-      .then((oldIsDone) => {
+      .then((oldIsDone) =>
-        return updateResourceProgressApi(
+        updateResourceProgressApi(
           {
             topicId,
             resourceId,
             resourceType,
           },
           oldIsDone ? 'pending' : 'done'
+        )
+      )
+      .then(({ done = [] }) => {
+        renderTopicProgress(
+          topicId,
+          done.includes(topicId) ? 'done' : 'pending'
         );
       })
-      .then((updatedResult) => {
-        const newIsDone = updatedResult.done.includes(topicId);
-        renderTopicProgress(topicId, newIsDone, false);
-      })
       .catch((err) => {
         alert(err.message);
         console.error(err);

src/lib/resource-progress.ts

@@ -1,5 +1,5 @@
-import { httpGet, httpPost } from './http';
 import Cookies from 'js-cookie';
+import { httpGet, httpPost } from './http';
 import { TOKEN_COOKIE_NAME } from './jwt';
 import Element = astroHTML.JSX.Element;
 
@@ -14,13 +14,10 @@ type TopicMeta = {
 
 export async function isTopicDone(topic: TopicMeta): Promise<boolean> {
   const { topicId, resourceType, resourceId } = topic;
-  const progressResult = await getResourceProgress(resourceType, resourceId);
+  const { done = [] } =
+    (await getResourceProgress(resourceType, resourceId)) || {};
 
-  if (!progressResult.done) {
+  return done?.includes(topicId);
-    return false;
-  }
-
-  return progressResult.done.includes(topicId);
 }
 
 export async function getTopicStatus(
@@ -29,11 +26,11 @@ export async function getTopicStatus(
   const { topicId, resourceType, resourceId } = topic;
   const progressResult = await getResourceProgress(resourceType, resourceId);
 
-  if (progressResult.done.includes(topicId)) {
+  if (progressResult?.done.includes(topicId)) {
     return 'done';
   }
 
-  if (progressResult.learning.includes(topicId)) {
+  if (progressResult?.learning.includes(topicId)) {
     return 'learning';
   }
 
@@ -152,9 +149,10 @@ export function setResourceProgress(
 
 export function renderTopicProgress(
   topicId: string,
-  isDone: boolean,
+  topicProgress: ResourceProgressType
-  isLearning: boolean
 ) {
+  const isLearning = topicProgress === 'learning';
+  const isDone = topicProgress === 'done';
   const matchingElements: Element[] = [];
 
   // Elements having sort order in the beginning of the group id
@@ -202,13 +200,14 @@ export async function renderResourceProgress(
   resourceType: ResourceType,
   resourceId: string
 ) {
-  const progress = await getResourceProgress(resourceType, resourceId);
+  const { done = [], learning = [] } =
+    (await getResourceProgress(resourceType, resourceId)) || {};
 
-  progress.done.forEach((topicId) => {
+  done.forEach((topicId) => {
-    renderTopicProgress(topicId, true, false);
+    renderTopicProgress(topicId, 'done');
   });
 
-  progress.learning.forEach((topicId) => {
+  learning.forEach((topicId) => {
-    renderTopicProgress(topicId, false, true);
+    renderTopicProgress(topicId, 'learning');
   });
 }