[frontend] Added toast display when using useSearchParams to get erro…

…r status and message
usatie · Mar 6, 2024 · 61d29f2 · 61d29f2
1 parent a715954
commit 61d29f2
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 1 deletion.
diff --git 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
@@ -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>