From 83e3e67864ecb1c1b03e10a3c9d8a1d16c72e401 Mon Sep 17 00:00:00 2001
From: mattyl006 <mattyl@st.amu.edu.pl>
Date: Fri, 28 Oct 2022 16:45:06 +0200
Subject: [PATCH] correct submit request, some new styles to leaderboard and
 myEntries

---
 src/App.js                                    |  2 +-
 src/api/challengeSubmissionPost.js            | 34 +++++------
 src/assets/filter_direction.svg               |  6 ++
 .../sections/Leaderboard/Leaderboard.js       |  2 +-
 .../Leaderboard/_renderSubmissions.js         | 22 ++++---
 src/components/sections/MyEntries.js          |  2 +-
 .../MyEntries/_renderMySubmissions.js         | 61 ++++++++-----------
 src/components/sections/Submit.js             |  2 +-
 8 files changed, 62 insertions(+), 69 deletions(-)
 create mode 100644 src/assets/filter_direction.svg

diff --git a/src/App.js b/src/App.js
index 6b18280..8d3d647 100644
--- a/src/App.js
+++ b/src/App.js
@@ -35,7 +35,7 @@ const App = () => {
                     KeyCloakService.doLogin();
                 }
             }
-        }, 500);
+        }, 1500);
     });
 
     const loggedBarVisibleHandler = () => {
diff --git a/src/api/challengeSubmissionPost.js b/src/api/challengeSubmissionPost.js
index 38f3737..d99bf0b 100644
--- a/src/api/challengeSubmissionPost.js
+++ b/src/api/challengeSubmissionPost.js
@@ -1,29 +1,27 @@
 import KeyCloakService from '../services/KeyCloakService';
 import {API} from '../utils/globals';
 
-async function postData(url = '', data = {}) {
-    const response = await fetch(url, {
+const challengeSubmission = (challengeName, repoUrl, repoBranch, description) => {
+    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',
-        referrerPolicy: 'no-referrer',
-        body: JSON.stringify(data)
+        body: formBody
     });
-    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;
diff --git a/src/assets/filter_direction.svg b/src/assets/filter_direction.svg
new file mode 100644
index 0000000..5e232d0
--- /dev/null
+++ b/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>
diff --git a/src/components/sections/Leaderboard/Leaderboard.js b/src/components/sections/Leaderboard/Leaderboard.js
index 0c0d315..27938bd 100644
--- a/src/components/sections/Leaderboard/Leaderboard.js
+++ b/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>
diff --git a/src/components/sections/Leaderboard/_renderSubmissions.js b/src/components/sections/Leaderboard/_renderSubmissions.js
index 6ebc3f3..ebc5081 100644
--- a/src/components/sections/Leaderboard/_renderSubmissions.js
+++ b/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'}
-                                            fontSize='18px'
-                                            as='td'>{elem}</Medium>
+                                            minWidth={elem === 'result' ? '72px' : 'none'} fontSize='18px' as='td'>
+                                        {elem}
+                                    </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>
                     );
                 })}
diff --git a/src/components/sections/MyEntries.js b/src/components/sections/MyEntries.js
index 3db5659..c9a26bc 100644
--- a/src/components/sections/MyEntries.js
+++ b/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>
diff --git a/src/components/sections/MyEntries/_renderMySubmissions.js b/src/components/sections/MyEntries/_renderMySubmissions.js
index 57abd1d..4c8bd6c 100644
--- a/src/components/sections/MyEntries/_renderMySubmissions.js
+++ b/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'}
-                              gridGap={gridGap} margin='10px 0 0 0' position='relative' width='100%' padding='4px'>
+                              backgroundColor={index % 2 === 1 ? theme.colors.dark01 : 'transparent'}
+                              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}`}
-                                            textAlign={elem === 'entries' || elem === 'when' ? 'right' : 'left'}
-                                            minWidth={elem === 'result' ? '72px' : 'none'}
-                                            fontSize='18px'
-                                            as='td'>{elem}</Medium>
+                                    <FlexRow alignmentX='flex-start'>
+                                        <Medium key={`leaderboard-header-${i}`} fontSize='16px' as='td'
+                                                textAlign={elem === 'when' ? 'right' : 'left'}
+                                                width={elem === 'when' ? '100%' : 'auto'} padding='0 6px 0 0'>
+                                            {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'>
diff --git a/src/components/sections/Submit.js b/src/components/sections/Submit.js
index 8424a55..f56c9c1 100644
--- a/src/components/sections/Submit.js
+++ b/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 (