diff --git a/src/App.js b/src/App.js
index 9aefcfa..6b18280 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,7 +4,6 @@ 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 {CHALLENGE_PAGE, CHALLENGES_PAGE, IS_MOBILE} from './utils/globals';
import Challenge from './pages/Challenge';
import Register from './pages/auth/Register';
@@ -15,6 +14,8 @@ import KeyCloakService from './services/KeyCloakService';
import React from 'react';
import LoggedBar from './components/elements/LoggedBar';
import addUser from './api/addUser';
+import Loading from './components/elements/Loading';
+import {FlexColumn} from './utils/containers';
const App = () => {
const [loggedBarVisible, setLoggedBarVisible] = React.useState('100vw');
@@ -51,35 +52,53 @@ const App = () => {
setLoggedBarHover(false);
};
- return (
-
-
-
- {!IS_MOBILE() ? : ''}
-
- }/>
- }/>
- }/>
- }/>
- }/>
- }/>
- {
- KeyCloakService.isLoggedIn() ? <>
- }/>
- }/>
- : <>
- }/>
- }/>
-
- }
-
- {/**/}
-
-
- );
+ const renderApp = () => {
+ return (
+
+
+
+ {!IS_MOBILE() ?
+ : ''}
+
+ }/>
+ }/>
+ }/>
+ }/>
+ }/>
+ }/>
+ {
+ KeyCloakService.isLoggedIn() ? <>
+ }/>
+ }/>
+ : <>
+ }/>
+ }/>
+
+ }
+
+
+
+ );
+ };
+
+ if (sessionStorage.getItem('logged') === 'yes') {
+ if (KeyCloakService.isLoggedIn()) {
+ return renderApp();
+ } else {
+ return (
+
+
+
+
+
+ );
+ }
+ } else {
+ return renderApp();
+ }
};
export default App;
diff --git a/src/api/getMyEntries.js b/src/api/getMyEntries.js
index 59c151d..6b53a24 100644
--- a/src/api/getMyEntries.js
+++ b/src/api/getMyEntries.js
@@ -7,10 +7,10 @@ const getMyEntries = (challengeName, setDataState, setLoadingState) => {
})
.then(response => response.json())
.then(data => {
- console.log(data);
setDataState(data);
if (setLoadingState)
- setLoadingState(false);
+ console.log(data);
+ setLoadingState(false);
});
};
diff --git a/src/components/sections/Leaderboard/Leaderboard.js b/src/components/sections/Leaderboard/Leaderboard.js
index 3eeffe8..0c0d315 100644
--- a/src/components/sections/Leaderboard/Leaderboard.js
+++ b/src/components/sections/Leaderboard/Leaderboard.js
@@ -20,7 +20,7 @@ const Leaderboard = (props) => {
const [entries, setEntries] = React.useState([]);
const [pageNr, setPageNr] = React.useState(1);
const [loading, setLoading] = React.useState(true);
- const [metricChoose, setMetricChoose] = React.useState(0);
+ const [metricChoose, setMetricChoose] = React.useState(null);
const [sortBy, setSortBy] = React.useState(5);
React.useEffect(() => {
@@ -32,9 +32,19 @@ const Leaderboard = (props) => {
getChallengeLeaderboard(setEntries, challengeName, setLoading);
};
+ const getMainMetricIndex = () => {
+ let i = 0;
+ for (let evaluation of entriesFromApi[0].evaluations) {
+ if (evaluation.test.metric === props.mainMetric) {
+ return i;
+ }
+ i++;
+ }
+ };
+
const renderSubmissions = (gridGap, headerElements) => {
return _renderSubmissions(pageNr, entries
- ? entries : [], gridGap, metricChoose, sortBy, headerElements);
+ ? entries : [], gridGap, (metricChoose ? metricChoose : getMainMetricIndex()), sortBy, headerElements);
};
const tableSearchQueryHandler = (event) => {
@@ -119,7 +129,7 @@ const Leaderboard = (props) => {
const desktopRender = () => {
return (
-
+
Leaderboard
diff --git a/src/components/sections/Leaderboard/_renderSubmissions.js b/src/components/sections/Leaderboard/_renderSubmissions.js
index 5e77e7b..6ebc3f3 100644
--- a/src/components/sections/Leaderboard/_renderSubmissions.js
+++ b/src/components/sections/Leaderboard/_renderSubmissions.js
@@ -18,7 +18,9 @@ const sortBySwitch = (submissions, metricChoose, 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);
+ if (metricChoose)
+ return submissions.sort((a, b) => a.evaluations[metricChoose].score - b.evaluations[metricChoose].score);
+ return submissions;
case 2:
return submissions.sort((a, b) => a.times - b.times);
case 3:
@@ -27,7 +29,9 @@ const sortBySwitch = (submissions, metricChoose, sortBy) => {
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);
+ if (metricChoose)
+ return submissions.sort((a, b) => b.evaluations[metricChoose].score - a.evaluations[metricChoose].score);
+ return submissions;
case 6:
return submissions.sort((a, b) => b.times - a.times);
case 7:
@@ -65,31 +69,29 @@ const _renderSubmissions = (pageNr, submissions, gridGap, metricChoose, sortBy,
as='td'>{elem}
);
}) : ''}
- {index > 0 ? <>
-
- {index + n}
-
-
- {submitter ? submitter : '[anonymous]'}
-
- {!IS_MOBILE() ? evaluations.map((metric, i) => {
- return (
-
- {metric.score.slice(0, 7)}
-
- );
- }) :
- {evaluations[metricChoose] ? evaluations[metricChoose].score.slice(0, 7) : 'xxx'}
- }
-
- {times ? times : 1}
-
-
- {when ? `${when.slice(11, 16)} ${when.slice(0, 10)}`
- : 'xxx'}
-
-
- : ''}
+
+ {index + n}
+
+
+ {submitter ? submitter : '[anonymous]'}
+
+ {!IS_MOBILE() ? evaluations.map((metric, i) => {
+ return (
+
+ {metric.score.slice(0, 7)}
+
+ );
+ }) :
+ {evaluations[metricChoose] ? evaluations[metricChoose].score.slice(0, 7) : 'xxx'}
+ }
+
+ {times ? times : 1}
+
+
+ {when ? `${when.slice(11, 16)} ${when.slice(0, 10)}`
+ : 'xxx'}
+
+ {index !== 0 ? : ''}
);
})}
diff --git a/src/components/sections/MyEntries.js b/src/components/sections/MyEntries.js
index 7ade525..3db5659 100644
--- a/src/components/sections/MyEntries.js
+++ b/src/components/sections/MyEntries.js
@@ -2,33 +2,125 @@ import React from 'react';
import {FlexColumn} from '../../utils/containers';
import {H2} from '../../utils/fonts';
import getMyEntries from '../../api/getMyEntries';
+// import Search from '../elements/Search';
+import Table from '../elements/Table';
+import Pager from '../elements/Pager';
+import {CALC_PAGES} from '../../utils/globals';
+import Media from 'react-media';
+import theme from '../../utils/theme';
+// import sortOptions from './Leaderboard/sortOptions';
+// import FilterBy from './FilterBy';
+import _tableSearchQueryHandler from './Leaderboard/_tableSearchQueryHandler';
+import Loading from '../elements/Loading';
+import _renderMySubmissions from './MyEntries/_renderMySubmissions';
const MyEntries = (props) => {
/* eslint-disable */
- const [myEntriesFromAPI, setMyEntriesFromAPI] = React.useState([]);
+ const [myEntriesFromAPI, setMyEntriesFromAPI] = React.useState({});
/* eslint-disable */
- const [myEntries, setMyEntries] = React.useState([]);
+ const [myEntries, setMyEntries] = React.useState({});
/* eslint-disable */
const [loading, setLoading] = React.useState(true);
+ const [pageNr, setPageNr] = React.useState(1);
+ const [metricChoose, setMetricChoose] = React.useState(0);
+ const [sortBy, setSortBy] = React.useState(5);
React.useEffect(() => {
challengesRequest();
}, []);
+ const renderSubmissions = (gridGap, headerElements) => {
+ return _renderMySubmissions(pageNr, myEntries
+ ? myEntries : [], gridGap, metricChoose, sortBy, headerElements);
+ };
+
+ const tableSearchQueryHandler = (event) => {
+ _tableSearchQueryHandler(event, myEntriesFromAPI, setPageNr, setMyEntries);
+ };
+
+ const getPossibleMetrics = () => {
+ let metrics = [];
+ for (let test of myEntriesFromAPI.tests) {
+ let myEval = `${test.metric} ${test.name}`;
+ if (myEval && !metrics.includes(myEval)) {
+ metrics.push(myEval);
+ }
+ }
+ return metrics;
+ }
+
+ const nextPage = () => {
+ if (pageNr !== CALC_PAGES(myEntries ? myEntries : [])) {
+ let newPage = pageNr + 1;
+ setPageNr(newPage);
+ }
+ };
+
+ const previousPage = () => {
+ if (pageNr !== 1) {
+ let newPage = pageNr - 1;
+ setPageNr(newPage);
+ }
+ };
+
+ const getMyEntriesHeader = () => {
+ let header = ['#'];
+ for (let myEval of getPossibleMetrics()) {
+ header.push(myEval);
+ }
+ header.push('when');
+ return header;
+ };
+
const challengesRequest = () => {
getMyEntries(props.challengeName, setMyEntriesFromAPI);
getMyEntries(props.challengeName, setMyEntries, setLoading);
};
+ const sortByHandler = (value) => {
+ setSortBy(value);
+ };
+
+ const mobileRender = () => {
+
+ }
+
+ const desktopRender = () => {
+ if (loading) {
+ return (
+
+ );
+ } else {
+ return (
+
+
+ My entries
+
+ {/**/}
+ {/**/}
+
+
+
+ );
+ }
+ };
+
return (
-
-
- My entries
-
- {/*{myEntries.map((entry, index) => {*/}
- {/* */}
- {/*})}*/}
-
+ <>
+
+ {mobileRender()}
+
+
+ {desktopRender()}
+
+
);
};
diff --git a/src/components/sections/MyEntries/_renderMySubmissions.js b/src/components/sections/MyEntries/_renderMySubmissions.js
new file mode 100644
index 0000000..57abd1d
--- /dev/null
+++ b/src/components/sections/MyEntries/_renderMySubmissions.js
@@ -0,0 +1,104 @@
+import {ELEMENTS_PER_PAGE, IS_MOBILE} from '../../../utils/globals';
+import {FlexColumn, FlexRow, Grid} from '../../../utils/containers';
+import {Body, Medium} from '../../../utils/fonts';
+import styled from 'styled-components';
+import React from 'react';
+
+const Line = styled(FlexRow)`
+ position: absolute;
+ top: -6px;
+ left: 0;
+ width: 100%;
+ background-color: ${({theme}) => theme.colors.dark04};
+ height: 1px;
+`;
+
+
+// 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 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}
+ );
+ }) : ''}
+
+ {index + n + 1}
+
+ {myEntries.tests.map((test, i) => {
+ console.log(description);
+ 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