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';