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'; import { coursesContext } from '../contexts/CoursesProvider'; import styled, { css } from 'styled-components'; 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'; import { SyncLoader } from 'react-spinners'; const StatisticsWrapper = styled.div` display: flex; flex-direction: column; width: 100%; justify-content: center; align-items: center; `; const Row = styled.div` display: flex; width: 100%; justify-content: center; align-items: center; `; const StatisticBox = styled.div` display: flex; flex-direction: column; justify-content: center; align-items: center; 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` font-size: 52px; margin-top: 40px; margin-bottom: 0px; `; const StatisticText = styled.p` font-size: 18px; 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 [loaded, setLoaded] = useState(false); 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(() => { Promise.all([ getCreatedGroupsNumber(), getFullGroupsNumber(), getRegisteredStudentsNumber(), getNotRegisteredStudentsNumber(), getAcceptedStudentsNumber(), getPartlyAcceptedStudentsNumber(), ]).then(()=>{setLoaded(true);}); }, []); 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 } ; };