basic my entries and some leaderboard corrections

2022-10-19 17:48:04 +02:00 · 2022-10-19 17:48:04 +02:00 · a77fe19ebc
commit a77fe19ebc
parent 25df7f51a9
6 changed files with 299 additions and 72 deletions
--- 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,11 +52,13 @@ const App = () => {
        setLoggedBarHover(false);
    };

+    const renderApp = () => {
        return (
            <BrowserRouter>
                <ThemeProvider theme={theme}>
                    <NavBar loggedBarVisibleHandler={loggedBarVisibleHandler}/>
-                {!IS_MOBILE() ? <LoggedBar visible={loggedBarVisible} loggedBarVisibleHandler={loggedBarVisibleHandler}
+                    {!IS_MOBILE() ?
+                        <LoggedBar visible={loggedBarVisible} loggedBarVisibleHandler={loggedBarVisibleHandler}
                                   loggedBarHoverTrue={loggedBarHoverTrue}
                                   loggedBarHoverFalse={loggedBarHoverFalse}
                                   username={KeyCloakService.getUsername()}/> : ''}
@ -76,10 +79,26 @@ const App = () => {
                            </>
                        }
                    </Routes>
-                {/*<Footer/>*/}
                </ThemeProvider>
            </BrowserRouter>
        );
+    };
+
+    if (sessionStorage.getItem('logged') === 'yes') {
+        if (KeyCloakService.isLoggedIn()) {
+            return renderApp();
+        } else {
+            return (
+                <ThemeProvider theme={theme}>
+                    <FlexColumn width='100vw' height='100vh'>
+                        <Loading/>
+                    </FlexColumn>
+                </ThemeProvider>
+            );
+        }
+    } else {
+        return renderApp();
+    }
 };

 export default App;
--- a/src/api/getMyEntries.js
+++ b/src/api/getMyEntries.js
@ -7,9 +7,9 @@ const getMyEntries = (challengeName, setDataState, setLoadingState) => {
    })
        .then(response => response.json())
        .then(data => {
-            console.log(data);
            setDataState(data);
            if (setLoadingState)
+                console.log(data);
            setLoadingState(false);
        });
 };
--- 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 (
-            <FlexColumn padding='24px' as='section' width='100%' maxWidth='800px'>
+            <FlexColumn padding='24px' as='section' width='100%' maxWidth='1000px'>
                <H2 as='h2' margin='0 0 32px 0'>
                    Leaderboard
                </H2>
--- 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:
+            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:
+            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,7 +69,6 @@ const _renderSubmissions = (pageNr, submissions, gridGap, metricChoose, sortBy,
                                            as='td'>{elem}</Medium>
                                );
                            }) : ''}
-                            {index > 0 ? <>
                            <Body as='td'>
                                {index + n}
                            </Body>
@ -88,8 +91,7 @@ const _renderSubmissions = (pageNr, submissions, gridGap, metricChoose, sortBy,
                                {when ? `${when.slice(11, 16)} ${when.slice(0, 10)}`
                                    : 'xxx'}
                            </Body>
-                                <Line as='td'/>
-                            </> : ''}
+                            {index !== 0 ? <Line as='td'/> : ''}
                        </Grid>
                    );
                })}
--- a/src/components/sections/MyEntries.js
+++ b/src/components/sections/MyEntries.js
@ -2,34 +2,126 @@ 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 (
-        <FlexColumn padding='24px' as='section'>
-            <H2 as='h2'>
+                <Loading/>
+            );
+        } else {
+            return (
+                <FlexColumn padding='24px' as='section' width='100%' maxWidth='1000px'>
+                    <H2 as='h2' margin='0 0 32px 0'>
                        My entries
                    </H2>
-            {/*{myEntries.map((entry, index) => {*/}
-            {/*    */}
-            {/*})}*/}
+                    {/*<Search searchQueryHandler={tableSearchQueryHandler}/>*/}
+                    {/*<FilterBy header='Sort by' options={sortOptions} gridTemplateColumns='auto auto auto auto'*/}
+                    {/*          option={sortBy} textAlign='center' margin='32px 0 0 0'*/}
+                    {/*          alignmentX='center' handler={sortByHandler}/>*/}
+                    <Table challengeName={props.challengeName} loading={loading}
+                           renderElements={renderSubmissions}
+                           headerElements={getMyEntriesHeader()}/>
+                    <Pager pageNr={pageNr} width='72px' borderRadius='64px'
+                           pages={CALC_PAGES(myEntries.submissions ? myEntries.submissions : [])}
+                           nextPage={nextPage} previousPage={previousPage}
+                           number={`${pageNr} / ${CALC_PAGES(myEntries.submissions ? myEntries.submissions : [])}`}/>
                </FlexColumn>
            );
+        }
+    };
+
+    return (
+        <>
+            <Media query={theme.mobile}>
+                {mobileRender()}
+            </Media>
+            <Media query={theme.desktop}>
+                {desktopRender()}
+            </Media>
+        </>
+    );
 };

 export default MyEntries;
--- a/src/components/sections/MyEntries/_renderMySubmissions.js
+++ 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 (
+            <FlexColumn as='tbody' width='100%'>
+                {submissions.map(({
+                                      submitter,
+                                      when,
+                                      evaluations,
+                                      times,
+                                      description
+                                  }, index) => {
+                    return (
+                        <Grid as='tr' key={`leaderboard-row-${index}`}
+                              gridTemplateColumns={!IS_MOBILE() ? '1fr ' + '4fr '.repeat(headerElements.length - 2) + '2fr' : '1fr 3fr 1fr 1fr 2fr'}
+                              gridGap={gridGap} margin='10px 0 0 0' position='relative' width='100%' padding='4px'>
+                            {index === 0 ? headerElements.map((elem, i) => {
+                                return (
+                                    <Medium key={`leaderboard-header-${i}`}
+                                            textAlign={elem === 'entries' || elem === 'when' ? 'right' : 'left'}
+                                            minWidth={elem === 'result' ? '72px' : 'none'}
+                                            fontSize='18px'
+                                            as='td'>{elem}</Medium>
+                                );
+                            }) : ''}
+                            <Body as='td'>
+                                {index + n + 1}
+                            </Body>
+                            {myEntries.tests.map((test, i) => {
+                                console.log(description);
+                                return (
+                                    <Body key={`eval-result-${i}`} width='80px' as='td' textAlign='left'
+                                          minWidth='72px'>
+                                        {renderEvalResult(evaluations, test)}
+                                    </Body>
+                                );
+                            })}
+                            <Body as='td' textAlign='right'>
+                                {when ? `${when.slice(11, 16)} ${when.slice(0, 10)}`
+                                    : 'xxx'}
+                            </Body>
+                            {index !== 0 ? <Line as='td'/> : ''}
+                        </Grid>
+                    );
+                })}
+            </FlexColumn>
+        );
+    }
+};
+
+export default _renderMySubmissions;