feat(frontend)/ELEC-496: Revamp User Profile Page (#222)

* add initial oauth support

* feat: finished styling of the user page with dummy datas

* feat: added option to add headers to request util function in the frontend

* feat: finished list view for reviews

* feat: pagination implemented and edit report modal draft

* fix: change request schema reviews/:reviewId to the appropriate schema

* feat: removed the use of rating and replace it to overallRating in the frontend, implemented edit review modal

* feat: implemented remove review modal

* fix: fixed lint issues related to key prop element in iterations

* add federated authentication support

* add federated authentication support

* add comment for module augmentation

* create middleware

* add initial oauth support

* remove auth server

remove login window

remove validation on course page

* remove auth server

modify docker

* feat: optimistic ui update for edit and delete review

* chore: fix backend test

* chore: removed login route

* added fixes for functionality

* more fixes

* feat: implemented optimistic ui updates on upvotes and posting new reviews and added asterisks on required field on the review modal

* added route for getting bookedmarked courses if logged in

* feat: optimistic ui update on bookmarking reviews, added success type to alert, fixed rating where it previously used px instead of %, and fixed issues on sorting when adding a review

* fix: fixed issues with optimistic ui update on bookmark

* fix: minor ui/ux fix

---------

Co-authored-by: Ahnaf Tazwar <ahnaftazwar368@gmail.com>
Co-authored-by: Aimen Hamed <aimenhamed@live.com.au>

Author: 3 people

backend/prisma/schema.prisma

@@ -15,66 +15,66 @@ enum report_status {
 }
 
 model courses {
-  courseCode         String     @id(map: "pk_course_code") @map("course_code")
-  archived           Boolean
-  attributes         String[]
-  calendar           String
-  campus             String
-  description        String
-  enrolmentRules     String     @map("enrolment_rules")
-  equivalents        String[]
-  exclusions         String[]
-  faculty            String
-  fieldOfEducation   String     @map("field_of_education")
-  genEd              Boolean     @map("gen_ed")
-  level              Int
-  school             String
-  studyLevel         String     @map("study_level")
-  terms              Int[]
-  title              String
-  uoc                Int
-  rating             Float
-  reviews            reviews[]
+  courseCode       String    @id(map: "pk_course_code") @map("course_code")
+  archived         Boolean
+  attributes       String[]
+  calendar         String
+  campus           String
+  description      String
+  enrolmentRules   String    @map("enrolment_rules")
+  equivalents      String[]
+  exclusions       String[]
+  faculty          String
+  fieldOfEducation String    @map("field_of_education")
+  genEd            Boolean   @map("gen_ed")
+  level            Int
+  school           String
+  studyLevel       String    @map("study_level")
+  terms            Int[]
+  title            String
+  uoc              Int
+  rating           Float
+  reviews          reviews[]
 }
 
 model reports {
-  reportId          String                      @id(map: "pk_report_id") @default(dbgenerated("gen_random_uuid()")) @db.Uuid @map("report_id")
-  reviewId          String                      @db.Uuid @map("review_id")
-  zid               String
-  status            report_status
-  reason            String
-  createdTimestamp  DateTime                    @default(now()) @db.Timestamp(6) @map("created_timestamp")
-  updatedTimestamp  DateTime                    @default(now()) @db.Timestamp(6) @map("updated_timestamp")
-  reviews           reviews                     @relation(fields: [reviewId], references: [reviewId], onDelete: NoAction, onUpdate: NoAction, map: "fk_review_id")
-  users             users                       @relation(fields: [zid], references: [zid], onDelete: NoAction, onUpdate: NoAction, map: "fk_zid")
+  reportId         String        @id(map: "pk_report_id") @default(dbgenerated("gen_random_uuid()")) @map("report_id") @db.Uuid
+  reviewId         String        @map("review_id") @db.Uuid
+  zid              String
+  status           report_status
+  reason           String
+  createdTimestamp DateTime      @default(now()) @map("created_timestamp") @db.Timestamp(6)
+  updatedTimestamp DateTime      @default(now()) @map("updated_timestamp") @db.Timestamp(6)
+  reviews          reviews       @relation(fields: [reviewId], references: [reviewId], onDelete: NoAction, onUpdate: NoAction, map: "fk_review_id")
+  users            users         @relation(fields: [zid], references: [zid], onDelete: NoAction, onUpdate: NoAction, map: "fk_zid")
 }
 
 model reviews {
-  reviewId          String      @id(map: "pk_review_id") @default(dbgenerated("gen_random_uuid()")) @db.Uuid @map("review_id")
-  zid               String
-  courseCode        String      @map("course_code")
-  authorName        String      @map("author_name")
-  title             String
-  description       String?
-  grade             Int?
-  termTaken        String      @map("term_taken")
-  createdTimestamp  DateTime    @default(now()) @db.Timestamp(6) @map("created_timestamp")
-  updatedTimestamp  DateTime    @default(now()) @db.Timestamp(6) @map("updated_timestamp")
-  upvotes           String[]
-  manageability     Float
-  usefulness        Float
-  enjoyability      Float
-  overallRating     Float       @map("overall_rating")
-  reports           reports[]
-  courses           courses     @relation(fields: [courseCode], references: [courseCode], onDelete: NoAction, onUpdate: NoAction, map: "fk_course_code")
-  users             users       @relation(fields: [zid], references: [zid], onDelete: NoAction, onUpdate: NoAction, map: "fk_zid")
+  reviewId         String    @id(map: "pk_review_id") @default(dbgenerated("gen_random_uuid()")) @map("review_id") @db.Uuid
+  zid              String
+  courseCode       String    @map("course_code")
+  authorName       String    @map("author_name")
+  title            String
+  description      String?
+  grade            Int?
+  termTaken        String    @map("term_taken")
+  createdTimestamp DateTime  @default(now()) @map("created_timestamp") @db.Timestamp(6)
+  updatedTimestamp DateTime  @default(now()) @map("updated_timestamp") @db.Timestamp(6)
+  upvotes          String[]
+  manageability    Float
+  usefulness       Float
+  enjoyability     Float
+  overallRating    Float     @map("overall_rating")
+  reports          reports[]
+  courses          courses   @relation(fields: [courseCode], references: [courseCode], onDelete: NoAction, onUpdate: NoAction, map: "fk_course_code")
+  users            users     @relation(fields: [zid], references: [zid], onDelete: NoAction, onUpdate: NoAction, map: "fk_zid")
 }
 
 model users {
-  zid                String      @id(map: "pk_zid")
-  bookmarkedReviews String[]     @map("bookmarked_reviews")
-  bookmarkedCourses String[]     @map("bookmarked_courses")
-  isAdmin           Boolean     @map("is_admin")
-  reports            reports[]
-  reviews            reviews[]
+  zid               String    @id(map: "pk_zid")
+  bookmarkedReviews String[]  @map("bookmarked_reviews")
+  bookmarkedCourses String[]  @map("bookmarked_courses")
+  isAdmin           Boolean   @map("is_admin")
+  reports           reports[]
+  reviews           reviews[]
 }

backend/src/App.ts

@@ -10,7 +10,6 @@ import { UserService } from "./services/user.service";
 import { UserController } from "./controllers/user.controller";
 import { ReportController } from "./controllers/report.controller";
 import { ReportService } from "./services/report.service";
-import { AuthService } from "./modules/Auth";
 import { CourseRepository } from "./repositories/course.repository";
 import { UserRepository } from "./repositories/user.repository";
 import PrismaClient from "./modules/prisma";
@@ -23,9 +22,6 @@ export default class App {
   private prisma = new PrismaClient();
   private redis = new RedisClient();
 
-  // auth
-  private readonly auth = new AuthService();
-
   private readonly courseRepository = new CourseRepository(
     this.prisma.getConnection(),
   );
@@ -46,8 +42,9 @@ export default class App {
     this.redis,
   );
   private readonly userService = new UserService(
-    this.auth,
     this.userRepository,
+    this.reviewRepository,
+    this.redis,
   );
   private readonly reportService = new ReportService(
     this.reportRepository,

backend/src/api/schemas/review.schema.ts

@@ -19,9 +19,9 @@ export const PostReviewSchema = z
     zid: z.string(),
     authorName: z.string(),
     title: z.string(),
-    description: z.string(),
+    description: z.string().nullable(),
+    grade: z.number().nullable(),
     courseCode: z.string(),
-    rating: z.number(),
     termTaken: z.string(),
     manageability: z.number(),
     usefulness: z.number(),
@@ -70,7 +70,7 @@ const PostReviewRequestBodySchema = z
 
 export type PostReviewRequestBody = z.infer<typeof PostReviewRequestBodySchema>;
 
-const PutReviewRequestBodySchema = z
+export const PutReviewRequestBodySchema = z
   .object({
     authorName: z.string(),
     grade: z.number().nullable(),

backend/src/controllers/course.controller.ts

@@ -78,33 +78,6 @@ export class CourseController implements IController {
           }
         },
       )
-      .post(
-        "/courses/bookmark",
-        validationMiddleware(BookmarkCourseSchema, "body"),
-        async (
-          req: Request<Record<string, never>, unknown, BookmarkCourse>,
-          res: Response,
-          next: NextFunction,
-        ) => {
-          this.logger.debug(`Received request in POST /courses/bookmark`);
-          try {
-            const bookmarkDetails = req.body;
-            if (!bookmarkDetails) throw new HTTPError(badRequest);
-            const result = await this.courseService.bookmarkCourse(
-              bookmarkDetails,
-            );
-            this.logger.info(`Responding to client in POST /courses/bookmark`);
-            return res.status(200).json(result);
-          } catch (err: any) {
-            this.logger.warn(
-              `An error occurred when trying to POST /courses/bookmark ${formatError(
-                err,
-              )}`,
-            );
-            return next(err);
-          }
-        },
-      )
       .get(
         "/course/:courseCode",
         async (

backend/src/controllers/review.controller.ts

@@ -13,6 +13,7 @@ import {
   PutReviewRequestBody,
   BookmarkReview,
   UpvoteReview,
+  PutReviewRequestBodySchema,
 } from "../api/schemas/review.schema";
 
 export class ReviewController implements IController {
@@ -97,7 +98,7 @@ export class ReviewController implements IController {
       )
       .put(
         "/reviews/:reviewId",
-        validationMiddleware(PostReviewSchema, "body"),
+        validationMiddleware(PutReviewRequestBodySchema, "body"),
         async (
           req: Request<{ reviewId: string }, unknown, PutReviewRequestBody>,
           res: Response,

backend/src/controllers/user.controller.ts

@@ -44,47 +44,56 @@ export class UserController implements IController {
           }
         },
       )
-      .post(
-        "/user/login",
-        validationMiddleware(CreateUserSchema, "body"),
+      .get(
+        "/user/:zid",
+        [verifyToken],
         async (
-          req: Request<Record<string, never>, unknown, CreateUser>,
+          req: Request<{ zid: string }, unknown>,
           res: Response,
           next: NextFunction,
         ) => {
-          const { zid } = req.body;
-          this.logger.debug(`Received POST request in /user/login`, req.body);
+          const { zid } = req.params;
+          this.logger.debug(`Received GET request in /user`, req.params);
           try {
-            const result = await this.userService.loginUser(zid);
-            this.logger.info(`Responding to client in /user/login`);
+            const result = await this.userService.getUser(zid);
+            this.logger.info(`Responding to client in /user/${zid}`);
             return res.status(200).json(result);
           } catch (err: any) {
             this.logger.warn(
-              `An error occurred when trying to POST /user/login ${formatError(
-                err,
-              )}`,
+              `An error occurred when trying to GET /user ${formatError(err)}`,
             );
             return next(err);
           }
         },
       )
       .get(
-        "/user/:zid",
+        "/user/course/:courseCode",
         [verifyToken],
         async (
-          req: Request<{ zid: string }, unknown>,
+          req: Request<{ courseCode: string }, unknown>,
           res: Response,
           next: NextFunction,
         ) => {
-          const { zid } = req.params;
-          this.logger.debug(`Received GET request in /user`, req.params);
+          const { courseCode } = req.params;
+          const zid = req.headers.zid as string;
+          this.logger.debug(
+            `Received GET request in /user/course/:courseCode`,
+            req.params,
+          );
           try {
-            const result = await this.userService.getUser(zid);
-            this.logger.info(`Responding to client in /user/${zid}`);
+            const result = await this.userService.getUserCourseInfo(
+              courseCode,
+              zid,
+            );
+            this.logger.info(
+              `Responding to client in /user/course/:courseCode`,
+            );
             return res.status(200).json(result);
           } catch (err: any) {
             this.logger.warn(
-              `An error occurred when trying to GET /user ${formatError(err)}`,
+              `An error occurred when trying to GET /user/course/:courseCode ${formatError(
+                err,
+              )}`,
             );
             return next(err);
           }

backend/src/modules/Auth.ts

@@ -32,10 +32,7 @@ export class ReportRepository {
     return reports;
   }
 
-  async getReportByUserAndReview(
-    zid: string,
-    reviewId: string,
-  ): Promise<Report | null> {
+  async getReportByUserAndReview(zid: string, reviewId: string) {
     const rawReport = await this.prisma.reports.findFirst({
       where: {
         zid: zid,
@@ -45,11 +42,10 @@ export class ReportRepository {
         users: true,
       },
     });
-    const report = ReportSchema.parse(rawReport);
-    return report;
+    return rawReport;
   }
 
-  async getReport(reportId: string): Promise<Report | null> {
+  async getReport(reportId: string) {
     const rawReport = await this.prisma.reports.findUnique({
       where: {
         reportId: reportId,
@@ -58,11 +54,10 @@ export class ReportRepository {
         users: true,
       },
     });
-    const report = ReportSchema.parse(rawReport);
-    return report;
+    return rawReport;
   }
 
-  async newReport(report: CreateReport): Promise<Report> {
+  async newReport(report: CreateReport) {
     const rawReport = await this.prisma.reports.create({
       data: {
         ...report,
@@ -72,8 +67,7 @@ export class ReportRepository {
         users: true,
       },
     });
-    const savedReport = ReportSchema.parse(rawReport);
-    return savedReport;
+    return rawReport;
   }
 
   async saveReport(report: UpdateReportStatus): Promise<Report> {

backend/src/repositories/report.repository.ts

@@ -24,6 +24,33 @@ export class ReviewRepository {
     });
   }
 
+  async update(review: {
+    reviewId: string;
+    grade: number | null;
+    authorName: string;
+  }) {
+    return await this.prisma.reviews.update({
+      where: {
+        reviewId: review.reviewId,
+      },
+      data: {
+        grade: review.grade,
+        authorName: review.authorName,
+      },
+    });
+  }
+
+  async updateUpvotes(review: { reviewId: string; upvotes: string[] }) {
+    return await this.prisma.reviews.update({
+      where: {
+        reviewId: review.reviewId,
+      },
+      data: {
+        upvotes: review.upvotes,
+      },
+    });
+  }
+
   async getReviewsByUser(zid: string): Promise<reviews[]> {
     return await this.prisma.reviews.findMany({
       where: {