CLASSROOMIO-T-80: Replace sapper with sveltekit

src/routes/profile/[id]/+page.js

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

src/routes/profile/[id]/+page.svelte

@@ -1,21 +1,16 @@
-<script context="module">
-  export function preload({ params }) {
-    return { profileId: params.id };
-  }
-</script>
-
 <script>
-  import { goto } from '@sapper/app';
-  import UserAvatar16 from 'carbon-icons-svelte/lib/UserAvatar16';
-  import Book16 from 'carbon-icons-svelte/lib/Book16';
-  import TextField from '../../components/Form/TextField.svelte';
-  import PrimaryButton from '../../components/PrimaryButton/index.svelte';
-  import { VARIANTS } from '../../components/PrimaryButton/constants';
-  import UploadImage from '../../components/UploadImage/index.svelte';
-  import { supabase } from '../../utils/functions/supabase';
-  import { user, profile } from '../../utils/store/user';
+  import { goto } from '$app/navigation';
+  import UserAvatarIcon from 'carbon-icons-svelte/lib/UserAvatar.svelte';
+  import BookIcon from 'carbon-icons-svelte/lib/Book.svelte';
+  import TextField from '$lib/components/Form/TextField.svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import UploadImage from '$lib/components/UploadImage/index.svelte';
+  import { supabase } from '$lib/utils/functions/supabase';
+  import { user, profile } from '$lib/utils/store/user';
 
-  export let profileId;
+  export let data;
+  const { profileId } = data;
 
   let avatar;
   let loading = false;
@@ -78,9 +73,7 @@
 
       let { error } = await supabase
         .from('profile')
-        .update(updates, {
-          returning: 'minimal', // Don't return the value after inserting
-        })
+        .update(updates)
         .match({ id: profileId });
 
       if (isOwner) {
@@ -195,11 +188,11 @@
           </p>
           <div class="mt-2 flex items-center">
             <span class="flex mr-2 items-center">
-              <UserAvatar16 class="mr-2" /> 5
+              <UserAvatarIcon size={16} class="mr-2" /> 5
             </span>
 
             <span class="flex mr-2 items-center">
-              <Book16 class="mr-2" /> 5
+              <BookIcon size={16} class="mr-2" /> 5
             </span>
           </div>
         </div>
@@ -216,11 +209,11 @@
           </p>
           <div class="mt-2 flex items-center">
             <span class="flex mr-2 items-center">
-              <UserAvatar16 class="mr-2" /> 30
+              <UserAvatarIcon size={16} class="mr-2" /> 30
             </span>
 
             <span class="flex mr-2 items-center">
-              <Book16 class="mr-2" /> 3
+              <BookIcon size={16} class="mr-2" /> 3
             </span>
           </div>
         </div>