classroomio/src/routes/courses.svelte

<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 (parsedUser && parsedUser.id) {
    //   return fetchCourses(parsedUser.id);
    // }

    return {
      allCourses: [],
      organizationId: null,
      cantFetch: true,
    };
  }
</script>

<script>
  import { onMount } from 'svelte';
  // import { stores } from '@sapper/app';
  import PageNav from '../components/PageNav/index.svelte';
  import Courses from '../components/Courses/index.svelte';
  import PrimaryButton from '../components/PrimaryButton/index.svelte';
  import Modal from '../components/Modal/index.svelte';
  import TextField from '../components/Form/TextField.svelte';
  import TextArea from '../components/Form/TextArea.svelte';
  import { courses, createCourseModal } from '../components/Courses/store';
  import { validateForm } from '../components/Courses/functions';
  import { ROLE } from '../utils/constants/roles';
  import { addGroupMember } from '../utils/services/courses';
  import { supabase } from '../utils/functions/supabase';
  import { setProfileIdOfGroupMember } from '../utils/services/courses';

  // const { page } = stores();

  export let allCourses = [];
  export let cantFetch;

  let errors = {
    emails: '',
  };

  // let tab = '';

  async function createCourse(e) {
    const { hasError, fieldErrors, students, tutors } =
      validateForm($createCourseModal);

    errors = fieldErrors;
    if (hasError) return;

    const { title, description } = $createCourseModal;
    // Create group from course_id
    const { data: newGroup } = await supabase
      .from('group')
      .insert({ name: title, description });

    console.log(`newGroup`, newGroup);
    const { id: group_id } = newGroup[0];

    // Create course with group_id
    const { data: newCourse } = await supabase.from('course').insert({
      title,
      description,
      group_id,
    });
    console.log(`newCourse`, newCourse);

    courses.update((_courses) => [..._courses, newCourse[0]]);

    // Get profile of author and add as member
    await addGroupMember({
      profile_id: $profile.id,
      email: $profile.email,
      group_id,
      role_id: ROLE.TUTOR,
    });

    let membersStack = [];

    // Create groupmemebers from group_id and add teachers and students
    for (const student of students) {
      membersStack.push({
        email: student,
        group_id,
        role_id: ROLE.STUDENT,
      });
    }

    for (const tutor of tutors) {
      membersStack.push({
        email: tutor,
        group_id,
        role_id: ROLE.TUTOR,
      });
    }

    addGroupMember(membersStack).then((membersAdded) => {
      console.log(`membersAdded`, membersAdded);
      $createCourseModal.open = false;
    });
  }

  async function getCourses(userId) {
    if (process.browser) {
      if (cantFetch && typeof cantFetch === 'boolean' && !allCourses.length) {
        const updatedProfile = await setProfileIdOfGroupMember(
          $profile.email,
          userId
        );
        console.log(`updatedProfile`, updatedProfile);
        const coursesResult = await fetchCourses(userId);
        console.log(`coursesResult`, coursesResult);

        if (!coursesResult) return;

        // organizationId = coursesResult.organizationId;
        courses.set(coursesResult.allCourses);
      }
    }
  }

  onMount(async () => {
    courses.set(allCourses);
  });

  $: getCourses($profile.id);
</script>

<svelte:head>
  <title>Courses</title>
</svelte:head>

<section class="root">
  <PageNav title="All courses">
    <div slot="widget">
      {#if $profile.can_add_course}
        <PrimaryButton
          label="New"
          onClick={() => ($createCourseModal.open = true)}
        />
      {/if}
    </div>
  </PageNav>

  <Modal
    onClose={() => ($createCourseModal.open = false)}
    bind:open={$createCourseModal.open}
    width="w-2/5"
    modalHeading="Create a Course"
  >
    <form on:submit|preventDefault={createCourse}>
      <TextField
        label="Course name"
        bind:value={$createCourseModal.title}
        autofocus={true}
        placeholder="Your course name"
        className="mb-4"
        isRequired={true}
        errorMessage={errors.title}
        autoComplete={false}
      />
      <TextArea
        label="Invite Tutors"
        bind:value={$createCourseModal.tutors}
        rows="2"
        maxRows="3"
        placeholder="tutor@company.com, john@gmail.com"
        helperMessage="To invite people, add their emails separated by a comma"
        errorMessage={errors.tutors}
        className="mb-4"
      />
      <TextArea
        label="Invite Students"
        bind:value={$createCourseModal.students}
        rows="2"
        maxRows="3"
        placeholder="student@gmail.com, john@gmail.com"
        helperMessage="To invite people, add their emails separated by a comma"
        errorMessage={errors.students}
        className="mb-4"
      />
      <TextArea
        label="Short description"
        bind:value={$createCourseModal.description}
        rows="4"
        maxRows="4"
        placeholder="A little description about this course"
        className="mb-4"
        isRequired={true}
      />

      <div class="mt-5 flex items-center">
        <PrimaryButton className="px-6 py-2" label="Finish" type="submit" />
      </div>
    </form>
  </Modal>

  <Courses />
</section>

<style>
  .root {
    width: 100%;
    padding: 0 10px;
    min-height: 90vh;
    /* min-width: 600px;
    margin: 0 auto;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color); */
  }
</style>