PNSPS-frontend-MaterialUI/src/pages/User/GLDUserProfile/UserInformationCard.js

// material-ui
import {
    FormControl, 
    // IconButton,
    Grid, 
    // InputAdornment, 
    Typography, FormLabel,
    OutlinedInput,
} from '@mui/material';
import MainCard from "components/MainCard";
import * as React from "react";

import {useEffect, useState} from "react";
import Loadable from 'components/Loadable';
import { lazy } from 'react';
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));


// ==============================|| DASHBOARD - DEFAULT ||============================== //
const UserInformationCard = ({userData}) => {
    const [currentUserData, setCurrentUserData] = React.useState({});
    // const [locked, setLocked] = useState(false);
    const [onReady, setOnReady] = useState(false);

    useEffect(() => {
        //if user data from parent are not null
        if (Object.keys(userData).length > 0 && userData !== undefined) {
            setCurrentUserData(userData.data);
        }
    }, [userData]);

    useEffect(() => {
        //if state data are ready and assign to different field
        if (Object.keys(userData).length > 0 &&currentUserData !== undefined&&currentUserData.id!==undefined) {
            console.log(currentUserData)
            // setLocked(currentUserData.locked);
            setOnReady(true);
        }
    }, [currentUserData]);

    return (
        !onReady ?
            <LoadingComponent/>
            :
            <MainCard elevation={0}
                      border={false}
                      content={false}
            >
                <Typography variant="h5" sx={{mt: 3, ml: 3, mr: 3, borderBottom: "1px solid black"}}>
                    Information
                </Typography>

                <form>
                    <Grid container>
                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3, mt:3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                    sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <FormLabel required>Username:</FormLabel>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <FormControl variant="outlined" fullWidth required>
                                        <OutlinedInput
                                            required
                                            fullWidth
                                            size="small"
                                            // {...register("username",
                                            //     {
                                                //     })}
                                                id='username'
                                                disabled={true}
                                                value={currentUserData.username}
                                        />
                                    </FormControl>
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <FormLabel required >Full Name:</FormLabel>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <FormControl variant="outlined" fullWidth required>
                                        <OutlinedInput
                                            required
                                            fullWidth
                                            size="small"
                                            value= {currentUserData.enName}
                                            disabled={true}
                                            // {...register("enName",
                                            //     {
                                            //     })}
                                            id='enName'
                                        />
                                    </FormControl>
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <FormLabel>Post:</FormLabel>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <FormControl variant="outlined" fullWidth required>
                                        <OutlinedInput
                                            fullWidth
                                            size="small"
                                            value= {currentUserData.post}
                                            disabled={true}
                                            // {...register("post",
                                            //     {
                                            //     })}
                                            id='post'
                                        />
                                    </FormControl>
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <FormLabel required>Email:</FormLabel>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6}>
                                    <FormControl variant="outlined" fullWidth required>
                                        <OutlinedInput
                                            fullWidth
                                            size="small"
                                            value={currentUserData.emailAddress}
                                            disabled={true}
                                            // {...register("emailAddress",
                                            //     {
                                            //     })}
                                            id='emailAddress'
                                        />
                                    </FormControl>
                                </Grid>
                            </Grid>
                        </Grid>

                    </Grid>

                </form>
            </MainCard>
    );
};

export default UserInformationCard;