CLASSROOMIO-T-150: Add teacher to course + linear lesson content

clean up

CLASSROOMIO-T-150: Notify teacher they have been added

Make lesson content be linear on preview mode

CLASSROOMIO-T-150: Add teachers with a dropdown to course


Co-authored-by: Rotimi Best <[email protected]>


Merge-request: CLASSROOMIO-MR-69
Merged-by: Best Admin <[email protected]>

src/routes/+layout.svelte

@@ -31,7 +31,7 @@
   import { isMobile } from '$lib/utils/store/useMobile';
   import { ROUTE } from '$lib/utils/constants/routes';
   import { getOrganizations, getCurrentOrg } from '$lib/utils/services/org';
-  import { toggleBodyByTheme } from '$lib/utils/functions/app';
+  import { toggleBodyByMode } from '$lib/utils/functions/app';
   import { appStore } from '$lib/utils/store/app';
   import { currentOrg } from '$lib/utils/store/org';
   import { setTheme } from '$lib/utils/functions/theme';
@@ -202,6 +202,15 @@
       window['ga-disable-G-C7WBN0S06R'] = true;
     }
 
+    if (browser) {
+      // Update theme - dark or light mode
+      $appStore.isDark = localStorage.getItem('mode') === 'dark';
+      toggleBodyByMode($appStore.isDark);
+
+      const theme = localStorage.getItem('theme');
+      if (theme) setTheme(theme);
+    }
+
     setupSentry();
 
     handleResize();
@@ -239,12 +248,6 @@
       }
     });
 
-    if (browser) {
-      // Update theme - dark or light mode
-      $appStore.isDark = localStorage.getItem('theme') === 'dark';
-      toggleBodyByTheme($appStore.isDark);
-    }
-
     if (data.isOrgSite) {
       console.log('data', data);
       if (!data.org) {

src/routes/api/completion/+server.js

@@ -25,9 +25,13 @@ export async function POST({ request }) {
   const response = await openai.createChatCompletion({
     model: 'gpt-3.5-turbo',
     messages: [
+      {
+        role: 'system',
+        content: 'Act like an assistant of a lecturer'
+      },
       {
         role: 'user',
-        content: `Generate ${instruction[type]} given the course title is "${courseTitle}" and the lesson is "${lessonTitle}". Format in HTML without any styling, no ul, ol or li tags, don't include the title of the course and title of the lesson in the result & make sure the content is well detailed.`
+        content: `Generate ${instruction[type]} given the course title is "${courseTitle}" and the title of the lesson is "${lessonTitle}". Format in HTML without any styling. MOST IMPORTANT DON'T include the title of the course and don't include the lesson title: "${lessonTitle}" in your output. Please make sure the content is well detailed.`
       }
     ],
     stream: true

src/routes/api/email/course/welcome/+server.js

@@ -0,0 +1,55 @@
+import { render } from 'svelte-email';
+import { json } from '@sveltejs/kit';
+import WelcomeTemplate from './template.svelte';
+import { getSendgrid, SENDGRID_FROM_NOTIFY } from '$lib/utils/services/sendgrid';
+import { getSupabase } from '$lib/utils/functions/supabase';
+
+const sendgrid = getSendgrid();
+const supabase = getSupabase();
+
+export async function POST({ request }) {
+  const { to, name, orgName, courseName, orgSiteName } = await request.json();
+  const accessToken = request.headers.get('Authorization') || '';
+  console.log('/POST api/email/course/welcome', to, name, orgName);
+
+  if (!to || !name || !orgName || !courseName || !orgSiteName) {
+    return json({ success: false, message: 'Missing required fields' }, { status: 400 });
+  }
+
+  let user;
+  try {
+    const { data } = await supabase.auth.getUser(accessToken);
+    user = data.user;
+  } catch (error) {
+    console.error(error);
+  }
+
+  if (!user) {
+    return json({ success: false, message: 'Unauthenticated user' }, { status: 401 });
+  }
+
+  const origin = request.headers.get('origin');
+  const inviteLink = `${origin}/org/${orgSiteName}/courses`;
+
+  const options = {
+    from: SENDGRID_FROM_NOTIFY,
+    to,
+    subject: `You have been invited to a course in ${orgName}!`,
+    html: render({
+      template: WelcomeTemplate,
+      props: {
+        name,
+        orgName,
+        inviteLink,
+        courseName
+      }
+    })
+  };
+
+  sendgrid.send(options);
+
+  return json({
+    success: true,
+    message: 'Email sent'
+  });
+}

src/routes/api/email/course/welcome/template.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import EmailTemplate from '$lib/components/Email/EmailTemplate.svelte';
+  import Welcome from './welcome.svelte';
+
+  export let name = '';
+  export let orgName = '';
+  export let inviteLink = '';
+  export let courseName = '';
+</script>
+
+<EmailTemplate
+  children={Welcome}
+  props={{
+    name,
+    orgName,
+    inviteLink,
+    courseName
+  }}
+/>

src/routes/api/email/course/welcome/welcome.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { Text, Section, Button, Link } from 'svelte-email';
+
+  export let name = '';
+  export let orgName = '';
+  export let inviteLink = '';
+  export let courseName = '';
+
+  const fontFamily =
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
+
+  const paragraph = {
+    fontFamily,
+    fontSize: '16px',
+    lineHeight: '26px'
+  };
+  const paragraphContent = {
+    ...paragraph,
+    margin: '20px 0'
+  };
+
+  const footerParagraph = {
+    ...paragraph,
+    margin: '0px'
+  };
+
+  const btnContainer = {
+    textAlign: 'center' as const
+  };
+
+  const button = {
+    fontFamily,
+    backgroundColor: '#1d4ee2',
+    borderRadius: '5px',
+    color: '#fff',
+    fontSize: '16px',
+    textDecoration: 'none',
+    textAlign: 'center' as const,
+    display: 'block'
+  };
+</script>
+
+<Text style={paragraph}>Hey {name},</Text>
+<Text style={paragraphContent}>
+  You have been given access to teach a course by {orgName}
+</Text>
+<Text style={paragraphContent}>
+  The course is titled: {courseName}
+</Text>
+
+<Section style={btnContainer}>
+  <Button pX={12} pY={12} style={button} href={inviteLink}>Open Dashboard</Button>
+</Section>

src/routes/api/email/invite/+server.js

@@ -1,7 +1,7 @@
 import { render } from 'svelte-email';
 import { json } from '@sveltejs/kit';
 import TeacherInviteTemplate from './template.svelte';
-import { getSendgrid, SENDGRID_FROM_HELP } from '$lib/utils/services/sendgrid';
+import { getSendgrid, SENDGRID_FROM_NOTIFY } from '$lib/utils/services/sendgrid';
 import { getSupabase } from '$lib/utils/functions/supabase';
 
 const sendgrid = getSendgrid();
@@ -47,7 +47,7 @@ export async function POST({ request }) {
   console.log('inviteData', inviteData);
 
   const options = {
-    from: SENDGRID_FROM_HELP,
+    from: SENDGRID_FROM_NOTIFY,
     to: email,
     subject: `Join ${name} on ClassroomIO`,
     html: render({

src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte

@@ -205,7 +205,7 @@
     <Exercises lessonId={data.lessonId} exerciseId={data.exerciseId} path={`${path}/exercises`} />
   {:else if !!data.lessonId}
     <PageBody>
-      <Materials lessonId={data.lessonId} {mode} {prevMode} bind:isSaving />
+      <Materials lessonId={data.lessonId} {mode} {prevMode} {toggleMode} bind:isSaving />
 
       <div class="w-full flex flex-row-reverse">
         <PrimaryButton

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

@@ -62,6 +62,9 @@
 
   async function deletePerson() {
     $group.people = $group.people.filter((person: { id: string }) => person.id !== member.id);
+    $group.tutors = $group.tutors.filter(
+      (person: { memberId: string }) => person.memberId !== member.id
+    );
 
     await deleteGroupMember(member.id);
   }
@@ -114,6 +117,7 @@
 </script>
 
 <InviationModal />
+
 <DeleteConfirmation
   email={member.email || (member.profile && member.profile.email)}
   {deletePerson}