Client Portal - Employee Data

frontend/client-portal/src/pages/EmployeeData/UserProfile.tsx

@@ -1,68 +1,72 @@
 // mui
-import { IconButton, Container, Grid, Stack, Typography } from '@mui/material';
+import { Container, Grid, Stack, Typography } from '@mui/material';
 // components
 import Page from '../../components/Page';
-import Iconify from '../../components/Iconify';
 // utils
 import useSettings from '../../hooks/useSettings';
-// section
-import CardPersonalInformation from '../../sections/alarm-center/user-profile/CardPersonalInformation';
-import CardFamilyInformation from '../../sections/alarm-center/user-profile/CardFamilyInformation';
-import CardPolicyNumber from '../../sections/alarm-center/user-profile/CardPolicyNumber';
-import CardBenefitSummary from '../../sections/alarm-center/user-profile/CardBenefitSummary';
-import CardClaimHistory from '../../sections/alarm-center/user-profile/CardClaimHistory';
 // react
 import { useNavigate, useParams } from 'react-router-dom';
-import ButtonBack from '../../components/ButtonBack';
 import { useEffect, useState, useContext } from 'react';
 import axios from '../../utils/axios';
 import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+import CardPersonalInformation from '../../sections/employee-data/user-profile/CardPersonalInformation';
+import CardFamilyInformation from '../../sections/employee-data/user-profile/CardFamilyInformation';
+import { FamilyInformationtype, PersonalInformationType } from '../../@types/member';
 
 // ----------------------------------------------------------------------
 
+type UserProfileDataType = {
+  person: PersonalInformationType;
+  families: FamilyInformationtype[];
+};
+
 export default function UserProfile() {
   const { themeStretch } = useSettings();
   const navigate = useNavigate();
-  const [data, setData] = useState();
+  const [data, setData] = useState<UserProfileDataType>();
 
   const { corporateValue } = useContext(UserCurrentCorporateContext);
   const { id } = useParams();
 
   useEffect(() => {
-    axios
-      .get(corporateValue + '/members/' + id)
-      .then((response) => {
-        setData(response.data);
-      })
-      .catch((error) => {
-        console.error(error);
-      });
+    (async () => {
+      await axios
+        .get(corporateValue + '/members/' + id)
+        .then((response) => {
+          setTimeout(() => {
+            console.log(response.data);
+            setData(response.data);
+          }, 1000);
+        })
+        .catch((error) => {
+          if (error.response.data.statusCode === 404) {
+            navigate(-1);
+          } else {
+            console.error(error);
+          }
+        });
+    })();
   }, []);
 
-//  console.log('data', data);
-
   return (
     <Page title="Profile">
       <Container maxWidth={themeStretch ? false : 'xl'}>
         <Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
-          {/* <IconButton sx={{ marginRight: '10px', color: '#424242' }} onClick={() => navigate()}>
-            <Iconify icon="heroicons-outline:arrow-narrow-left" />
-          </IconButton> */}
-          <ArrowBackIosIcon sx={{cursor:'pointer'}} onClick={() => navigate(-1)}/>
-          <Typography variant="h5" sx={{marginLeft:2}}>Profile</Typography>
+          <ArrowBackIosIcon sx={{ cursor: 'pointer' }} onClick={() => navigate(-1)} />
+          <Typography variant="h5" sx={{ marginLeft: 2 }}>
+            Profile
+          </Typography>
         </Stack>
-        {data ? (
         <Grid container spacing={2}>
           {/* Row 1 */}
           <Grid item xs={12} md={12}>
-            <CardPersonalInformation data={data} />
+            <CardPersonalInformation data={data?.person} />
           </Grid>
           <Grid item xs={12} md={12}>
-            <CardFamilyInformation data={data} />
+            <CardFamilyInformation data={data?.families} />
           </Grid>
         </Grid>
-        ) : ''}
       </Container>
     </Page>
   );