tours and css changes

src/components/Statistics.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import Collapse from '@material-ui/core/Collapse';
 import { ReactComponent as Expand } from '../assets/expand.svg';
 import { Course, Group, GroupType } from '../types/index';
@@ -8,6 +8,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import DeleteIcon from '@material-ui/icons/Delete';
 import { useMemo } from 'react';
 import { dayMapping } from '../constants';
+import { axiosInstance } from '../utils/axiosInstance';
 
 const StatisticsWrapper = styled.div`
   display: flex;
@@ -25,7 +26,7 @@ const Row = styled.div`
 `;
 
 const StatisticBox = styled.div`
-background-color:white;
+  background-color: white;
   width: 200px;
   height: 200px;
   margin: 10px;
@@ -36,57 +37,127 @@ background-color:white;
   justify-content: space-around;
   align-items: center;
   font-size: 22px;
-  padding:2px;
+  padding: 2px;
   box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75);
 `;
 
 const StatisticNumber = styled.p`
   font-size: 52px;
   margin-top: 40px;
-  margin-bottom:0px;
+  margin-bottom: 0px;
 `;
 
 const StatisticText = styled.p`
   font-size: 18px;
-  text-align:center;
-  align-items:center;
-  justify-content:center;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
 `;
 
 export const Statistics = () => {
+  const [createdGroupsNumber, setCreatedGroupsNumber] = useState('');
+  const [fullGroupsNumber, setFullGroupsNumber] = useState('');
+  const [registeredStudentsNumber, setRegisteredStudentsNumber] = useState('');
+  const [notRegisteredStudentsNumber, setNotRegisteredStudentsNumber] = useState('');
+  const [acceptedStudentsNumber, setAcceptedStudentsNumber] = useState('');
+  const [partlyAcceptedStudentsNumber, setPartlyAcceptedStudentsNumber] = useState('');
+
+  const getCreatedGroupsNumber = async () => {
+    try {
+      const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/statistics/groups/created`);
+      setCreatedGroupsNumber(data.ammount);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const getFullGroupsNumber = async () => {
+    try {
+      const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/statistics/groups/full`);
+      setFullGroupsNumber(data.ammount);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const getRegisteredStudentsNumber = async () => {
+    try {
+      const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/statistics/groups/full`);
+      setRegisteredStudentsNumber(data.ammount);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const getNotRegisteredStudentsNumber = async () => {
+    try {
+      const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/statistics/groups/full`);
+      setNotRegisteredStudentsNumber(data.ammount);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const getAcceptedStudentsNumber = async () => {
+    try {
+      const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/statistics/groups/full`);
+      setAcceptedStudentsNumber(data.ammount);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const getPartlyAcceptedStudentsNumber = async () => {
+    try {
+      const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/statistics/groups/full`);
+      setPartlyAcceptedStudentsNumber(data.ammount);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  useEffect(() => {
+    getCreatedGroupsNumber()
+    getFullGroupsNumber()
+    getRegisteredStudentsNumber()
+    getNotRegisteredStudentsNumber()
+    getAcceptedStudentsNumber()
+    getPartlyAcceptedStudentsNumber()
+  }, []);
+
   return (
     <StatisticsWrapper>
       <Row>
         <StatisticBox>
-          <StatisticNumber>65</StatisticNumber>
+          <StatisticNumber>{createdGroupsNumber}</StatisticNumber>
           <StatisticText>Utworzonych grup</StatisticText>
         </StatisticBox>
         <StatisticBox>
           {' '}
-          <StatisticNumber>280</StatisticNumber>
+          <StatisticNumber>{registeredStudentsNumber}</StatisticNumber>
           <StatisticText>Zapisanych studentów do grup</StatisticText>
         </StatisticBox>
         <StatisticBox>
           {' '}
-          <StatisticNumber>24</StatisticNumber>
+          <StatisticNumber>{notRegisteredStudentsNumber}</StatisticNumber>
           <StatisticText>Studentów niezapisanych do żadnej grupy</StatisticText>
         </StatisticBox>
       </Row>
       <Row>
         <StatisticBox>
           {' '}
-          <StatisticNumber>150</StatisticNumber>
+          <StatisticNumber>{acceptedStudentsNumber}</StatisticNumber>
           <StatisticText>Studentów z zaakceptowanym planem</StatisticText>
         </StatisticBox>
         <StatisticBox>
           {' '}
-          <StatisticNumber>130</StatisticNumber>
+          <StatisticNumber>{partlyAcceptedStudentsNumber}</StatisticNumber>
           <StatisticText>Studentów bez zaakceptowanego pełengo planu</StatisticText>
         </StatisticBox>
         <StatisticBox>
           {' '}
-          <StatisticNumber>0</StatisticNumber>
-          <StatisticText>Zamkniętych grup</StatisticText>
+          <StatisticNumber>{fullGroupsNumber}</StatisticNumber>
+          <StatisticText>Grup z zajętymi wszystkimi miejscami</StatisticText>
         </StatisticBox>
       </Row>
     </StatisticsWrapper>