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

search implementation

Browse Source
This commit is contained in:
mattyl006 2022-07-08 15:28:52 +02:00
parent 7139910b7f
commit 9b1742880b
4 changed files with 247 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -56,19 +56,19 @@ const MiniChallenge = (props) => {
</Body>
<IconsGrid>
<IconLabel size='24px' gap='8px' type={'metric'}>
Haversine
{props.metric}
</IconLabel>
<IconLabel size='24px' gap='8px' type={'bestScore'}>
79%
{props.bestScore}
</IconLabel>
<IconLabel size='24px' gap='8px' type={'timeLeft'}>
6 days
{props.timeLeft}
</IconLabel>
<IconLabel size='24px' gap='8px' type={'baseline'}>
55%
{props.baseline}
</IconLabel>
<IconLabel size='24px' gap='8px' type={'prize'}>
150000 PLN
{props.prize}
</IconLabel>
</IconsGrid>
</ChallengeStyle>

4
src/components/elements/Search.js
View File

@ -31,11 +31,11 @@ const SearchStyle = styled(FlexRow)`
}
`;
const Search = () => {
const Search = (props) => {
return (
<SearchStyle>
<Svg src={loopIco}/>
<Body as='input'/>
<Body as='input' onChange={(event) => props.searchQueryHandler(event)}/>
<Svg as='button' src={filtersIco}/>
</SearchStyle>
);

36
src/pages/Challenges.js
View File

@ -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 (
<MiniChallenge key={index} title={challenge.title} type={challenge.type}
describe={challenge.describe}/>
describe={challenge.describe} metric={challenge.metric}
bestScore={challenge.bestScore} baseline={challenge.baseline}
prize={challenge.prize} timeLeft={challenge.timeLeft}/>
);
})
)
@ -44,14 +68,14 @@ const Challenges = () => {
<H1 as='h1' margin='0 0 20px 0'>
Challenges
</H1>
<Search/>
<Search searchQueryHandler={searchQueryHandler}/>
<FlexColumn width='100%'>
<Grid margin='32px 0' gridGap='32px 0'>
{renderChallenges()}
</Grid>
</FlexColumn>
</FlexColumn>
<Pager pageNr={pageNr} pages={pages}
<Pager pageNr={pageNr} pages={calcPages(challenges)}
nextPage={nextPage} previousPage={previousPage}/>
</FlexColumn>
);

210
src/prototypeData/challenges.js vendored
View File

@ -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',
}
]