generated from muhtadeetaron/nextjs-template
fix(ui): fix question item answer indexing in results page
This commit is contained in:
shafin-r
@ -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>
|
||||
|
||||
@ -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"
|
||||
/>
|
||||
))}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user