generated from muhtadeetaron/nextjs-template
fix(api): fix api endpoint logic #3
This commit is contained in:
shafin-r
@ -12,9 +12,17 @@ import FormField from "@/components/FormField";
|
||||
import DestructibleAlert from "@/components/DestructibleAlert";
|
||||
import { RegisterForm } from "@/types/auth";
|
||||
|
||||
interface ValidationErrorItem {
|
||||
type: string;
|
||||
loc: string[];
|
||||
msg: string;
|
||||
input?: unknown;
|
||||
ctx?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
interface CustomError extends Error {
|
||||
response?: {
|
||||
detail?: string;
|
||||
detail?: string | ValidationErrorItem;
|
||||
};
|
||||
}
|
||||
|
||||
@ -36,16 +44,27 @@ export default function RegisterPage() {
|
||||
});
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleError = (error: { detail: string }) => {
|
||||
if (error?.detail) {
|
||||
const match = error.detail.match(/Key \((.*?)\)=\((.*?)\)/);
|
||||
if (match) {
|
||||
const field = match[1];
|
||||
return `The ${field} already exists. Please try again.`;
|
||||
function formatError(error: unknown): string {
|
||||
if (error && typeof error === "object" && "response" in (error as any)) {
|
||||
const customError = error as CustomError;
|
||||
const detail = customError.response?.detail;
|
||||
|
||||
if (typeof detail === "string") {
|
||||
return detail; // plain backend error string
|
||||
}
|
||||
|
||||
if (Array.isArray(detail)) {
|
||||
// Pick the first validation error, or join them if multiple
|
||||
return detail.map((d) => d.msg).join("; ");
|
||||
}
|
||||
}
|
||||
return "An unexpected error occurred. Please try again.";
|
||||
};
|
||||
|
||||
if (error instanceof Error) {
|
||||
return error.message;
|
||||
}
|
||||
|
||||
return "An unexpected error occurred.";
|
||||
}
|
||||
|
||||
const validateForm = () => {
|
||||
const { ssc_roll, hsc_roll, password } = form;
|
||||
@ -69,31 +88,12 @@ export default function RegisterPage() {
|
||||
|
||||
try {
|
||||
await register(form, setToken);
|
||||
router.push("/home");
|
||||
} catch (error) {
|
||||
// Type guard for built-in Error type
|
||||
if (error instanceof Error) {
|
||||
console.error(
|
||||
"Error:",
|
||||
(error as CustomError).response || error.message
|
||||
);
|
||||
|
||||
const response = (error as CustomError).response;
|
||||
|
||||
if (response?.detail) {
|
||||
const decodedError = handleError({ detail: response.detail });
|
||||
setError(decodedError);
|
||||
} else {
|
||||
setError(error.message || "An unexpected error occurred.");
|
||||
}
|
||||
} else {
|
||||
// Fallback for non-standard errors
|
||||
console.error("Unexpected error:", error);
|
||||
setError("An unexpected error occurred.");
|
||||
}
|
||||
router.push("/login");
|
||||
} catch (err: unknown) {
|
||||
setError(formatError(err));
|
||||
console.error("User creation error: ", err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<BackgroundWrapper>
|
||||
<div className="min-h-screen flex flex-col items-center justify-center px-4 py-10">
|
||||
|
||||
@ -3,7 +3,14 @@
|
||||
import ProfileManager from "@/components/ProfileManager";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { getToken, API_URL } from "@/lib/auth";
|
||||
import { ChevronLeft, Edit2, Lock, Save } from "lucide-react";
|
||||
import {
|
||||
BadgeCheck,
|
||||
ChevronLeft,
|
||||
Edit2,
|
||||
Lock,
|
||||
Save,
|
||||
ShieldX,
|
||||
} from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { UserData } from "@/types/auth";
|
||||
@ -85,7 +92,22 @@ const ProfilePage = () => {
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
|
||||
<div className="pt-14 space-y-8">
|
||||
<div className="pt-14 space-y-4">
|
||||
{userData?.is_verified ? (
|
||||
<div className="flex gap-4 justify-center items-center bg-green-200 border border-green-700 px-3 py-4 rounded-2xl ">
|
||||
<BadgeCheck size={30} />
|
||||
<p className="text-sm font-semibold text-black">
|
||||
This account is verified.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex gap-2 justify-center items-center bg-red-200 border border-red-700 px-3 py-4 rounded-2xl ">
|
||||
<ShieldX size={30} />
|
||||
<p className="text-sm font-semibold text-black">
|
||||
This account is not verified.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<ProfileManager
|
||||
userData={userData}
|
||||
edit={editStatus}
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
|
||||
import BackgroundWrapper from "@/components/BackgroundWrapper";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { API_URL, getToken } from "@/lib/auth";
|
||||
import { UserData } from "@/types/auth";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import { clearAuthToken } from "@/lib/auth";
|
||||
import {
|
||||
Bookmark,
|
||||
ChartColumn,
|
||||
@ -19,49 +19,16 @@ import {
|
||||
UserCircle2,
|
||||
} from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React from "react";
|
||||
|
||||
const SettingsPage = () => {
|
||||
const router = useRouter();
|
||||
const [userData, setUserData] = useState<UserData>({
|
||||
user_id: "3fa85f64-5717-4562-b3fc-2c963f66afa6",
|
||||
username: "",
|
||||
full_name: "",
|
||||
email: "",
|
||||
is_verified: false,
|
||||
phone_number: "",
|
||||
ssc_roll: 0,
|
||||
ssc_board: "",
|
||||
hsc_roll: 0,
|
||||
hsc_board: "",
|
||||
college: "",
|
||||
preparation_unit: "Science",
|
||||
});
|
||||
const { user, isLoading } = useAuth();
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchUser() {
|
||||
try {
|
||||
const token = await getToken();
|
||||
if (!token) return;
|
||||
|
||||
const response = await fetch(`${API_URL}/me/`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const fetchedUserData = await response.json();
|
||||
setUserData(fetchedUserData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching user data: ", error);
|
||||
}
|
||||
}
|
||||
|
||||
fetchUser();
|
||||
}, []);
|
||||
function handleLogout() {
|
||||
clearAuthToken();
|
||||
router.replace("/");
|
||||
}
|
||||
|
||||
return (
|
||||
<BackgroundWrapper>
|
||||
@ -81,16 +48,14 @@ const SettingsPage = () => {
|
||||
<div className="flex gap-4 items-center">
|
||||
<Avatar className="bg-[#113768] w-20 h-20">
|
||||
<AvatarFallback className="text-3xl text-white">
|
||||
{userData?.username
|
||||
? userData.username.charAt(0).toUpperCase()
|
||||
{user?.username
|
||||
? user.username.charAt(0).toUpperCase()
|
||||
: ""}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex flex-col items-start">
|
||||
<h1 className="font-semibold text-2xl">
|
||||
{userData?.full_name}
|
||||
</h1>
|
||||
<h3 className=" text-md">{userData?.email}</h3>
|
||||
<h1 className="font-semibold text-2xl">{user?.full_name}</h1>
|
||||
<h3 className=" text-md">{user?.email}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -181,7 +146,7 @@ const SettingsPage = () => {
|
||||
</div>
|
||||
<ChevronRight size={30} color="#113768" />
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<button onClick={handleLogout} className="flex justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<LogOut size={30} color="#113768" />
|
||||
<h3 className="text-md font-medium text-[#113768]">
|
||||
@ -189,7 +154,7 @@ const SettingsPage = () => {
|
||||
</h3>
|
||||
</div>
|
||||
<ChevronRight size={30} color="#113768" />
|
||||
</div>
|
||||
</button>
|
||||
<div className="h-[0.5px] border-[0.1px] w-full border-[#113768]/20"></div>
|
||||
<p className="text-center text-[#113768]/50 font-medium">
|
||||
ExamJam | Version 1.0
|
||||
|
||||
Reference in New Issue
Block a user