From b4acc255500a66664d580f6935243696a9029286 Mon Sep 17 00:00:00 2001
From: mattyl006 <mattyl@st.amu.edu.pl>
Date: Tue, 26 Jul 2022 11:29:37 +0200
Subject: [PATCH] Leaderboard on desktop complete

---
 src/components/elements/Table/Table.js        |  41 ++++++-
 .../elements/Table/_renderSubmissions.js      |  15 +--
 .../sections/Leaderboar/Leaderboard.js        |  32 ------
 .../sections/Leaderboar/_desktopRender.js     |  44 --------
 .../sections/Leaderboar/_mobileRender.js      |  48 --------
 src/components/sections/Leaderboar/index.js   |   1 -
 src/components/sections/Leaderboard.js        | 105 ++++++++++++++++++
 src/pages/Challenge.js                        |   4 +-
 8 files changed, 152 insertions(+), 138 deletions(-)
 delete mode 100644 src/components/sections/Leaderboar/Leaderboard.js
 delete mode 100644 src/components/sections/Leaderboar/_desktopRender.js
 delete mode 100644 src/components/sections/Leaderboar/_mobileRender.js
 delete mode 100644 src/components/sections/Leaderboar/index.js
 create mode 100644 src/components/sections/Leaderboard.js

diff --git a/src/components/elements/Table/Table.js b/src/components/elements/Table/Table.js
index a38a03f..e3664d7 100644
--- a/src/components/elements/Table/Table.js
+++ b/src/components/elements/Table/Table.js
@@ -1,10 +1,12 @@
 import React from "react";
 import {FlexColumn, FlexRow, Grid} from "../../../utils/containers";
 import getChallengeSubmissions from "../../../api/getChallengeSubmissions";
-import {Medium} from "../../../utils/fonts";
+import {H3, Medium} from "../../../utils/fonts";
 import _renderSubmissions from "./_renderSubmissions";
 import Pager from "../Pager";
 import {CALC_PAGES} from "../../../utils/globals";
+import Media from "react-media";
+import theme from "../../../utils/theme";
 
 const Table = (props) => {
     const headerElements = ['#', 'submitter', 'when', 'result', 'entries'];
@@ -38,9 +40,9 @@ const Table = (props) => {
         }
     }
 
-    return (
-        <>
-            <FlexColumn as='table' margin='0 0 32px 0'>
+    const mobileRender = () => {
+        return (
+            <FlexColumn as='table' margin='0 0 32px 0' minHeight='380px'>
                 <Grid as='thead' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
                       gridGap='10px' width='100%'>
                     {headerElements.map((elem, index) => {
@@ -54,6 +56,37 @@ const Table = (props) => {
                 </Grid>
                 {renderSubmissions()}
             </FlexColumn>
+
+        );
+    }
+
+    const desktopRender = () => {
+        return (
+            <FlexColumn as='table' margin='0 0 72px 0' minHeight='438px'>
+                <Grid as='thead' gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
+                      gridGap='10px' width='100%' margin='0 0 28px 0'>
+                    {headerElements.map((elem, index) => {
+                        return (
+                            <FlexRow as='tr' key={`leaderboard-header-${index}`}
+                                     alignmentX={elem === 'entries' ? 'flex-end' : 'flex-start'}>
+                                <H3 as='th'>{elem}</H3>
+                            </FlexRow>
+                        )
+                    })}
+                </Grid>
+                {renderSubmissions()}
+            </FlexColumn>
+        );
+    }
+
+    return (
+        <>
+            <Media query={theme.mobile}>
+                {mobileRender()}
+            </Media>
+            <Media query={theme.desktop}>
+                {desktopRender()}
+            </Media>
             <Pager pageNr={pageNr} nextPage={nextPage} previousPage={previousPage}
                    pages={CALC_PAGES(challengeData.submissions ? challengeData.submissions : [])}/>
         </>
diff --git a/src/components/elements/Table/_renderSubmissions.js b/src/components/elements/Table/_renderSubmissions.js
index 4619a74..8569958 100644
--- a/src/components/elements/Table/_renderSubmissions.js
+++ b/src/components/elements/Table/_renderSubmissions.js
@@ -16,27 +16,28 @@ const _renderSubmissions = (pageNr, submissions) => {
     const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
     if (submissions) {
         return (
-            <FlexColumn as='tbody'>
+            <FlexColumn as='tbody' width='100%'>
                 {submissions.slice(n, n + ELEMENTS_PER_PAGE).map((submission, index) => {
                     return (
                         <Grid as='tr' key={`leaderboard-row-${index}`} gridTemplateColumns='1fr 3fr 3fr 1fr 1fr'
-                              gridGap='10px' margin='10px 0 0 0' position='relative'>
-                            <Line as='td'/>
+                              gridGap='10px' margin='10px 0 0 0' position='relative' width='100%'>
                             <Body as='td'>
                                 {index + n + 1}
                             </Body>
                             <Body as='td'>
-                                {submission.submitter}
+                                {submission.submitter ? submission.submitter : '[anonymized]'}
                             </Body>
                             <Body as='td'>
-                                {submission.when.slice(11, 16)} {submission.when.slice(0, 10)}
+                                {submission.when ? `${submission.when.slice(11, 16)} ${submission.when.slice(0, 10)}`
+                                    : 'xxx'}
                             </Body>
                             <Body as='td'>
-                                {submission.evaluations[0].score}
+                                {submission.evaluations[0] ? submission.evaluations[0].score : 'xxx'}
                             </Body>
                             <Body as='td' textAlign='right' padding='0 2px 0 0'>
-                                {submission.version.length}
+                                {submission.version ? submission.version.length : 1}
                             </Body>
+                            <Line as='td'/>
                         </Grid>
                     );
                 })}
diff --git a/src/components/sections/Leaderboar/Leaderboard.js b/src/components/sections/Leaderboar/Leaderboard.js
deleted file mode 100644
index 6f54224..0000000
--- a/src/components/sections/Leaderboar/Leaderboard.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-import Media from "react-media";
-import theme from "../../../utils/theme";
-import _mobileRender from "./_mobileRender";
-import _desktopRender from "./_desktopRender";
-
-const Leaderboard = (props) => {
-    const [variant, setVariant] = React.useState(0);
-
-    const mobileRender = () => {
-        return _mobileRender(variant, setVariant, props.challengeName);
-    }
-
-    const desktopRender = () => {
-        return _desktopRender(variant, setVariant, props.challengeName);
-    }
-
-    return (
-        <>
-            <Media query={theme.mobile}>
-                {mobileRender()}
-            </Media>
-            <Media query={theme.desktop}>
-                {desktopRender()}
-            </Media>
-        </>
-    )
-
-
-}
-
-export default Leaderboard;
\ No newline at end of file
diff --git a/src/components/sections/Leaderboar/_desktopRender.js b/src/components/sections/Leaderboar/_desktopRender.js
deleted file mode 100644
index dc7d4ac..0000000
--- a/src/components/sections/Leaderboar/_desktopRender.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import {FlexColumn, FlexRow} from "../../../utils/containers";
-import {H2, H3} from "../../../utils/fonts";
-import theme from "../../../utils/theme";
-import styled from "styled-components";
-
-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;
-  }
-`;
-
-const desktopRender = (variant, setVariant) => {
-    return (
-        <FlexColumn padding='24px' as='section'>
-            <H2 as='h2' margin='0 0 32px 0'>
-                Leaderboard
-            </H2>
-            <FlexRow border={`1px solid ${theme.colors.green05}`}>
-                <BoardVariantDesktop as='button' width='150px' height='48px'
-                                     active={0 === variant} onClick={() => setVariant(0)}>
-                    <H3 as='span'>
-                        By user
-                    </H3>
-                </BoardVariantDesktop>
-                <BoardVariantDesktop as='button' width='150px' height='48px'
-                                     active={1 === variant} onClick={() => setVariant(1)}>
-                    <H3 as='span'>
-                        By metric
-                    </H3>
-                </BoardVariantDesktop>
-            </FlexRow>
-        </FlexColumn>
-    );
-}
-
-export default desktopRender;
\ No newline at end of file
diff --git a/src/components/sections/Leaderboar/_mobileRender.js b/src/components/sections/Leaderboar/_mobileRender.js
deleted file mode 100644
index 1c140c4..0000000
--- a/src/components/sections/Leaderboar/_mobileRender.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import {FlexColumn, FlexRow} from "../../../utils/containers";
-import {H2} from "../../../utils/fonts";
-import styled from "styled-components";
-import Table from "../../elements/Table";
-
-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 mobileRender = (variant, setVariant, challengeName) => {
-    return (
-        <FlexColumn padding='24px 12px' as='section'>
-            <H2 as='h2' margin='0 0 12px 0'>
-                Leaderboard
-            </H2>
-            <FlexRow gap='12px' margin='0 0 20px 0'>
-                <BoardVariantMobile as='button' active={0 === variant} onClick={() => setVariant(0)}>
-                    By user
-                </BoardVariantMobile>
-                <BoardVariantMobile as='button' active={1 === variant} onClick={() => setVariant(1)}>
-                    By metric
-                </BoardVariantMobile>
-            </FlexRow>
-            <Table challengeName={challengeName}/>
-        </FlexColumn>
-    );
-}
-
-export default mobileRender;
\ No newline at end of file
diff --git a/src/components/sections/Leaderboar/index.js b/src/components/sections/Leaderboar/index.js
deleted file mode 100644
index b9cf94c..0000000
--- a/src/components/sections/Leaderboar/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export {default} from './Leaderboard';
\ No newline at end of file
diff --git a/src/components/sections/Leaderboard.js b/src/components/sections/Leaderboard.js
new file mode 100644
index 0000000..531dbb6
--- /dev/null
+++ b/src/components/sections/Leaderboard.js
@@ -0,0 +1,105 @@
+import React from "react";
+import Media from "react-media";
+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";
+
+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;
+  }
+`;
+
+const Leaderboard = (props) => {
+    const [variant, setVariant] = React.useState(0);
+
+    const mobileRender = () => {
+        return (
+            <FlexColumn padding='24px 12px' as='section'>
+                <H2 as='h2' margin='0 0 12px 0'>
+                    Leaderboard
+                </H2>
+                <FlexRow gap='12px' margin='0 0 20px 0'>
+                    <BoardVariantMobile as='button' active={0 === variant} onClick={() => setVariant(0)}>
+                        By user
+                    </BoardVariantMobile>
+                    <BoardVariantMobile as='button' active={1 === variant} onClick={() => setVariant(1)}>
+                        By metric
+                    </BoardVariantMobile>
+                </FlexRow>
+                <Table challengeName={props.challengeName}/>
+            </FlexColumn>
+        );
+    }
+
+    const desktopRender = () => {
+        return (
+            <FlexColumn padding='24px' as='section'>
+                <H2 as='h2' margin='0 0 32px 0'>
+                    Leaderboard
+                </H2>
+                <FlexRow border={`1px solid ${theme.colors.green05}`} margin='0 0 76px 0'>
+                    <BoardVariantDesktop as='button' width='150px' height='48px'
+                                         active={0 === variant} onClick={() => setVariant(0)}>
+                        <H3 as='span'>
+                            By user
+                        </H3>
+                    </BoardVariantDesktop>
+                    <BoardVariantDesktop as='button' width='150px' height='48px'
+                                         active={1 === variant} onClick={() => setVariant(1)}>
+                        <H3 as='span'>
+                            By metric
+                        </H3>
+                    </BoardVariantDesktop>
+                </FlexRow>
+                <Table challengeName={props.challengeName}/>
+            </FlexColumn>
+        );
+    }
+
+    return (
+        <>
+            <Media query={theme.mobile}>
+                {mobileRender()}
+            </Media>
+            <Media query={theme.desktop}>
+                {desktopRender()}
+            </Media>
+        </>
+    )
+}
+
+export default Leaderboard;
\ No newline at end of file
diff --git a/src/pages/Challenge.js b/src/pages/Challenge.js
index bba2a00..a8daff1 100644
--- a/src/pages/Challenge.js
+++ b/src/pages/Challenge.js
@@ -5,7 +5,7 @@ import {H1, Medium} from "../utils/fonts";
 import getChallenges from "../api/getChallenges";
 import theme from "../utils/theme";
 import MobileChallengeMenu from "../components/elements/MobileChallengeMenu";
-import Leaderboard from "../components/sections/Leaderboar/Leaderboard";
+import Leaderboard from "../components/sections/Leaderboard";
 import Readme from "../components/sections/Readme";
 import HowTo from "../components/sections/HowTo";
 import MyEntries from "../components/sections/MyEntries";
@@ -47,7 +47,7 @@ const Challenge = () => {
             case 4:
                 return <Submit/>
             default:
-                return <Leaderboard/>
+                return <Leaderboard challengeName={challengeName}/>
         }
     }