From fa1e58ecf0c05ada5fb0795d2f3bee2eef58cadf Mon Sep 17 00:00:00 2001 From: mattyl006 Date: Tue, 30 Aug 2022 09:25:45 +0200 Subject: [PATCH] Refactor Table and Leaderboard and correct Search in Challenges --- src/components/elements/Table.js | 75 ++++++++++ src/components/elements/Table/Table.js | 129 ------------------ src/components/elements/Table/index.js | 1 - .../sections/{ => Leaderboard}/Leaderboard.js | 67 ++++++++- .../Leaderboard}/_renderSubmissions.js | 0 .../Leaderboard}/_tableSearchQueryHandler.js | 0 src/components/sections/Leaderboard/index.js | 1 + src/pages/Challanges/_searchQueryHandler.js | 2 +- src/pages/Challenge.js | 2 +- 9 files changed, 139 insertions(+), 138 deletions(-) create mode 100644 src/components/elements/Table.js delete mode 100644 src/components/elements/Table/Table.js delete mode 100644 src/components/elements/Table/index.js rename src/components/sections/{ => Leaderboard}/Leaderboard.js (54%) rename src/components/{elements/Table => sections/Leaderboard}/_renderSubmissions.js (100%) rename src/components/{elements/Table => sections/Leaderboard}/_tableSearchQueryHandler.js (100%) create mode 100644 src/components/sections/Leaderboard/index.js diff --git a/src/components/elements/Table.js b/src/components/elements/Table.js new file mode 100644 index 0000000..3d8ab8d --- /dev/null +++ b/src/components/elements/Table.js @@ -0,0 +1,75 @@ +import React from 'react'; +import {FlexColumn, FlexRow, Grid} from '../../utils/containers'; +import {H3, Medium} from '../../utils/fonts'; +import Media from 'react-media'; +import theme from '../../utils/theme'; +import Loading from './Loading'; +import PropsTypes from 'prop-types'; + +const Table = (props) => { + const mobileRender = () => { + return ( + + + {props.headerElements.map((elem, index) => { + return ( + + {elem} + + ); + })} + + {props.renderElements('10px')} + + ); + }; + + const desktopRender = () => { + return ( + + + {props.headerElements.map((elem, index) => { + return ( + +

{elem}

+ + ); + })} + + {props.renderElements('32px')} + + ); + }; + + return ( + <> + + + {!props.loading ? mobileRender() : ''} + + + {!props.loading ? 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/elements/Table/Table.js b/src/components/elements/Table/Table.js deleted file mode 100644 index 9f98689..0000000 --- a/src/components/elements/Table/Table.js +++ /dev/null @@ -1,129 +0,0 @@ -import React from 'react'; -import {FlexColumn, FlexRow, Grid} from '../../../utils/containers'; -import getChallengeLeaderboard from '../../../api/getChallengeLeaderboard'; -import {H3, Medium} from '../../../utils/fonts'; -import _renderSubmissions from './_renderSubmissions'; -import Pager from '../Pager'; -import {CALC_PAGES} from '../../../utils/globals'; -import Media from 'react-media'; -import theme from '../../../utils/theme'; -import Loading from '../Loading'; -import PropsTypes from 'prop-types'; -import _tableSearchQueryHandler from './_tableSearchQueryHandler'; -import Search from '../Search'; - -const Table = (props) => { - const headerElements = ['#', 'submitter', 'result', 'entries', 'when']; - const [entriesFromApi, setEntriesFromApi] = React.useState([]); - const [entries, setEntries] = React.useState([]); - const [pageNr, setPageNr] = React.useState(1); - const [loading, setLoading] = React.useState(true); - - React.useEffect(() => { - challengeDataRequest(props.challengeName); - }, [props.challengeName]); - - const challengeDataRequest = (challengeName) => { - getChallengeLeaderboard(setEntriesFromApi, challengeName); - getChallengeLeaderboard(setEntries, challengeName, setLoading); - }; - - const renderSubmissions = (gridGap) => { - return _renderSubmissions(pageNr, entries - ? entries : [], gridGap); - }; - - const tableSearchQueryHandler = (event) => { - _tableSearchQueryHandler(event, entriesFromApi, setPageNr, setEntries); - }; - - const nextPage = () => { - if (pageNr !== CALC_PAGES(entries ? entries : [])) { - let newPage = pageNr + 1; - setPageNr(newPage); - } - }; - - const previousPage = () => { - if (pageNr !== 1) { - let newPage = pageNr - 1; - setPageNr(newPage); - } - }; - - const mobileRender = () => { - return ( - <> - - - - {headerElements.map((elem, index) => { - return ( - - {elem} - - ); - })} - - {renderSubmissions('10px')} - - - - ); - }; - - const desktopRender = () => { - return ( - <> - - - - {headerElements.map((elem, index) => { - return ( - -

{elem}

- - ); - })} - - {renderSubmissions('32px')} - - - - - ); - }; - - return ( - <> - - - {!loading ? mobileRender() : ''} - - - - {!loading ? desktopRender() : ''} - - - ); -}; - -Table.propTypes = { - challengeName: PropsTypes.string, -}; - -Table.defaultProps = { - challengeName: '', -}; - -export default Table; \ No newline at end of file diff --git a/src/components/elements/Table/index.js b/src/components/elements/Table/index.js deleted file mode 100644 index 012e157..0000000 --- a/src/components/elements/Table/index.js +++ /dev/null @@ -1 +0,0 @@ -export {default} from './Table'; \ No newline at end of file diff --git a/src/components/sections/Leaderboard.js b/src/components/sections/Leaderboard/Leaderboard.js similarity index 54% rename from src/components/sections/Leaderboard.js rename to src/components/sections/Leaderboard/Leaderboard.js index 67c56f5..62305f7 100644 --- a/src/components/sections/Leaderboard.js +++ b/src/components/sections/Leaderboard/Leaderboard.js @@ -1,11 +1,17 @@ import React from 'react'; import Media from 'react-media'; -import theme from '../../utils/theme'; -import {FlexColumn, FlexRow} from '../../utils/containers'; -import {H2, H3} from '../../utils/fonts'; -import Table from '../elements/Table'; +import theme from '../../../utils/theme'; +import {FlexColumn, FlexRow} from '../../../utils/containers'; +import {H2, H3} from '../../../utils/fonts'; +import Table from '../../elements/Table'; import styled from 'styled-components'; import PropsTypes from 'prop-types'; +import getChallengeLeaderboard from '../../../api/getChallengeLeaderboard'; +import _renderSubmissions from './_renderSubmissions'; +import _tableSearchQueryHandler from './_tableSearchQueryHandler'; +import {CALC_PAGES} from '../../../utils/globals'; +import Search from '../../elements/Search'; +import Pager from '../../elements/Pager'; const BoardVariantMobile = styled(FlexRow)` transition: color, background-color 0.3s ease-in-out; @@ -46,6 +52,43 @@ const BoardVariantDesktop = styled(FlexRow)` const Leaderboard = (props) => { const [variant, setVariant] = React.useState(0); + const headerElements = ['#', 'submitter', 'result', 'entries', 'when']; + const [entriesFromApi, setEntriesFromApi] = React.useState([]); + const [entries, setEntries] = React.useState([]); + const [pageNr, setPageNr] = React.useState(1); + const [loading, setLoading] = React.useState(true); + + React.useEffect(() => { + challengeDataRequest(props.challengeName); + }, [props.challengeName]); + + const challengeDataRequest = (challengeName) => { + getChallengeLeaderboard(setEntriesFromApi, challengeName); + getChallengeLeaderboard(setEntries, challengeName, setLoading); + }; + + const renderSubmissions = (gridGap) => { + return _renderSubmissions(pageNr, entries + ? entries : [], gridGap); + }; + + const tableSearchQueryHandler = (event) => { + _tableSearchQueryHandler(event, entriesFromApi, setPageNr, setEntries); + }; + + const nextPage = () => { + if (pageNr !== CALC_PAGES(entries ? entries : [])) { + let newPage = pageNr + 1; + setPageNr(newPage); + } + }; + + const previousPage = () => { + if (pageNr !== 1) { + let newPage = pageNr - 1; + setPageNr(newPage); + } + }; const mobileRender = () => { return ( @@ -61,7 +104,13 @@ const Leaderboard = (props) => { By metric - + +
+ ); }; @@ -86,7 +135,13 @@ const Leaderboard = (props) => { -
+ +
+ ); }; diff --git a/src/components/elements/Table/_renderSubmissions.js b/src/components/sections/Leaderboard/_renderSubmissions.js similarity index 100% rename from src/components/elements/Table/_renderSubmissions.js rename to src/components/sections/Leaderboard/_renderSubmissions.js diff --git a/src/components/elements/Table/_tableSearchQueryHandler.js b/src/components/sections/Leaderboard/_tableSearchQueryHandler.js similarity index 100% rename from src/components/elements/Table/_tableSearchQueryHandler.js rename to src/components/sections/Leaderboard/_tableSearchQueryHandler.js diff --git a/src/components/sections/Leaderboard/index.js b/src/components/sections/Leaderboard/index.js new file mode 100644 index 0000000..b9cf94c --- /dev/null +++ b/src/components/sections/Leaderboard/index.js @@ -0,0 +1 @@ +export {default} from './Leaderboard'; \ No newline at end of file diff --git a/src/pages/Challanges/_searchQueryHandler.js b/src/pages/Challanges/_searchQueryHandler.js index 00df961..b29ab02 100644 --- a/src/pages/Challanges/_searchQueryHandler.js +++ b/src/pages/Challanges/_searchQueryHandler.js @@ -8,7 +8,7 @@ const _searchQueryHandler = (event, challengesFromAPI, setPageNr, setChallenges) for (let challenge of challengesFromAPI) { const {title, description, type, mainMetric, bestScore, deadline, baseline, prize} = challenge; const str = `${title} ${description} ${type} ${mainMetric} ${bestScore} - ${deadline.slice(11, 16)} ${deadline.slice(0, 10)} ${baseline} ${prize}`; + ${deadline ? deadline.slice(11, 16) : ''} ${deadline ? deadline.slice(0, 10) : ''} ${baseline} ${prize}`; if (str.toLowerCase().includes(searchQuery.toLowerCase())) challengesToRender.push(challenge); } diff --git a/src/pages/Challenge.js b/src/pages/Challenge.js index 1c1e392..a579fab 100644 --- a/src/pages/Challenge.js +++ b/src/pages/Challenge.js @@ -4,7 +4,7 @@ import {useParams} from 'react-router-dom'; import {H1, Medium} from '../utils/fonts'; import theme from '../utils/theme'; import MobileChallengeMenu from '../components/elements/MobileChallengeMenu'; -import Leaderboard from '../components/sections/Leaderboard'; +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';