59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import * as React from 'react';
|
|
import { Box, Typography, Paper, CircularProgress, Alert } from '@mui/material';
|
|
import { useResource } from '../hooks/useResource';
|
|
import GenericForm from './GenericForm';
|
|
import { ConfigContext } from '../App';
|
|
|
|
export default function ProfileView() {
|
|
const appConfig = React.useContext(ConfigContext);
|
|
const profileConfig = appConfig?.profile;
|
|
const resourceConfig = appConfig?.resources.find(r => r.name === profileConfig?.resource);
|
|
|
|
if (!profileConfig || !resourceConfig) {
|
|
debugger;
|
|
return <Alert severity="error">Profile configuration not found.</Alert>;
|
|
}
|
|
|
|
const { useMe, useUpdate } = useResource(resourceConfig);
|
|
const { data: profile, isLoading, error } = useMe();
|
|
const updateMutation = useUpdate();
|
|
|
|
const handleSave = async (formData: any) => {
|
|
try {
|
|
const id = profile[resourceConfig.primaryKey];
|
|
await updateMutation.mutateAsync({ id, data: formData });
|
|
} catch (err) {
|
|
console.error('Profile update failed:', err);
|
|
}
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
|
|
<CircularProgress />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return <Alert severity="error">Failed to load profile data.</Alert>;
|
|
}
|
|
|
|
return (
|
|
<Box sx={{ maxWidth: 800, mx: 'auto', mt: 4 }}>
|
|
<Typography variant="h4" gutterBottom>
|
|
My Profile
|
|
</Typography>
|
|
<Paper sx={{ p: 4, mt: 2 }}>
|
|
<GenericForm
|
|
config={resourceConfig}
|
|
initialData={profile}
|
|
onSave={handleSave}
|
|
onCancel={() => window.history.back()}
|
|
loading={updateMutation.isPending}
|
|
/>
|
|
</Paper>
|
|
</Box>
|
|
);
|
|
}
|