fix: prevent profile page from crashing for null profile values 🔨
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 11m11s

This commit is contained in:
2025-09-24 20:04:04 +05:00
parent 9ad1887f88
commit f0cf2d5223

View File

@@ -8,88 +8,88 @@ import { getProfileById } from "@/queries/users";
import { tryCatch } from "@/utils/tryCatch"; import { tryCatch } from "@/utils/tryCatch";
export default async function Profile() { export default async function Profile() {
const session = await getServerSession(authOptions); const session = await getServerSession(authOptions);
if (!session?.user) return redirect("/auth/signin?callbackUrl=/profile"); if (!session?.user) return redirect("/auth/signin?callbackUrl=/profile");
const [error, profile] = await tryCatch(getProfileById(session?.user.id)); const [error, profile] = await tryCatch(getProfileById(session?.user.id));
if (error) { if (error) {
if (error.message === "Invalid token.") redirect("/auth/signin"); if (error.message === "Invalid token.") redirect("/auth/signin");
return <ClientErrorMessage message={error.message} />; return <ClientErrorMessage message={error.message} />;
} }
return ( return (
<div> <div>
<div className="flex justify-between items-center font-bold border rounded-md border-dashed title-bg py-4 px-2 mb-4"> <div className="flex justify-between items-center font-bold border rounded-md border-dashed title-bg py-4 px-2 mb-4">
<h3 className="text-sarLinkOrange text-2xl">Profile</h3> <h3 className="text-sarLinkOrange text-2xl">Profile</h3>
<div className="text-sarLinkOrange uppercase font-mono text-sm flex flex-col items-center rounded gap-2 py-2 px-4"> <div className="text-sarLinkOrange uppercase font-mono text-sm flex flex-col items-center rounded gap-2 py-2 px-4">
<span>Profile Status</span> <span>Profile Status</span>
{verifiedStatus(profile?.verified ?? false)} {verifiedStatus(profile?.verified ?? false)}
</div> </div>
</div> </div>
<fieldset> <fieldset>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 max-w-4xl"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 max-w-4xl">
<FloatingLabelInput <FloatingLabelInput
id="floating-name" id="floating-name"
label="Full Name" label="Full Name"
value={`${profile?.first_name} ${profile?.last_name}`} value={`${profile?.first_name} ${profile?.last_name}`}
readOnly readOnly
/> />
<FloatingLabelInput <FloatingLabelInput
id="floating-id-card" id="floating-id-card"
label="ID Card" label="ID Card"
value={`${profile?.id_card}`} value={`${profile?.id_card}`}
readOnly readOnly
/> />
<FloatingLabelInput <FloatingLabelInput
id="floating-island" id="floating-island"
label="Island" label="Island"
value={`${profile?.atoll.name}. ${profile?.island.name}`} value={`${profile?.atoll?.name}. ${profile?.island?.name}`}
readOnly readOnly
/> />
<FloatingLabelInput <FloatingLabelInput
id="floating-dob" id="floating-dob"
label="Date of Birth" label="Date of Birth"
value={`${new Date( value={`${new Date(
profile?.dob.toString() ?? "", profile?.dob?.toString() ?? "",
).toLocaleDateString("en-US", { ).toLocaleDateString("en-US", {
month: "short", month: "short",
day: "2-digit", day: "2-digit",
year: "numeric", year: "numeric",
})}`} })}`}
readOnly readOnly
/> />
<FloatingLabelInput <FloatingLabelInput
id="floating-address" id="floating-address"
label="Address" label="Address"
value={`${profile?.address}`} value={`${profile?.address}`}
readOnly readOnly
/> />
<FloatingLabelInput <FloatingLabelInput
id="floating-mobile" id="floating-mobile"
label="Phone Number" label="Phone Number"
value={`${profile?.mobile}`} value={`${profile?.mobile}`}
readOnly readOnly
/> />
<FloatingLabelInput <FloatingLabelInput
id="floating-account" id="floating-account"
label="Account Number" label="Account Number"
value={`${profile?.acc_no}`} value={`${profile?.acc_no}`}
readOnly readOnly
/> />
</div> </div>
</fieldset> </fieldset>
{/* <Suspense key={query} fallback={"loading...."}> {/* <Suspense key={query} fallback={"loading...."}>
<TopupsTable searchParams={searchParams} /> <TopupsTable searchParams={searchParams} />
</Suspense> */} </Suspense> */}
</div> </div>
); );
} }
function verifiedStatus(status: boolean) { function verifiedStatus(status: boolean) {
switch (status) { switch (status) {
case true: case true:
return <Badge className="bg-green-500 text-white">Verified</Badge>; return <Badge className="bg-green-500 text-white">Verified</Badge>;
case false: case false:
return <Badge className="bg-red-500 text-white">Not Verified</Badge>; return <Badge className="bg-red-500 text-white">Not Verified</Badge>;
default: default:
return <Badge className="bg-yellow-500 text-white">Unknown</Badge>; return <Badge className="bg-yellow-500 text-white">Unknown</Badge>;
} }
} }