diff --git a/src/components/elements/MiniChallenge.js b/src/components/elements/MiniChallenge.js index 885875a..6580f96 100644 --- a/src/components/elements/MiniChallenge.js +++ b/src/components/elements/MiniChallenge.js @@ -56,19 +56,19 @@ const MiniChallenge = (props) => { - Haversine + {props.metric} - 79% + {props.bestScore} - 6 days + {props.timeLeft} - 55% + {props.baseline} - 150000 PLN + {props.prize} diff --git a/src/components/elements/Search.js b/src/components/elements/Search.js index 03fe295..782e569 100644 --- a/src/components/elements/Search.js +++ b/src/components/elements/Search.js @@ -31,11 +31,11 @@ const SearchStyle = styled(FlexRow)` } `; -const Search = () => { +const Search = (props) => { return ( - + props.searchQueryHandler(event)}/> ); diff --git a/src/pages/Challenges.js b/src/pages/Challenges.js index 70eed3c..97029fa 100644 --- a/src/pages/Challenges.js +++ b/src/pages/Challenges.js @@ -4,15 +4,36 @@ 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 challenges from "../prototypeData/challenges"; +import challengesResp from "../prototypeData/challenges"; import {ELEMENTS_PER_PAGE} from "../utils/globals"; const Challenges = () => { + const calcPages = (challenges) => { + return Math.ceil(challenges.length / ELEMENTS_PER_PAGE); + } + const [pageNr, setPageNr] = React.useState(1); - const pages = Math.ceil(challenges.length / ELEMENTS_PER_PAGE); + const [challenges, setChallenges] = React.useState(challengesResp); + + 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); + } + } const nextPage = () => { - if (pageNr !== pages) { + if (pageNr !== calcPages(challenges)) { let newPage = pageNr + 1; setPageNr(newPage); } @@ -26,12 +47,15 @@ const Challenges = () => { } const renderChallenges = () => { + const n = (pageNr - 1) * ELEMENTS_PER_PAGE; return ( challenges.slice(n, n + ELEMENTS_PER_PAGE).map((challenge, index) => { return ( + describe={challenge.describe} metric={challenge.metric} + bestScore={challenge.bestScore} baseline={challenge.baseline} + prize={challenge.prize} timeLeft={challenge.timeLeft}/> ); }) ) @@ -44,14 +68,14 @@ const Challenges = () => {

Challenges

- + {renderChallenges()} - ); diff --git a/src/prototypeData/challenges.js b/src/prototypeData/challenges.js index 7d278e3..5207043 100644 --- a/src/prototypeData/challenges.js +++ b/src/prototypeData/challenges.js @@ -3,238 +3,448 @@ const challenges = [ title: 'Challenging America geo prediction', describe: 'Guess publication location for a piece of text', type: 'text', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Challenging America geo prediction', describe: 'Guess publication location for a piece of text', type: 'image', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Challenging America geo prediction', describe: 'Guess publication location for a piece of text', type: 'tabular', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 1', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'text', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 2', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'tabular', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 3', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'image', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 4', describe: 'Guess publication location for a piece of text', type: 'text', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 5', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'tabular', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 6', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'image', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 7', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'text', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 8', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'tabular', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 9', describe: 'Guess publication location for a piece of text', type: 'text', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 10', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'image', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 11', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'tabular', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Challenging America geo prediction', describe: 'Guess publication location for a piece of text', type: 'text', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Challenging America geo prediction', describe: 'Guess publication location for a piece of text', type: 'image', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Challenging America geo prediction', describe: 'Guess publication location for a piece of text', type: 'tabular', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 1', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'text', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 2', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'tabular', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 3', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'image', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 4', describe: 'Guess publication location for a piece of text', type: 'text', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 5', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'tabular', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 6', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'image', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 7', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'text', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 8', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'tabular', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 9', describe: 'Guess publication location for a piece of text', type: 'text', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 10', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'image', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 11', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'tabular', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Challenging America geo prediction', describe: 'Guess publication location for a piece of text', type: 'text', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Challenging America geo prediction', describe: 'Guess publication location for a piece of text', type: 'image', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Challenging America geo prediction', describe: 'Guess publication location for a piece of text', type: 'tabular', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 1', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'text', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 2', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'tabular', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 3', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'image', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 4', describe: 'Guess publication location for a piece of text', type: 'text', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 5', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'tabular', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 6', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'image', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 7', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'text', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '2 hours', }, { title: 'Example 8', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'tabular', + metric: 'Haversine', + bestScore: '79%', + baseline: '55%', + prize: '5000 PLN', + timeLeft: '6 days', }, { title: 'Example 9', describe: 'Guess publication location for a piece of text', type: 'text', + metric: 'Haversine', + bestScore: '79%', + baseline: '60%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 10', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'image', + metric: 'Haversine', + bestScore: '90%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', }, { title: 'Example 11', describe: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nunc odio, ut lacinia mi vestibulum eget. Donec non tellus lorem. Aliquam maximus semper accumsan.`, type: 'tabular', + metric: 'RMSE', + bestScore: '79%', + baseline: '55%', + prize: '150000 PLN', + timeLeft: '6 days', } ]