s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

apply Loading

Browse Source
This commit is contained in:
mattyl006 2022-07-27 11:16:02 +02:00
parent af7c71a03b
commit 0cd2580957
12 changed files with 118 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/api/getChallengeFullDescription.js
View File

@ -1,10 +1,12 @@
import {API} from "../utils/globals";
const getChallengeFullDescription = (setState, challengeName) => {
const getChallengeFullDescription = (setDataState, setLoading, challengeName) => {
fetch(`${API}/challenge-readme/${challengeName}/markdown`)
.then(response => response.text())
.then(data => {
setState(data);
setDataState(data);
if (setLoading)
setLoading(false);
});
}

6
src/api/getChallengeInfo.js
View File

@ -1,10 +1,12 @@
import {API} from "../utils/globals";
const getChallengeInfo = (setState, challengeName) => {
const getChallengeInfo = (setDataState, setLoadingState, challengeName) => {
fetch(`${API}/challenge-info/${challengeName}`)
.then(response => response.json())
.then(data => {
setState(data);
setDataState(data);
if (setLoadingState)
setLoadingState(false);
});
}

6
src/api/getChallengeSubmissions.js
View File

@ -1,10 +1,12 @@
import {API} from "../utils/globals";
const getChallengeSubmissions = (setState, challengeName) => {
const getChallengeSubmissions = (setDataState, setLoading, challengeName) => {
fetch(`${API}/challenge-all-submissions/${challengeName}`)
.then(response => response.json())
.then(data => {
setState(data);
setDataState(data);
if (setLoading)
setLoading(false);
});
}

6
src/api/getChallenges.js
View File

@ -1,10 +1,12 @@
import {API} from "../utils/globals";
const getChallenges = (setState) => {
const getChallenges = (setDataState, setLoadingState) => {
fetch(`${API}/list-challenges`)
.then(response => response.json())
.then(data => {
setState(data);
setDataState(data);
if (setLoadingState)
setLoadingState(false);
});
}

50
src/components/elements/Loading.js Normal file
View File

@ -0,0 +1,50 @@
import React from "react";
import styled, {keyframes} from "styled-components";
import {Container} from "../../utils/containers";
const rotate = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`;
const SpinnerContainer = styled(Container)`
display: grid;
justify-content: center;
align-items: center;
height: 200px;
@media (min-width: ${({theme}) => theme.overMobile}) {
height: 350px;
}
`;
const LoadingSpinner = styled(Container)`
width: 50px;
height: 50px;
border: 10px solid ${({theme}) => theme.colors.dark01}; /* Light grey */
border-top: 10px solid ${({theme}) => theme.colors.green}; /* Black */
border-radius: 50%;
animation: ${rotate} 1.1s ease-in-out infinite;
@media (min-width: ${({theme}) => theme.overMobile}) {
width: 100px;
height: 100px;
}
`;
const Loading = (props) => {
return (
<>
{props.visible ? <SpinnerContainer>
<LoadingSpinner/>
</SpinnerContainer> : ''}
</>
);
}
export default Loading;

21
src/components/elements/Pager.js
View File

@ -49,15 +49,18 @@ const RightArrow = styled(Svg)`
`;
const Pager = (props) => {
return (
<PagerStyle>
<LeftArrow as='button' src={polygon} onClick={props.previousPage} size='cover'
backgroundColor={(props.pageNr === 1) ? 'transparent' : theme.colors.dark}/>
<CircleNumber number={props.pageNr}/>
<RightArrow as='button' src={polygon} onClick={props.nextPage} size='cover'
backgroundColor={(props.pageNr === props.pages) ? 'transparent' : theme.colors.dark}/>
</PagerStyle>
);
if (props.visible) {
return (
<PagerStyle>
<LeftArrow as='button' src={polygon} onClick={props.previousPage} size='cover'
backgroundColor={(props.pageNr === 1) ? 'transparent' : theme.colors.dark}/>
<CircleNumber number={props.pageNr}/>
<RightArrow as='button' src={polygon} onClick={props.nextPage} size='cover'
backgroundColor={(props.pageNr === props.pages) ? 'transparent' : theme.colors.dark}/>
</PagerStyle>
);
}
return '';
}
export default Pager;

8
src/components/elements/Table/Table.js
View File

@ -7,18 +7,20 @@ import Pager from "../Pager";
import {CALC_PAGES} from "../../../utils/globals";
import Media from "react-media";
import theme from "../../../utils/theme";
import Loading from "../Loading";
const Table = (props) => {
const headerElements = ['#', 'submitter', 'when', 'result', 'entries'];
const [challengeData, setChallengeData] = React.useState({});
const [pageNr, setPageNr] = React.useState(1);
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
challengeDataRequest();
});
const challengeDataRequest = () => {
getChallengeSubmissions(setChallengeData, props.challengeName);
getChallengeSubmissions(setChallengeData, setLoading, props.challengeName);
}
const renderSubmissions = () => {
@ -54,6 +56,7 @@ const Table = (props) => {
)
})}
</Grid>
<Loading visible={loading}/>
{renderSubmissions()}
</FlexColumn>
@ -74,6 +77,7 @@ const Table = (props) => {
)
})}
</Grid>
<Loading visible={loading}/>
{renderSubmissions()}
</FlexColumn>
);
@ -87,7 +91,7 @@ const Table = (props) => {
<Media query={theme.desktop}>
{desktopRender()}
</Media>
<Pager pageNr={pageNr} nextPage={nextPage} previousPage={previousPage}
<Pager visible={!loading} pageNr={pageNr} nextPage={nextPage} previousPage={previousPage}
pages={CALC_PAGES(challengeData.submissions ? challengeData.submissions : [])}/>
</>
);

8
src/components/sections/Readme.js
View File

@ -7,6 +7,7 @@ import getChallengeFullDescription from "../../api/getChallengeFullDescription";
import {markdown} from "markdown";
import styled from "styled-components";
import InfoList from "../elements/InfoList";
import Loading from "../elements/Loading";
const ReadmeStyle = styled(Body)`
h3 {
@ -52,9 +53,10 @@ const ReadmeStyle = styled(Body)`
const Readme = (props) => {
const [fullDescription, setFullDescription] = React.useState('');
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
getChallengeFullDescription(setFullDescription, props.challengeName);
getChallengeFullDescription(setFullDescription, setLoading, props.challengeName);
}, [props.challengeName]);
const parseMarkdownResponse = (response) => {
@ -148,10 +150,10 @@ const Readme = (props) => {
return (
<>
<Media query={theme.mobile}>
{mobileRender()}
{!loading ? mobileRender() : <Loading visible={loading}/>}
</Media>
<Media query={theme.desktop}>
{desktopRender()}
{!loading ? desktopRender() : <Loading visible={loading}/>}
</Media>
</>
);

10
src/pages/Challanges/Challenges.js
View File

@ -11,6 +11,7 @@ import theme from "../../utils/theme";
import cupIco from '../../assets/cup_ico.svg';
import getChallenges from "../../api/getChallenges";
import {CALC_PAGES} from "../../utils/globals";
import Loading from "../../components/elements/Loading";
const Challenges = () => {
const [pageNr, setPageNr] = React.useState(1);
@ -21,6 +22,7 @@ const Challenges = () => {
const [status, setStatus] = React.useState(0);
const [challengeType, setChallengeType] = React.useState(0);
const [commercial, setCommercial] = React.useState(0);
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
challengesRequest();
@ -28,7 +30,7 @@ const Challenges = () => {
const challengesRequest = () => {
getChallenges(setChallengesFromAPI);
getChallenges(setChallenges);
getChallenges(setChallenges, setLoading);
}
const sortByHandler = (value) => {
@ -90,10 +92,11 @@ const Challenges = () => {
</H1>
<Search searchQueryHandler={searchQueryHandler} toggleFiltersMenu={toggleFiltersMenu}/>
<FlexColumn width='100%'>
<Loading visible={loading}/>
{renderChallenges()}
</FlexColumn>
</FlexColumn>
<Pager pageNr={pageNr} pages={CALC_PAGES(challenges)}
<Pager visible={!loading} pageNr={pageNr} pages={CALC_PAGES(challenges)}
nextPage={nextPage} previousPage={previousPage}/>
</FlexColumn>
</>
@ -124,10 +127,11 @@ const Challenges = () => {
height='160px' backgroundColor={theme.colors.green}/>
</FlexRow>
<FlexColumn width='100%'>
<Loading visible={loading}/>
{renderChallenges()}
</FlexColumn>
</FlexColumn>
<Pager pageNr={pageNr} pages={CALC_PAGES(challenges)}
<Pager visible={!loading} pageNr={pageNr} pages={CALC_PAGES(challenges)}
nextPage={nextPage} previousPage={previousPage}/>
</FlexColumn>
</>

29
src/pages/Challanges/_renderChallenges.js
View File

@ -20,19 +20,22 @@ const ChallengesGrid = styled(Grid)`
const _renderChallenges = (pageNr, challenges) => {
const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
return (
<ChallengesGrid margin='32px 0' gridGap='32px 0'>
{challenges.slice(n, n + ELEMENTS_PER_PAGE).map((challenge, index) => {
return (
<MiniChallenge key={`challenge-${index}`} title={challenge.title} type={challenge.type}
description={challenge.description} metric={challenge.mainMetric}
bestScore={challenge.bestScore} baseline={challenge.baseline}
prize={challenge.prize} deadline={challenge.deadline}
name={challenge.name}/>
);
})}
</ChallengesGrid>
)
if (challenges && challenges !== []) {
return (
<ChallengesGrid margin='32px 0' gridGap='32px 0'>
{challenges.slice(n, n + ELEMENTS_PER_PAGE).map((challenge, index) => {
return (
<MiniChallenge key={`challenge-${index}`} title={challenge.title} type={challenge.type}
description={challenge.description} metric={challenge.mainMetric}
bestScore={challenge.bestScore} baseline={challenge.baseline}
prize={challenge.prize} deadline={challenge.deadline}
name={challenge.name}/>
);
})}
</ChallengesGrid>
)
}
return '';
}
export default _renderChallenges;

6
src/pages/Challenge.js
View File

@ -14,14 +14,16 @@ import DesktopChallengeMenu from "../components/elements/DesktopChallengeMenu";
import {RENDER_ICO} from "../utils/globals";
import textIco from "../assets/text_ico.svg";
import getChallengeInfo from "../api/getChallengeInfo";
import Loading from "../components/elements/Loading";
const Challenge = () => {
const challengeName = useParams().challengeId;
const [challenge, setChallenge] = React.useState([]);
const [section, setSection] = React.useState(0);
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
getChallengeInfo(setChallenge, challengeName);
getChallengeInfo(setChallenge, setLoading, challengeName);
}, [challengeName]);
const sectionRender = () => {
@ -45,6 +47,7 @@ const Challenge = () => {
const mobileRender = () => {
return (
<FlexColumn minHeight='100vh' gap='12px' alignmentY='flex-start' padding='66px 0 0 0'>
<Loading visible={loading}/>
<H1 as='h1' margin='0 0 8px 0' textAlign='center'>
{challenge.title}
</H1>
@ -61,6 +64,7 @@ const Challenge = () => {
<DesktopChallengeMenu setSection={setSection} section={section}/>
<FlexColumn minHeight='100vh' alignmentY='flex-start' padding='64px 0 64px 310px'>
<FlexRow gap='32px' margin='0 0 32px 0' padding='16px'>
<Loading visible={loading}/>
<FlexColumn alignmentX='flex-start' gap='24px' maxWidth='500px'>
<H1 as='h1'>
{challenge.title}

1
src/utils/colors.js
View File

@ -4,6 +4,7 @@ const colors = {
green03: 'rgba(27, 153, 139, 0.3)',
green05: 'rgba(27, 153, 139, 0.5)',
dark: '#343434',
dark01: 'rgba(52, 52, 52, 0.1)',
dark03: 'rgba(52, 52, 52, 0.3)',
dark04: 'rgba(52, 52, 52, 0.4)',
dark05: 'rgba(52, 52, 52, 0.5)',