fix: move feed state to a store and create feed loading UI (#189)

* style: Improved font size of the answers in the FAQ section of the landing page

* feat: move all email to defer queue (#186)

* fix: use relative part for defer func #185

* chore: move sendEmail into defer

* fix: remove anon function to defer #185

* feat: implement batch email sending with defer.run #185

* chore: debug sendEmails #185

* chore: add robots.txt

* chore: use promise.all in sendEmails

* chore: debug defer sendEmails #185

* chore: try defer sendEmail without loop #105

* chore: comment code

* chore: change loop style #185

* chore: use promise.all for vercel edge #185

* Moved the feed state to a store and added a loader

* feat: add await to sendEmailNotification #185

* chore: use sendEmails #185

* fix: debug sendEmails #185

* fix: email not updating in LMS

* fix: remove early return in sendEmails #185

* fixed the edit bug and moved the loader state to the file

* added a loading state for the post button

* change isDisabled to isLoading

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

apps/dashboard/src/lib/components/Course/components/NewsFeed/NewFeedModal.svelte

@@ -20,68 +20,65 @@
   export let editFeed: Feed;
 
   let newPost = '';
+  let isLoading = false;
   let createdFeed;
 
   const onPost = async () => {
     if (!newPost) return;
-
-    // Edit state
-    if (edit) {
-      onEdit(editFeed.id, newPost);
-
-      snackbar.success('Feed edited successfully');
-
-      edit = false;
-      newPost = '';
-      $isNewFeedModal.open = false;
-
-      return;
-    }
-
-    // Create state
+    isLoading = true;
     try {
-      const {
-        response: { data }
-      } = await createNewFeed({
-        content: newPost,
-        author_id: author.id,
-        course_id: courseId,
-        reaction: {
-          smile: [],
-          thumbsup: [],
-          thumbsdown: [],
-          clap: []
-        }
-      });
+      if (edit) {
+        onEdit(editFeed.id, newPost);
+        snackbar.success('Feed edited successfully');
 
-      if (!data) return;
+        edit = false;
+        newPost = '';
+        $isNewFeedModal.open = false;
+      } else {
+        const {
+          response: { data }
+        } = await createNewFeed({
+          content: newPost,
+          author_id: author.id,
+          course_id: courseId,
+          reaction: {
+            smile: [],
+            thumbsup: [],
+            thumbsdown: [],
+            clap: []
+          }
+        });
 
-      createdFeed = data[0];
+        if (!data) return;
+
+        createdFeed = data[0];
+
+        if (!createdFeed) return;
+
+        onSave({
+          id: createdFeed.id,
+          content: newPost,
+          author: {
+            profile: { ...author }
+          },
+          created_at: createdFeed.created_at,
+          comment: [],
+          reaction: createdFeed.reaction,
+          isPinned: false
+        });
+
+        snackbar.success('New feed added successfully');
+        triggerSendEmail(NOTIFICATION_NAME.NEWSFEED, {
+          authorId: createdFeed.author_id,
+          feedId: createdFeed.id
+        });
+        resetEditor();
+      }
     } catch (error) {
-      return snackbar.error('An error occurred while creating feed');
+      snackbar.error('An error occurred while ' + (edit ? 'editing feed' : 'creating feed'));
+    } finally {
+      isLoading = false;
     }
-
-    if (!createdFeed) return;
-
-    onSave({
-      id: createdFeed.id,
-      content: newPost,
-      author: {
-        profile: { ...author }
-      },
-      created_at: createdFeed.created_at,
-      comment: [],
-      reaction: createdFeed.reaction,
-      isPinned: false
-    });
-
-    snackbar.success('New feed added successfully');
-    triggerSendEmail(NOTIFICATION_NAME.NEWSFEED, {
-      authorId: createdFeed.author_id,
-      feedId: createdFeed.id
-    });
-
-    resetEditor();
   };
 
   const resetEditor = () => {
@@ -110,12 +107,8 @@
     />
     <div class="flex items-center justify-end py-2">
       <div class="flex gap-2">
-        <PrimaryButton
-          label="Cancel"
-          variant={VARIANTS.OUTLINED}
-          onClick={() => ($isNewFeedModal.open = false)}
-        />
-        <PrimaryButton label="Post" onClick={onPost} />
+        <PrimaryButton label="Cancel" variant={VARIANTS.OUTLINED} onClick={resetEditor} />
+        <PrimaryButton {isLoading} label="Post" onClick={onPost} />
       </div>
     </div>
   </section>

apps/dashboard/src/lib/components/Course/components/NewsFeed/NewsFeedLoader.svelte

@@ -0,0 +1,11 @@
+<script>
+  import { SkeletonPlaceholder, SkeletonText } from 'carbon-components-svelte';
+</script>
+
+<div class="flex flex-col gap-5 border border-gray-300 p-4 rounded-md mb-7 max-w-3xl">
+  <div class="flex items-center gap-2">
+    <SkeletonPlaceholder style="height: 2rem; width: 2rem;" class="rounded-full overflow-hidden" />
+    <SkeletonText width="30%" />
+  </div>
+  <SkeletonText paragraph lines={3} />
+</div>

apps/dashboard/src/lib/components/Course/components/NewsFeed/store.ts

@@ -1,5 +1,8 @@
+import type { Feed } from '$lib/utils/types/feed';
 import { writable } from 'svelte/store';
 
 export const isNewFeedModal = writable({
   open: false
 });
+
+export const newsFeed = writable<Feed[]>([]);