Feat: add delete review action

package.json

@@ -41,10 +41,10 @@
     "d3-zoom": "^3.0.0",
     "date-fns": "^4.1.0",
     "i18n-iso-countries": "^7.14.0",
-    "libphonenumber-js": "^1.12.33",
+    "libphonenumber-js": "^1.12.4",
     "lucide-react": "^0.562.0",
     "mime": "^4.1.0",
-    "motion": "^12.23.26",
+    "motion": "^12.4.3",
     "nanoid": "^5.1.6",
     "next": "^16.1.0",
     "next-intl": "^4.6.1",

src/app/[locale]/(business)/(with-header)/friend-requests/accept/_components/reject-button/index.tsx

@@ -22,13 +22,13 @@ const RejectButton = ({ friendRequestId }: RejectButtonProps) => {
 
   const handleRejectFriendRequest = () => {
     startTransition(async () => {
-      const { success } =
+      const result =
         await rejectPreviouslyAcceptedFriendRequestAction(friendRequestId);
 
-      if (success) {
+      if (result.success) {
         push(Routes.DENY_FRIEND_REQUEST, { id: friendRequestId });
       } else {
-        toast.error(t("friendRequestPage.errors.friendRequestRejectingError"));
+        toast.error(t(result.translationKey));
       }
     });
   };

src/app/[locale]/(business)/(with-header)/friend-requests/actions.ts

@@ -12,53 +12,61 @@ import {
 } from "@/domain/users/errors";
 import { getCurrentUser } from "@/lib/auth";
 
+import type { ActionResult } from "@/lib/action/types";
+
 export const rejectPreviouslyAcceptedFriendRequestAction = async (
   friendRequestId: string,
-) => {
+): Promise<ActionResult<void>> => {
   const user = await getCurrentUser();
 
   if (!user) {
-    return { success: false };
+    return { success: false, translationKey: "common.errors.unauthorized" };
   }
 
-  await rejectPreviouslyAcceptedFriendRequest(friendRequestId).catch(
-    (error) => {
-      if (
-        !(error instanceof UnauthorizedFriendRequestRejectionError) &&
-        !(error instanceof UnknownFriendRequestError) &&
-        !(error instanceof UnknownFriendshipError)
-      ) {
-        console.error(error);
-      }
+  try {
+    await rejectPreviouslyAcceptedFriendRequest(friendRequestId);
+  } catch (error) {
+    if (
+      !(error instanceof UnauthorizedFriendRequestRejectionError) &&
+      !(error instanceof UnknownFriendRequestError) &&
+      !(error instanceof UnknownFriendshipError)
+    ) {
+      console.error(error);
+    }
 
-      return { success: false };
-    },
-  );
+    return {
+      success: false,
+      translationKey: "friendRequestPage.errors.friendRequestRejectingError",
+    };
+  }
 
   return { success: true };
 };
 
 export const acceptPreviouslyRejectedFriendRequestAction = async (
   friendRequestId: string,
-) => {
+): Promise<ActionResult<void>> => {
   const user = await getCurrentUser();
 
   if (!user) {
-    return { success: false };
+    return { success: false, translationKey: "common.errors.unauthorized" };
   }
 
-  await acceptPreviouslyRejectedFriendRequest(friendRequestId).catch(
-    (error) => {
-      if (
-        !(error instanceof UnauthorizedFriendRequestApprovalError) &&
-        !(error instanceof UnknownFriendRequestError)
-      ) {
-        console.error(error);
-      }
+  try {
+    await acceptPreviouslyRejectedFriendRequest(friendRequestId);
+  } catch (error) {
+    if (
+      !(error instanceof UnauthorizedFriendRequestApprovalError) &&
+      !(error instanceof UnknownFriendRequestError)
+    ) {
+      console.error(error);
+    }
 
-      return { success: false };
-    },
-  );
+    return {
+      success: false,
+      translationKey: "friendRequestPage.errors.friendRequestAcceptingError",
+    };
+  }
 
   return { success: true };
 };

src/app/[locale]/(business)/(with-header)/friend-requests/deny/_components/accept-button/index.tsx

@@ -22,13 +22,13 @@ const AcceptButton = ({ friendRequestId }: AcceptButtonProps) => {
 
   const handleAcceptFriendRequest = () => {
     startTransition(async () => {
-      const { success } =
+      const result =
         await acceptPreviouslyRejectedFriendRequestAction(friendRequestId);
 
-      if (success) {
+      if (result.success) {
         push(Routes.ACCEPT_FRIEND_REQUEST, { id: friendRequestId });
       } else {
-        toast.error(t("friendRequestPage.errors.friendRequestAcceptingError"));
+        toast.error(t(result.translationKey));
       }
     });
   };

src/app/[locale]/(business)/(with-header)/users/[username]/_components/user-header/add-friend/actions.ts

@@ -3,18 +3,25 @@
 import { sendFriendRequest } from "@/domain/users";
 import { getCurrentUser } from "@/lib/auth";
 
-export const addFriend = async (userId: string) => {
+import type { ActionResult } from "@/lib/action/types";
+
+export const addFriend = async (
+  userId: string,
+): Promise<ActionResult<void>> => {
   const currentUser = await getCurrentUser();
 
   if (!currentUser) {
-    return { success: false };
+    return { success: false, translationKey: "common.errors.unauthorized" };
   }
 
   try {
     await sendFriendRequest(userId);
   } catch (error) {
     console.error(error);
-    return { success: false };
+    return {
+      success: false,
+      translationKey: "profilePage.friendship.toasts.friendRequestSendingError",
+    };
   }
 
   return { success: true };

src/app/[locale]/(business)/(with-header)/users/[username]/_components/user-header/add-friend/index.tsx

@@ -24,15 +24,13 @@ const AddFriendButton = ({ friendId, className }: AddFriendButtonProps) => {
 
   const handleFriendRequest = () => {
     startTransition(async () => {
-      const { success } = await addFriend(friendId);
+      const result = await addFriend(friendId);
 
-      if (success) {
+      if (result.success) {
         toast.success(t("profilePage.friendship.toasts.friendRequestSent"));
         router.refresh();
       } else {
-        toast.error(
-          t("profilePage.friendship.toasts.friendRequestSendingError"),
-        );
+        toast.error(t(result.translationKey));
       }
     });
   };

src/app/[locale]/(business)/(without-header)/users/[username]/reviews/[reviewSlug]/_components/delete-review-dialog/actions.ts

@@ -0,0 +1,42 @@
+"use server";
+
+import { deleteReview, getReviewById } from "@/domain/reviews";
+import { getCurrentUser } from "@/lib/auth";
+
+import type { ActionResult } from "@/lib/action/types";
+
+export const deleteReviewAction = async (
+  reviewId: string,
+): Promise<ActionResult<void>> => {
+  const [user, review] = await Promise.all([
+    getCurrentUser(),
+    getReviewById(reviewId),
+  ]);
+
+  if (!review) {
+    return {
+      success: false,
+      translationKey: "reviewPage.actions.remove.errors.removeNotFound",
+    };
+  }
+
+  if (!user) {
+    return { success: false, translationKey: "common.errors.unauthorized" };
+  }
+
+  if (review.userId !== user.id) {
+    return { success: false, translationKey: "common.errors.forbidden" };
+  }
+
+  try {
+    await deleteReview(reviewId);
+  } catch (error) {
+    console.error(error);
+    return {
+      success: false,
+      translationKey: "reviewPage.actions.remove.errors.removeUnknown",
+    };
+  }
+
+  return { success: true };
+};

src/app/[locale]/(business)/(without-header)/users/[username]/reviews/[reviewSlug]/_components/delete-review-dialog/index.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { Trash2Icon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useTransition } from "react";
+import { toast } from "sonner";
+
+import { deleteReviewAction } from "@/app/[locale]/(business)/(without-header)/users/[username]/reviews/[reviewSlug]/_components/delete-review-dialog/actions";
+import Button from "@/app/_components/ui/button";
+import {
+  ResponsiveDialog,
+  ResponsiveDialogClose,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
+  ResponsiveDialogTrigger,
+} from "@/app/_components/ui/responsive-dialog";
+import { useRouter } from "@/lib/i18n";
+import { Routes } from "@/lib/routes";
+import { generatePath } from "@/lib/routes/utils";
+
+interface DeleteReviewButtonProps {
+  reviewId: string;
+  username: string;
+}
+
+const DeleteReviewButton = ({
+  reviewId,
+  username,
+}: DeleteReviewButtonProps) => {
+  const t = useTranslations();
+
+  const router = useRouter();
+
+  const [isPending, startTransition] = useTransition();
+
+  const handleRemoveReview = async () => {
+    startTransition(async () => {
+      const result = await deleteReviewAction(reviewId);
+
+      if (result.success) {
+        toast.success(t("reviewPage.actions.remove.success"));
+        router.push(generatePath(Routes.PROFILE, { username }));
+      } else {
+        toast.error(t(result.translationKey));
+      }
+    });
+  };
+
+  return (
+    <ResponsiveDialog>
+      <ResponsiveDialogTrigger asChild>
+        <Button
+          title={t("reviewPage.actions.remove.title")}
+          aria-label={t("reviewPage.actions.remove.title")}
+          variant="destructive"
+          size="icon"
+          className="shrink-0"
+        >
+          <Trash2Icon size={24} className="size-6" />
+        </Button>
+      </ResponsiveDialogTrigger>
+
+      <ResponsiveDialogContent dismissible={!isPending}>
+        <ResponsiveDialogHeader>
+          <ResponsiveDialogTitle>
+            {t("reviewPage.actions.remove.title")}
+          </ResponsiveDialogTitle>
+
+          <ResponsiveDialogDescription>
+            {t("reviewPage.actions.remove.description")}
+          </ResponsiveDialogDescription>
+        </ResponsiveDialogHeader>
+
+        <ResponsiveDialogFooter>
+          <ResponsiveDialogClose asChild>
+            <Button variant="outline" disabled={isPending}>
+              {t("reviewPage.actions.remove.cancel")}
+            </Button>
+          </ResponsiveDialogClose>
+
+          <Button
+            onClick={handleRemoveReview}
+            variant="destructive"
+            disabled={isPending}
+          >
+            {isPending
+              ? t("reviewPage.actions.remove.pending")
+              : t("reviewPage.actions.remove.remove")}
+          </Button>
+        </ResponsiveDialogFooter>
+      </ResponsiveDialogContent>
+    </ResponsiveDialog>
+  );
+};
+
+export default DeleteReviewButton;

src/app/[locale]/(business)/(without-header)/users/[username]/reviews/[reviewSlug]/page.tsx

@@ -16,11 +16,13 @@ import {
   labelDesignValues,
 } from "@/app/[locale]/(business)/(without-header)/breweries/[brewerySlug]/beers/[beerSlug]/review/schemas";
 import BackButton from "@/app/[locale]/(business)/(without-header)/users/[username]/reviews/[reviewSlug]/_components/back-button";
+import DeleteReviewButton from "@/app/[locale]/(business)/(without-header)/users/[username]/reviews/[reviewSlug]/_components/delete-review-dialog";
 import ReviewFieldValue from "@/app/[locale]/(business)/(without-header)/users/[username]/reviews/[reviewSlug]/_components/field-value";
 import ShareButton from "@/app/_components/share-button";
 import DescriptionList from "@/app/_components/ui/description-list";
 import { Separator } from "@/app/_components/ui/separator";
 import { getReviewByUsernameAndSlug } from "@/domain/users";
+import { getCurrentUser } from "@/lib/auth";
 import { publicConfig } from "@/lib/config/client-config";
 import { Link } from "@/lib/i18n";
 import { Routes } from "@/lib/routes";
@@ -87,6 +89,8 @@ const UserReviewPage = async ({
     () => notFound(),
   );
 
+  const currentUser = await getCurrentUser();
+
   return (
     <div
       className={cn(
@@ -498,14 +502,20 @@ const UserReviewPage = async ({
           />
         ) : null}
 
-        <div className="isolate">
+        <div className="isolate flex flex-row gap-x-2">
+          {currentUser && currentUser.id === review.user.id ? (
+            <DeleteReviewButton reviewId={review.id} username={username} />
+          ) : null}
+
           <ShareButton
             label={t("reviewPage.actions.share")}
+            title={t("reviewPage.actions.shareTitle")}
             link={`${publicConfig.baseUrl}${generatePath(Routes.REVIEW, {
               username,
               reviewSlug,
             })}`}
-            contentClassName="w-[calc(var(--radix-popover-trigger-width)+theme(spacing.1))]"
+            useDrawerOnMobile
+            contentClassName="w-[calc(100vw-theme(spacing.16))] md:w-[calc(var(--radix-popover-trigger-width)+theme(spacing.1))]"
           >
             {t("reviewPage.actions.share")}
           </ShareButton>