feat: filter community questions by course (#157)

* checkpoint save

* checkpoint

* feat: course dropdown

* added comments

* feat: generate db migration

* fixes

* PR Fixes

* PR Fixes

* refactoring

* show empty state

* improve styling

* fix styling issue

* PR Fixes

* PR Fixes

* PR Fixes

* dropdown for edit mode

* test db schema change on staging

* fix: change course_id to courseId

* fix theming issue

---------

Co-authored-by: Rotimi Best <[email protected]>

apps/dashboard/src/routes/+layout.server.ts

@@ -42,6 +42,7 @@ export const load = async ({ url, cookies }): Promise<LoadOutput> => {
     response.isOrgSite = debugMode || answer;
     response.orgSiteName = debugMode ? _orgSiteName : subdomain;
     response.org = (await getCurrentOrg(response.orgSiteName, true)) || null;
+    
 
     if (!response.org && !dev) {
       throw redirect(307, 'https://app.classroomio.com/404?type=org');

apps/dashboard/src/routes/+layout.svelte

@@ -184,9 +184,8 @@
           goto(`/org/${orgRes.currentOrg.siteName}`);
         }
       }
-      if (typeof orgRes?.currentOrg?.theme === 'string') {
-        setTheme(orgRes.currentOrg.theme);
-      }
+
+      setTheme(orgRes?.currentOrg?.theme);
     }
 
     if (!profileData && !isPublicRoute($page.url?.pathname)) {
@@ -286,7 +285,7 @@
 {#if data.skipAuth}
   <PlayQuiz />
 {:else if data.isOrgSite && !path}
-  <OrgLandingPage orgSiteName={data.orgSiteName} org={data.org} />
+  <OrgLandingPage orgSiteName={data.orgSiteName} org={data.org || {}} />
 {:else}
   <main class="dark:bg-black">
     {#if $navigating && $delayedPreloading}

apps/dashboard/src/routes/lms/community/[slug]/+page.svelte

@@ -2,7 +2,7 @@
   import { goto } from '$app/navigation';
   import pluralize from 'pluralize';
   import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
-  import { SkeletonPlaceholder, SkeletonText } from 'carbon-components-svelte';
+  import { Dropdown, SkeletonPlaceholder, SkeletonText } from 'carbon-components-svelte';
   import ArrowLeftIcon from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
   import Vote from '$lib/components/Vote/index.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
@@ -10,7 +10,7 @@
   import Avatar from '$lib/components/Avatar/index.svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
   import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
-  import { isOrgAdmin } from '$lib/utils/store/org';
+  import { currentOrg, isOrgAdmin } from '$lib/utils/store/org';
   import { profile } from '$lib/utils/store/user';
   import { supabase } from '$lib/utils/functions/supabase';
   import {
@@ -23,6 +23,7 @@
   import TextEditor from '$lib/components/TextEditor/index.svelte';
   import { calDateDiff } from '$lib/utils/functions/date';
   import { browser } from '$app/environment';
+  import { fetchCourses } from '$lib/components/Courses/api.js';
 
   export let data;
   const { slug } = data;
@@ -49,12 +50,14 @@
     createdAt: string;
     comments: Comment[];
     totalComments: number;
+    courseId: string;
   }
 
   let question: Question;
   let comment = '';
   let errors: {
     title?: string;
+    courseId?: string;
   } = {};
   let isValidAnswer = false; // V2 allow admin mark an answer as accepted
   let resetInput = 1;
@@ -77,10 +80,12 @@
   };
   let editContent = {
     title: '',
-    body: ''
+    body: '',
+    courseId: ''
   };
 
   let editorInstance = false;
+  let fetchedCourses = [];
 
   function mapResToQuestion(data): Question {
     return {
@@ -103,10 +108,16 @@
         comment: c.body,
         createdAt: calDateDiff(c.created_at)
       })),
-      totalComments: 0
+      totalComments: 0,
+      courseId: data.course_id
     };
   }
 
+  async function getCourses(userId: string | null, orgId: string) {
+    const coursesResults = await fetchCourses(userId, orgId);
+    fetchedCourses = coursesResults.allCourses;
+  }
+
   async function fetchCommunityQuestion(slug: string) {
     if (!slug) return;
 
@@ -119,6 +130,7 @@
         body,
         votes,
         created_at,
+        course_id,
         slug,
         comments:community_answer(
           id,
@@ -127,7 +139,10 @@
           created_at,
           author:profile(id, fullname, avatar_url)
         ),
-        author:profile(id, fullname, avatar_url)
+        author:profile(id, fullname, avatar_url),
+        course!inner (
+          title
+        )
       `
       )
       .eq('slug', slug)
@@ -227,8 +242,7 @@
 
   async function handleQuestionEdit() {
     if (isEditMode) {
-      const fields = { title: editContent.title, body: editContent.body };
-      errors = askCommunityValidation(fields);
+      errors = askCommunityValidation(editContent);
       console.log('handleQuestionEdit errors', errors);
 
       if (Object.keys(errors).length) {
@@ -240,8 +254,7 @@
     editorInstance = !editorInstance;
 
     if (!isEditMode) {
-      const fields = { title: editContent.title, body: editContent.body };
-      errors = askCommunityValidation(fields);
+      errors = askCommunityValidation(editContent);
       console.log('handleQuestionEdit errors', errors);
 
       if (Object.keys(errors).length) {
@@ -249,21 +262,27 @@
       }
       const { error } = await supabase
         .from('community_question')
-        .update(fields)
+        .update({
+          ...editContent,
+          course_id: editContent.courseId
+        })
         .match({ id: question.id });
       if (error) {
         console.error('Error: handleQuestionEdit', error);
         snackbar.error('Error - Please try again later');
       } else {
-        question.title = fields.title;
-        question.body = fields.body;
+        question.title = editContent.title;
+        question.body = editContent.body;
+        question.courseId = editContent.courseId;
 
         editContent.title = '';
         editContent.body = '';
+        editContent.courseId = '';
       }
     } else {
       editContent.title = question.title;
       editContent.body = question.body;
+      editContent.courseId = question.courseId;
     }
   }
 
@@ -324,6 +343,11 @@
   }
 
   $: browser && fetchCommunityQuestion(slug);
+  $: {
+    if ($profile.id && $currentOrg.id) {
+      getCourses($profile.id, $currentOrg.id);
+    }
+  }
 </script>
 
 <svelte:head>
@@ -369,6 +393,13 @@
             className="w-full mr-2"
             errorMessage={errors.title}
           />
+          <Dropdown
+            class="w-[25%] h-fit"
+            size="xl"
+            label="Select Course"
+            items={fetchedCourses.map((course) => ({ id: course.id, text: course.title }))}
+            bind:selectedId={editContent.courseId}
+          />
         {:else}
           <div class="flex items-center">
             <Vote

apps/dashboard/src/routes/lms/community/ask/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import ArrowLeftIcon from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
+  import { Dropdown } from 'carbon-components-svelte';
   import { currentOrg } from '$lib/utils/store/org';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { askCommunityValidation } from '$lib/utils/functions/validator';
@@ -10,15 +11,25 @@
   import TextEditor from '$lib/components/TextEditor/index.svelte';
   import TextField from '$lib/components/Form/TextField.svelte';
   import { profile } from '$lib/utils/store/user';
+  import { fetchCourses } from '$lib/components/Courses/api';
 
   let errors: {
     title?: string;
+    courseId?: string;
   } = {};
   let fields = {
     title: '',
-    body: ''
+    body: '',
+    courseId: ''
   };
 
+  let fetchedCourses = [];
+
+  async function getCourses(userId: string | null, orgId: string) {
+    const coursesResults = await fetchCourses(userId, orgId);
+    fetchedCourses = coursesResults.allCourses;
+  }
+
   async function handleSave() {
     errors = askCommunityValidation(fields);
     console.log('handleSave errors', errors);
@@ -30,7 +41,9 @@
     const { data: question, error } = await supabase
       .from('community_question')
       .insert({
-        ...fields,
+        title: fields.title,
+        body: fields.body,
+        course_id: fields.courseId,
         organization_id: $currentOrg.id,
         author_profile_id: $profile.id,
         votes: 0,
@@ -44,11 +57,17 @@
     } else {
       const slug = question[0]?.slug;
       console.log('Success: asking question in lms', question, slug);
-      snackbar.success();
+      snackbar.success('Question Submitted!');
 
       goto(`/lms/community/${slug}`);
     }
   }
+
+  $: {
+    if ($profile.id && $currentOrg.id) {
+      getCourses($profile.id, $currentOrg.id);
+    }
+  }
 </script>
 
 <svelte:head>
@@ -66,8 +85,22 @@
     </div>
   </div>
 
-  <div class="mb-3 p-2">
-    <TextField bind:value={fields.title} placeholder="Title" errorMessage={errors.title} />
+  <div class="mb-3 p-2 flex gap-x-5 justify-between">
+    <TextField
+      bind:value={fields.title}
+      placeholder="Title"
+      errorMessage={errors.title}
+      className="w-[75%]"
+    />
+    <Dropdown
+      class="w-[25%]"
+      size="xl"
+      label="Select Course"
+      invalid={!!errors.courseId}
+      invalidText={errors.courseId}
+      items={fetchedCourses.map((course) => ({ id: course.id, text: course.title }))}
+      bind:selectedId={fields.courseId}
+    />
   </div>
 
   <TextEditor

apps/dashboard/src/routes/org/[slug]/community/[slug]/+page.svelte

@@ -2,7 +2,7 @@
   import { goto } from '$app/navigation';
   import pluralize from 'pluralize';
   import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
-  import { SkeletonPlaceholder, SkeletonText } from 'carbon-components-svelte';
+  import { Dropdown, SkeletonPlaceholder, SkeletonText } from 'carbon-components-svelte';
   import ArrowLeftIcon from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
   import Vote from '$lib/components/Vote/index.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
@@ -10,7 +10,7 @@
   import Avatar from '$lib/components/Avatar/index.svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
   import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
-  import { currentOrgPath, isOrgAdmin } from '$lib/utils/store/org';
+  import { currentOrgPath, isOrgAdmin, currentOrg } from '$lib/utils/store/org';
   import { profile } from '$lib/utils/store/user';
   import { supabase } from '$lib/utils/functions/supabase';
   import {
@@ -23,6 +23,7 @@
   import TextEditor from '$lib/components/TextEditor/index.svelte';
   import { calDateDiff } from '$lib/utils/functions/date';
   import { browser } from '$app/environment';
+  import { fetchCourses } from '$lib/components/Courses/api.js';
 
   export let data;
   const { slug } = data;
@@ -49,6 +50,7 @@
     createdAt: string;
     comments: Comment[];
     totalComments: number;
+    courseId: string;
   }
 
   let question: Question;
@@ -77,10 +79,12 @@
   };
   let editContent = {
     title: '',
-    body: ''
+    body: '',
+    courseId: ''
   };
 
   let editorInstance = false;
+  let fetchedCourses = [];
 
   function mapResToQuestion(data): Question {
     return {
@@ -103,10 +107,16 @@
         comment: c.body,
         createdAt: calDateDiff(c.created_at)
       })),
-      totalComments: 0
+      totalComments: 0,
+      courseId: data.course_id
     };
   }
 
+  async function getCourses(userId: string | null, orgId: string) {
+    const coursesResults = await fetchCourses(userId, orgId);
+    fetchedCourses = coursesResults.allCourses;
+  }
+
   async function fetchCommunityQuestion(slug: string) {
     if (!slug) return;
 
@@ -119,6 +129,7 @@
         body,
         votes,
         created_at,
+        course_id,
         slug,
         comments:community_answer(
           id,
@@ -127,7 +138,10 @@
           created_at,
           author:profile(id, fullname, avatar_url)
         ),
-        author:profile(id, fullname, avatar_url)
+        author:profile(id, fullname, avatar_url),
+        course!inner (
+          title
+        )
       `
       )
       .eq('slug', slug)
@@ -227,8 +241,7 @@
 
   async function handleQuestionEdit() {
     if (isEditMode) {
-      const fields = { title: editContent.title, body: editContent.body };
-      errors = askCommunityValidation(fields);
+      errors = askCommunityValidation(editContent);
       console.log('handleQuestionEdit errors', errors);
 
       if (Object.keys(errors).length) {
@@ -240,8 +253,7 @@
     editorInstance = !editorInstance;
 
     if (!isEditMode) {
-      const fields = { title: editContent.title, body: editContent.body };
-      errors = askCommunityValidation(fields);
+      errors = askCommunityValidation(editContent);
       console.log('handleQuestionEdit errors', errors);
 
       if (Object.keys(errors).length) {
@@ -249,21 +261,27 @@
       }
       const { error } = await supabase
         .from('community_question')
-        .update(fields)
+        .update({
+          ...editContent,
+          course_id: editContent.courseId
+        })
         .match({ id: question.id });
       if (error) {
         console.error('Error: handleQuestionEdit', error);
         snackbar.error('Error - Please try again later');
       } else {
-        question.title = fields.title;
-        question.body = fields.body;
+        question.title = editContent.title;
+        question.body = editContent.body;
+        question.courseId = editContent.courseId;
 
         editContent.title = '';
         editContent.body = '';
+        editContent.courseId = '';
       }
     } else {
       editContent.title = question.title;
       editContent.body = question.body;
+      editContent.courseId = question.courseId;
     }
   }
 
@@ -324,6 +342,11 @@
   }
 
   $: browser && fetchCommunityQuestion(slug);
+  $: {
+    if ($profile.id && $currentOrg.id) {
+      getCourses($profile.id, $currentOrg.id);
+    }
+  }
 </script>
 
 <svelte:head>
@@ -372,6 +395,13 @@
             className="w-full mr-2"
             errorMessage={errors.title}
           />
+          <Dropdown
+            class="w-[25%] h-fit"
+            size="xl"
+            label="Select Course"
+            items={fetchedCourses.map((course) => ({ id: course.id, text: course.title }))}
+            bind:selectedId={editContent.courseId}
+          />
         {:else}
           <div class="flex items-center">
             <Vote

apps/dashboard/src/routes/org/[slug]/community/ask/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
+  import { Dropdown } from 'carbon-components-svelte';
   import ArrowLeftIcon from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
   import { currentOrgPath, currentOrg } from '$lib/utils/store/org';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
@@ -10,15 +11,27 @@
   import TextEditor from '$lib/components/TextEditor/index.svelte';
   import TextField from '$lib/components/Form/TextField.svelte';
   import { profile } from '$lib/utils/store/user';
+  import { fetchCourses } from '$lib/components/Courses/api';
+
+  export let data;
 
   let errors: {
     title?: string;
+    courseId?: string;
   } = {};
   let fields = {
     title: '',
-    body: ''
+    body: '',
+    courseId: ''
   };
 
+  let fetchedCourses = [];
+
+  async function getCourses(userId: string | null, orgId: string) {
+    const coursesResults = await fetchCourses(userId, orgId);
+    fetchedCourses = coursesResults.allCourses;
+  }
+
   async function handleSave() {
     errors = askCommunityValidation(fields);
     console.log('handleSave errors', errors);
@@ -30,11 +43,13 @@
     const { data: question, error } = await supabase
       .from('community_question')
       .insert({
-        ...fields,
+        title: fields.title,
+        body: fields.body,
         organization_id: $currentOrg.id,
         author_profile_id: $profile.id,
         votes: 0,
-        slug: generateSlug(fields.title)
+        slug: generateSlug(fields.title),
+        course_id: fields.courseId
       })
       .select();
 
@@ -49,6 +64,12 @@
       goto(`${$currentOrgPath}/community/${slug}`);
     }
   }
+
+  $: {
+    if ($profile.id && $currentOrg.id) {
+      getCourses($profile.id, $currentOrg.id);
+    }
+  }
 </script>
 
 <svelte:head>
@@ -69,8 +90,22 @@
     </div>
   </div>
 
-  <div class="mb-3 p-2">
-    <TextField bind:value={fields.title} placeholder="Title" errorMessage={errors.title} />
+  <div class="mb-3 p-2 flex gap-x-5 justify-between">
+    <TextField
+      bind:value={fields.title}
+      placeholder="Title"
+      errorMessage={errors.title}
+      className="w-[75%]"
+    />
+    <Dropdown
+      class="w-[25%]"
+      size="xl"
+      label="Select Course"
+      invalid={!!errors.courseId}
+      invalidText={errors.courseId}
+      items={fetchedCourses.map((course) => ({ id: course.id, text: course.title }))}
+      bind:selectedId={fields.courseId}
+    />
   </div>
   <div class="px-2">
     <TextEditor