Fix bug of adding tutor to lesson

src/components/Course/components/Lesson/store/lessons.js

@@ -17,29 +17,6 @@ export const lesson = writable({
 });
 export const isLessonDirty = writable(false);
 
-export const tutors = writable([
-  {
-    id: 1,
-    text: 'Sergey Semko',
-  },
-  {
-    id: 3,
-    text: 'Jonathan Nelson',
-  },
-  {
-    id: 4,
-    text: 'Sasha Pokidin',
-  },
-  {
-    id: 5,
-    text: 'Natasha Rudenko',
-  },
-  {
-    id: 6,
-    text: 'Yulia Marushko',
-  },
-]);
-
 export function handleAddLesson() {
   lessons.update((_lessons) => {
     return [
@@ -47,7 +24,7 @@ export function handleAddLesson() {
       {
         id: null,
         title: 'Untitled lesson',
-        profile: undefined,
+        // profile: undefined,
         call_url: undefined,
         lesson_at: new Date(),
         is_complete: false,

src/components/Course/components/Navigation/index.svelte

@@ -179,6 +179,7 @@
     position: sticky;
     top: 0;
     border-right: 1px solid var(--border-color);
+    background-color: rgb(250, 251, 252);
 
     &.hide {
       min-width: 0px;

src/components/Course/components/People/InviationModal.svelte

@@ -7,7 +7,7 @@
     addGroupMember,
     fetchGroup,
   } from '../../../../utils/services/courses';
-  import { invitationModal } from './store';
+  import { invitationModal, resetForm } from './store';
   import { validateForm } from '../../../Courses/functions';
   import { course, setCourseData } from '../../../Course/store';
 
@@ -56,16 +56,16 @@
         false
       );
 
-      $invitationModal.open = false;
+      resetForm();
     });
   }
 </script>
 
 <Modal
-  onClose={() => ($invitationModal.open = false)}
+  onClose={resetForm}
   bind:open={$invitationModal.open}
   width="w-2/5"
-  modalHeading="Create a Course"
+  modalHeading="Invite people"
 >
   <form on:submit|preventDefault={addPerson}>
     <TextArea

src/components/Course/components/People/store.js

@@ -5,3 +5,10 @@ export const invitationModal = writable({
   tutors: '',
   students: '',
 });
+
+export const resetForm = () =>
+  invitationModal.update(() => ({
+    open: false,
+    tutors: '',
+    students: '',
+  }));

src/components/Course/store.js

@@ -28,24 +28,27 @@ export const group = writable({
 
 export async function setCourseData(data, setLesson = true) {
   if (!data || !(Object.values(data) && Object.values(data).length)) return;
-  console.log(`setCourseData`, data);
+  // const tutorsById = {};
 
   if (data.group) {
-    const groupData = Object.assign(data.group, { tutors: [], students: [] });
+    const groupData = Object.assign(data.group, {
+      tutors: [],
+      students: [],
+      people: [],
+    });
 
     if (Array.isArray(groupData.members)) {
       for (const member of groupData.members) {
         if (member.role_id === ROLE.STUDENT) {
           groupData.students.push(member);
-          // } else if (member.profile) {
-        } else {
-          groupData.tutors.push({
-            ...member,
-            ...member.profile,
-            id: member.id,
-          });
+        } else if (member.profile) {
+          groupData.tutors.push(member.profile);
+
+          // tutorsById[member.profile.id] = member.profile;
         }
       }
+
+      groupData.people = groupData.members;
     }
 
     delete groupData.members;
@@ -56,7 +59,10 @@ export async function setCourseData(data, setLesson = true) {
     const orderedLessons = (data.lessons || []).sort(
       (a, b) => new Date(a.created_at) - new Date(b.created_at)
     );
-    // .map();
+    // .map((lesson) => ({
+    //   ...lesson,
+    //   profile: lesson.profile && tutorsById[lesson.profile.id],
+    // }));
     lessons.set(orderedLessons);
   }
 

src/components/Form/Select.svelte

@@ -1,10 +1,16 @@
 <script>
+  import { onMount } from 'svelte';
+
   export let label = '';
-  export let value = '';
+  export let value;
   export let options = [];
   export let labelKey = 'label';
   export let isRequired = false;
   export let onChange = () => {}; // This is to know if element is 'dirty'
+
+  // onMount(() => {
+  //   value = options[0];
+  // });
 </script>
 
 <label class="block">

src/routes/courses/[id]/lessons/index.svelte

@@ -83,8 +83,6 @@
     const { data } = await fetchCourse(courseId);
     setCourseData(data);
   });
-
-  $: console.log(`$lessons`, $lessons);
 </script>
 
 <CourseContainer>
@@ -169,7 +167,7 @@
               {#if lessonEditing === index}
                 <Select
                   bind:value={lesson.profile}
-                  options={[...$group.tutors.filter((t) => !!t.profile)]}
+                  options={$group.tutors}
                   labelKey="fullname"
                 />
               {:else if !lesson.profile}

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

@@ -25,8 +25,7 @@
 
   function setPeople(group) {
     if (!group) return;
-    const { students, tutors } = group;
-    people = [...students, ...tutors].sort((a, b) => a.role_id - b.role_id);
+    people = (group.people || []).sort((a, b) => a.role_id - b.role_id);
     console.log(`group changed`, group);
   }
 
@@ -71,19 +70,25 @@
           <!-- <span class="flex-grow" /> -->
           {#if person.profile}
             <p class="text-lg w-1/4 break-all">{person.profile.fullname}</p>
+            <a
+              href="mailto:{person.profile.email}"
+              class="text-md w-1/4 mx-2 text-blue-600"
+            >
+              {person.profile.email}
+            </a>
           {:else}
             <p
               class="bg-yellow-500 w-1/4 text-sm text-center rounded-xl text-white"
             >
               Pending Invite
             </p>
+            <a
+              href="mailto:{person.email}"
+              class="text-md w-1/4 mx-2 text-blue-600"
+            >
+              {person.email}
+            </a>
           {/if}
-          <a
-            href="mailto:{person.email}"
-            class="text-md w-1/4 mx-2 text-blue-600"
-          >
-            {person.email}
-          </a>
           <p class="text-lg w-1/4 ">{ROLE_LABEL[person.role_id]}</p>
         </div>
       {/each}