feat: course news feed (#136)

* style: Improved font size of the answers in the FAQ section of the landing page

* woking on the anouncement page

* working on the anouncement feature

* fixed some bugs in the emoji and comment

* minor cleanup

* Delete .github/workflows/test-pull-request.yml

This commit was stashed but it seems i accidentally applied on this commit

* updated the navicon for the anouncement

* added role level security

* still working on the emoji click

* everything works now

* cleaned up the code

* cleaned up the code

* cleaned up the code

* cleaned up the code

* refined the formatTime function using dayjs

* refined the formatTime function using dayjs

* typed,the code,created a migration file

* increase editor width/height

* added the confirmation modal and also the edit functionality for a improve UX

* some cleanup

* handle edge case,only tutor or admin can edit or delete

* improved the fetchNews function and also added role level access for deleting the comment

* chore: refactor code

* clean up

* feat: add pinned feed

* feat: remove overview on sidebar

* fix formatting of todo

* feat: prevent async block when sending email

* feat: notify teacher and student of new post/comment

* refactoring

---------

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

apps/dashboard/src/lib/utils/functions/course.ts

@@ -17,13 +17,6 @@ export const getStudentInviteLink = (_course: Course, orgSiteName: string, origi
   return `${origin}/invite/s/${hash}`;
 };
 
-export const getTextFromHTML = (html: string): string => {
-  const dummyDiv = document.createElement('div');
-  dummyDiv.innerHTML = html;
-
-  return dummyDiv.textContent?.trim() || '';
-};
-
 const tagsToReplace: { [k: string]: string } = {
   '&': '&',
   '<': '&lt;',

apps/dashboard/src/lib/utils/functions/toHtml.ts

@@ -0,0 +1,16 @@
+import { browser } from '$app/environment';
+
+export const isHtmlValueEmpty = (html: string) => {
+  if (!html || typeof html !== 'string') return true;
+
+  if (!document || !browser) return false;
+
+  return getTextFromHTML(html) === '';
+};
+
+export const getTextFromHTML = (html: string): string => {
+  const dummyDiv = document.createElement('div');
+  dummyDiv.innerHTML = html;
+
+  return dummyDiv.textContent?.trim() || '';
+};

apps/dashboard/src/lib/utils/services/courses/clone.ts

@@ -228,7 +228,6 @@ export async function cloneCourse(courseId: string, newTitle: string): Promise<C
 -> Note the following information will be copied
 
 3. Things to copy
-Overview
 Lessons
 Exercises - questions, options, everything basically.
 

apps/dashboard/src/lib/utils/services/courses/index.ts

@@ -142,6 +142,10 @@ export function addGroupMember(member: any) {
   return supabase.from('groupmember').insert(member).select();
 }
 
+export function addDefaultNewsFeed(feed) {
+  return supabase.from('course_newsfeed').insert(feed);
+}
+
 export function updatedGroupMember(update: any, match: any) {
   return supabase.from('groupmember').update(update).match(match);
 }

apps/dashboard/src/lib/utils/services/newsfeed/index.ts

@@ -0,0 +1,181 @@
+import type { Course } from '$lib/utils/types';
+import { supabase } from '$lib/utils/functions/supabase';
+import type { Reaction, FeedApi } from '$lib/utils/types/feed';
+
+export async function fetchNewsFeeds(courseId?: Course['id']) {
+  const response = await supabase
+    .from('course_newsfeed')
+    .select(
+      `
+    id,
+    created_at,
+    content,
+    course_id,
+    author:groupmember(
+      profile(
+        id,
+        fullname,
+        avatar_url
+      )
+    ),
+    reaction,
+    is_pinned,
+    comment:course_newsfeed_comment(
+        id,
+        created_at,
+        author:groupmember( profile(id, fullname, avatar_url) ),
+        content,
+        course_newsfeed_id)
+    `
+    )
+    .match({ course_id: courseId })
+    .order('created_at', { ascending: false })
+    .returns<FeedApi[]>();
+
+  const { data, error } = response;
+
+  return { data, error };
+}
+
+export async function createNewFeed(post: {
+  content: string;
+  author_id: string;
+  course_id: string;
+  reaction: Reaction;
+}) {
+  const response = await supabase
+    .from('course_newsfeed')
+    .insert({
+      content: post.content,
+      author_id: post.author_id,
+      course_id: post.course_id,
+      reaction: post.reaction
+    })
+    .select();
+
+  return { response };
+}
+
+export async function handleEditFeed(feedId: string, content: string) {
+  const response = await supabase
+    .from('course_newsfeed')
+    .update({ content: content })
+    .match({ id: feedId })
+    .select();
+  return response;
+}
+
+export async function createComment(comment: {
+  content: string;
+  author_id: string;
+  course_newsfeed_id: string;
+}) {
+  const response = await supabase
+    .from('course_newsfeed_comment')
+    .insert({
+      content: comment.content,
+      author_id: comment.author_id,
+      course_newsfeed_id: comment.course_newsfeed_id
+    })
+    .select();
+
+  return { response };
+}
+
+export async function toggleFeedIsPinned(feedId: string, isPinned: boolean) {
+  const response = await supabase
+    .from('course_newsfeed')
+    .update({
+      is_pinned: isPinned
+    })
+    .match({ id: feedId });
+
+  return { response };
+}
+
+export async function deleteNewsFeedComment(commentId: string) {
+  const response = await supabase.from('course_newsfeed_comment').delete().match({ id: commentId });
+
+  return response;
+}
+export async function deleteNewsFeed(feedId: string) {
+  await supabase.from('course_newsfeed_comment').delete().match({ course_newsfeed_id: feedId });
+  const response = await supabase.from('course_newsfeed').delete().match({ id: feedId });
+
+  return response;
+}
+
+export async function getFeedForNotification(feedId: string, authorId: string) {
+  const { data, error } = await supabase
+    .from('course_newsfeed')
+    .select(
+      `
+    content,
+    author:groupmember(profile(fullname, email)),
+    course(
+      id,
+      title,
+      group(
+        organization(siteName, name),
+        members:groupmember(id, profile(email, fullname))
+      )
+    )
+  `
+    )
+    .eq('id', feedId)
+    .limit(1)
+    .returns<
+      {
+        content: string;
+        author: {
+          profile: {
+            email: string;
+            fullname: string;
+          };
+        };
+        course: {
+          id: string;
+          title: string;
+          group: {
+            organization: {
+              name: string;
+              siteName: string;
+            };
+            members: {
+              id: string;
+              profile: {
+                email: string;
+                fullname: string;
+              };
+            }[];
+          };
+        };
+      }[]
+    >();
+
+  if (error) {
+    console.error('Failed to get feed', error);
+    return null;
+  }
+  console.log({
+    data
+  });
+  const [feed] = data || [];
+
+  if (!feed) return;
+
+  return {
+    id: feedId,
+    courseId: feed.course.id,
+    courseTitle: feed.course.title,
+    teacherName: feed.author?.profile?.fullname,
+    teacherEmail: feed.author?.profile?.email,
+    content: feed.content,
+    org: feed.course.group?.organization,
+    courseMembers: feed.course?.group?.members
+      ?.filter((member) => member.id !== authorId)
+      ?.map((member) => {
+        return member.profile;
+      })
+  };
+}

apps/dashboard/src/lib/utils/services/notification/notification.ts

@@ -9,7 +9,8 @@ export const NOTIFICATION_NAME = {
   STUDENT_COURSE_WELCOME: 'STUDENT COURSE WELCOME',
   TEACHER_STUDENT_JOINED: 'TEACHER STUDENT JOINED',
   SUBMISSION_UPDATE: 'SUBMISSION UPDATE',
-  EXERCISE_SUBMISSION_UPDATE: 'EXERCISE SUBMISSION UPDATE'
+  EXERCISE_SUBMISSION_UPDATE: 'EXERCISE SUBMISSION UPDATE',
+  NEWSFEED: 'NEWSFEED'
 };
 
 const NAME_TO_PATH = {
@@ -22,7 +23,8 @@ const NAME_TO_PATH = {
   [NOTIFICATION_NAME.STUDENT_COURSE_WELCOME]: '/api/email/course/student_welcome',
   [NOTIFICATION_NAME.TEACHER_STUDENT_JOINED]: '/api/email/course/teacher_student_joined',
   [NOTIFICATION_NAME.SUBMISSION_UPDATE]: '/api/email/course/submission_update',
-  [NOTIFICATION_NAME.EXERCISE_SUBMISSION_UPDATE]: '/api/email/course/exercise_submission_update'
+  [NOTIFICATION_NAME.EXERCISE_SUBMISSION_UPDATE]: '/api/email/course/exercise_submission_update',
+  [NOTIFICATION_NAME.NEWSFEED]: '/api/email/course/newsfeed'
 };
 
 const getAccessToken = async () => {
@@ -30,7 +32,7 @@ const getAccessToken = async () => {
   return data.session?.access_token || '';
 };
 
-export const triggerSendEmail = async (name: string, body: { [k: string]: any }) => {
+export const triggerSendEmail = async (name: string, body: { [k: string]: unknown }) => {
   try {
     const accessToken = await getAccessToken();
     const path = NAME_TO_PATH[name];
@@ -51,7 +53,6 @@ export const triggerSendEmail = async (name: string, body: { [k: string]: any })
       console.log(response);
       throw new Error(await response.text());
     }
-    const result = await response.json();
   } catch (error) {
     console.error(name, error);
   }

apps/dashboard/src/lib/utils/services/notification/send.ts

@@ -4,21 +4,10 @@ import {
   SMTP_HOST,
   SMTP_USER,
   SMTP_PASSWORD,
-  SMTP_USER_HELP,
-  SMTP_PASSWORD_HELP
+  SMTP_USER_NOTIFY,
+  SMTP_PASSWORD_NOTIFY
 } from '$env/static/private';
 
-const content = `
-<div>
-  <h1>Welcome</h1>
-  <br/>
-  <p>Thank you so much for trying out ClassroomIO</p>
-  <a href="https://app.classroomio.com/login">Login</a><br/>
-<br/>
-Your ClassroomIO Team
-</div>
-`;
-
 let transporter: nodemailer.Transporter;
 
 const getTransporter = async (isPersonal?: boolean): Promise<boolean> => {
@@ -28,8 +17,8 @@ const getTransporter = async (isPersonal?: boolean): Promise<boolean> => {
       port: 465,
       secure: true,
       auth: {
-        user: isPersonal ? SMTP_USER : SMTP_USER_HELP,
-        pass: isPersonal ? SMTP_PASSWORD : SMTP_PASSWORD_HELP
+        user: isPersonal ? SMTP_USER : SMTP_USER_NOTIFY,
+        pass: isPersonal ? SMTP_PASSWORD : SMTP_PASSWORD_NOTIFY
       }
     });
 
@@ -60,14 +49,22 @@ export const sendEmail = async ({
   isPersonalEmail?: boolean;
   replyTo?: string;
 }) => {
-  await getTransporter(isPersonalEmail);
-  const info = await transporter.sendMail({
-    from: from || '"Best from ClassroomIO" <[email protected]>', // sender address
-    to, // list of receivers
-    subject, // Subject line
-    replyTo,
-    html: withEmailTemplate(content) // html body
-  });
+  try {
+    await getTransporter(isPersonalEmail);
+    const info = await transporter.sendMail({
+      from: from || '"Best from ClassroomIO" <[email protected]>', // sender address
+      to, // list of receivers
+      subject, // Subject line
+      replyTo,
+      html: withEmailTemplate(content) // html body
+    });
 
-  console.log('Message sent: %s', info.messageId);
+    console.log('Message sent: %s', info.messageId);
+
+    return info;
+  } catch (error) {
+    console.error({ error });
+
+    return error;
+  }
 };

apps/dashboard/src/lib/utils/types/feed.ts

@@ -0,0 +1,46 @@
+export interface Author {
+  id: string;
+  username: string;
+  fullname: string;
+  avatar_url: string;
+}
+
+export interface Comment {
+  id: string;
+  created_at: string;
+  content: string;
+  author: {
+    profile: Author;
+  };
+}
+
+export interface Reaction {
+  smile: string[];
+  thumbsup: string[];
+  thumbsdown: string[];
+  clap: string[];
+}
+
+export interface FeedApi {
+  id: string;
+  content: string;
+  author: {
+    profile: Author;
+  };
+  created_at: string;
+  comment: Comment[];
+  reaction: Reaction[];
+  is_pinned: false;
+}
+
+export interface Feed {
+  id: string;
+  content: string;
+  author: {
+    profile: Author;
+  };
+  created_at: string;
+  comment: Comment[];
+  reaction: Reaction[];
+  isPinned: boolean;
+}