correct submit request, some new styles to leaderboard and myEntries

src/App.js

@@ -35,7 +35,7 @@ const App = () => {
                     KeyCloakService.doLogin();
                 }
             }
-        }, 500);
+        }, 1500);
     });
 
     const loggedBarVisibleHandler = () => {

src/api/challengeSubmissionPost.js

@@ -1,29 +1,27 @@
 import KeyCloakService from '../services/KeyCloakService';
 import {API} from '../utils/globals';
 
-async function postData(url = '', data = {}) {
+const challengeSubmission = (challengeName, repoUrl, repoBranch, description) => {
-    const response = await fetch(url, {
+    const details = {
+        'f1': description,
+        'f3': repoUrl,
+        'f4': repoBranch
+    };
+    let formBody = [];
+    for (let property in details) {
+        let encodedKey = encodeURIComponent(property);
+        let encodedValue = encodeURIComponent(details[property]);
+        formBody.push(encodedKey + '=' + encodedValue);
+    }
+    formBody = formBody.join('&');
+    return fetch(`${API}/challenge-submission/${challengeName}`, {
         method: 'POST',
-        mode: 'no-cors',
-        cache: 'no-cache',
-        credentials: 'same-origin',
         headers: {
-            'Content-Type': 'application/json',
+            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
             'Authorization': `Bearer ${KeyCloakService.getToken()}`
         },
-        redirect: 'follow',
+        body: formBody
-        referrerPolicy: 'no-referrer',
-        body: JSON.stringify(data)
     });
-    return response.json();
-}
-
-const challengeSubmission = (challengeName, repoUrl, repoBranch, description) => {
-    postData(`${API}/challenge-submission/${challengeName}`,
-        {f1: description, f3: repoUrl, f4: repoBranch})
-        .then((data) => {
-            console.log(data);
-        });
 };
 
 export default challengeSubmission;

src/assets/filter_direction.svg

@@ -0,0 +1,6 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line y1="0.5" x2="10" y2="0.5" stroke="#343434"/>
+<line y1="9.5" x2="4" y2="9.5" stroke="#343434"/>
+<line y1="6.5" x2="6" y2="6.5" stroke="#343434"/>
+<line y1="3.5" x2="8" y2="3.5" stroke="#343434"/>
+</svg>

src/components/sections/Leaderboard/Leaderboard.js

@@ -129,7 +129,7 @@ const Leaderboard = (props) => {
 
     const desktopRender = () => {
         return (
-            <FlexColumn padding='24px' as='section' width='100%' maxWidth='1000px'>
+            <FlexColumn padding='24px' as='section' width='100%' maxWidth='1200px'>
                 <H2 as='h2' margin='0 0 32px 0'>
                     Leaderboard
                 </H2>

src/components/sections/Leaderboard/_renderSubmissions.js

@@ -2,17 +2,19 @@ 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 theme from '../../../utils/theme';
+
 
 const Line = styled(FlexRow)`
   position: absolute;
-  top: -6px;
+  top: ${({top}) => top ? top : 'auto'};
+  bottom: ${({bottom}) => bottom ? bottom : 'auto'};
   left: 0;
   width: 100%;
   background-color: ${({theme}) => theme.colors.dark04};
-  height: 1px;
+  height: ${({height}) => height ? height : '1px'};
 `;
 
-
 const sortBySwitch = (submissions, metricChoose, sortBy) => {
     switch (sortBy) {
         case 0:
@@ -24,7 +26,6 @@ const sortBySwitch = (submissions, metricChoose, sortBy) => {
         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));
@@ -35,7 +36,6 @@ const sortBySwitch = (submissions, metricChoose, sortBy) => {
         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);
@@ -58,17 +58,19 @@ const _renderSubmissions = (pageNr, submissions, gridGap, metricChoose, sortBy,
                                   }, index) => {
                     return (
                         <Grid as='tr' key={`leaderboard-row-${index}`}
+                              backgroundColor={index % 2 === 1 ? theme.colors.dark01 : 'transparent'}
                               gridTemplateColumns={!IS_MOBILE() ? '1fr 3fr ' + '1fr '.repeat(evaluations.length) + '1fr 2fr' : '1fr 3fr 1fr 1fr 2fr'}
-                              gridGap={gridGap} margin='10px 0 0 0' position='relative' width='100%' padding='4px'>
+                              gridGap='20px' 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'}
+                                            minWidth={elem === 'result' ? '72px' : 'none'} fontSize='18px' as='td'>
-                                            fontSize='18px'
+                                        {elem}
-                                            as='td'>{elem}</Medium>
+                                    </Medium>
                                 );
                             }) : ''}
+                            {index === 0 ? <Line height='2px' top='40px'/> : ''}
                             <Body as='td'>
                                 {index + n}
                             </Body>
@@ -91,7 +93,7 @@ const _renderSubmissions = (pageNr, submissions, gridGap, metricChoose, sortBy,
                                 {when ? `${when.slice(11, 16)} ${when.slice(0, 10)}`
                                     : 'xxx'}
                             </Body>
-                            {index !== 0 ? <Line as='td'/> : ''}
+                            {index !== 0 ? <Line top='0' as='td'/> : ''}
                         </Grid>
                     );
                 })}

src/components/sections/MyEntries.js

@@ -92,7 +92,7 @@ const MyEntries = (props) => {
             );
         } else {
             return (
-                <FlexColumn padding='24px' as='section' width='100%' maxWidth='1000px'>
+                <FlexColumn padding='24px' as='section' width='100%' maxWidth='1400px'>
                     <H2 as='h2' margin='0 0 32px 0'>
                         My entries
                     </H2>

src/components/sections/MyEntries/_renderMySubmissions.js

@@ -1,44 +1,21 @@
 import {ELEMENTS_PER_PAGE, IS_MOBILE} from '../../../utils/globals';
-import {FlexColumn, FlexRow, Grid} from '../../../utils/containers';
+import {FlexColumn, FlexRow, Grid, Svg} from '../../../utils/containers';
 import {Body, Medium} from '../../../utils/fonts';
 import styled from 'styled-components';
 import React from 'react';
+import theme from '../../../utils/theme';
+import arrow from '../../../assets/arrow.svg';
 
 const Line = styled(FlexRow)`
   position: absolute;
-  top: -6px;
+  top: ${({top}) => top ? top : 'auto'};
+  bottom: ${({bottom}) => bottom ? bottom : 'auto'};
   left: 0;
   width: 100%;
   background-color: ${({theme}) => theme.colors.dark04};
-  height: 1px;
+  height: ${({height}) => height ? 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) {
@@ -65,22 +42,32 @@ const _renderMySubmissions = (pageNr, myEntries, gridGap, metricChoose, sortBy,
                                   }, index) => {
                     return (
                         <Grid as='tr' key={`leaderboard-row-${index}`}
-                              gridTemplateColumns={!IS_MOBILE() ? '1fr ' + '4fr '.repeat(headerElements.length - 2) + '2fr' : '1fr 3fr 1fr 1fr 2fr'}
+                              backgroundColor={index % 2 === 1 ? theme.colors.dark01 : 'transparent'}
-                              gridGap={gridGap} margin='10px 0 0 0' position='relative' width='100%' padding='4px'>
+                              gridTemplateColumns={!IS_MOBILE() ? '1fr ' + '4fr '.repeat(headerElements.length - 1) : '1fr 3fr 1fr 1fr 2fr'}
+                              gridGap='20px' position='relative' width='100%' padding='4px'>
                             {index === 0 ? headerElements.map((elem, i) => {
                                 return (
-                                    <Medium key={`leaderboard-header-${i}`}
+                                    <FlexRow alignmentX='flex-start'>
-                                            textAlign={elem === 'entries' || elem === 'when' ? 'right' : 'left'}
+                                        <Medium key={`leaderboard-header-${i}`} fontSize='16px' as='td'
-                                            minWidth={elem === 'result' ? '72px' : 'none'}
+                                                textAlign={elem === 'when' ? 'right' : 'left'}
-                                            fontSize='18px'
+                                                width={elem === 'when' ? '100%' : 'auto'} padding='0 6px 0 0'>
-                                            as='td'>{elem}</Medium>
+                                            {elem}
+                                        </Medium>
+                                        {elem !== '#' ?
+                                            <>
+                                                <Svg width='8px' rotate='180deg' src={arrow}
+                                                     backgroundColor={theme.colors.dark} margin='2px 0 0 0'/>
+                                                <Svg width='8px' src={arrow} backgroundColor={theme.colors.dark}
+                                                     margin='0 0 2px 0'/>
+                                            </> : ''}
+                                    </FlexRow>
                                 );
                             }) : ''}
+                            {index === 0 ? <Line height='2px' top='50%'/> : ''}
                             <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'>

src/components/sections/Submit.js

@@ -24,7 +24,7 @@ const Submit = (props) => {
     };
 
     const challengeSubmissionSubmit = () => {
-        challengeSubmission(props.challengeName, repoUrl, repoBranch, description);
+        challengeSubmission(props.challengeName, repoUrl, repoBranch, description).then(r => console.log(r));
     };
 
     return (