148 lines
5.4 KiB
TypeScript
148 lines
5.4 KiB
TypeScript
import { Box, Button, Divider, Paper, Stack, TextField, Typography } from "@mui/material";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { CustomerType } from "../components/Account";
|
|
import { useAccount } from "../helper/AccountProvider";
|
|
import { fetchCustomer } from "../helper/query/Queries";
|
|
import "./pages.css";
|
|
|
|
export default function Account() {
|
|
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const { user: userData, logout } = useAccount();
|
|
|
|
// Beispielhafte Userdaten (könnten aus Context/Backend kommen)
|
|
const [user, setUser] = useState<CustomerType>({
|
|
name: "",
|
|
surname: "",
|
|
address: "",
|
|
country: "",
|
|
zip: "",
|
|
id: userData?.customerId || 0, // Initialwert
|
|
});
|
|
|
|
// Aktualisiere den `user`-State, wenn sich `userData` ändert
|
|
useEffect(() => {
|
|
console.log("UserData changed:", userData);
|
|
if (userData?.customerId) {
|
|
setUser((prev) => ({
|
|
...prev,
|
|
id: userData.customerId, // Aktualisiere die ID
|
|
}));
|
|
}
|
|
}, [userData]);
|
|
|
|
const [edit, setEdit] = useState(false);
|
|
const [form, setForm] = useState(user);
|
|
|
|
const { data } = useQuery<CustomerType>({
|
|
queryKey: ['fetchCustomer', userData?.customerId],
|
|
queryFn: () => fetchCustomer(userData?.customerId || 0), // Funktion zum Abrufen der Kundendaten
|
|
retry: 3, // Versucht es 3-mal erneut
|
|
retryDelay: 1000, // Wartezeit zwischen den Versuchen (in ms)
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (data) {
|
|
setUser(data); // Aktualisiere den user-State mit den abgerufenen Daten
|
|
setForm(data); // Optional: Aktualisiere auch den form-State
|
|
}
|
|
}, [data]);
|
|
|
|
const handleEdit = () => setEdit(true);
|
|
const handleCancel = () => {
|
|
setForm(user);
|
|
setEdit(false);
|
|
};
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setForm({ ...form, [e.target.name]: e.target.value });
|
|
};
|
|
const handleSave = () => {
|
|
setUser(form);
|
|
setEdit(false);
|
|
};
|
|
const handleDelete = () => {
|
|
navigate("/");
|
|
logout(); // Logout nach dem Löschen
|
|
};
|
|
|
|
return (
|
|
<Box className="page-background" sx={{ minHeight: "100vh", justifyContent: "flex-start", pt: 4 }}>
|
|
<Paper elevation={3} sx={{ p: 4, maxWidth: 500, width: "100%", mx: "auto" }}>
|
|
<Typography variant="h4" gutterBottom>
|
|
{t('myAccount')}
|
|
</Typography>
|
|
<Divider sx={{ mb: 3 }} />
|
|
<Stack spacing={2}>
|
|
<TextField
|
|
label={t('name')}
|
|
name="name"
|
|
value={edit ? form.name : user.name}
|
|
onChange={handleChange}
|
|
disabled={!edit}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
label={t('surname')}
|
|
name="surname"
|
|
value={edit ? form.surname : user.surname}
|
|
onChange={handleChange}
|
|
disabled={!edit}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
label={t('address')}
|
|
name="address"
|
|
value={edit ? form.address : user.address}
|
|
onChange={handleChange}
|
|
disabled={!edit}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
label={t('country')}
|
|
name="country"
|
|
value={edit ? form.country : user.country}
|
|
onChange={handleChange}
|
|
disabled={!edit}
|
|
fullWidth
|
|
/>
|
|
<TextField
|
|
label={t('zip')}
|
|
name="zip"
|
|
value={edit ? form.zip : user.zip}
|
|
onChange={handleChange}
|
|
disabled={!edit}
|
|
fullWidth
|
|
/>
|
|
</Stack>
|
|
<Box sx={{ display: "flex", gap: 2, mt: 4 }}>
|
|
{edit ? (
|
|
<>
|
|
<Button variant="contained" color="primary" onClick={handleSave}>
|
|
{t('save')}
|
|
</Button>
|
|
<Button variant="outlined" color="secondary" onClick={handleCancel}>
|
|
{t('cancel')}
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<Button variant="contained" color="primary" onClick={handleEdit}>
|
|
{t('edit')}
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="outlined"
|
|
color="error"
|
|
onClick={handleDelete}
|
|
sx={{ marginLeft: "auto" }}
|
|
>
|
|
{t('deleteAccount')}
|
|
</Button>
|
|
</Box>
|
|
</Paper>
|
|
</Box>
|
|
);
|
|
} |