diff --git a/client/src/components/user/OwnProfile.tsx b/client/src/components/user/OwnProfile.tsx index 63003ca858ee044dd2c8a704b2e515f1c436566b..206a86936499a381a68ef9a7d23dc4b856829e6d 100644 --- a/client/src/components/user/OwnProfile.tsx +++ b/client/src/components/user/OwnProfile.tsx @@ -1,11 +1,70 @@ -import { Card, CardContent } from '@material-ui/core'; +import { + Box, + Card, + CardContent, + Table, + TableBody, + TableCell, + TableHead, + TableRow, + Typography, +} from '@material-ui/core'; +import { IOwnUserGQL, ownUserGQL } from '../../graphql/queries/user/ownUser'; +import { Loading } from '../utils/Loading'; +import PersonIcon from '@material-ui/icons/Person'; import React from 'react'; +import { UserRole } from '../../types/graphqlSchema'; +import { useQuery } from '@apollo/client'; + +const TableRowWithData: React.FC<{ field: string; value?: string | number }> = ({ field, value = '-' }) => { + return ( + <TableRow> + <TableCell component="th" scope="row"> + <Typography variant="subtitle1">{field}</Typography> + </TableCell> + <TableCell align="right"> + <Typography variant="subtitle1">{value}</Typography> + </TableCell> + </TableRow> + ); +}; + +const userRoleAdminString = 'Admin'; +const userRoleNormalString = 'Normál'; + +const getUserRoleString = (role: UserRole | undefined = undefined) => { + return role === UserRole.Admin ? userRoleAdminString : userRoleNormalString; +}; export const OwnProfile: React.FC = () => { + const { loading: userDataIsLoading, data: userData } = useQuery<IOwnUserGQL>(ownUserGQL); + return ( <Card> - <CardContent>apple</CardContent> + <CardContent style={{ padding: 0 }}> + <Loading isLoading={userDataIsLoading}> + <Table aria-label="simple table"> + <TableHead> + <TableRow> + <TableCell> + <Box display="flex" alignItems="center"> + <PersonIcon style={{ marginRight: '0.7rem' }} /> + <Typography variant="h5">Profilom</Typography> + </Box> + </TableCell> + <TableCell align="right"></TableCell> + </TableRow> + </TableHead> + <TableBody> + <TableRowWithData field="Név" value={`${userData?.me.familyName} ${userData?.me.givenName}`} /> + <TableRowWithData field="E-mail" value={userData?.me.googleEmail} /> + <TableRowWithData field="ID" value={userData?.me.id} /> + <TableRowWithData field="Jogkör" value={getUserRoleString(userData?.me.role)} /> + </TableBody> + </Table> + </Loading> + </CardContent> </Card> ); };