Get courses by members data

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

@@ -5,21 +5,23 @@
 </script>
 
 <script>
-  import { onMount } from 'svelte';
   import Overview from '../../../components/Course/index.svelte';
   import CourseContainer from '../../../components/CourseContainer/index.svelte';
-  import { setCourseData, course } from '../../../components/Course/store';
+  import { setCourseData } from '../../../components/Course/store';
   import { fetchCourse } from '../../../utils/services/courses';
 
   export let courseId;
 
-  onMount(async () => {
+  async function onCourseIdChange(courseId) {
+    if (!courseId) return;
     console.log(`overview courseId`, courseId);
-    if ($course.id) return;
 
     const { data } = await fetchCourse(courseId);
+
     setCourseData(data);
-  });
+  }
+
+  $: onCourseIdChange(courseId);
 </script>
 
 <CourseContainer>

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

@@ -75,10 +75,15 @@
             <p
               class="bg-yellow-500 w-1/4 text-sm text-center rounded-xl text-white"
             >
-              Pending confirmation
+              Pending Invite
             </p>
           {/if}
-          <p class="text-lg w-1/4 break-all">{person.email}</p>
+          <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}