CLASSROOMIO-T-80: Replace sapper with sveltekit

src/routes/org/[slug]/+page.js

@@ -0,0 +1,5 @@
+export const load = ({ params = { slug: '' } }) => {
+  return {
+    orgName: params.slug,
+  };
+};

src/routes/org/[slug]/+page.svelte

@@ -1,34 +1,27 @@
-<script context="module">
-  export async function preload({ params }) {
-    return {
-      orgName: params.slug,
-    };
-  }
-</script>
-
 <script lang="ts">
-  // import { profile } from '../../utils/store/user';
-  // import { supabase } from '../../utils/functions/supabase';
-  import { goto } from '@sapper/app';
-  import PrimaryButton from '../../../components/PrimaryButton/index.svelte';
-  import Avatar from '../../../components/Avatar/index.svelte';
+  // import { profile } from '$lib/utils/store/user';
+  // import { supabase } from '$lib/utils/functions/supabase';
+  import { goto } from '$app/navigation';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import Avatar from '$lib/components/Avatar/index.svelte';
   import { InlineCalendar, Datepicker } from 'svelte-calendar';
-  import CheckmarkFilled20 from 'carbon-icons-svelte/lib/CheckmarkFilled20';
+  import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
   import {
     formatUserUpcomingData,
     formatDate,
-  } from '../../../utils/functions/routes/dashboard';
-  import { user } from '../../../utils/store/user';
-  import { fetchUserUpcomingData } from '../../../utils/services/dashboard';
-  import { isMobile } from '../../../utils/store/useMobile';
+  } from '$lib/utils/functions/routes/dashboard';
+  import { user } from '$lib/utils/store/user';
+  import { fetchUserUpcomingData } from '$lib/utils/services/dashboard';
+  import { isMobile } from '$lib/utils/store/useMobile';
   import type {
     UserLessonDataType,
     LessonsByMonthIndexType,
-  } from '../../../utils/types';
-  import WelcomeModal from '../../../components/WelcomeModal/WelcomeModal.svelte';
+  } from '$lib/utils/types';
+  import WelcomeModal from '$lib/components/WelcomeModal/WelcomeModal.svelte';
   import { onMount } from 'svelte';
 
-  export let orgName: string;
+  export let data;
+  const { orgName } = data;
 
   function createCourse() {
     goto(`/org/${orgName}/courses?create=true`);
@@ -194,7 +187,7 @@
   onMount(() => {
     // Remove default shouldEnlargeDay=true when <DatePicker /> on mobile
     if ($store && $store.shouldEnlargeDay) {
-      $store.shouldEnlargeDay = false
+      $store.shouldEnlargeDay = false;
     }
   });
 
@@ -272,7 +265,7 @@
                 {lessonData.lesson_title}
                 {#if lessonData.is_complete}
                   <span class="ml-2 success">
-                    <CheckmarkFilled20 class="carbon-icon" />
+                    <CheckmarkFilledIcon size={20} class="carbon-icon" />
                   </span>
                 {:else}
                   <span class="text-md ml-2">🔒</span>
@@ -399,4 +392,4 @@
       font-size: 30px;
     }
   }
-</style>
+</style>

src/routes/org/[slug]/audience/+page.svelte

@@ -1,6 +1,6 @@
 <script>
-  import PrimaryButton from '../../../components/PrimaryButton/index.svelte';
-  import Audience from '../../../components/Org/Audience/index.svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import Audience from '$lib/components/Org/Audience/index.svelte';
 
   let isLoading = false;
   function exportAudience() {

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

@@ -1,8 +1,8 @@
 <script>
-  import { goto } from '@sapper/app';
-  import Community from '../../../../components/Org/Community/index.svelte';
-  import PrimaryButton from '../../../../components/PrimaryButton/index.svelte';
-  import { currentOrgPath } from '../../../../utils/store/org';
+  import { goto } from '$app/navigation';
+  import Community from '$lib/components/Org/Community/index.svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { currentOrgPath } from '$lib/utils/store/org';
 
   function askCommunity() {
     goto(`${$currentOrgPath}/community/ask`);

src/routes/org/[slug]/community/[slug]/+page.js

@@ -0,0 +1,5 @@
+export const load = ({ params = { slug: '' } }) => {
+  return {
+    slug: params.slug,
+  };
+};

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

@@ -1,39 +1,34 @@
-<script context="module">
-  export async function preload({ params }) {
-    return { slug: params.slug };
-  }
-</script>
-
 <script>
-  import marked from 'marked';
+  import { marked } from 'marked';
   import dayjs from 'dayjs';
   import pluralize from 'pluralize';
   import relativeTime from 'dayjs/plugin/relativeTime';
-  import Delete16 from 'carbon-icons-svelte/lib/Delete16';
+  import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
   import { SkeletonPlaceholder, SkeletonText } from 'carbon-components-svelte';
-  import ArrowLeft24 from 'carbon-icons-svelte/lib/ArrowLeft24';
-  import Vote from '../../../../components/Vote/index.svelte';
-  import PrimaryButton from '../../../../components/PrimaryButton/index.svelte';
-  import { VARIANTS } from '../../../../components/PrimaryButton/constants';
-  import TextEditor from '../../../../components/TextEditor/index.svelte';
-  import Avatar from '../../../../components/Avatar/index.svelte';
-  import IconButton from '../../../../components/IconButton/index.svelte';
-  import CheckmarkOutline20 from 'carbon-icons-svelte/lib/CheckmarkOutline20';
-  import { currentOrgPath, currentOrg } from '../../../../utils/store/org';
-  import { profile } from '../../../../utils/store/user';
-  import { supabase } from '../../../../utils/functions/supabase';
+  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';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import TextEditor from '$lib/components/TextEditor/index.svelte';
+  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, currentOrg } from '$lib/utils/store/org';
+  import { profile } from '$lib/utils/store/user';
+  import { supabase } from '$lib/utils/functions/supabase';
   import {
     askCommunityValidation,
     commentInCommunityValidation,
-  } from '../../../../utils/functions/validator';
-  import { SNACKBAR_SEVERITY } from '../../../../components/Snackbar/constants';
-  import { snackbarStore } from '../../../../components/Snackbar/store';
-  import TextField from '../../../../components/Form/TextField.svelte';
-  import DeleteCommentModal from '../../../../components/Org/Community/DeleteCommentModal.svelte';
+  } from '$lib/utils/functions/validator';
+  import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
+  import { snackbarStore } from '$lib/components/Snackbar/store';
+  import TextField from '$lib/components/Form/TextField.svelte';
+  import DeleteCommentModal from '$lib/components/Org/Community/DeleteCommentModal.svelte';
 
   dayjs.extend(relativeTime);
 
-  export let slug;
+  export let data;
+  const { slug } = data;
 
   let question;
   let comment = '';
@@ -122,13 +117,16 @@
       return;
     }
 
-    const { data, error } = await supabase.from('community_answer').insert({
-      id: undefined,
-      body: comment,
-      question_id: question.id,
-      author_id: $currentOrg.memberId,
-      votes: 0,
-    });
+    const { data, error } = await supabase
+      .from('community_answer')
+      .insert({
+        id: undefined,
+        body: comment,
+        question_id: question.id,
+        author_id: $currentOrg.memberId,
+        votes: 0,
+      })
+      .select();
 
     if (error) {
       console.error('Error: commenting', error);
@@ -290,7 +288,7 @@
         class="text-gray-500 dark:text-white text-md flex items-center"
         href={`${$currentOrgPath}/community`}
       >
-        <ArrowLeft24 class="carbon-icon" /> Go Back
+        <ArrowLeftIcon size={24} class="carbon-icon" /> Go Back
       </a>
       <div class="my-5 flex justify-between items-center">
         {#if isEditMode}
@@ -390,7 +388,7 @@
               </div>
 
               {#if isValidAnswer}
-                <CheckmarkOutline20 />
+                <CheckmarkOutlineIcon size={20} />
               {/if}
 
               {#if comment.authorId === $profile.id}
@@ -401,7 +399,7 @@
                     deleteComment.commentId = comment.id;
                   }}
                 >
-                  <Delete16 class="carbon-icon" />
+                  <TrashCanIcon size={16} class="carbon-icon" />
                 </IconButton>
               {/if}
             </header>

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

@@ -1,14 +1,14 @@
 <script>
-  import { goto } from '@sapper/app';
-  import ArrowLeft24 from 'carbon-icons-svelte/lib/ArrowLeft24';
-  import TextEditor from '../../../../components/TextEditor/index.svelte';
-  import { currentOrgPath, currentOrg } from '../../../../utils/store/org';
-  import PrimaryButton from '../../../../components/PrimaryButton/index.svelte';
-  import { askCommunityValidation } from '../../../../utils/functions/validator';
-  import { supabase } from '../../../../utils/functions/supabase';
-  import { SNACKBAR_SEVERITY } from '../../../../components/Snackbar/constants';
-  import { snackbarStore } from '../../../../components/Snackbar/store';
-  import generateSlug from '../../../../utils/functions/generateSlug';
+  import { goto } from '$app/navigation';
+  import ArrowLeftIcon from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
+  import TextEditor from '$lib/components/TextEditor/index.svelte';
+  import { currentOrgPath, currentOrg } from '$lib/utils/store/org';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { askCommunityValidation } from '$lib/utils/functions/validator';
+  import { supabase } from '$lib/utils/functions/supabase';
+  import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
+  import { snackbarStore } from '$lib/components/Snackbar/store';
+  import generateSlug from '$lib/utils/functions/generateSlug';
 
   let errors = {};
   let fields = {
@@ -32,7 +32,8 @@
         author_id: $currentOrg.memberId,
         votes: 0,
         slug: generateSlug(fields.title),
-      });
+      })
+      .select();
 
     if (error) {
       console.error('Error: asking question', error);
@@ -60,7 +61,7 @@
       class="text-gray-500 dark:text-white text-md flex items-center"
       href={`${$currentOrgPath}/community`}
     >
-      <ArrowLeft24 class="carbon-icon" /> Go Back
+      <ArrowLeftIcon size={24} class="carbon-icon" /> Go Back
     </a>
     <div class="flex items-center justify-between">
       <h1 class="dark:text-white text-3xl font-bold">Ask the community</h1>

src/routes/org/[slug]/courses.svelte

@@ -1,89 +0,0 @@
-<script context="module">
-  import { profile } from '../../../utils/store/user';
-  import { fetchCourses } from '../../../components/Courses/api';
-
-  export async function preload(page, params) {
-    const parsedUser = JSON.parse(params.user);
-    //   if (page.query.create === 'true') {
-    //   $createCourseModal.open = true;
-    // }
-    // if (parsedUser && parsedUser.id) {
-    //   return fetchCourses(parsedUser.id);
-    // }
-
-    return {
-      page,
-      allCourses: [],
-      organizationId: null,
-      cantFetch: true,
-    };
-  }
-</script>
-
-<script>
-  import { onMount } from 'svelte';
-  import Courses from '../../../components/Courses/index.svelte';
-  import NewCourseModal from '../../../components/Courses/components/NewCourseModal/index.svelte';
-  import PrimaryButton from '../../../components/PrimaryButton/index.svelte';
-  import {
-    courses,
-    createCourseModal,
-    courseMetaDeta,
-  } from '../../../components/Courses/store';
-  import { setProfileIdOfGroupMember } from '../../../utils/services/courses';
-
-  export let allCourses = [];
-  export let cantFetch;
-  export let page;
-
-  if (page.query.create === 'true') {
-    $createCourseModal.open = true;
-  }
-  async function getCourses(userId) {
-    if (process.browser) {
-      if (cantFetch && typeof cantFetch === 'boolean' && !allCourses.length) {
-        $courseMetaDeta.isLoading = true;
-
-        const updatedProfile = await setProfileIdOfGroupMember(
-          $profile.email,
-          userId
-        );
-        console.log(`updatedProfile`, updatedProfile);
-        const coursesResult = await fetchCourses(userId);
-        console.log(`coursesResult`, coursesResult);
-
-        $courseMetaDeta.isLoading = false;
-        if (!coursesResult) return;
-
-        // organizationId = coursesResult.organizationId;
-        courses.set(coursesResult.allCourses);
-      }
-    }
-  }
-
-  onMount(() => {
-    courses.set(allCourses);
-  });
-
-  $: getCourses($profile.id);
-</script>
-
-<svelte:head>
-  <title>Courses - ClassroomIO</title>
-</svelte:head>
-
-<section class="w-full max-w-6xl mx-auto">
-  <div class="py-10 px-5">
-    <div class="flex items-center justify-between mb-10">
-      <h1 class="dark:text-white text-3xl font-bold">Courses</h1>
-      <PrimaryButton
-        label="Create Course"
-        onClick={() => ($createCourseModal.open = true)}
-      />
-    </div>
-
-    <NewCourseModal />
-
-    <Courses />
-  </div>
-</section>

src/routes/org/[slug]/courses/+page.js

@@ -0,0 +1,6 @@
+export const load = ({ params = { slug: '' } }) => {
+  return {
+    allCourses: [],
+    cantFetch: true,
+  };
+};

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

@@ -0,0 +1,70 @@
+<script>
+  import { onMount } from '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 { setProfileIdOfGroupMember } from '$lib/utils/services/courses';
+
+  export let data;
+  let { allCourses, cantFetch } = data;
+
+  const urlParams = new URLSearchParams($page.url.search);
+
+  if (urlParams.get('create') === 'true') {
+    $createCourseModal.open = true;
+  }
+
+  async function getCourses(userId) {
+    if (cantFetch && typeof cantFetch === 'boolean' && !allCourses.length) {
+      $courseMetaDeta.isLoading = true;
+
+      const updatedProfile = await setProfileIdOfGroupMember(
+        $profile.email,
+        userId
+      );
+      console.log(`updatedProfile`, updatedProfile);
+      const coursesResult = await fetchCourses(userId);
+      console.log(`coursesResult`, coursesResult);
+
+      $courseMetaDeta.isLoading = false;
+      if (!coursesResult) return;
+
+      // organizationId = coursesResult.organizationId;
+      courses.set(coursesResult.allCourses);
+    }
+  }
+
+  onMount(() => {
+    courses.set(allCourses);
+  });
+
+  $: getCourses($profile.id);
+</script>
+
+<svelte:head>
+  <title>Courses - ClassroomIO</title>
+</svelte:head>
+
+<section class="w-full max-w-6xl mx-auto">
+  <div class="py-10 px-5">
+    <div class="flex items-center justify-between mb-10">
+      <h1 class="dark:text-white text-3xl font-bold">Courses</h1>
+      <PrimaryButton
+        label="Create Course"
+        onClick={() => ($createCourseModal.open = true)}
+      />
+    </div>
+
+    <NewCourseModal />
+
+    <Courses />
+  </div>
+</section>

src/routes/org/[slug]/quiz/+page.svelte

@@ -1,9 +1,9 @@
 <script>
-  import Quizzes from '../../../../components/Org/Quiz/Quizzes.svelte';
-  import NewQuizModal from '../../../../components/Org/Quiz/NewQuizModal.svelte';
-  import DeleteModal from '../../../../components/Org/Quiz/DeleteModal.svelte';
-  import PrimaryButton from '../../../../components/PrimaryButton/index.svelte';
-  import { createQuizModal } from '../../../../utils/store/org';
+  import Quizzes from '$lib/components/Org/Quiz/Quizzes.svelte';
+  import NewQuizModal from '$lib/components/Org/Quiz/NewQuizModal.svelte';
+  import DeleteModal from '$lib/components/Org/Quiz/DeleteModal.svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { createQuizModal } from '$lib/utils/store/org';
 </script>
 
 <svelte:head>

src/routes/org/[slug]/quiz/[slug]/+page.js

@@ -0,0 +1,5 @@
+export const load = ({ params = { slug: '' } }) => {
+  return {
+    quizId: params.slug,
+  };
+};

src/routes/org/[slug]/quiz/[slug]/+page.svelte

@@ -1,39 +1,33 @@
-<script context="module">
-  export async function preload({ params }) {
-    return {
-      quizId: params.slug,
-    };
-  }
-</script>
-
 <script>
   import { onMount } from 'svelte';
-  import { goto } from '@sapper/app';
+  import { goto } from '$app/navigation';
   import cloneDeep from 'lodash/cloneDeep';
   import isBoolean from 'lodash/isBoolean';
-  import ArrowLeft24 from 'carbon-icons-svelte/lib/ArrowLeft24';
-  import CheckmarkFilled24 from 'carbon-icons-svelte/lib/CheckmarkFilled24';
-  import WarningFilled20 from 'carbon-icons-svelte/lib/WarningFilled20';
+  import ArrowLeftIcon from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
+  import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
+  import WarningFilledIcon from 'carbon-icons-svelte/lib/WarningFilled.svelte';
 
   import { Select, SelectItem } from 'carbon-components-svelte';
-  import { currentOrgPath, deleteModal } from '../../../../utils/store/org';
-  import PrimaryButton from '../../../../components/PrimaryButton/index.svelte';
-  import { VARIANTS } from '../../../../components/PrimaryButton/constants';
+  import { currentOrgPath, deleteModal } from '$lib/utils/store/org';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import {
     themeImages,
     allOptions,
     booleanOptions,
     allThemes,
-  } from '../../../../utils/constants/quiz';
-  import { quizStore, quizesStore } from '../../../../utils/store/org';
-  import DeleteModal from '../../../../components/Org/Quiz/DeleteModal.svelte';
-  import Preview from '../../../../components/Org/Quiz/Play/Preview.svelte';
-  import QuizQuestion from '../../../../components/Org/Quiz/QuizQuestion.svelte';
-  import { snackbarStore } from '../../../../components/Snackbar/store';
-  import { SNACKBAR_SEVERITY } from '../../../../components/Snackbar/constants';
-  import { supabase } from '../../../../utils/functions/supabase';
+  } from '$lib/utils/constants/quiz';
+  import { quizStore, quizesStore } from '$lib/utils/store/org';
+  import DeleteModal from '$lib/components/Org/Quiz/DeleteModal.svelte';
+  import Preview from '$lib/components/Org/Quiz/Play/Preview.svelte';
+  import QuizQuestion from '$lib/components/Org/Quiz/QuizQuestion.svelte';
+  import { snackbarStore } from '$lib/components/Snackbar/store';
+  import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
+  import { supabase } from '$lib/utils/functions/supabase';
+
+  export let data;
+  const { quizId } = data;
 
-  export let quizId;
   // Questionnaire State
   let currentQuestion = $quizStore.questions[0] || {
     options: [],
@@ -153,15 +147,10 @@
 
     const { data, error } = await supabase
       .from('quiz')
-      .update(
-        {
-          ...$quizStore,
-          updated_at: new Date(),
-        },
-        {
-          returning: 'minimal',
-        }
-      )
+      .update({
+        ...$quizStore,
+        updated_at: new Date(),
+      })
       .match({ id: quizId });
 
     console.log('data', data);
@@ -223,7 +212,7 @@
         class="text-gray-500 dark:text-white text-md flex items-center"
         href={`${$currentOrgPath}/quiz`}
       >
-        <ArrowLeft24 class="carbon-icon" /> Back to Quizzes
+        <ArrowLeftIcon size={24} class="carbon-icon" /> Back to Quizzes
       </a>
 
       <h3 class="my-3">Quiz</h3>
@@ -243,7 +232,7 @@
             Question {i + 1}
 
             {#if qHasError(question.id, errors)}
-              <WarningFilled20 class="carbon-icon error" />
+              <WarningFilledIcon size={20} class="carbon-icon error" />
             {/if}
           </button>
         {/each}
@@ -381,7 +370,8 @@
               _theme.id && 'border-blue-700'}"
           >
             {#if $quizStore.theme === _theme.id}
-              <CheckmarkFilled24
+              <CheckmarkFilledIcon
+                size={24}
                 class="carbon-icon absolute top-4 right-4"
                 style="fill:white;"
               />

src/routes/org/[slug]/settings/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-  import OrgSettings from '../../../../components/Org/Settings/index.svelte';
+  import OrgSettings from '$lib/components/Org/Settings/index.svelte';
 </script>
 
 <svelte:head>

src/routes/org/[slug]/settings/domains/+page.svelte

@@ -1,6 +1,6 @@
 <script>
-  import Domains from '../../../../components/Org/Settings/Domains.svelte';
-  import { currentOrgPath } from '../../../../utils/store/org';
+  import Domains from '$lib/components/Org/Settings/Domains.svelte';
+  import { currentOrgPath } from '$lib/utils/store/org';
 </script>
 
 <svelte:head>

src/routes/org/[slug]/settings/teams/+page.svelte

@@ -1,6 +1,6 @@
 <script>
-  import TeamMembers from '../../../../components/Org/Settings/TeamMembers.svelte';
-  import { currentOrgPath } from '../../../../utils/store/org';
+  import TeamMembers from '$lib/components/Org/Settings/TeamMembers.svelte';
+  import { currentOrgPath } from '$lib/utils/store/org';
 </script>
 
 <svelte:head>

src/routes/org/[slug]/site.svelte

@@ -1 +0,0 @@
-Sites Page