shafin808s/examjam-frontend
1
0
Fork 0
generated from muhtadeetaron/nextjs-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): fix question item answer indexing in results page

Browse Source
This commit is contained in:
shafin-r
2025-07-25 19:09:06 +06:00
parent d57aa9b073
commit 0ea199c0fe
4 changed files with 82 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
app/(tabs)/profile/page.tsx
View File

@ -2,8 +2,6 @@
import ProfileManager from "@/components/ProfileManager"; import ProfileManager from "@/components/ProfileManager";
import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { getToken, API_URL } from "@/lib/auth"; import { getToken, API_URL } from "@/lib/auth";
import { ChevronLeft, Edit2, Lock, Save } from "lucide-react"; import { ChevronLeft, Edit2, Lock, Save } from "lucide-react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
@ -49,8 +47,34 @@ const ProfilePage = () => {
fetchUser(); fetchUser();
}, []); }, []);
const handleSave = async () => {
// try {
// const token = await getToken();
// if (!token || !userData) return;
// const response = await fetch(`${API_URL}/profile/edit`, {
// method: "POST",
// headers: {
// "Content-Type": "application/json",
// Authorization: `Bearer ${token}`,
// },
// body: JSON.stringify(userData),
// });
// if (response.ok) {
// setEditStatus(false);
// } else {
// console.error("Failed to save profile");
// }
// } catch (error) {
// console.error("Error saving profile:", error);
// }
console.log("Updated user data:", userData);
setEditStatus(false);
};
return ( return (
<section className="min-h-screen mb-32 "> <section className="min-h-screen mb-32">
<div className="h-48 bg-gradient-to-b from-[#113768] to-white w-full"> <div className="h-48 bg-gradient-to-b from-[#113768] to-white w-full">
<button <button
onClick={() => router.push("/settings")} onClick={() => router.push("/settings")}
@ -59,16 +83,26 @@ const ProfilePage = () => {
<ChevronLeft size={30} color="white" /> <ChevronLeft size={30} color="white" />
</button> </button>
</div> </div>
<div className="relative mx-10"> <div className="relative mx-10">
<Avatar className="bg-[#113768] w-32 h-32 absolute -top-20 left-1/2 transform -translate-x-1/2"> <Avatar className="bg-[#113768] w-32 h-32 absolute -top-20 left-1/2 transform -translate-x-1/2">
<AvatarFallback className="text-3xl text-white"> <AvatarFallback className="text-3xl text-white">
{userData?.name ? userData.name.charAt(0).toUpperCase() : ""} {userData?.name ? userData.name.charAt(0).toUpperCase() : ""}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<div className="pt-14 space-y-8"> <div className="pt-14 space-y-8">
<ProfileManager userData={userData} edit={editStatus} /> <ProfileManager
userData={userData}
edit={editStatus}
setUserData={setUserData}
/>
<button <button
onClick={() => setEditStatus(!editStatus)} onClick={() => {
if (editStatus) handleSave();
else setEditStatus(true);
}}
className={`p-3 ${ className={`p-3 ${
editStatus ? "bg-green-500" : "bg-[#113768]" editStatus ? "bg-green-500" : "bg-[#113768]"
} w-full flex gap-3 justify-center items-center rounded-full`} } w-full flex gap-3 justify-center items-center rounded-full`}
@ -78,11 +112,11 @@ const ProfilePage = () => {
) : ( ) : (
<Edit2 size={20} color="white" /> <Edit2 size={20} color="white" />
)} )}
<p className="text-white"> <p className="text-white">
{editStatus ? "Save Changes" : "Edit Profile"} {editStatus ? "Save Changes" : "Edit Profile"}
</p> </p>
</button> </button>
<button className="p-3 bg-[#113768] w-full flex gap-3 justify-center items-center rounded-full"> <button className="p-3 bg-[#113768] w-full flex gap-3 justify-center items-center rounded-full">
<Lock size={20} color="white" /> <Lock size={20} color="white" />
<p className="text-white">Change Password</p> <p className="text-white">Change Password</p>

2
app/exam/results/page.tsx
View File

@ -102,7 +102,7 @@ export default function ResultsPage() {
<QuestionItem <QuestionItem
key={question.id} key={question.id}
question={question} question={question}
selectedAnswer={currentAttempt.answers[question.id]} selectedAnswer={currentAttempt.answers[question.id - 1]}
mode="result" mode="result"
/> />
))} ))}

75
components/ProfileManager.tsx
View File

@ -13,81 +13,86 @@ interface UserData {
interface ProfileManagerProps { interface ProfileManagerProps {
userData: UserData | undefined; userData: UserData | undefined;
edit: boolean; edit: boolean;
setUserData: React.Dispatch<React.SetStateAction<UserData | undefined>>;
} }
export default function ProfileManager({ export default function ProfileManager({
userData, userData,
edit, edit,
setUserData,
}: ProfileManagerProps) { }: ProfileManagerProps) {
if (!userData) return null;
const handleChange = (field: keyof UserData, value: string) => {
setUserData((prev) => (prev ? { ...prev, [field]: value } : prev));
};
return ( return (
<div className="mx-auto"> <div className="mx-auto">
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<Label <Label htmlFor="name" className="text-sm font-semibold text-gray-700">
htmlFor="name"
className="text-sm font-semibold tracking-tighter text-gray-700"
>
Name Name
</Label> </Label>
<Input <Input
id="name" id="name"
type="text" type="text"
value={userData?.name} value={userData.name}
readOnly onChange={(e) => handleChange("name", e.target.value)}
className="bg-gray-50 cursor-default py-6" className="bg-gray-50 py-6"
disabled={!edit} readOnly={!edit}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label <Label
htmlFor="institution" htmlFor="institution"
className="text-sm font-semibold tracking-tighter text-gray-700" className="text-sm font-semibold text-gray-700"
> >
Institution Institution
</Label> </Label>
<Input <Input
id="institution" id="institution"
type="text" type="text"
value={userData?.institution} value={userData.institution}
readOnly onChange={(e) => handleChange("institution", e.target.value)}
className="bg-gray-50 cursor-default py-6" className="bg-gray-50 py-6"
disabled={!edit} readOnly={!edit}
/> />
</div> </div>
<div className="flex gap-4"> <div className="flex gap-4">
<div className="space-y-2"> <div className="space-y-2 w-full">
<Label <Label
htmlFor="sscRoll" htmlFor="sscRoll"
className="text-sm font-semibold tracking-tighter text-gray-700" className="text-sm font-semibold text-gray-700"
> >
SSC Roll SSC Roll
</Label> </Label>
<Input <Input
id="sscRoll" id="sscRoll"
type="text" type="text"
value={userData?.sscRoll} value={userData.sscRoll}
readOnly onChange={(e) => handleChange("sscRoll", e.target.value)}
className="bg-gray-50 cursor-default py-6" className="bg-gray-50 py-6"
disabled={!edit} readOnly={!edit}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2 w-full">
<Label <Label
htmlFor="hscRoll" htmlFor="hscRoll"
className="text-sm font-semibold tracking-tighter text-gray-700" className="text-sm font-semibold text-gray-700"
> >
HSC Roll HSC Roll
</Label> </Label>
<Input <Input
id="hscRoll" id="hscRoll"
type="text" type="text"
value={userData?.hscRoll} value={userData.hscRoll}
readOnly onChange={(e) => handleChange("hscRoll", e.target.value)}
className="bg-gray-50 cursor-default py-6" className="bg-gray-50 py-6"
disabled={!edit} readOnly={!edit}
/> />
</div> </div>
</div> </div>
@ -95,34 +100,34 @@ export default function ProfileManager({
<div className="space-y-2"> <div className="space-y-2">
<Label <Label
htmlFor="email" htmlFor="email"
className="text-sm font-semibold tracking-tighter text-gray-700" className="text-sm font-semibold text-gray-700"
> >
Email Email
</Label> </Label>
<Input <Input
id="email" id="email"
type="email" type="email"
value={userData?.email} value={userData.email}
readOnly onChange={(e) => handleChange("email", e.target.value)}
className="bg-gray-50 cursor-default py-6" className="bg-gray-50 py-6"
disabled={!edit} readOnly={!edit}
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label <Label
htmlFor="phone" htmlFor="phone"
className="text-sm font-semibold tracking-tighter text-gray-700" className="text-sm font-semibold text-gray-700"
> >
Phone Phone
</Label> </Label>
<Input <Input
id="phone" id="phone"
type="tel" type="tel"
value={userData?.phone} value={userData.phone}
readOnly onChange={(e) => handleChange("phone", e.target.value)}
className="bg-gray-50 cursor-default py-6" className="bg-gray-50 py-6"
disabled={!edit} readOnly={!edit}
/> />
</div> </div>
</div> </div>

2
components/QuestionItem.tsx
View File

@ -26,7 +26,7 @@ const QuestionItem = (props: QuestionItemProps) => {
return ( return (
<div className="border-[0.5px] border-[#8abdff]/60 rounded-2xl p-4 flex flex-col"> <div className="border-[0.5px] border-[#8abdff]/60 rounded-2xl p-4 flex flex-col">
<h3 className="text-xl font-medium mb-[20px]"> <h3 className="text-xl font-semibold ">
{question.id}. {question.question} {question.id}. {question.question}
</h3> </h3>