From ed5e6fab3b0f73d507c3cf54a5b7ca2d87d883c9 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Wed, 13 Dec 2023 14:28:10 +0300
Subject: [PATCH] chore: show loader when deleting a question or comment

---
 .../components/Org/Community/DeleteModal.svelte  |  2 ++
 .../src/routes/lms/community/[slug]/+page.svelte | 16 ++++++++++++++--
 .../org/[slug]/community/[slug]/+page.svelte     | 16 ++++++++++++++--
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/apps/dashboard/src/lib/components/Org/Community/DeleteModal.svelte b/apps/dashboard/src/lib/components/Org/Community/DeleteModal.svelte
index faea14a3..921ce071 100644
--- a/apps/dashboard/src/lib/components/Org/Community/DeleteModal.svelte
+++ b/apps/dashboard/src/lib/components/Org/Community/DeleteModal.svelte
@@ -7,6 +7,7 @@
   export let onCancel = () => {};
   export let open = false;
   export let isQuestion = false;
+  export let isDeleting = false;
 </script>
 
 <Modal
@@ -32,6 +33,7 @@
         variant={VARIANTS.CONTAINED}
         label="Yes, delete"
         onClick={onDelete}
+        isLoading={isDeleting}
       />
     </div>
   </div>
diff --git a/apps/dashboard/src/routes/lms/community/[slug]/+page.svelte b/apps/dashboard/src/routes/lms/community/[slug]/+page.svelte
index d298efb0..cbe6b3e7 100644
--- a/apps/dashboard/src/routes/lms/community/[slug]/+page.svelte
+++ b/apps/dashboard/src/routes/lms/community/[slug]/+page.svelte
@@ -67,11 +67,13 @@
   let isEditMode = false;
   let deleteComment = {
     shouldDelete: false,
-    commentId: ''
+    commentId: '',
+    isDeleting: false
   };
   let deleteQuestion = {
     shouldDelete: false,
-    questionId: ''
+    questionId: '',
+    isDeleting: false
   };
   let editContent = {
     title: '',
@@ -267,11 +269,15 @@
 
   async function handleDelete(isQuestion: boolean) {
     if (!isQuestion) {
+      deleteComment.isDeleting = true;
+
       const { error } = await supabase
         .from('community_answer')
         .delete()
         .match({ id: deleteComment.commentId });
 
+      deleteComment.isDeleting = false;
+
       if (error) {
         snackbar.error('Error deleting comments');
         console.log('Error deleting comments', error);
@@ -286,6 +292,7 @@
       // Handle only delete comment
       return;
     }
+    deleteQuestion.isDeleting = true;
 
     const { error: commentDeleteError } = await supabase
       .from('community_answer')
@@ -295,6 +302,8 @@
     if (commentDeleteError) {
       snackbar.error('Error deleting comments');
       console.log('Error deleting comments', commentDeleteError);
+
+      deleteQuestion.isDeleting = false;
       return;
     }
 
@@ -311,6 +320,7 @@
 
     snackbar.success('Deleted successfully');
     goto(`/lms/community`);
+    deleteQuestion.isDeleting = false;
   }
 
   $: browser && fetchCommunityQuestion(slug);
@@ -322,6 +332,7 @@
 
 <DeleteModal
   bind:open={deleteQuestion.shouldDelete}
+  bind:isDeleting={deleteQuestion.isDeleting}
   onCancel={() => {
     deleteQuestion.shouldDelete = false;
     deleteQuestion.questionId = '';
@@ -332,6 +343,7 @@
 
 <DeleteModal
   bind:open={deleteComment.shouldDelete}
+  isDeleting={deleteComment.isDeleting}
   onCancel={() => {
     deleteComment.shouldDelete = false;
     deleteComment.commentId = '';
diff --git a/apps/dashboard/src/routes/org/[slug]/community/[slug]/+page.svelte b/apps/dashboard/src/routes/org/[slug]/community/[slug]/+page.svelte
index 4386f016..0396c367 100644
--- a/apps/dashboard/src/routes/org/[slug]/community/[slug]/+page.svelte
+++ b/apps/dashboard/src/routes/org/[slug]/community/[slug]/+page.svelte
@@ -67,11 +67,13 @@
   let isEditMode = false;
   let deleteComment = {
     shouldDelete: false,
-    commentId: ''
+    commentId: '',
+    isDeleting: false
   };
   let deleteQuestion = {
     shouldDelete: false,
-    questionId: ''
+    questionId: '',
+    isDeleting: false
   };
   let editContent = {
     title: '',
@@ -267,11 +269,15 @@
 
   async function handleDelete(isQuestion: boolean) {
     if (!isQuestion) {
+      deleteComment.isDeleting = true;
+
       const { error } = await supabase
         .from('community_answer')
         .delete()
         .match({ id: deleteComment.commentId });
 
+      deleteComment.isDeleting = false;
+
       if (error) {
         snackbar.error('Error deleting comments');
         console.log('Error deleting comments', error);
@@ -286,6 +292,7 @@
       // Handle only delete comment
       return;
     }
+    deleteQuestion.isDeleting = true;
 
     const { error: commentDeleteError } = await supabase
       .from('community_answer')
@@ -295,6 +302,8 @@
     if (commentDeleteError) {
       snackbar.error('Error deleting comments');
       console.log('Error deleting comments', commentDeleteError);
+
+      deleteQuestion.isDeleting = false;
       return;
     }
 
@@ -311,6 +320,7 @@
 
     snackbar.success('Deleted successfully');
     goto(`${$currentOrgPath}/community`);
+    deleteQuestion.isDeleting = false;
   }
 
   $: browser && fetchCommunityQuestion(slug);
@@ -322,6 +332,7 @@
 
 <DeleteModal
   bind:open={deleteQuestion.shouldDelete}
+  bind:isDeleting={deleteQuestion.isDeleting}
   onCancel={() => {
     deleteQuestion.shouldDelete = false;
     deleteQuestion.questionId = '';
@@ -332,6 +343,7 @@
 
 <DeleteModal
   bind:open={deleteComment.shouldDelete}
+  isDeleting={deleteComment.isDeleting}
   onCancel={() => {
     deleteComment.shouldDelete = false;
     deleteComment.commentId = '';