initial own profile and gql fixes

client/src/components/Content.tsx

@@ -5,6 +5,7 @@ import { GroupInfo } from './group/GroupInfo';
 import { LoggedInHome } from './home/LoggedInHome';
 import { LoggedOutHome } from './home/LoggedOutHome';
 import { NotAuthorized } from './utils/NotAuthorized';
+import { OwnProfile } from './user/OwnProfile';
 import React from 'react';
 import { SwitchComponentByAuth } from './utils/SwitchComponentByAuth';
 
@@ -18,7 +19,7 @@ export const Content: React.FC = () => {
           <Route path="/admin">admin</Route>
           <Route path="/qr">qr</Route>
           <Route path="/profile/me">
-            <SwitchComponentByAuth isLoggedIn={'alma'} notLoggedIn={<NotAuthorized />} />
+            <SwitchComponentByAuth isLoggedIn={<OwnProfile />} notLoggedIn={<NotAuthorized />} />
           </Route>
           <Route path="/group/:id/info" component={GroupInfo} />
           <Route path="/group/:id/admin" component={GroupInfo} />

client/src/components/group/GroupInfo.tsx

@@ -12,10 +12,15 @@ type TParams = { id: string };
 
 export const GroupInfo: React.FC<RouteComponentProps<TParams>> = ({ match }) => {
   const theme = useTheme();
-  const { loading: groupDataIsLoading, data: groupData } = useQuery<IgetGroupById>(
-    getGroupById(Number(match.params.id), 'description, memberNum, storageNum, itemNum, name'),
+
+  // TODO get only membership and then other fields
+  const { loading: groupDataIsLoading, data: groupData, error } = useQuery<IgetGroupById>(
+    getGroupById('description, memberNum, storageNum, itemNum, name'),
+    { variables: { groupId: Number(match.params.id) } },
   );
 
+  console.log(error);
+
   if (!groupDataIsLoading && !groupData)
     return (
       <>

client/src/components/home/OwnGroupsTable.tsx

@@ -2,7 +2,7 @@ import { Box, IconButton, Tooltip, Typography } from '@material-ui/core';
 import { Group, GroupRole, Member, MemberState } from '../../types/graphqlSchema';
 import { IOwnGroupMemberships, ownGroupMemberships } from '../../graphql/queries/group/ownGroupMemberships';
 
-import { CustomCardTable } from '../utils/CustomCardTable';
+import { CardTable } from '../utils/CardTable';
 import GroupIcon from '@material-ui/icons/Group';
 import React from 'react';
 import SettingsIcon from '@material-ui/icons/Settings';
@@ -55,7 +55,7 @@ export const OwnGroupsTable: React.FC = () => {
   const history = useHistory();
 
   return (
-    <CustomCardTable<ITableRow>
+    <CardTable<ITableRow>
       columns={[
         { title: 'ID', field: 'id', type: 'numeric', hidden: true },
         {

client/src/components/user/OwnProfile.tsx

+import { Card, CardContent } from '@material-ui/core';
+
+import React from 'react';
+
+export const OwnProfile: React.FC = () => {
+  return (
+    <Card>
+      <CardContent>apple</CardContent>
+    </Card>
+  );
+};

client/src/components/utils/CustomCardTable.tsx → client/src/components/utils/CardTable.tsx

@@ -14,7 +14,7 @@ const TableCardContent = styled(CardContent)`
 `;
 
 // eslint-disable-next-line @typescript-eslint/ban-types
-export const CustomCardTable = <RowData extends object>(props: MaterialTableProps<RowData>): JSX.Element => {
+export const CardTable = <RowData extends object>(props: MaterialTableProps<RowData>): JSX.Element => {
   return (
     <Card>
       <MaterialTable<RowData>

client/src/graphql/queries/group/getGroupById.tsx

@@ -3,10 +3,10 @@ import { Group } from '../../../types/graphqlSchema';
 import gql from 'graphql-tag';
 
 // Query
-export const getGroupById = (id: number, fields: string): DocumentNode => {
+export const getGroupById = (fields: string): DocumentNode => {
   return gql`
-    query getGroupById {
-      group(id: ${id}) {
+    query getGroupById($groupId: Int!) {
+      group(id: $groupId) {
         ownMemberShip {
           memberState
           groupRole