Merge pull request #141 from HackYourFutureProjects/FE-BE/teacher-moderation

Fe be/teacher moderation

Author: Dmytro-Doronin

client/src/api/auth/types.ts

@@ -1,5 +1,6 @@
 import { StudentType } from "../student/student.type";
 import { TeacherType } from "../teacher/teacher.type";
+import { ModeratorType } from "../moderator/moderator.type.ts";
 
 export type Role = "student" | "teacher" | "moderator";
 
@@ -14,7 +15,7 @@ export type RegisterFinalType = RegisterFormTypes & {
   role: Role;
 };
 
-export type UserType = StudentType | TeacherType;
+export type UserType = StudentType | TeacherType | ModeratorType;
 
 export type LoginFormTypes = {
   email: string;

client/src/api/moderator/moderator.api.ts

@@ -1,7 +1,20 @@
 import { LoginFormTypes } from "../auth/types.ts";
-import { apiPublic } from "../api.ts";
+import { apiProtected, apiPublic } from "../api.ts";
+import { TeacherStatus } from "../teacher/teacher.type.ts";
 
 export async function loginModeratorApi(data: LoginFormTypes) {
   const res = await apiPublic.post("/api/moderator/auth/login", data);
   return res.data as { accessToken: string };
 }
+
+export async function moderatorChangeTeacherStatusApi({
+  id,
+  status,
+}: {
+  id: string;
+  status: TeacherStatus;
+}) {
+  return await apiProtected.patch(`/api/moderator/teachers/${id}/status`, {
+    status,
+  });
+}

client/src/api/moderator/moderator.type.ts

@@ -0,0 +1,9 @@
+export type ModeratorType = {
+  id: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  profileImageUrl: string | null;
+  createdAt: Date;
+  role: "moderator";
+};

client/src/api/teacher/teacher.api.ts

@@ -1,6 +1,7 @@
 import { apiProtected, apiPublic } from "../api.ts";
 import {
   TeacherOutputModel,
+  TeachersForModeratorQuery,
   TeachersQuery,
   TeacherType,
   UpdateTeacherProfileInput,
@@ -14,11 +15,31 @@ export async function getAllTeachersApi(query: TeachersQuery) {
   return res.data;
 }
 
+export async function getAllTeachersForModeratorApi(
+  query: TeachersForModeratorQuery,
+) {
+  const res = await apiProtected.get<TeacherOutputModel>(
+    "/api/teachers/get-teachers-moderator",
+    {
+      params: query,
+    },
+  );
+
+  return res.data;
+}
+
 export async function getTeacherByIdApi(teacherId: string) {
   const res = await apiPublic.get<TeacherType>(`/api/teachers/${teacherId}`);
   return res.data;
 }
 
+export async function getTeacherByIdForModeratorApi(teacherId: string) {
+  const res = await apiProtected.get<TeacherType>(
+    `/api/teachers/${teacherId}/moderator`,
+  );
+  return res.data;
+}
+
 type ApiSlot = { start: string; end: string };
 type ApiAvailability = {
   monday: ApiSlot[];

client/src/api/teacher/teacher.type.ts

@@ -1,5 +1,10 @@
 import { Role } from "../auth/types";
-
+export type TeacherStatus =
+  | "draft"
+  | "pending"
+  | "active"
+  | "rejected"
+  | "blocked";
 type EducationItem = {
   degree: string;
   institution: string;
@@ -58,6 +63,7 @@ export type TeacherType = {
   availability: AvailabilityItem;
   address: AddressItem;
   createdAt: Date;
+  status: TeacherStatus;
   role: Role;
 };
 
@@ -71,6 +77,7 @@ export type TeacherOutputModel = {
 
 export type SortDirection = "asc" | "desc";
 export type SortBy = "createdAt" | "priceFrom" | "rating";
+export type SortByTeachersForModerator = "status" | "createdAt";
 
 export type TeachersQuery = {
   subject?: string;
@@ -83,6 +90,13 @@ export type TeachersQuery = {
   pageSize?: number;
 };
 
+export type TeachersForModeratorQuery = {
+  sortBy?: SortByTeachersForModerator;
+  sortDirection?: SortDirection;
+  pageNumber?: number;
+  pageSize?: number;
+};
+
 export type UpdateTeacherProfileInput = {
   firstName?: string;
   lastName?: string;

client/src/components/cardsList/CardsList.tsx

@@ -1,12 +1,18 @@
 import { TeacherCard } from "../teacherCard/teacherCard";
-import { TeacherType } from "../../api/teacher/teacher.type";
+import { TeacherStatus, TeacherType } from "../../api/teacher/teacher.type";
 import { motion, type Variants, useReducedMotion } from "framer-motion";
 import { useRef } from "react";
 type CardsListType = {
   cards: TeacherType[];
+  changeStatus?: (id: string, status: TeacherStatus) => void;
+  isStatusPending?: boolean;
 };
 
-export const CardsList = ({ cards }: CardsListType) => {
+export const CardsList = ({
+  cards,
+  changeStatus,
+  isStatusPending,
+}: CardsListType) => {
   const reduceMotion = useReducedMotion();
 
   const listVariants: Variants = {
@@ -44,7 +50,11 @@ export const CardsList = ({ cards }: CardsListType) => {
     >
       {cards.map((teacher) => (
         <motion.div key={teacher.id} variants={itemVariants}>
-          <TeacherCard teacher={teacher} />
+          <TeacherCard
+            isStatusPending={isStatusPending}
+            changeStatus={changeStatus}
+            teacher={teacher}
+          />
         </motion.div>
       ))}
     </motion.div>

client/src/components/sidebar/sidebarMenuItems.ts

@@ -5,6 +5,8 @@ import Chat from "../icons/Chat";
 import UsersIcon from "../icons/UsersIcon";
 import {
   chatRoutes,
+  moderatorBase,
+  moderatorPrivatesRoutesVariables,
   studentBase,
   studentPrivatesRoutesVariables,
   teacherBase,
@@ -63,3 +65,16 @@ export const defaultTeacherMenuItems: MenuItem[] = [
     icon: Chat,
   },
 ];
+
+export const defaultModeratorMenuItems: MenuItem[] = [
+  {
+    name: "Teachers",
+    link: joinPath(moderatorBase, moderatorPrivatesRoutesVariables.teachers),
+    icon: DashboardIcon,
+  },
+  {
+    name: "Chat",
+    link: joinPath(moderatorBase, chatRoutes.root),
+    icon: Chat,
+  },
+];

client/src/components/statusChanger/StatusChange.tsx

@@ -0,0 +1,37 @@
+import {
+  getStatusButtonClass,
+  statusOptions,
+  statusUi,
+} from "../../util/statusButtons.tsx";
+import { Button } from "../ui/button/Button.tsx";
+import { TeacherStatus } from "../../api/teacher/teacher.type.ts";
+
+type StatusChangeProps = {
+  id: string;
+  changeStatus: (id: string, status: TeacherStatus) => void;
+  status: TeacherStatus;
+};
+
+export const StatusChange = ({
+  changeStatus,
+  id,
+  status,
+}: StatusChangeProps) => {
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-2">
+        {statusOptions.map((s) => (
+          <Button
+            key={s}
+            type="button"
+            variant="link"
+            className={getStatusButtonClass(s, s === status)}
+            onClick={() => changeStatus(id, s)}
+          >
+            {statusUi[s].label}
+          </Button>
+        ))}
+      </div>
+    </>
+  );
+};