diff --git a/src/App.js b/src/App.js
index f75d396..f042388 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,7 +4,7 @@ import LandingPage from './pages/LandingPage';
import Challenges from './pages/Challanges/Challenges';
import {BrowserRouter, Route, Routes} from 'react-router-dom';
import NavBar from './components/elements/NavBar';
-import Footer from './components/sections/Footer';
+// import Footer from './components/sections/Footer';
import {CHALLENGE_PAGE, CHALLENGES_PAGE} from './utils/globals';
import Challenge from './pages/Challenge';
import Register from './pages/auth/Register';
@@ -58,7 +58,7 @@ const App = () => {
}
-
+ {/**/}
);
diff --git a/src/components/sections/FilterBy.js b/src/components/sections/FilterBy.js
index 51ead60..2b5b374 100644
--- a/src/components/sections/FilterBy.js
+++ b/src/components/sections/FilterBy.js
@@ -29,18 +29,22 @@ const FilterBy = (props) => {
};
return (
-
+
{props.header}
-
+
{props.header}
-
+
{renderFilterOptions()}
diff --git a/src/components/sections/Leaderboard/Leaderboard.js b/src/components/sections/Leaderboard/Leaderboard.js
index f5e0619..52cc9d1 100644
--- a/src/components/sections/Leaderboard/Leaderboard.js
+++ b/src/components/sections/Leaderboard/Leaderboard.js
@@ -4,7 +4,6 @@ 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';
@@ -13,52 +12,17 @@ import {CALC_PAGES} from '../../../utils/globals';
import Search from '../../elements/Search';
import Pager from '../../elements/Pager';
import Filter from '../../elements/Filter';
-
-// const BoardVariantMobile = styled(FlexRow)`
-// transition: color, background-color 0.3s ease-in-out;
-// background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
-// color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
-// font-size: 10px;
-// font-family: 'Roboto', sans-serif;
-// font-weight: 300;
-// border-radius: 16px;
-// border: 1px solid ${({theme}) => theme.colors.dark};
-// padding: 6px 8px;
-// cursor: pointer;
-// box-shadow: ${({theme}) => theme.shadowRight};
-//
-// * {
-// cursor: pointer;
-// }
-//
-// &:hover {
-// background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
-// color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
-// }
-// `;
-
-// const BoardVariantDesktop = styled(FlexRow)`
-// transition: background-color 0.3s ease-in-out;
-// border: 1px solid ${({theme}) => theme.colors.green05};
-// background-color: ${({theme, active}) => active ? theme.colors.green05 : theme.colors.white};
-//
-// &:hover {
-// background-color: ${({theme}) => theme.colors.green05};
-// }
-//
-// div {
-// text-transform: uppercase;
-// }
-// `;
+import FilterBy from '../FilterBy';
+import sortOptions from './sortOptions';
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);
const [metricChoose, setMetricChoose] = React.useState(0);
+ const [sortBy, setSortBy] = React.useState(5);
React.useEffect(() => {
challengeDataRequest(props.challengeName);
@@ -71,7 +35,7 @@ const Leaderboard = (props) => {
const renderSubmissions = (gridGap) => {
return _renderSubmissions(pageNr, entries
- ? entries : [], gridGap, metricChoose);
+ ? entries : [], gridGap, metricChoose, sortBy);
};
const tableSearchQueryHandler = (event) => {
@@ -109,20 +73,16 @@ const Leaderboard = (props) => {
setMetricChoose(value);
};
+ const sortByHandler = (value) => {
+ setSortBy(value);
+ };
+
const mobileRender = () => {
return (
Leaderboard
- {/**/}
- {/* setVariant(0)}>*/}
- {/* By user*/}
- {/* */}
- {/* setVariant(1)}>*/}
- {/* By metric*/}
- {/* */}
- {/**/}
Metric:
@@ -153,37 +113,32 @@ const Leaderboard = (props) => {
Leaderboard
- {/**/}
- {/* setVariant(0)}>*/}
- {/* */}
- {/* By user*/}
- {/*
*/}
- {/* */}
- {/* setVariant(1)}>*/}
- {/* */}
- {/* By metric*/}
- {/*
*/}
- {/* */}
- {/**/}
-
-
- Metric:
-
- {getPossibleMetrics() ? getPossibleMetrics().map((metric, index) => {
- return (
-
- {metric}
- );
- }) : ''}
-
+
+
+
+
+ Metric
+
+
+ {getPossibleMetrics() ? getPossibleMetrics().map((metric, index) => {
+ return (
+
+ {metric}
+ );
+ }) : ''}
+
+
+
+
{
+
+const sortBySwitch = (submissions, metricChoose, sortBy) => {
+ switch (sortBy) {
+ case 0:
+ return submissions.sort((a, b) => (a.submitter < b.submitter) ? 1 : ((b.submitter < a.submitter) ? -1 : 0));
+ case 1:
+ return submissions.sort((a, b) => a.evaluations[metricChoose].score - b.evaluations[metricChoose].score);
+ case 2:
+ return submissions.sort((a, b) => a.times - b.times);
+ case 3:
+ console.log(submissions[0].when);
+ return submissions.sort((a, b) => (a.when > b.when) ? 1 : ((b.when > a.when) ? -1 : 0));
+ case 4:
+ return submissions.sort((a, b) => (a.submitter > b.submitter) ? 1 : ((b.submitter > a.submitter) ? -1 : 0));
+ case 5:
+ return submissions.sort((a, b) => b.evaluations[metricChoose].score - a.evaluations[metricChoose].score);
+ case 6:
+ return submissions.sort((a, b) => b.times - a.times);
+ case 7:
+ console.log(submissions[0].when);
+ return submissions.sort((a, b) => (a.when < b.when) ? 1 : ((b.when < a.when) ? -1 : 0));
+ default:
+ return submissions.sort((a, b) => b.evaluations[metricChoose].score - a.evaluations[metricChoose].score);
+ }
+};
+
+const _renderSubmissions = (pageNr, submissions, gridGap, metricChoose, sortBy) => {
const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
+
if (submissions) {
+ submissions = sortBySwitch(submissions, metricChoose, sortBy);
+ submissions = submissions.slice(n, n + ELEMENTS_PER_PAGE);
return (
- {submissions.slice(n, n + ELEMENTS_PER_PAGE).sort((a, b) => b.evaluations[metricChoose].score - a.evaluations[metricChoose].score).map(({
- submitter,
- when,
- evaluations,
- times
- }, index) => {
+ {submissions.map(({
+ submitter,
+ when,
+ evaluations,
+ times
+ }, index) => {
return (
diff --git a/src/components/sections/Leaderboard/sortOptions.js b/src/components/sections/Leaderboard/sortOptions.js
new file mode 100644
index 0000000..0e46d6a
--- /dev/null
+++ b/src/components/sections/Leaderboard/sortOptions.js
@@ -0,0 +1,44 @@
+const sortOptions = [
+ {
+ name: 'Submitter',
+ sort: true,
+ rotate: ''
+ },
+ {
+ name: 'Result',
+ sort: true,
+ rotate: ''
+ },
+ {
+ name: 'Entries',
+ sort: true,
+ rotate: ''
+ },
+ {
+ name: 'When',
+ sort: true,
+ rotate: ''
+ },
+ {
+ name: 'Submitter',
+ sort: true,
+ rotate: '180deg'
+ },
+ {
+ name: 'Result',
+ sort: true,
+ rotate: '180deg'
+ },
+ {
+ name: 'Entries',
+ sort: true,
+ rotate: '180deg'
+ },
+ {
+ name: 'When',
+ sort: true,
+ rotate: '180deg'
+ },
+];
+
+export default sortOptions;
\ No newline at end of file