validate is group admin and fetch data

client/src/components/admin/group/GroupAdmin.tsx

 import { Card, CardContent, Grid, Typography, useTheme } from '@material-ui/core';
 import { IgetGroupById, getGroupById } from '../../../graphql/queries/group/getGroupById';
+import { useLazyQuery, useQuery } from '@apollo/client';
 
 import { GroupNotExists } from '../../utils/GroupNotExists';
 import { GroupRole } from '../../../types/graphqlSchema';
@@ -8,34 +9,51 @@ import { NotAdminOfGroup } from '../../utils/NotAdminOfGroup';
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { StyledLink } from '../../utils/StyledLink';
-import { useQuery } from '@apollo/client';
 
 type TParams = { id: string };
 
 export const GroupAdmin: React.FC<RouteComponentProps<TParams>> = ({ match }) => {
   const theme = useTheme();
-  const { loading: groupDataIsLoading, data: groupData, error } = useQuery<IgetGroupById>(getGroupById(''), {
+  const { loading: preGroupDataIsLoading, data: preGroupData, error: preError } = useQuery<IgetGroupById>(
+    getGroupById(''),
+    {
       variables: { groupId: Number(match.params.id) },
-  });
+    },
+  );
 
-  if (groupDataIsLoading) return <Loader />;
+  const [getGroup, { loading: groupDataIsLoading, data: groupData, error }] = useLazyQuery<IgetGroupById>(
+    getGroupById('name, description, applicantNum, activeRentalNum'),
+    {
+      variables: { groupId: Number(match.params.id) },
+    },
+  );
+
+  React.useEffect(() => {
+    if (
+      !preGroupDataIsLoading &&
+      !!preGroupData &&
+      !(!preGroupData?.group.ownMemberShip || preGroupData?.group.ownMemberShip.groupRole !== GroupRole.Admin)
+    )
+      getGroup();
+  }, [getGroup, preGroupData, preGroupDataIsLoading]);
+
+  if (preGroupDataIsLoading) return <Loader />;
+  if (!!preError) console.log(preError);
   if (!!error) console.log(error);
-  if (!groupData) return <GroupNotExists />;
-  if (!groupData?.group.ownMemberShip || groupData?.group.ownMemberShip.groupRole !== GroupRole.Admin)
+  if (!preGroupData) return <GroupNotExists />;
+  if (!preGroupData?.group.ownMemberShip || preGroupData?.group.ownMemberShip.groupRole !== GroupRole.Admin)
     return <NotAdminOfGroup />;
 
+  if (groupDataIsLoading) return <Loader />;
+
   return (
     <Grid container spacing={1} justify="center">
       <Grid item xs={12} md={4}>
         <Card>
           <CardContent>
             <Typography variant="subtitle1">Csoport adatai</Typography>
-            <Typography variant="subtitle1">Neve: Some Csoport</Typography>
-            <Typography variant="subtitle1">
-              Leírása: Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis molestias eveniet voluptatum
-              repellendus, temporibus quod nisi beatae consequatur, voluptate optio illum aperiam quae possimus dolorum
-              sed inventore aut? Consequuntur, tempora.
-            </Typography>
+            <Typography variant="subtitle1">Neve: {groupData?.group.name}</Typography>
+            <Typography variant="subtitle1">Leírása: {groupData?.group.description}</Typography>
           </CardContent>
         </Card>
       </Grid>
@@ -45,12 +63,11 @@ export const GroupAdmin: React.FC<RouteComponentProps<TParams>> = ({ match }) =>
             <Card>
               <CardContent>
                 <Typography align="center" variant="subtitle1">
-                  13 Új jelentkező
+                  {groupData?.group.applicantNum} Új jelentkező
                 </Typography>
                 <Typography align="center" variant="subtitle1">
-                  {/* TODO link to actual group */}
                   <StyledLink
-                    to={`/group/1/admin/members?role=applicant`}
+                    to={`/group/${match.params.id}/admin/members?role=applicant`}
                     style={{ color: theme.palette.primary.dark }}
                   >
                     Bírálás
@@ -63,30 +80,14 @@ export const GroupAdmin: React.FC<RouteComponentProps<TParams>> = ({ match }) =>
             <Card>
               <CardContent>
                 <Typography align="center" variant="subtitle1">
-                  7 Kölcsönzés
+                  {groupData?.group.activeRentalNum} Kölcsönzés
                 </Typography>
                 <Typography align="center" variant="subtitle1">
-                  {/* TODO link to actual group */}
-                  <StyledLink to={`/group/1/admin/rentals?state=active`} style={{ color: theme.palette.primary.dark }}>
-                    Kezelés
-                  </StyledLink>
-                </Typography>
-              </CardContent>
-            </Card>
-          </Grid>
-          <Grid item xs={12}>
-            <Card>
-              <CardContent>
-                <Typography align="center" variant="subtitle1">
-                  12 Hamarosan lejáró garancia
-                </Typography>
-                <Typography align="center" variant="subtitle1">
-                  {/* TODO link to actual group */}
                   <StyledLink
-                    to={`/group/1/admin/documents?order_by=expire`}
+                    to={`/group/${match.params.id}/admin/rentals?state=active`}
                     style={{ color: theme.palette.primary.dark }}
                   >
-                    Megtekintés
+                    Kezelés
                   </StyledLink>
                 </Typography>
               </CardContent>