diff --git a/src/components/elements/Table.js b/src/components/elements/Table.js index d0d588c..9c377c6 100644 --- a/src/components/elements/Table.js +++ b/src/components/elements/Table.js @@ -2,9 +2,7 @@ import React from 'react'; import {FlexColumn, FlexRow, Grid, Svg} from '../../utils/containers'; import Media from 'react-media'; import theme from '../../utils/theme'; -import Loading from './Loading'; -import PropsTypes from 'prop-types'; -import {ELEMENTS_PER_PAGE, IS_MOBILE} from '../../utils/globals'; +import {ELEMENTS_PER_PAGE} from '../../utils/globals'; import {Body, Medium} from '../../utils/fonts'; import arrow from '../../assets/arrow.svg'; import styled from 'styled-components'; @@ -32,68 +30,71 @@ const Table = (props) => { }; const desktopRender = () => { - const n = (props.pageNr - 1) * ELEMENTS_PER_PAGE; - let submissionToMap = props.submissions.slice(n, n + ELEMENTS_PER_PAGE); + const n = (props.pageNr - 1) * (ELEMENTS_PER_PAGE * 2); + console.log(props.elements); + let elementsToMap = props.elements.slice(n, n + (ELEMENTS_PER_PAGE * 2)); return ( - {submissionToMap.map(({ - submitter, - when, - evaluations, - times - }, index) => { + + {props.headerElements.map((elem, i) => { + return ( + { + props.sortByUpdate(elem); + forceUpdate(); + }}> + + {elem} + + {elem !== '#' ? + <> + + + : ''} + + ); + })} + + + {elementsToMap.map((elem, index) => { return ( - {index === 0 ? props.headerElements.map((elem, i) => { + {props.staticColumnElements.map((elemName, i) => { return ( - { - props.sortByUpdate(elem); - forceUpdate(); - }}> - - {elem} - - {elem !== '#' ? - <> - - - : ''} - - ); - }) : ''} - {index === 0 ? : ''} - - {index + n} - - - {submitter ? submitter : '[anonymous]'} - - {!IS_MOBILE() ? evaluations.map((metric, i) => { - return ( - - {metric.score.slice(0, 7)} + + {elemName.format ? elemName.format(elem[elemName.name]) : elem[elemName.name]} ); - }) : - {evaluations[0] ? evaluations[0].score.slice(0, 7) : 'xxx'} - } - - {times ? times : 1} - - - {when ? `${when.slice(11, 16)} ${when.slice(0, 10)}` - : 'xxx'} - - {index !== 0 ? : ''} + })} + {props.iterableColumnElement ? elem[props.iterableColumnElement.name].map((iterableElem, i) => { + return ( + + {props.iterableColumnElement.format ? + props.iterableColumnElement.format(iterableElem) : iterableElem} + + ); + }) : ''} + {props.myEntries ? props.myEntries.tests.map((test, i) => { + return ( + + {props.renderEvalResult(elem.evaluations, test)} + + ); + }) : ''} ); })} @@ -104,29 +105,14 @@ const Table = (props) => { return ( <> - - {!props.loading ? mobileRender() : ''} + {mobileRender()} - {!props.loading ? desktopRender() : ''} + {desktopRender()} ); }; -Table.propTypes = { - challengeName: PropsTypes.string, - loading: PropsTypes.bool, - renderElements: PropsTypes.func, - headerElements: PropsTypes.arrayOf(PropsTypes.string), -}; - -Table.defaultProps = { - challengeName: '', - loading: true, - renderElements: null, - headerElements: [], -}; - export default Table; \ No newline at end of file diff --git a/src/components/sections/Leaderboard/Leaderboard.js b/src/components/sections/Leaderboard/Leaderboard.js index 88c9159..ef51306 100644 --- a/src/components/sections/Leaderboard/Leaderboard.js +++ b/src/components/sections/Leaderboard/Leaderboard.js @@ -7,9 +7,10 @@ import Table from '../../elements/Table'; import PropsTypes from 'prop-types'; import getChallengeLeaderboard from '../../../api/getChallengeLeaderboard'; import _tableSearchQueryHandler from './_tableSearchQueryHandler'; -import {CALC_PAGES} from '../../../utils/globals'; +import {CALC_PAGES, RENDER_WHEN} from '../../../utils/globals'; import Search from '../../elements/Search'; import Pager from '../../elements/Pager'; +import Loading from '../../elements/Loading'; const Leaderboard = (props) => { const [entriesFromApi, setEntriesFromApi] = React.useState([]); @@ -82,6 +83,7 @@ const Leaderboard = (props) => { }; const sortByUpdate = (elem) => { + let metricIndex = 0; let newEntries = entries; console.log(elem); switch (elem) { @@ -113,8 +115,7 @@ const Leaderboard = (props) => { } break; default: - // eslint-disable-next-line no-case-declarations - let metricIndex = getMetricIndex(elem); + metricIndex = getMetricIndex(elem); if (scoreSorted) { newEntries = newEntries.sort((a, b) => b.evaluations[metricIndex].score - a.evaluations[metricIndex].score); setScoreSorted(false); @@ -145,19 +146,43 @@ const Leaderboard = (props) => { ); }; + const evaluationsFormat = (evaluate) => { + return evaluate.score.slice(0, 7); + }; + const desktopRender = () => { return (

Leaderboard

- - - + {!loading ? + <> + +
+ + + : } ); }; diff --git a/src/components/sections/MyEntries/MyEntries.js b/src/components/sections/MyEntries.js similarity index 50% rename from src/components/sections/MyEntries/MyEntries.js rename to src/components/sections/MyEntries.js index 48ab1d3..5825876 100644 --- a/src/components/sections/MyEntries/MyEntries.js +++ b/src/components/sections/MyEntries.js @@ -1,14 +1,14 @@ import React from 'react'; -import {FlexColumn} from '../../../utils/containers'; -import {H2} from '../../../utils/fonts'; -import getMyEntries from '../../../api/getMyEntries'; -import Pager from '../../elements/Pager'; -import {CALC_PAGES} from '../../../utils/globals'; +import {FlexColumn} from '../../utils/containers'; +import {H2} from '../../utils/fonts'; +import getMyEntries from '../../api/getMyEntries'; +import Pager from '../elements/Pager'; +import {CALC_PAGES, RENDER_WHEN} from '../../utils/globals'; import Media from 'react-media'; -import theme from '../../../utils/theme'; -import _tableSearchQueryHandler from '../Leaderboard/_tableSearchQueryHandler'; -import Loading from '../../elements/Loading'; -import _renderMySubmissions from './_renderMySubmissions'; +import theme from '../../utils/theme'; +import _tableSearchQueryHandler from './Leaderboard/_tableSearchQueryHandler'; +import Loading from '../elements/Loading'; +import Table from '../elements/Table'; const MyEntries = (props) => { const [myEntriesFromAPI, setMyEntriesFromAPI] = React.useState({}); @@ -23,11 +23,6 @@ const MyEntries = (props) => { challengesRequest(); }, []); - const renderSubmissions = (gridGap, headerElements) => { - return _renderMySubmissions(pageNr, myEntries - ? myEntries : [], gridGap, metricChoose, sortBy, headerElements); - }; - const tableSearchQueryHandler = (event) => { _tableSearchQueryHandler(event, myEntriesFromAPI, setPageNr, setMyEntries); }; @@ -67,18 +62,28 @@ const MyEntries = (props) => { }; const challengesRequest = () => { - getMyEntries(props.challengeName, setMyEntriesFromAPI); + getMyEntries(props.challengeName, setMyEntriesFromAPI, setLoading); getMyEntries(props.challengeName, setMyEntries, setLoading); }; - const sortByHandler = (value) => { - setSortBy(value); - }; - const mobileRender = () => { } + const renderEvalResult = (evaluations, test) => { + for (let myEval of evaluations) { + if (myEval.test.name === test.name && myEval.test.metric === test.metric) { + return myEval.score.slice(0, 7); + } + } + return 'xxx'; + }; + + const sortByUpdate = (elem) => { + let newEntries = myEntries; + return myEntries; + }; + const desktopRender = () => { if (loading) { return ( @@ -90,16 +95,27 @@ const MyEntries = (props) => {

My entries

- - {renderSubmissions('32px', getMyEntriesHeader())} - - {/*
*/} - + {myEntries.submissions ? + <> +
+ + + : } ); } diff --git a/src/components/sections/MyEntries/_renderMySubmissions.js b/src/components/sections/MyEntries/_renderMySubmissions.js deleted file mode 100644 index 4853835..0000000 --- a/src/components/sections/MyEntries/_renderMySubmissions.js +++ /dev/null @@ -1,91 +0,0 @@ -import {ELEMENTS_PER_PAGE, IS_MOBILE} from '../../../utils/globals'; -import {FlexColumn, FlexRow, Grid, Svg} from '../../../utils/containers'; -import {Body, Medium} from '../../../utils/fonts'; -import styled from 'styled-components'; -import React from 'react'; -import theme from '../../../utils/theme'; -import arrow from '../../../assets/arrow.svg'; - -const Line = styled(FlexRow)` - position: absolute; - top: ${({top}) => top ? top : 'auto'}; - bottom: ${({bottom}) => bottom ? bottom : 'auto'}; - left: 0; - width: 100%; - background-color: ${({theme}) => theme.colors.dark04}; - height: ${({height}) => height ? height : '1px'}; -`; - -const renderEvalResult = (evaluations, test) => { - for (let myEval of evaluations) { - if (myEval.test.name === test.name && myEval.test.metric === test.metric) { - return myEval.score.slice(0, 7); - } - } - return 'xxx'; -}; - -const _renderMySubmissions = (pageNr, myEntries, gridGap, metricChoose, sortBy, headerElements) => { - const n = (pageNr - 1) * ELEMENTS_PER_PAGE; - - if (myEntries) { - // submissions = sortBySwitch(submissions, metricChoose, sortBy); - let submissions = myEntries.submissions.slice(n, n + ELEMENTS_PER_PAGE); - return ( - - {submissions.map(({ - submitter, - when, - evaluations, - times, - description - }, index) => { - return ( - - {index === 0 ? headerElements.map((elem, i) => { - return ( - - - {elem} - - {elem !== '#' ? - <> - - - : ''} - - ); - }) : ''} - {index === 0 ? : ''} - - {index + n + 1} - - {myEntries.tests.map((test, i) => { - return ( - - {renderEvalResult(evaluations, test)} - - ); - })} - - {when ? `${when.slice(11, 16)} ${when.slice(0, 10)}` - : 'xxx'} - - {index !== 0 ? : ''} - - ); - })} - - ); - } -}; - -export default _renderMySubmissions; \ No newline at end of file diff --git a/src/pages/Challenge.js b/src/pages/Challenge.js index 838f3d0..5e0a7de 100644 --- a/src/pages/Challenge.js +++ b/src/pages/Challenge.js @@ -7,7 +7,7 @@ import MobileChallengeMenu from '../components/elements/MobileChallengeMenu'; import Leaderboard from '../components/sections/Leaderboard/Leaderboard'; import Readme from '../components/sections/Readme'; import HowTo from '../components/sections/HowTo'; -import MyEntries from '../components/sections/MyEntries/MyEntries'; +import MyEntries from '../components/sections/MyEntries'; import Submit from '../components/sections/Submit'; import Media from 'react-media'; import DesktopChallengeMenu from '../components/elements/DesktopChallengeMenu'; diff --git a/src/utils/globals.js b/src/utils/globals.js index 8e5f7d0..32c6332 100644 --- a/src/utils/globals.js +++ b/src/utils/globals.js @@ -46,9 +46,9 @@ const RENDER_ICO = (type) => { } }; -const CALC_PAGES = (objects) => { +const CALC_PAGES = (objects, n = 1) => { if (objects.length === 0) return 1; - return Math.ceil(objects.length / ELEMENTS_PER_PAGE); + return Math.ceil(objects.length / (ELEMENTS_PER_PAGE * n)); }; const RENDER_DEADLINE_TIME = (time) => { @@ -60,6 +60,10 @@ const RENDER_DEADLINE_TIME = (time) => { return ''; }; +const RENDER_WHEN = (when) => { + return `${when.slice(0, 10)} ${when.slice(11, 16)}`; +}; + const IS_MOBILE = () => { return document.body.clientWidth <= 768; }; @@ -75,5 +79,6 @@ export { RENDER_ICO, CALC_PAGES, RENDER_DEADLINE_TIME, - IS_MOBILE + IS_MOBILE, + RENDER_WHEN }; \ No newline at end of file