110 lines
2.7 KiB
TypeScript
110 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import {
|
|
Paper,
|
|
Typography,
|
|
Box,
|
|
TextField,
|
|
Divider,
|
|
Button,
|
|
} from "@mui/material";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { AppDispatch, RootState } from "@/app/redux/store";
|
|
import { updateUserDetails } from "@/app/redux/user/userSlice";
|
|
|
|
const SettingsPersonalInfo: React.FC = () => {
|
|
const user = useSelector((state: RootState) => state.auth.user);
|
|
console.log("[SettingsPersonalInfo] user", user);
|
|
const dispatch = useDispatch<AppDispatch>();
|
|
|
|
const [formData, setFormData] = useState({
|
|
first_name: "",
|
|
last_name: "",
|
|
username: "",
|
|
email: "",
|
|
});
|
|
|
|
// Initialize form fields from Redux user data
|
|
useEffect(() => {
|
|
if (user) {
|
|
setFormData({
|
|
first_name: user.first_name ?? "",
|
|
last_name: user.last_name ?? "",
|
|
username: user.username ?? "",
|
|
email: user.email ?? "",
|
|
});
|
|
}
|
|
}, [user]);
|
|
|
|
// Generic change handler
|
|
const handleChange =
|
|
(field: keyof typeof formData) =>
|
|
(e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setFormData(prev => ({ ...prev, [field]: e.target.value }));
|
|
};
|
|
|
|
const handleSave = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
handleUpdateUserDetails();
|
|
};
|
|
|
|
const handleUpdateUserDetails = () => {
|
|
dispatch(updateUserDetails({ id: user?.id ?? "", updates: formData }));
|
|
};
|
|
|
|
return (
|
|
<Paper elevation={1} sx={{ p: 3, maxWidth: 720 }}>
|
|
<Typography variant="subtitle1" sx={{ mb: 2 }}>
|
|
Personal Info
|
|
</Typography>
|
|
|
|
<Box
|
|
component="form"
|
|
onSubmit={handleSave}
|
|
sx={{ display: "flex", flexDirection: "column", gap: 2 }}
|
|
>
|
|
<TextField
|
|
label="First Name"
|
|
value={formData.first_name}
|
|
disabled={true}
|
|
onChange={handleChange("first_name")}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
label="Last Name"
|
|
value={formData.last_name}
|
|
disabled={true}
|
|
onChange={handleChange("last_name")}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
label="Username"
|
|
disabled={true}
|
|
value={formData.username}
|
|
onChange={handleChange("username")}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
disabled={true}
|
|
label="Email"
|
|
type="email"
|
|
value={formData.email}
|
|
onChange={handleChange("email")}
|
|
fullWidth
|
|
/>
|
|
<Divider sx={{ my: 1 }} />
|
|
<Button
|
|
type="submit"
|
|
variant="contained"
|
|
sx={{ alignSelf: "flex-start" }}
|
|
>
|
|
Save Changes
|
|
</Button>
|
|
</Box>
|
|
</Paper>
|
|
);
|
|
};
|
|
|
|
export default SettingsPersonalInfo;
|