stats

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;
+  z-index: 20000;
-  padding: 2px;
+  font-size: 0.65vw;
-  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.75);
+  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,17 +121,23 @@ export const Statistics = () => {
   };
 
   useEffect(() => {
-    getCreatedGroupsNumber()
+    Promise.all([
-    getFullGroupsNumber()
+      getCreatedGroupsNumber(),
-    getRegisteredStudentsNumber()
+      getFullGroupsNumber(),
-    getNotRegisteredStudentsNumber()
+      getRegisteredStudentsNumber(),
-    getAcceptedStudentsNumber()
+      getNotRegisteredStudentsNumber(),
-    getPartlyAcceptedStudentsNumber()
+      getAcceptedStudentsNumber(),
+      getPartlyAcceptedStudentsNumber(),
+    ]).then(()=>{setLoaded(true);});
+
+    
   }, []);
 
-  return (
+  useEffect(() => {
-    <StatisticsWrapper>
+    console.log(loaded);
-      <Row>
+  }, [loaded]);
+
+  return <StatisticsWrapper>{loaded === false ? <SyncLoader />:<><Row>
     <StatisticBox>
       <StatisticNumber>{createdGroupsNumber}</StatisticNumber>
       <StatisticText>Utworzonych grup</StatisticText>
@@ -159,7 +169,6 @@ export const Statistics = () => {
         <StatisticNumber>{fullGroupsNumber}</StatisticNumber>
         <StatisticText>Grup z zajętymi wszystkimi miejscami</StatisticText>
       </StatisticBox>
-      </Row>
+    </Row></>}
-    </StatisticsWrapper>
+  </StatisticsWrapper>;
-  );
 };