Update web/src/components/ProfileEditor.tsx

web/src/components/ProfileEditor.tsx

@@ -15,27 +15,46 @@ interface ProfileEditorProps {
 }
 
 export function ProfileEditor({ user, onSave, onClose }: ProfileEditorProps) {
-  const [name, setName] = useState(user.name);
-  const [email, setEmail] = useState(user.email);
+  const [name, setName] = useState(user.name ?? "");
+  const [email, setEmail] = useState(user.email ?? "");
 
-  // these can remain local-only for now
-  const [studentId, setStudentId] = useState("S12345678");
-  const [department, setDepartment] = useState("Computer Science");
-  const [year, setYear] = useState("3rd Year");
-  const [major, setMajor] = useState("Artificial Intelligence");
+  const [studentId, setStudentId] = useState(user.studentId ?? "");
+  const [department, setDepartment] = useState(user.department ?? "");
+  const [yearLevel, setYearLevel] = useState(user.yearLevel ?? "");
+  const [major, setMajor] = useState(user.major ?? "");
 
-  // ✅ IMPORTANT: initialize from user.bio (so it reflects Clare-generated bio)
   const [bio, setBio] = useState(user.bio ?? "");
 
-  const [photoPreview, setPhotoPreview] = useState<string | null>(null);
+  const [learningStyle, setLearningStyle] = useState(user.learningStyle ?? "visual");
+  const [learningPace, setLearningPace] = useState(user.learningPace ?? "moderate");
+
+  const [photoPreview, setPhotoPreview] = useState<string | null>(user.avatarUrl ?? null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  // ✅ If user changes while dialog is open, keep fields in sync
+  // keep in sync if user changes while dialog is open
   useEffect(() => {
-    setName(user.name);
-    setEmail(user.email);
+    setName(user.name ?? "");
+    setEmail(user.email ?? "");
+    setStudentId(user.studentId ?? "");
+    setDepartment(user.department ?? "");
+    setYearLevel(user.yearLevel ?? "");
+    setMajor(user.major ?? "");
     setBio(user.bio ?? "");
-  }, [user.name, user.email, user.bio]);
+    setLearningStyle(user.learningStyle ?? "visual");
+    setLearningPace(user.learningPace ?? "moderate");
+    setPhotoPreview(user.avatarUrl ?? null);
+  }, [
+    user.name,
+    user.email,
+    user.studentId,
+    user.department,
+    user.yearLevel,
+    user.major,
+    user.bio,
+    user.learningStyle,
+    user.learningPace,
+    user.avatarUrl,
+  ]);
 
   const handleSave = () => {
     if (!name.trim() || !email.trim()) {
@@ -47,7 +66,14 @@ export function ProfileEditor({ user, onSave, onClose }: ProfileEditorProps) {
       ...user,
       name: name.trim(),
       email: email.trim(),
-      bio: (bio ?? "").slice(0, 200), // enforce 200 chars UI limit
+      studentId: studentId.trim() || undefined,
+      department: department.trim() || undefined,
+      yearLevel: yearLevel || undefined,
+      major: major.trim() || undefined,
+      bio: (bio ?? "").slice(0, 200) || undefined,
+      learningStyle: learningStyle || undefined,
+      learningPace: learningPace || undefined,
+      avatarUrl: photoPreview || undefined,
     };
 
     onSave(next);
@@ -76,9 +102,7 @@ export function ProfileEditor({ user, onSave, onClose }: ProfileEditorProps) {
     reader.readAsDataURL(file);
   };
 
-  const handleChangePhotoClick = () => {
-    fileInputRef.current?.click();
-  };
+  const handleChangePhotoClick = () => fileInputRef.current?.click();
 
   return (
     <Dialog
@@ -91,14 +115,7 @@ export function ProfileEditor({ user, onSave, onClose }: ProfileEditorProps) {
         className="sm:max-w-[800px] p-0 gap-0 max-h-[90vh] overflow-hidden"
         style={{ zIndex: 1001, maxWidth: "800px", width: "800px" }}
         overlayClassName="!top-16 !left-0 !right-0 !bottom-0 !z-[99]"
-        overlayStyle={{
-          top: "64px",
-          left: 0,
-          right: 0,
-          bottom: 0,
-          zIndex: 99,
-          position: "fixed",
-        }}
+        overlayStyle={{ top: "64px", left: 0, right: 0, bottom: 0, zIndex: 99, position: "fixed" }}
       >
         <div className="flex flex-col max-h-[90vh]">
           {/* Header */}
@@ -114,7 +131,7 @@ export function ProfileEditor({ user, onSave, onClose }: ProfileEditorProps) {
                 {photoPreview ? (
                   <img src={photoPreview} alt="Profile" className="w-full h-full object-cover" />
                 ) : (
-                  name.charAt(0).toUpperCase()
+                  (name?.charAt(0) || "U").toUpperCase()
                 )}
               </div>
               <div>
@@ -182,9 +199,9 @@ export function ProfileEditor({ user, onSave, onClose }: ProfileEditorProps) {
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div className="space-y-2">
                   <Label htmlFor="edit-year">Year Level</Label>
-                  <Select value={year} onValueChange={setYear}>
+                  <Select value={yearLevel} onValueChange={setYearLevel}>
                     <SelectTrigger id="edit-year">
-                      <SelectValue />
+                      <SelectValue placeholder="Select year level" />
                     </SelectTrigger>
                     <SelectContent>
                       <SelectItem value="1st Year">1st Year</SelectItem>
@@ -227,7 +244,7 @@ export function ProfileEditor({ user, onSave, onClose }: ProfileEditorProps) {
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div className="space-y-2">
                   <Label htmlFor="edit-learning-style">Preferred Learning Style</Label>
-                  <Select defaultValue="visual">
+                  <Select value={learningStyle} onValueChange={setLearningStyle}>
                     <SelectTrigger id="edit-learning-style">
                       <SelectValue />
                     </SelectTrigger>
@@ -239,9 +256,10 @@ export function ProfileEditor({ user, onSave, onClose }: ProfileEditorProps) {
                     </SelectContent>
                   </Select>
                 </div>
+
                 <div className="space-y-2">
                   <Label htmlFor="edit-pace">Learning Pace</Label>
-                  <Select defaultValue="moderate">
+                  <Select value={learningPace} onValueChange={setLearningPace}>
                     <SelectTrigger id="edit-pace">
                       <SelectValue />
                     </SelectTrigger>