Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 1x 1x 1x | import React, { useEffect, useState } from 'react';
import { Alert, Box, CircularProgress, Divider, Typography } from '@mui/material';
import { getMe } from '../../db/api';
const UserProfilePage = () => {
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');
const [profile, setProfile] = useState(null);
useEffect(() => {
let mounted = true;
const load = async () => {
try {
setLoading(true);
const data = await getMe();
Eif (mounted) setProfile(data);
} catch (err) {
if (mounted) setError(err.message || 'Erro ao carregar dados do usuário');
} finally {
Eif (mounted) setLoading(false);
}
};
load();
return () => {
mounted = false;
};
}, []);
if (loading) {
return (
<Box id="account-profile-loading" sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
<CircularProgress />
</Box>
);
}
Iif (error) {
return <Alert severity="error">{error}</Alert>;
}
return (
<Box id="account-profile-wrapper">
<Typography variant="h6" sx={{ fontWeight: 700, mb: 2 }}>
Meu perfil
</Typography>
<Divider sx={{ mb: 2 }} />
<Typography id="account-profile-name" sx={{ mb: 1 }}>
<strong>Nome:</strong> {profile?.first_name} {profile?.last_name}
</Typography>
<Typography id="account-profile-email" sx={{ mb: 1 }}>
<strong>E-mail:</strong> {profile?.email}
</Typography>
<Typography id="account-profile-person-type" sx={{ mb: 1 }}>
<strong>Tipo:</strong> {profile?.person_type || '-'}
</Typography>
<Typography id="account-profile-phone" sx={{ mb: 1 }}>
<strong>Telefone:</strong> {profile?.phone || '-'}
</Typography>
</Box>
);
};
export default UserProfilePage;
|