From 0ea199c0fe6f5260c883e6275cf560fd767ff436 Mon Sep 17 00:00:00 2001
From: shafin-r <shafin808s@gmail.com>
Date: Fri, 25 Jul 2025 19:09:06 +0600
Subject: [PATCH] fix(ui): fix question item answer indexing in results page

---
 app/(tabs)/profile/page.tsx   | 46 ++++++++++++++++++---
 app/exam/results/page.tsx     |  2 +-
 components/ProfileManager.tsx | 75 +++++++++++++++++++----------------
 components/QuestionItem.tsx   |  2 +-
 4 files changed, 82 insertions(+), 43 deletions(-)

diff --git a/app/(tabs)/profile/page.tsx b/app/(tabs)/profile/page.tsx
index 86bbd0c..3006966 100644
--- a/app/(tabs)/profile/page.tsx
+++ b/app/(tabs)/profile/page.tsx
@@ -2,8 +2,6 @@
 
 import ProfileManager from "@/components/ProfileManager";
 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 { ChevronLeft, Edit2, Lock, Save } from "lucide-react";
 import { useRouter } from "next/navigation";
@@ -49,8 +47,34 @@ const ProfilePage = () => {
     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 (
-    <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">
         <button
           onClick={() => router.push("/settings")}
@@ -59,16 +83,26 @@ const ProfilePage = () => {
           <ChevronLeft size={30} color="white" />
         </button>
       </div>
+
       <div className="relative mx-10">
         <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">
             {userData?.name ? userData.name.charAt(0).toUpperCase() : ""}
           </AvatarFallback>
         </Avatar>
+
         <div className="pt-14 space-y-8">
-          <ProfileManager userData={userData} edit={editStatus} />
+          <ProfileManager
+            userData={userData}
+            edit={editStatus}
+            setUserData={setUserData}
+          />
+
           <button
-            onClick={() => setEditStatus(!editStatus)}
+            onClick={() => {
+              if (editStatus) handleSave();
+              else setEditStatus(true);
+            }}
             className={`p-3 ${
               editStatus ? "bg-green-500" : "bg-[#113768]"
             } w-full flex gap-3 justify-center items-center rounded-full`}
@@ -78,11 +112,11 @@ const ProfilePage = () => {
             ) : (
               <Edit2 size={20} color="white" />
             )}
-
             <p className="text-white">
               {editStatus ? "Save Changes" : "Edit Profile"}
             </p>
           </button>
+
           <button className="p-3 bg-[#113768] w-full flex gap-3 justify-center items-center rounded-full">
             <Lock size={20} color="white" />
             <p className="text-white">Change Password</p>
diff --git a/app/exam/results/page.tsx b/app/exam/results/page.tsx
index 1b1b8b4..5ddbc0b 100644
--- a/app/exam/results/page.tsx
+++ b/app/exam/results/page.tsx
@@ -102,7 +102,7 @@ export default function ResultsPage() {
                 <QuestionItem
                   key={question.id}
                   question={question}
-                  selectedAnswer={currentAttempt.answers[question.id]}
+                  selectedAnswer={currentAttempt.answers[question.id - 1]}
                   mode="result"
                 />
               ))}
diff --git a/components/ProfileManager.tsx b/components/ProfileManager.tsx
index 4d7be11..9533474 100644
--- a/components/ProfileManager.tsx
+++ b/components/ProfileManager.tsx
@@ -13,81 +13,86 @@ interface UserData {
 interface ProfileManagerProps {
   userData: UserData | undefined;
   edit: boolean;
+  setUserData: React.Dispatch<React.SetStateAction<UserData | undefined>>;
 }
 
 export default function ProfileManager({
   userData,
   edit,
+  setUserData,
 }: ProfileManagerProps) {
+  if (!userData) return null;
+
+  const handleChange = (field: keyof UserData, value: string) => {
+    setUserData((prev) => (prev ? { ...prev, [field]: value } : prev));
+  };
+
   return (
     <div className="mx-auto">
       <div className="space-y-4">
         <div className="space-y-2">
-          <Label
-            htmlFor="name"
-            className="text-sm font-semibold tracking-tighter text-gray-700"
-          >
+          <Label htmlFor="name" className="text-sm font-semibold text-gray-700">
             Name
           </Label>
           <Input
             id="name"
             type="text"
-            value={userData?.name}
-            readOnly
-            className="bg-gray-50 cursor-default py-6"
-            disabled={!edit}
+            value={userData.name}
+            onChange={(e) => handleChange("name", e.target.value)}
+            className="bg-gray-50 py-6"
+            readOnly={!edit}
           />
         </div>
 
         <div className="space-y-2">
           <Label
             htmlFor="institution"
-            className="text-sm font-semibold tracking-tighter text-gray-700"
+            className="text-sm font-semibold text-gray-700"
           >
             Institution
           </Label>
           <Input
             id="institution"
             type="text"
-            value={userData?.institution}
-            readOnly
-            className="bg-gray-50 cursor-default py-6"
-            disabled={!edit}
+            value={userData.institution}
+            onChange={(e) => handleChange("institution", e.target.value)}
+            className="bg-gray-50 py-6"
+            readOnly={!edit}
           />
         </div>
 
         <div className="flex gap-4">
-          <div className="space-y-2">
+          <div className="space-y-2 w-full">
             <Label
               htmlFor="sscRoll"
-              className="text-sm font-semibold tracking-tighter  text-gray-700"
+              className="text-sm font-semibold text-gray-700"
             >
               SSC Roll
             </Label>
             <Input
               id="sscRoll"
               type="text"
-              value={userData?.sscRoll}
-              readOnly
-              className="bg-gray-50 cursor-default py-6"
-              disabled={!edit}
+              value={userData.sscRoll}
+              onChange={(e) => handleChange("sscRoll", e.target.value)}
+              className="bg-gray-50 py-6"
+              readOnly={!edit}
             />
           </div>
 
-          <div className="space-y-2">
+          <div className="space-y-2 w-full">
             <Label
               htmlFor="hscRoll"
-              className="text-sm font-semibold tracking-tighter  text-gray-700"
+              className="text-sm font-semibold text-gray-700"
             >
               HSC Roll
             </Label>
             <Input
               id="hscRoll"
               type="text"
-              value={userData?.hscRoll}
-              readOnly
-              className="bg-gray-50 cursor-default py-6"
-              disabled={!edit}
+              value={userData.hscRoll}
+              onChange={(e) => handleChange("hscRoll", e.target.value)}
+              className="bg-gray-50 py-6"
+              readOnly={!edit}
             />
           </div>
         </div>
@@ -95,34 +100,34 @@ export default function ProfileManager({
         <div className="space-y-2">
           <Label
             htmlFor="email"
-            className="text-sm font-semibold tracking-tighter text-gray-700"
+            className="text-sm font-semibold text-gray-700"
           >
             Email
           </Label>
           <Input
             id="email"
             type="email"
-            value={userData?.email}
-            readOnly
-            className="bg-gray-50 cursor-default  py-6"
-            disabled={!edit}
+            value={userData.email}
+            onChange={(e) => handleChange("email", e.target.value)}
+            className="bg-gray-50 py-6"
+            readOnly={!edit}
           />
         </div>
 
         <div className="space-y-2">
           <Label
             htmlFor="phone"
-            className="text-sm font-semibold tracking-tighter  text-gray-700"
+            className="text-sm font-semibold text-gray-700"
           >
             Phone
           </Label>
           <Input
             id="phone"
             type="tel"
-            value={userData?.phone}
-            readOnly
-            className="bg-gray-50 cursor-default py-6"
-            disabled={!edit}
+            value={userData.phone}
+            onChange={(e) => handleChange("phone", e.target.value)}
+            className="bg-gray-50 py-6"
+            readOnly={!edit}
           />
         </div>
       </div>
diff --git a/components/QuestionItem.tsx b/components/QuestionItem.tsx
index 5fdaec1..8ba935e 100644
--- a/components/QuestionItem.tsx
+++ b/components/QuestionItem.tsx
@@ -26,7 +26,7 @@ const QuestionItem = (props: QuestionItemProps) => {
 
   return (
     <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}
       </h3>