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 (
-
-
-
- {createdGroupsNumber}
- Utworzonych grup
-
-
- {' '}
- {registeredStudentsNumber}
- Zapisanych studentów do grup
-
-
- {' '}
- {notRegisteredStudentsNumber}
- Studentów niezapisanych do żadnej grupy
-
-
-
-
- {' '}
- {acceptedStudentsNumber}
- Studentów z zaakceptowanym planem
-
-
- {' '}
- {partlyAcceptedStudentsNumber}
- Studentów bez zaakceptowanego pełengo planu
-
-
- {' '}
- {fullGroupsNumber}
- Grup z zajętymi wszystkimi miejscami
-
-
-
- );
+ useEffect(() => {
+ console.log(loaded);
+ }, [loaded]);
+
+ return {loaded === false ? :<>
+
+ {createdGroupsNumber}
+ Utworzonych grup
+
+
+ {' '}
+ {registeredStudentsNumber}
+ Zapisanych studentów do grup
+
+
+ {' '}
+ {notRegisteredStudentsNumber}
+ Studentów niezapisanych do żadnej grupy
+
+
+
+
+ {' '}
+ {acceptedStudentsNumber}
+ Studentów z zaakceptowanym planem
+
+
+ {' '}
+ {partlyAcceptedStudentsNumber}
+ Studentów bez zaakceptowanego pełengo planu
+
+
+ {' '}
+ {fullGroupsNumber}
+ Grup z zajętymi wszystkimi miejscami
+
+
}
+ ;
};