Own profile

client/src/components/user/OwnProfile.tsx

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