From e16caff82f3739c738f0b173474c151c9da1295a Mon Sep 17 00:00:00 2001
From: wrzesinski-hubert <wrzesinski.hubert@gmail.com>
Date: Fri, 22 Jan 2021 21:28:17 +0100
Subject: [PATCH] stats

---
 src/components/Statistics.tsx | 115 ++++++++++++++++++----------------
 1 file changed, 62 insertions(+), 53 deletions(-)

diff --git a/src/components/Statistics.tsx b/src/components/Statistics.tsx
index 5cac9da..26a8c87 100644
--- a/src/components/Statistics.tsx
+++ b/src/components/Statistics.tsx
@@ -9,6 +9,7 @@ import DeleteIcon from '@material-ui/icons/Delete';
 import { useMemo } from 'react';
 import { dayMapping } from '../constants';
 import { axiosInstance } from '../utils/axiosInstance';
+import { SyncLoader } from 'react-spinners';
 
 const StatisticsWrapper = styled.div`
   display: flex;
@@ -26,19 +27,21 @@ const Row = styled.div`
 `;
 
 const StatisticBox = styled.div`
-  background-color: white;
-  width: 200px;
-  height: 200px;
-  margin: 10px;
-  border: 1px solid #000000;
-  border-radius: 38px;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  justify-content: center;
   align-items: center;
-  font-size: 22px;
-  padding: 2px;
-  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75);
+  z-index: 20000;
+  font-size: 0.65vw;
+  line-height: normal;
+  border-radius: 2px;
+  width: 200px;
+  height: 200px;
+  margin: 5px;
+  padding: 5px 5px 0 5px;
+  text-align: center;
+  background-color: #ffe485;
+  box-shadow: 3px 3px 5px 0px rgba(189, 189, 189, 1);
 `;
 
 const StatisticNumber = styled.p`
@@ -61,6 +64,7 @@ export const Statistics = () => {
   const [notRegisteredStudentsNumber, setNotRegisteredStudentsNumber] = useState('');
   const [acceptedStudentsNumber, setAcceptedStudentsNumber] = useState('');
   const [partlyAcceptedStudentsNumber, setPartlyAcceptedStudentsNumber] = useState('');
+  const [loaded, setLoaded] = useState(false);
 
   const getCreatedGroupsNumber = async () => {
     try {
@@ -117,49 +121,54 @@ export const Statistics = () => {
   };
 
   useEffect(() => {
-    getCreatedGroupsNumber()
-    getFullGroupsNumber()
-    getRegisteredStudentsNumber()
-    getNotRegisteredStudentsNumber()
-    getAcceptedStudentsNumber()
-    getPartlyAcceptedStudentsNumber()
+    Promise.all([
+      getCreatedGroupsNumber(),
+      getFullGroupsNumber(),
+      getRegisteredStudentsNumber(),
+      getNotRegisteredStudentsNumber(),
+      getAcceptedStudentsNumber(),
+      getPartlyAcceptedStudentsNumber(),
+    ]).then(()=>{setLoaded(true);});
+
+    
   }, []);
 
-  return (
-    <StatisticsWrapper>
-      <Row>
-        <StatisticBox>
-          <StatisticNumber>{createdGroupsNumber}</StatisticNumber>
-          <StatisticText>Utworzonych grup</StatisticText>
-        </StatisticBox>
-        <StatisticBox>
-          {' '}
-          <StatisticNumber>{registeredStudentsNumber}</StatisticNumber>
-          <StatisticText>Zapisanych studentów do grup</StatisticText>
-        </StatisticBox>
-        <StatisticBox>
-          {' '}
-          <StatisticNumber>{notRegisteredStudentsNumber}</StatisticNumber>
-          <StatisticText>Studentów niezapisanych do żadnej grupy</StatisticText>
-        </StatisticBox>
-      </Row>
-      <Row>
-        <StatisticBox>
-          {' '}
-          <StatisticNumber>{acceptedStudentsNumber}</StatisticNumber>
-          <StatisticText>Studentów z zaakceptowanym planem</StatisticText>
-        </StatisticBox>
-        <StatisticBox>
-          {' '}
-          <StatisticNumber>{partlyAcceptedStudentsNumber}</StatisticNumber>
-          <StatisticText>Studentów bez zaakceptowanego pełengo planu</StatisticText>
-        </StatisticBox>
-        <StatisticBox>
-          {' '}
-          <StatisticNumber>{fullGroupsNumber}</StatisticNumber>
-          <StatisticText>Grup z zajętymi wszystkimi miejscami</StatisticText>
-        </StatisticBox>
-      </Row>
-    </StatisticsWrapper>
-  );
+  useEffect(() => {
+    console.log(loaded);
+  }, [loaded]);
+
+  return <StatisticsWrapper>{loaded === false ? <SyncLoader />:<><Row>
+    <StatisticBox>
+      <StatisticNumber>{createdGroupsNumber}</StatisticNumber>
+      <StatisticText>Utworzonych grup</StatisticText>
+    </StatisticBox>
+    <StatisticBox>
+      {' '}
+      <StatisticNumber>{registeredStudentsNumber}</StatisticNumber>
+      <StatisticText>Zapisanych studentów do grup</StatisticText>
+    </StatisticBox>
+    <StatisticBox>
+      {' '}
+      <StatisticNumber>{notRegisteredStudentsNumber}</StatisticNumber>
+      <StatisticText>Studentów niezapisanych do żadnej grupy</StatisticText>
+    </StatisticBox>
+  </Row>
+    <Row>
+      <StatisticBox>
+        {' '}
+        <StatisticNumber>{acceptedStudentsNumber}</StatisticNumber>
+        <StatisticText>Studentów z zaakceptowanym planem</StatisticText>
+      </StatisticBox>
+      <StatisticBox>
+        {' '}
+        <StatisticNumber>{partlyAcceptedStudentsNumber}</StatisticNumber>
+        <StatisticText>Studentów bez zaakceptowanego pełengo planu</StatisticText>
+      </StatisticBox>
+      <StatisticBox>
+        {' '}
+        <StatisticNumber>{fullGroupsNumber}</StatisticNumber>
+        <StatisticText>Grup z zajętymi wszystkimi miejscami</StatisticText>
+      </StatisticBox>
+    </Row></>}
+  </StatisticsWrapper>;
 };