OwnProfile.tsx

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 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>
  );
};