Merge pull request #146 from HackYourFutureProjects/FE-BE/moderation-features

Fe be/moderation features

Author: Dmytro-Doronin

client/src/api/review/review.api.ts

@@ -45,3 +45,7 @@ export async function createReviewApi(
   const res = await apiProtected.post<ReviewType>("/api/reviews", data);
   return res.data;
 }
+
+export async function deleteReviewByModeratorApi(reviewId: string) {
+  return await apiProtected.delete(`/api/reviews/${reviewId}/moderator`);
+}

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

@@ -5,6 +5,9 @@ export type TeacherStatus =
   | "active"
   | "rejected"
   | "blocked";
+
+export type TeacherStatusQuery = TeacherStatus | "all";
+
 type EducationItem = {
   degree: string;
   institution: string;
@@ -95,6 +98,7 @@ export type TeachersForModeratorQuery = {
   sortDirection?: SortDirection;
   pageNumber?: number;
   pageSize?: number;
+  status?: TeacherStatusQuery;
 };
 
 export type UpdateTeacherProfileInput = {

client/src/components/cardsList/CardsList.tsx

@@ -5,13 +5,13 @@ import { useRef } from "react";
 type CardsListType = {
   cards: TeacherType[];
   changeStatus?: (id: string, status: TeacherStatus) => void;
-  isStatusPending?: boolean;
+  pendingTeacherId?: string | null;
 };
 
 export const CardsList = ({
   cards,
   changeStatus,
-  isStatusPending,
+  pendingTeacherId,
 }: CardsListType) => {
   const reduceMotion = useReducedMotion();
 
@@ -51,7 +51,7 @@ export const CardsList = ({
       {cards.map((teacher) => (
         <motion.div key={teacher.id} variants={itemVariants}>
           <TeacherCard
-            isStatusPending={isStatusPending}
+            isStatusPending={pendingTeacherId === teacher.id}
             changeStatus={changeStatus}
             teacher={teacher}
           />

client/src/components/deleteReviewConfirmation/DeleteReviewConfirmation.tsx

@@ -0,0 +1,47 @@
+import { Button } from "../ui/button/Button.tsx";
+import { Loader } from "../loader/Loader.tsx";
+import { useDeleteReviewByModeratorMutation } from "../../features/review/mutations/useDeleteReviewByModeratorMutation.ts";
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  teacherId: string;
+  reviewId: string;
+}
+
+export const DeleteReviewByModeratorConfirmation = ({
+  isOpen,
+  onClose,
+  teacherId,
+  reviewId,
+}: Props) => {
+  const { mutateAsync, isPending } =
+    useDeleteReviewByModeratorMutation(teacherId);
+
+  const onConfirm = async () => {
+    await mutateAsync(reviewId);
+    onClose();
+  };
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4 shadow-xl">
+      <div className="mb-6 text-gray-700">
+        <p>Do you really want to delete review?</p>
+      </div>
+
+      <div className="flex gap-3 justify-end">
+        <Button variant="secondary" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button onClick={onConfirm} disabled={isPending}>
+          Confirm
+        </Button>
+      </div>
+      {isPending && <Loader />}
+    </div>
+  );
+};

client/src/components/icons/Delete.tsx

@@ -9,6 +9,7 @@ import { AlertDialog } from "../alertDialog/AlertDialog.tsx";
 import { useModalStore } from "../../store/modals.store.ts";
 import { cva } from "class-variance-authority";
 import { twMerge } from "tailwind-merge";
+import { DeleteReviewByModeratorConfirmation } from "../deleteReviewConfirmation/DeleteReviewConfirmation.tsx";
 
 const overlayClass = cva(
   "fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-200",
@@ -61,6 +62,17 @@ export const ModalHost = () => {
         {activeModal === "signIn" && (
           <SignInConfirmation isOpen={opened} onClose={close} />
         )}
+        {activeModal === "deleteReview" &&
+          payload &&
+          "teacherId" in payload &&
+          "reviewId" in payload && (
+            <DeleteReviewByModeratorConfirmation
+              isOpen={opened}
+              onClose={close}
+              teacherId={payload.teacherId}
+              reviewId={payload.reviewId}
+            />
+          )}
         {activeModal === "confirmDelete" &&
           payload &&
           "onConfirm" in payload && (

client/src/components/modalHost/modalHost.tsx

@@ -7,7 +7,6 @@ import DefaultAvatarIcon from "../icons/DefaultAvatarIcon";
 import { cva, VariantProps } from "class-variance-authority";
 import { twMerge } from "tailwind-merge";
 import { useAuthSessionStore } from "../../store/authSession.store.ts";
-import { Loader } from "../loader/Loader.tsx";
 import { StatusChange } from "../statusChanger/StatusChange.tsx";
 
 type TeacherCardType = {
@@ -62,7 +61,7 @@ export const TeacherCard = ({
   const navigate = useNavigate();
   const user = useAuthSessionStore((state) => state.user);
   const avatarUrl = getAvatarUrl(profileImageUrl || null);
-
+  const pulseClass = isStatusPending ? `pulse-border--${status}` : "";
   const handleBookClick = () => {
     if (user?.role === "moderator") {
       navigate(`/moderator/teachers/${id}`);
@@ -76,7 +75,12 @@ export const TeacherCard = ({
   };
 
   return (
-    <div className={teacherCardClassName({ status }, "flex flex-col gap-4")}>
+    <div
+      className={teacherCardClassName(
+        { status },
+        twMerge("flex flex-col gap-4", pulseClass),
+      )}
+    >
       {Boolean(changeStatus) && (
         <StatusChange changeStatus={onChangeStatus} id={id} status={status} />
       )}
@@ -171,7 +175,6 @@ export const TeacherCard = ({
           <span className="text-[14px] text-dark-400">First lesson - free</span>
         </div>
       </div>
-      {isStatusPending && <Loader />}
     </div>
   );
 };

client/src/components/teacherCard/teacherCard.tsx

@@ -2,13 +2,19 @@ import ReviewsIcon from "../../icons/Reviews";
 import { Rating } from "../../rating/Rating";
 import UsersIcon from "../../icons/UsersIcon";
 import { ReviewType } from "../../../api/review/review.type";
+import { Button } from "../../ui/button/Button.tsx";
+import Delete from "../../icons/Delete.tsx";
+import { useModalStore } from "../../../store/modals.store.ts";
+import { useAuthSessionStore } from "../../../store/authSession.store.ts";
 
 interface ReviewCardProps {
   reviewData: ReviewType;
 }
 
 export const ReviewCardTeacher = ({
   reviewData: {
+    _id,
+    teacherId,
     studentName,
     studentAvatar,
     rating,
@@ -17,9 +23,24 @@ export const ReviewCardTeacher = ({
     createdAt,
   },
 }: ReviewCardProps) => {
+  const openModal = useModalStore((s) => s.open);
+  const user = useAuthSessionStore((state) => state.user);
+
   return (
     <div className="w-full h-full">
       <div className="flex flex-col bg-[#15141D] p-[16px] md:p-[25px] rounded-2xl h-full">
+        {user?.role === "moderator" && (
+          <Button
+            variant="link"
+            className="self-end hover:shadow-[0_0_18px_rgba(239,68,68,0.55)] mb-5"
+            onClick={() =>
+              openModal("deleteReview", { teacherId, reviewId: _id })
+            }
+          >
+            <Delete />
+          </Button>
+        )}
+
         {/* Header Part (Avatar , Name, Icon ) */}
         <div className="flex items-center gap-[10px] md:gap-[16px] mb-[12px] md:mb-[20px]">
           {studentAvatar ? (
@@ -43,7 +64,6 @@ export const ReviewCardTeacher = ({
 
           <ReviewsIcon className="opacity-20 w-3.5 md:w-auto h-3.5 md:h-auto shrink-0" />
         </div>
-
         {/* Rieview Section */}
         <div className="flex flex-col gap-[12px]">
           <div className="flex justify-between items-center">

client/src/components/teacherSection/Reviews/ReviewCardTeacher.tsx

@@ -41,27 +41,35 @@ export const ReviewsManager = () => {
 
   return (
     <>
-      <div className="text-center">
-        <h2 className="mb-6 sm:mb-8 lg:mb-10 font-bold text-white xl:text-[56px] text-3xl sm:text-4xl lg:text-5xl">
-          What our clients say
-        </h2>
-        <p className="mx-auto mb-12 sm:mb-16 lg:mb-20 px-4 max-w-3xl text-white/70 text-sm sm:text-base lg:text-lg text-justify leading-relaxed">
-          Students appreciate the practical approach, supportive instructors,
-          and clear learning structure across all courses. Many international
-          students highlight fast progress, increased confidence, and a
-          comfortable learning environment.
-        </p>
-      </div>
       <AddReview
         teacherId={teacherId ?? ""}
         accumulatedReviews={accumulatedReviews}
       />
-      <ReviewsTeacher
-        reviews={accumulatedReviews}
-        isLoading={isLoading}
-        onLoadMore={handleLoadMore}
-        hasMore={hasMore}
-      />
+      {reviewsData?.reviews.length ? (
+        <>
+          <div className="text-center">
+            <h2 className="mb-6 sm:mb-8 lg:mb-10 font-bold text-white xl:text-[56px] text-3xl sm:text-4xl lg:text-5xl">
+              What our clients say
+            </h2>
+            <p className="mx-auto mb-12 sm:mb-16 lg:mb-20 px-4 max-w-3xl text-white/70 text-sm sm:text-base lg:text-lg text-justify leading-relaxed">
+              Students appreciate the practical approach, supportive
+              instructors, and clear learning structure across all courses. Many
+              international students highlight fast progress, increased
+              confidence, and a comfortable learning environment.
+            </p>
+          </div>
+          <ReviewsTeacher
+            reviews={accumulatedReviews}
+            isLoading={isLoading}
+            onLoadMore={handleLoadMore}
+            hasMore={hasMore}
+          />
+        </>
+      ) : (
+        <div className="flex items-center justify-center text-light-100 min-h-50">
+          No reviews
+        </div>
+      )}
     </>
   );
 };

client/src/components/teacherSection/Reviews/ReviewsManager.tsx

@@ -0,0 +1,19 @@
+import { Option } from "../components/ui/select/Select.tsx";
+import {
+  SortByTeachersForModerator,
+  TeacherStatusQuery,
+} from "../api/teacher/teacher.type.ts";
+
+export const sortByOptions: Option<SortByTeachersForModerator>[] = [
+  { label: "CreatedAt", value: "createdAt" },
+  { label: "Status", value: "status" },
+];
+
+export const sortByStatus: Option<TeacherStatusQuery>[] = [
+  { label: "All", value: "all" },
+  { label: "Draft", value: "draft" },
+  { label: "Pending", value: "pending" },
+  { label: "Active", value: "active" },
+  { label: "Rejected", value: "rejected" },
+  { label: "Blocked", value: "blocked" },
+];