feat: course types - self paced and live class (#309)

* working on the course type

* trying to mark it persist

* almost done here

* fixed sendig emtpy options bug

* created migration file

* created migration file

* made updates based on PR review

* merge

* update course type card

* add redirect logic with classroomio.com/new

* make new course modal only open/close with url

* feat: page active state (#315)

* finished the active link state

* updated the active link state based on review

* simplify code

---------

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

* add type to course card

---------

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

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

@@ -11,7 +11,8 @@
   export let data;
 
   $: if ($currentOrg.id && data.orgName === '*') {
-    goto(`/org/${$currentOrg.siteName}`);
+    const newUrl = $page.url.pathname.replace('*', $currentOrg.siteName);
+    goto(newUrl + $page.url.search);
   }
 </script>
 

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

@@ -1,13 +1,12 @@
 <script lang="ts">
   import { Search, Dropdown } from 'carbon-components-svelte';
-  import { page } from '$app/stores';
   import { profile } from '$lib/utils/store/user';
   import { fetchCourses } from '$lib/components/Courses/api';
   import Courses from '$lib/components/Courses/index.svelte';
   import NewCourseModal from '$lib/components/Courses/components/NewCourseModal/index.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import { courses, createCourseModal, courseMetaDeta } from '$lib/components/Courses/store';
-  import { currentOrg } from '$lib/utils/store/org';
+  import { courses, courseMetaDeta } from '$lib/components/Courses/store';
+  import { currentOrg, currentOrgPath } from '$lib/utils/store/org';
   import { Add } from 'carbon-icons-svelte';
   import { isMobile } from '$lib/utils/store/useMobile';
   import { isOrgAdmin } from '$lib/utils/store/org';
@@ -19,6 +18,7 @@
   import Grid from 'carbon-icons-svelte/lib/Grid.svelte';
   import List from 'carbon-icons-svelte/lib/List.svelte';
   import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
 
   export let data;
 
@@ -28,12 +28,6 @@
   let filteredCourses: Course[];
   let hasFetched = false;
 
-  const urlParams = new URLSearchParams($page.url.search);
-
-  if (urlParams.get('create') === 'true') {
-    $createCourseModal.open = true;
-  }
-
   async function getCourses(userId: string | undefined, orgId: string) {
     if (cantFetch && typeof cantFetch === 'boolean' && orgId && !hasFetched) {
       // only show is loading when fetching for the first time
@@ -86,6 +80,10 @@
     localStorage.setItem('courseView', preference);
   };
 
+  const openNewCourseModal = () => {
+    goto($currentOrgPath + '/courses?create=true');
+  };
+
   onMount(() => {
     const courseView = localStorage.getItem('courseView') as 'grid' | 'list' | null;
 
@@ -107,7 +105,7 @@
     <div class="flex items-center justify-between mb-5">
       <h1 class="dark:text-white text-2xl md:text-3xl font-bold">{$t('courses.heading')}</h1>
       {#if $isMobile}
-        <PrimaryButton isDisabled={!$isOrgAdmin} onClick={() => ($createCourseModal.open = true)}>
+        <PrimaryButton isDisabled={!$isOrgAdmin} onClick={openNewCourseModal}>
           <Add size={24} />
         </PrimaryButton>
       {:else}
@@ -115,7 +113,7 @@
           label={$t('courses.heading_button')}
           variant={VARIANTS.CONTAINED_DARK}
           isDisabled={!$isOrgAdmin}
-          onClick={() => ($createCourseModal.open = true)}
+          onClick={openNewCourseModal}
         />
       {/if}
     </div>