From 61d29f2be9477e8cb25e9a7974ed27c471843f44 Mon Sep 17 00:00:00 2001
From: lim <lbooks424@gmail.com>
Date: Wed, 6 Mar 2024 18:57:47 +0900
Subject: [PATCH] [frontend] Added toast display when using useSearchParams to
 get error status and message

---
 frontend/app/ui/auth/login-form.tsx  | 47 +++++++++++++++++++++++++-
 frontend/app/ui/auth/signup-form.tsx | 50 ++++++++++++++++++++++++++++
 2 files changed, 96 insertions(+), 1 deletion(-)

diff --git a/frontend/app/ui/auth/login-form.tsx b/frontend/app/ui/auth/login-form.tsx
index 78073afb..0a128744 100644
--- a/frontend/app/ui/auth/login-form.tsx
+++ b/frontend/app/ui/auth/login-form.tsx
@@ -7,11 +7,56 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
-import { useRouter } from "next/navigation";
+import { toast } from "@/components/ui/use-toast";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect } from "react";
 import { useFormState, useFormStatus } from "react-dom";
 
+const getStatusText = (statusCode: string) => {
+  let statusText = "";
+  switch (statusCode) {
+    case "400":
+      statusText = "Bad Request";
+      break;
+    case "401":
+      statusText = "Unauthorized";
+      break;
+    case "403":
+      statusText = "Forbidden";
+      break;
+    case "404":
+      statusText = "Not Found";
+      break;
+    case "409":
+      statusText = "Conflict";
+      break;
+    case "500":
+      statusText = "Internal Server Error";
+      break;
+    default:
+      statusText = "Error";
+      break;
+  }
+  return statusText;
+};
+
+const showErrorToast = (statusCode: string, message: string) => {
+  const statusText = getStatusText(statusCode);
+  toast({
+    title: statusCode + " " + statusText,
+    description: message,
+  });
+};
+
 export default function LoginForm() {
+  const searchParams = useSearchParams();
+  const errorStatusCode = searchParams.get("status");
+  const errorMessage = searchParams.get("message");
+  useEffect(() => {
+    if (errorStatusCode && errorMessage) {
+      showErrorToast(errorStatusCode, errorMessage);
+    }
+  }, [errorStatusCode, errorMessage]);
   return (
     <>
       <Card>
diff --git a/frontend/app/ui/auth/signup-form.tsx b/frontend/app/ui/auth/signup-form.tsx
index 6ab3c752..d9a89be2 100644
--- a/frontend/app/ui/auth/signup-form.tsx
+++ b/frontend/app/ui/auth/signup-form.tsx
@@ -1,9 +1,59 @@
+"use client";
+
 import Form from "@/app/ui/user/create-form";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
+import { toast } from "@/components/ui/use-toast";
+import { useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+
+const getStatusText = (statusCode: string) => {
+  let statusText = "";
+  switch (statusCode) {
+    case "400":
+      statusText = "Bad Request";
+      break;
+    case "401":
+      statusText = "Unauthorized";
+      break;
+    case "403":
+      statusText = "Forbidden";
+      break;
+    case "404":
+      statusText = "Not Found";
+      break;
+    case "409":
+      statusText = "Conflict";
+      break;
+    case "500":
+      statusText = "Internal Server Error";
+      break;
+    default:
+      statusText = "Error";
+      break;
+  }
+  return statusText;
+};
+
+const showErrorToast = (statusCode: string, message: string) => {
+  const statusText = getStatusText(statusCode);
+  toast({
+    title: statusCode + " " + statusText,
+    description: message,
+  });
+};
 
 export default function SignUpForm() {
+  const searchParams = useSearchParams();
+  const errorStatusCode = searchParams.get("status");
+  const errorMessage = searchParams.get("message");
+
+  useEffect(() => {
+    if (errorStatusCode && errorMessage) {
+      showErrorToast(errorStatusCode, errorMessage);
+    }
+  }, [errorStatusCode, errorMessage]);
   return (
     <Card>
       <CardHeader>