get challenges from backend and correct searchQueryHandler
This commit is contained in:
parent
775a83d147
commit
f73961fe52
@ -38,8 +38,8 @@ const renderHoverLabel = (type) => {
|
||||
return hoverLabel('prize');
|
||||
case 'baseline':
|
||||
return hoverLabel('baseline');
|
||||
case 'timeLeft':
|
||||
return hoverLabel('time left');
|
||||
case 'deadline':
|
||||
return hoverLabel('deadline');
|
||||
case 'bestScore':
|
||||
return hoverLabel('best score');
|
||||
case 'text':
|
||||
@ -48,6 +48,8 @@ const renderHoverLabel = (type) => {
|
||||
return hoverLabel('image data');
|
||||
case 'tabular':
|
||||
return hoverLabel('tabular data');
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,7 +61,7 @@ const renderIco = (type) => {
|
||||
return coinsIco;
|
||||
case 'baseline':
|
||||
return baselineIco;
|
||||
case 'timeLeft':
|
||||
case 'deadline':
|
||||
return clockIco;
|
||||
case 'bestScore':
|
||||
return cupIco;
|
||||
@ -69,6 +71,8 @@ const renderIco = (type) => {
|
||||
return imageIco;
|
||||
case 'tabular':
|
||||
return tabularIco;
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
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 styled from "styled-components";
|
||||
import IconLabel from "./IconLabel";
|
||||
@ -42,6 +42,13 @@ const IconsGrid = styled(Grid)`
|
||||
`;
|
||||
|
||||
const MiniChallenge = (props) => {
|
||||
|
||||
const renderDescription = (description) => {
|
||||
if (description.length <= 200)
|
||||
return description;
|
||||
return `${description.slice(0, 100)}...`
|
||||
}
|
||||
|
||||
return (
|
||||
<ChallengeStyle as='article' alignmentX='flex-start'>
|
||||
<FlexRow margin='0 0 14px 0' gap='12px' width='100%' alignmentX='space-between'>
|
||||
@ -52,23 +59,23 @@ const MiniChallenge = (props) => {
|
||||
</FlexRow>
|
||||
<Line/>
|
||||
<Body as='p' margin='0 0 14px 0'>
|
||||
{props.describe}
|
||||
{props.description ? renderDescription(props.description) : 'xxx'}
|
||||
</Body>
|
||||
<IconsGrid>
|
||||
<IconLabel size='24px' gap='8px' type={'metric'}>
|
||||
{props.metric}
|
||||
<IconLabel size='24px' gap='8px' type='metric'>
|
||||
{props.metric ? props.metric : 'xxx'}
|
||||
</IconLabel>
|
||||
<IconLabel size='24px' gap='8px' type={'bestScore'}>
|
||||
{props.bestScore}
|
||||
<IconLabel size='24px' gap='8px' type='bestScore'>
|
||||
{props.bestScore ? props.bestScore : 'xxx'}
|
||||
</IconLabel>
|
||||
<IconLabel size='24px' gap='8px' type={'timeLeft'}>
|
||||
{props.timeLeft}
|
||||
<IconLabel size='24px' gap='8px' type='deadline'>
|
||||
{props.deadline ? props.deadline.slice(0, 10) : 'xxx'}
|
||||
</IconLabel>
|
||||
<IconLabel size='24px' gap='8px' type={'baseline'}>
|
||||
{props.baseline}
|
||||
<IconLabel size='24px' gap='8px' type='baseline'>
|
||||
{props.baseline ? props.baseline : 'xxx'}
|
||||
</IconLabel>
|
||||
<IconLabel size='24px' gap='8px' type={'prize'}>
|
||||
{props.prize}
|
||||
<IconLabel size='24px' gap='8px' type='prize'>
|
||||
{props.prize ? props.prize : 'xxx'}
|
||||
</IconLabel>
|
||||
</IconsGrid>
|
||||
</ChallengeStyle>
|
||||
|
||||
@ -4,19 +4,33 @@ import {FlexColumn, Grid} from "../utils/containers";
|
||||
import Search from "../components/elements/Search";
|
||||
import MiniChallenge from "../components/elements/MiniChallenge";
|
||||
import Pager from "../components/elements/Pager";
|
||||
import challengesResp from "../prototypeData/challenges";
|
||||
import {ELEMENTS_PER_PAGE} from "../utils/globals";
|
||||
import {ELEMENTS_PER_PAGE, API} from "../utils/globals";
|
||||
import FiltersMenu from "../components/elements/FiltersMenu";
|
||||
import _searchQueryHandler from "./_searchQueryHandler";
|
||||
|
||||
const Challenges = () => {
|
||||
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 [sortBy, setSortBy] = React.useState(0);
|
||||
const [status, setStatus] = React.useState(0);
|
||||
const [challengeType, setChallengeType] = 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) => {
|
||||
setSortBy(value);
|
||||
}
|
||||
@ -38,20 +52,7 @@ const Challenges = () => {
|
||||
}
|
||||
|
||||
const searchQueryHandler = (event) => {
|
||||
let searchQuery = event.target.value;
|
||||
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);
|
||||
}
|
||||
_searchQueryHandler(event, challengesFromAPI, setPageNr, setChallenges);
|
||||
}
|
||||
|
||||
const nextPage = () => {
|
||||
@ -74,9 +75,9 @@ const Challenges = () => {
|
||||
challenges.slice(n, n + ELEMENTS_PER_PAGE).map((challenge, index) => {
|
||||
return (
|
||||
<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}
|
||||
prize={challenge.prize} timeLeft={challenge.timeLeft}/>
|
||||
prize={challenge.prize} deadline={challenge.deadline}/>
|
||||
);
|
||||
})
|
||||
)
|
||||
|
||||
18
src/pages/_searchQueryHandler.js
Normal file
18
src/pages/_searchQueryHandler.js
Normal 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;
|
||||
@ -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};
|
||||
Loading…
Reference in New Issue
Block a user