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

get challenges from backend and correct searchQueryHandler

Browse Source
This commit is contained in:
mattyl006 2022-07-12 13:37:28 +02:00
parent 775a83d147
commit f73961fe52
5 changed files with 67 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,8 +38,8 @@ const renderHoverLabel = (type) => {
return hoverLabel('prize'); return hoverLabel('prize');
case 'baseline': case 'baseline':
return hoverLabel('baseline'); return hoverLabel('baseline');
case 'timeLeft': case 'deadline':
return hoverLabel('time left'); return hoverLabel('deadline');
case 'bestScore': case 'bestScore':
return hoverLabel('best score'); return hoverLabel('best score');
case 'text': case 'text':
@ -48,6 +48,8 @@ const renderHoverLabel = (type) => {
return hoverLabel('image data'); return hoverLabel('image data');
case 'tabular': case 'tabular':
return hoverLabel('tabular data'); return hoverLabel('tabular data');
default:
return '';
} }
} }
@ -59,7 +61,7 @@ const renderIco = (type) => {
return coinsIco; return coinsIco;
case 'baseline': case 'baseline':
return baselineIco; return baselineIco;
case 'timeLeft': case 'deadline':
return clockIco; return clockIco;
case 'bestScore': case 'bestScore':
return cupIco; return cupIco;
@ -69,6 +71,8 @@ const renderIco = (type) => {
return imageIco; return imageIco;
case 'tabular': case 'tabular':
return tabularIco; return tabularIco;
default:
return '';
} }
} }

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

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import {Container, FlexColumn, FlexRow, Grid, Svg} from "../../utils/containers"; import {Container, FlexColumn, FlexRow, Grid} from "../../utils/containers";
import {Body, H3} from "../../utils/fonts"; import {Body, H3} from "../../utils/fonts";
import styled from "styled-components"; import styled from "styled-components";
import IconLabel from "./IconLabel"; import IconLabel from "./IconLabel";
@ -42,6 +42,13 @@ const IconsGrid = styled(Grid)`
`; `;
const MiniChallenge = (props) => { const MiniChallenge = (props) => {
const renderDescription = (description) => {
if (description.length <= 200)
return description;
return `${description.slice(0, 100)}...`
}
return ( return (
<ChallengeStyle as='article' alignmentX='flex-start'> <ChallengeStyle as='article' alignmentX='flex-start'>
<FlexRow margin='0 0 14px 0' gap='12px' width='100%' alignmentX='space-between'> <FlexRow margin='0 0 14px 0' gap='12px' width='100%' alignmentX='space-between'>
@ -52,23 +59,23 @@ const MiniChallenge = (props) => {
</FlexRow> </FlexRow>
<Line/> <Line/>
<Body as='p' margin='0 0 14px 0'> <Body as='p' margin='0 0 14px 0'>
{props.describe} {props.description ? renderDescription(props.description) : 'xxx'}
</Body> </Body>
<IconsGrid> <IconsGrid>
<IconLabel size='24px' gap='8px' type={'metric'}> <IconLabel size='24px' gap='8px' type='metric'>
{props.metric} {props.metric ? props.metric : 'xxx'}
</IconLabel> </IconLabel>
<IconLabel size='24px' gap='8px' type={'bestScore'}> <IconLabel size='24px' gap='8px' type='bestScore'>
{props.bestScore} {props.bestScore ? props.bestScore : 'xxx'}
</IconLabel> </IconLabel>
<IconLabel size='24px' gap='8px' type={'timeLeft'}> <IconLabel size='24px' gap='8px' type='deadline'>
{props.timeLeft} {props.deadline ? props.deadline.slice(0, 10) : 'xxx'}
</IconLabel> </IconLabel>
<IconLabel size='24px' gap='8px' type={'baseline'}> <IconLabel size='24px' gap='8px' type='baseline'>
{props.baseline} {props.baseline ? props.baseline : 'xxx'}
</IconLabel> </IconLabel>
<IconLabel size='24px' gap='8px' type={'prize'}> <IconLabel size='24px' gap='8px' type='prize'>
{props.prize} {props.prize ? props.prize : 'xxx'}
</IconLabel> </IconLabel>
</IconsGrid> </IconsGrid>
</ChallengeStyle> </ChallengeStyle>

39
src/pages/Challenges.js
View File

@ -4,19 +4,33 @@ import {FlexColumn, Grid} from "../utils/containers";
import Search from "../components/elements/Search"; import Search from "../components/elements/Search";
import MiniChallenge from "../components/elements/MiniChallenge"; import MiniChallenge from "../components/elements/MiniChallenge";
import Pager from "../components/elements/Pager"; import Pager from "../components/elements/Pager";
import challengesResp from "../prototypeData/challenges"; import {ELEMENTS_PER_PAGE, API} 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";
const Challenges = () => { const Challenges = () => {
const [pageNr, setPageNr] = React.useState(1); const [pageNr, setPageNr] = React.useState(1);
const [challenges, setChallenges] = React.useState(challengesResp); const [challengesFromAPI, setChallengesFromAPI] = React.useState([]);
const [challenges, setChallenges] = React.useState([]);
const [filtersMenu, setFiltersMenu] = React.useState(false); const [filtersMenu, setFiltersMenu] = React.useState(false);
const [sortBy, setSortBy] = React.useState(0); const [sortBy, setSortBy] = React.useState(0);
const [status, setStatus] = React.useState(0); const [status, setStatus] = React.useState(0);
const [challengeType, setChallengeType] = React.useState(0); const [challengeType, setChallengeType] = React.useState(0);
const [commercial, setCommercial] = React.useState(0); const [commercial, setCommercial] = React.useState(0);
React.useEffect(() => {
challengesRequest();
}, []);
const challengesRequest = () => {
fetch(`${API}/list-challenges`)
.then(response => response.json())
.then(data => {
setChallengesFromAPI(data);
setChallenges(data);
});
}
const sortByHandler = (value) => { const sortByHandler = (value) => {
setSortBy(value); setSortBy(value);
} }
@ -38,20 +52,7 @@ const Challenges = () => {
} }
const searchQueryHandler = (event) => { const searchQueryHandler = (event) => {
let searchQuery = event.target.value; _searchQueryHandler(event, challengesFromAPI, setPageNr, setChallenges);
let challengesToRender = [];
setPageNr(1);
if (searchQuery === '')
setChallenges(challengesResp)
else {
for (let challenge of challengesResp) {
let str = `${challenge.title} ${challenge.describe} ${challenge.type} ${challenge.metric}
${challenge.bestScore} ${challenge.timeLeft} ${challenge.baseline} ${challenge.prize}`;
if (str.toLowerCase().includes(searchQuery.toLowerCase()))
challengesToRender.push(challenge);
}
setChallenges(challengesToRender);
}
} }
const nextPage = () => { const nextPage = () => {
@ -74,9 +75,9 @@ const Challenges = () => {
challenges.slice(n, n + ELEMENTS_PER_PAGE).map((challenge, index) => { challenges.slice(n, n + ELEMENTS_PER_PAGE).map((challenge, index) => {
return ( return (
<MiniChallenge key={`challenge-${index}`} title={challenge.title} type={challenge.type} <MiniChallenge key={`challenge-${index}`} title={challenge.title} type={challenge.type}
describe={challenge.describe} metric={challenge.metric} description={challenge.description} metric={challenge.mainMetric}
bestScore={challenge.bestScore} baseline={challenge.baseline} bestScore={challenge.bestScore} baseline={challenge.baseline}
prize={challenge.prize} timeLeft={challenge.timeLeft}/> prize={challenge.prize} deadline={challenge.deadline}/>
); );
}) })
) )

18
src/pages/_searchQueryHandler.js Normal file
View File

@ -0,0 +1,18 @@
const _searchQueryHandler = (event, challengesFromAPI, setPageNr, setChallenges) => {
let searchQuery = event.target.value;
let challengesToRender = [];
setPageNr(1);
if (searchQuery === '')
setChallenges(challengesFromAPI);
else {
for (let challenge of challengesFromAPI) {
let str = `${challenge.title} ${challenge.description} ${challenge.type} ${challenge.mainMetric}
${challenge.bestScore} ${challenge.deadline} ${challenge.baseline} ${challenge.prize}`;
if (str.toLowerCase().includes(searchQuery.toLowerCase()))
challengesToRender.push(challenge);
}
setChallenges(challengesToRender);
}
}
export default _searchQueryHandler;

5
src/utils/globals.js
View File

@ -1,3 +1,4 @@
const ELEMENTS_PER_PAGE = 12 const ELEMENTS_PER_PAGE = 12;
const API = 'https://gonito.net/api';
export {ELEMENTS_PER_PAGE}; export {ELEMENTS_PER_PAGE, API};