Delete review (#207)

* feat: basic functional feature

* modified into working dialogue component

* fix: vert padding

Author: suxls

apps/web/src/app/_components/reviews/delete-review-dialogue.tsx

@@ -0,0 +1,80 @@
+import { Trash2 } from "lucide-react";
+
+import { Button } from "@cooper/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@cooper/ui/dialog";
+import { useToast } from "@cooper/ui/hooks/use-toast";
+
+import { api } from "~/trpc/react";
+
+interface DeleteReviewDialogProps {
+  reviewId: string;
+}
+
+export function DeleteReviewDialog({ reviewId }: DeleteReviewDialogProps) {
+  const { toast } = useToast();
+
+  const deleteReview = api.review.delete.useMutation({
+    onSuccess: () => {
+      toast({
+        title: "Review deleted",
+        description: "Your review has been successfully deleted.",
+      });
+      // Refresh the page to update the UI
+      window.location.reload();
+    },
+    onError: (error) => {
+      toast({
+        title: "Error",
+        description: error.message || "Failed to delete review",
+        variant: "destructive",
+      });
+    },
+  });
+
+  const handleDelete = () => {
+    deleteReview.mutate(reviewId);
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-4 cursor-pointer p-0 hover:bg-transparent"
+        >
+          <Trash2 className="h-4 w-4 text-cooper-gray-400" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="w-full max-w-md bg-white pb-12">
+        <DialogHeader className="space-y-4 text-center">
+          <DialogTitle className="text-2xl font-semibold">
+            Delete Review
+          </DialogTitle>
+          <DialogDescription className="text-cooper-gray-600 text-base">
+            Are you sure you want to delete this review? This action cannot be
+            undone.
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter className="mt-8 flex justify-center">
+          <Button
+            type="submit"
+            className="min-w-[200px] border-none bg-cooper-yellow-500 px-8 py-6 text-base font-medium text-white transition-colors hover:bg-cooper-yellow-300"
+            onClick={handleDelete}
+          >
+            Delete Review
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/src/app/_components/reviews/review-card.tsx

@@ -6,11 +6,13 @@ import type { ReviewType, WorkEnvironmentType } from "@cooper/db/schema";
 import { cn } from "@cooper/ui";
 import { Card, CardContent } from "@cooper/ui/card";
 
+import { api } from "~/trpc/react";
 import { locationName } from "~/utils/locationHelpers";
 import {
   abbreviatedWorkTerm,
   prettyWorkEnviornment,
 } from "~/utils/stringHelpers";
+import { DeleteReviewDialog } from "./delete-review-dialogue";
 import { ReviewCardStars } from "./review-card-stars";
 
 interface ReviewCardProps {
@@ -19,6 +21,12 @@ interface ReviewCardProps {
 }
 
 export function ReviewCard({ reviewObj, className }: ReviewCardProps) {
+  // Get the current user's profile
+  const { data: currentProfile } = api.profile.getCurrentUser.useQuery();
+
+  // Check if the current user is the author of the review
+  const isAuthor = currentProfile?.id === reviewObj.profileId;
+
   return (
     <Card
       className={cn(
@@ -61,7 +69,11 @@ export function ReviewCard({ reviewObj, className }: ReviewCardProps) {
         </div>
         <div className="w-[65%]">
           <CardContent className="flex h-full flex-col justify-between gap-4 pl-0">
-            <div className="pt-1">{reviewObj.textReview}</div>
+            <div className="flex flex-row justify-between">
+              <div className="pt-1">{reviewObj.textReview}</div>
+              {isAuthor && <DeleteReviewDialog reviewId={reviewObj.id} />}
+            </div>
+
             <div className="flex justify-between text-sm">
               <div className="flex gap-6">
                 <div>Position type: Co-op</div>