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

mobile Challenge menu

Browse Source
This commit is contained in:
mattyl006 2022-07-15 10:30:43 +02:00
parent 90f3af27ee
commit 5317dc9625
6 changed files with 83 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/api/getChallenges.js Normal file
View File

@ -0,0 +1,11 @@
import {API} from "../utils/globals";
const getChallenges = (setState) => {
fetch(`${API}/list-challenges`)
.then(response => response.json())
.then(data => {
setState(data);
});
}
export default getChallenges;

10
src/components/elements/MiniChallenge.js
View File

@ -5,6 +5,7 @@ import styled from "styled-components";
import IconLabel from "./IconLabel"; import IconLabel from "./IconLabel";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import {CHALLENGE_PAGE, MINI_DESCRIPTION_LENGTH} from "../../utils/globals"; import {CHALLENGE_PAGE, MINI_DESCRIPTION_LENGTH} from "../../utils/globals";
import theme from "../../utils/theme";
const ChallengeStyle = styled(FlexColumn)` const ChallengeStyle = styled(FlexColumn)`
padding: 12px; padding: 12px;
@ -38,13 +39,6 @@ const ChallengeStyle = styled(FlexColumn)`
} }
`; `;
const Line = styled(Container)`
height: 1px;
width: 85%;
background-color: ${({theme}) => theme.colors.dark05};
margin-bottom: 14px;
`;
const IconsGrid = styled(Grid)` const IconsGrid = styled(Grid)`
width: 100%; width: 100%;
grid-gap: 14px; grid-gap: 14px;
@ -72,7 +66,7 @@ const MiniChallenge = (props) => {
</H3> </H3>
{props.type ? <IconLabel type={props.type} size='30px'/> : 'xxx'} {props.type ? <IconLabel type={props.type} size='30px'/> : 'xxx'}
</FlexRow> </FlexRow>
<Line/> <Container margin='0 0 14px 0' width='85%' height='1px' backgroundColor={theme.colors.dark05}/>
<Body as='p' margin='0 0 14px 0'> <Body as='p' margin='0 0 14px 0'>
{props.description ? renderDescription(props.description) : 'xxx'} {props.description ? renderDescription(props.description) : 'xxx'}
</Body> </Body>

11
src/components/elements/MobileChallengeMenu.js Normal file
View File

@ -0,0 +1,11 @@
import React from "react";
const MobileChallengeMenu = () => {
return (
<>
</>
);
}
export default MobileChallengeMenu;

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

@ -6,11 +6,11 @@ import Pager from "../../components/elements/Pager";
import {ELEMENTS_PER_PAGE} from "../../utils/globals"; import {ELEMENTS_PER_PAGE} from "../../utils/globals";
import FiltersMenu from "../../components/elements/FiltersMenu"; import FiltersMenu from "../../components/elements/FiltersMenu";
import _searchQueryHandler from "./_searchQueryHandler"; import _searchQueryHandler from "./_searchQueryHandler";
import _challengesRequest from "./_challengesRequest";
import _renderChallenges from "./_renderChallenges"; import _renderChallenges from "./_renderChallenges";
import Media from "react-media"; import Media from "react-media";
import theme from "../../utils/theme"; import theme from "../../utils/theme";
import cupIco from '../../assets/cup_ico.svg'; import cupIco from '../../assets/cup_ico.svg';
import getChallenges from "../../api/getChallenges";
const Challenges = () => { const Challenges = () => {
const [pageNr, setPageNr] = React.useState(1); const [pageNr, setPageNr] = React.useState(1);
@ -27,7 +27,8 @@ const Challenges = () => {
}, []); }, []);
const challengesRequest = () => { const challengesRequest = () => {
_challengesRequest(setChallengesFromAPI, setChallenges); getChallenges(setChallengesFromAPI);
getChallenges(setChallenges);
} }
const sortByHandler = (value) => { const sortByHandler = (value) => {

12
src/pages/Challanges/_challengesRequest.js
View File

@ -1,12 +0,0 @@
import {API} from "../../utils/globals";
const _challengesRequest = (setChallengesFromAPI, setChallenges) => {
fetch(`${API}/list-challenges`)
.then(response => response.json())
.then(data => {
setChallengesFromAPI(data);
setChallenges(data);
});
}
export default _challengesRequest;

63
src/pages/Challenge.js
View File

@ -1,15 +1,64 @@
import React from "react"; import React from "react";
import {FlexColumn} from "../utils/containers"; import {Container, FlexColumn, FlexRow} from "../utils/containers";
import {useParams} from "react-router-dom"; import {Link, useParams} from "react-router-dom";
import {H1} from "../utils/fonts"; import {H1, Medium} from "../utils/fonts";
import getChallenges from "../api/getChallenges";
import theme from "../utils/theme";
import styled from "styled-components";
const ChallengeLink = styled(Medium)`
cursor: pointer;
transition: color 0.3s ease-in-out;
&:hover {
color: ${({theme}) => theme.colors.green};
}
`;
const Challenge = () => { const Challenge = () => {
const challengeId = useParams().challengeId; const challengeName = useParams().challengeId;
const [challenges, setChallenges] = React.useState([]);
const getChallenge = () => {
if (challenges.length !== 0) {
for (let challenge of challenges) {
if (challenge.name === challengeName)
return challenge
}
}
return '';
}
React.useEffect(() => {
getChallenges(setChallenges);
}, []);
return ( return (
<FlexColumn minHeight='100vh'> <FlexColumn minHeight='100vh' gap='12px' alignmentY='flex-start' padding='66px 0 0 0'>
<H1> <H1 margin='0 0 8px 0'>
{challengeId} {getChallenge().title}
</H1> </H1>
<FlexRow gap='32px'>
<ChallengeLink as={Link} to='/'>
Leaderboard
</ChallengeLink>
<ChallengeLink as={Link} to='/'>
Readme
</ChallengeLink>
<ChallengeLink as={Link} to='/'>
How to
</ChallengeLink>
</FlexRow>
<FlexRow gap='32px'>
<ChallengeLink as={Link} to='/'>
Submit
</ChallengeLink>
<ChallengeLink as={Link} to='/'>
My entries
</ChallengeLink>
</FlexRow>
<Container width='75%' height='1px' backgroundColor={theme.colors.dark}/>
</FlexColumn> </FlexColumn>
); );
} }