Add people + Move fetching to client side

src/routes/courses/[id]/people.svelte

@@ -1,71 +1,87 @@
 <script context="module">
   import { fetchCourse } from '../../../utils/services/courses';
 
-  export async function preload({ params }, session) {
-    if (process.browser) {
-      return {};
-    }
-
-    const {
-      data,
-      // error
-    } = await fetchCourse(params.id, session);
-
-    return { courseData: data };
+  export async function preload({ params }) {
+    return { courseId: params.id };
   }
 </script>
 
-<script>
+<script lang="ts">
   import { onMount } from 'svelte';
-  import { stores } from '@sapper/app';
   import CourseContainer from '../../../components/CourseContainer/index.svelte';
   import PageNav from '../../../components/PageNav/index.svelte';
-  import UserCard from '../../../components/UserCard/index.svelte';
-  import { setCourseData } from '../../../components/Course/store';
+  import PrimaryButton from '../../../components/PrimaryButton/index.svelte';
+  import PageBody from '../../../components/PageBody/index.svelte';
+  import { setCourseData, course } from '../../../components/Course/store';
+  import InviationModal from '../../../components/Course/components/People/InviationModal.svelte';
+  import { invitationModal } from '../../../components/Course/components/People/store';
+  import type { Person } from '../../../components/Course/components/People/types';
+  import { ROLE_LABEL } from '../../../utils/constants/roles';
 
-  export let courseData = {};
+  export let courseId: string = '';
 
-  const { page } = stores();
+  let people: Array<Person> = [];
+  let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
 
-  const teachers = [];
-  const students = [...teachers, ...teachers, ...teachers];
+  function setPeople(group) {
+    if (!group) return;
+    const { students, tutors } = group;
+    people = [...students, ...tutors].sort((a, b) => a.role_id - b.role_id);
+    console.log(`group changed`, group);
+  }
 
-  onMount(() => {
-    setCourseData(courseData);
+  onMount(async () => {
+    if ($course.id) return;
+    const { data } = await fetchCourse(courseId);
+    setCourseData(data);
   });
+
+  $: setPeople($course.group);
 </script>
 
-<CourseContainer>
-  <PageNav title="People" disableSticky={true} />
-  <div class="m-3">
-    <h3>
-      <a id="teachers" name="teachers" href="{$page.path}#teachers">Teachers</a>
-    </h3>
-    <div class="flex flex-wrap">
-      {#each teachers as teacher}
-        <UserCard
-          name={teacher.name}
-          avatarUrl={teacher.avatar}
-          title={teacher.title}
-          telegramLink={teacher.telegramLink}
-          mailLink={teacher.mailLink}
-        />
-      {/each}
-    </div>
-  </div>
+<InviationModal />
 
-  <div class="m-3">
-    <h3>
-      <a id="students" name="students" href="{$page.path}#students">Students</a>
-    </h3>
-    <div class="flex flex-wrap">
-      {#each students as student}
-        <UserCard
-          name={student.name}
-          avatarUrl={student.avatar}
-          title={student.title}
-        />
+<CourseContainer>
+  <PageNav title="People" disableSticky={true}>
+    <slot:fragment slot="widget">
+      <PrimaryButton
+        className="mr-2"
+        label="Add"
+        onClick={() => ($invitationModal.open = true)}
+      />
+    </slot:fragment>
+  </PageNav>
+  <PageBody className="">
+    <div class="table rounded-md border border-gray-300 w-11/12 m-auto">
+      <div
+        class="flex items-center justify-evenly font-bold border-t-0 {borderBottomGrey} p-3"
+      >
+        <span class="mr-2">No</span>
+        <!-- <span class="flex-grow" /> -->
+        <p class="text-lg w-1/4">Name</p>
+        <p class="text-lg w-1/4">Email</p>
+        <p class="text-lg w-1/4 ">Role</p>
+      </div>
+
+      {#each people as person, index}
+        <div
+          class="flex items-center justify-evenly p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
+        >
+          <span class="mr-2">{index + 1}</span>
+          <!-- <span class="flex-grow" /> -->
+          {#if person.profile}
+            <p class="text-lg w-1/4 break-all">{person.profile.fullname}</p>
+          {:else}
+            <p
+              class="bg-yellow-500 w-1/4 text-sm text-center rounded-xl text-white"
+            >
+              Pending confirmation
+            </p>
+          {/if}
+          <p class="text-lg w-1/4 break-all">{person.email}</p>
+          <p class="text-lg w-1/4 ">{ROLE_LABEL[person.role_id]}</p>
+        </div>
       {/each}
     </div>
-  </div>
+  </PageBody>
 </CourseContainer>