From b4298612b6a9e7ead9f73f8a3b2193bab5c439ea Mon Sep 17 00:00:00 2001 From: mattyl006 Date: Fri, 12 Aug 2022 13:24:23 +0200 Subject: [PATCH] leaderboard corrections --- package-lock.json | 100 ++++++++++++++++++ package.json | 2 + .../elements/DesktopChallengeMenu.js | 2 +- src/components/elements/Table/Table.js | 22 ++-- .../elements/Table/_renderSubmissions.js | 18 ++-- src/components/sections/Leaderboard.js | 2 +- 6 files changed, 124 insertions(+), 22 deletions(-) diff --git a/package-lock.json b/package-lock.json index 44ea37d..9d9f2b3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,8 @@ "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", + "axios": "^0.27.2", + "keycloak-js": "^19.0.1", "markdown": "^0.5.0", "prop-types": "^15.8.1", "react": "^18.2.0", @@ -21,6 +23,9 @@ "styled-components": "^5.3.5", "util": "^0.12.4", "web-vitals": "^2.1.4" + }, + "engines": { + "node": "18.4.0" } }, "node_modules/@ampproject/remapping": { @@ -4816,6 +4821,28 @@ "node": ">=12" } }, + "node_modules/axios": { + "version": "0.27.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", + "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", + "dependencies": { + "follow-redirects": "^1.14.9", + "form-data": "^4.0.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -5134,6 +5161,25 @@ "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, + "node_modules/base64-js": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", + "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, "node_modules/batch": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz", @@ -11305,6 +11351,11 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, + "node_modules/js-sha256": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz", + "integrity": "sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA==" + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -11448,6 +11499,15 @@ "node": ">=4.0" } }, + "node_modules/keycloak-js": { + "version": "19.0.1", + "resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-19.0.1.tgz", + "integrity": "sha512-/GNJcgCb4OsMW+pI2EEQU8PWd4tkXCABqLHkVHbfU+r7XaU9E+zFkD960TItIEarCR0JP6iD8fhKchgxkV+W8w==", + "dependencies": { + "base64-js": "^1.5.1", + "js-sha256": "^0.9.0" + } + }, "node_modules/kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -20343,6 +20403,27 @@ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.2.tgz", "integrity": "sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA==" }, + "axios": { + "version": "0.27.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", + "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", + "requires": { + "follow-redirects": "^1.14.9", + "form-data": "^4.0.0" + }, + "dependencies": { + "form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "requires": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + } + } + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -20590,6 +20671,11 @@ "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, + "base64-js": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", + "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==" + }, "batch": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz", @@ -25057,6 +25143,11 @@ } } }, + "js-sha256": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.9.0.tgz", + "integrity": "sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA==" + }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -25166,6 +25257,15 @@ "object.assign": "^4.1.2" } }, + "keycloak-js": { + "version": "19.0.1", + "resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-19.0.1.tgz", + "integrity": "sha512-/GNJcgCb4OsMW+pI2EEQU8PWd4tkXCABqLHkVHbfU+r7XaU9E+zFkD960TItIEarCR0JP6iD8fhKchgxkV+W8w==", + "requires": { + "base64-js": "^1.5.1", + "js-sha256": "^0.9.0" + } + }, "kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", diff --git a/package.json b/package.json index d973db2..3ac2639 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,8 @@ "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", + "axios": "^0.27.2", + "keycloak-js": "^19.0.1", "markdown": "^0.5.0", "prop-types": "^15.8.1", "react": "^18.2.0", diff --git a/src/components/elements/DesktopChallengeMenu.js b/src/components/elements/DesktopChallengeMenu.js index 4ca1aeb..380f63a 100644 --- a/src/components/elements/DesktopChallengeMenu.js +++ b/src/components/elements/DesktopChallengeMenu.js @@ -9,7 +9,7 @@ const DesktopChallengeMenuStyle = styled(FlexColumn)` position: fixed; left: 0; overflow-y: auto; - width: 310px; + width: 280px; height: 100vh; top: 50px; padding: 64px 0 0 0; diff --git a/src/components/elements/Table/Table.js b/src/components/elements/Table/Table.js index 67aad3a..9f98689 100644 --- a/src/components/elements/Table/Table.js +++ b/src/components/elements/Table/Table.js @@ -13,7 +13,7 @@ import _tableSearchQueryHandler from './_tableSearchQueryHandler'; import Search from '../Search'; const Table = (props) => { - const headerElements = ['#', 'submitter', 'when', 'result', 'entries']; + const headerElements = ['#', 'submitter', 'result', 'entries', 'when']; const [entriesFromApi, setEntriesFromApi] = React.useState([]); const [entries, setEntries] = React.useState([]); const [pageNr, setPageNr] = React.useState(1); @@ -28,9 +28,9 @@ const Table = (props) => { getChallengeLeaderboard(setEntries, challengeName, setLoading); }; - const renderSubmissions = () => { + const renderSubmissions = (gridGap) => { return _renderSubmissions(pageNr, entries - ? entries : []); + ? entries : [], gridGap); }; const tableSearchQueryHandler = (event) => { @@ -56,18 +56,18 @@ const Table = (props) => { <> - {headerElements.map((elem, index) => { return ( + alignmentX={(elem === '#' || elem === 'submitter') ? 'flex-start' : 'flex-end'}> {elem} ); })} - {renderSubmissions()} + {renderSubmissions('10px')} { return ( <> - - + + {headerElements.map((elem, index) => { return ( + alignmentX={(elem === '#' || elem === 'submitter') ? 'flex-start' : 'flex-end'}>

{elem}

 ); })} - {renderSubmissions()} + {renderSubmissions('32px')} { +const _renderSubmissions = (pageNr, submissions, gridGap) => { const n = (pageNr - 1) * ELEMENTS_PER_PAGE; if (submissions) { return ( {submissions.slice(n, n + ELEMENTS_PER_PAGE).map(({submitter, when, evaluations, times}, index) => { return ( - + {index + n + 1} {submitter ? submitter : '[anonymous]'} - - {when ? `${when.slice(11, 16)} ${when.slice(0, 10)}` - : 'xxx'} - - + {evaluations[0] ? evaluations[0].score : 'xxx'} - + {times ? times : 1} + + {when ? `${when.slice(11, 16)} ${when.slice(0, 10)}` + : 'xxx'} + ); diff --git a/src/components/sections/Leaderboard.js b/src/components/sections/Leaderboard.js index 16925a9..67c56f5 100644 --- a/src/components/sections/Leaderboard.js +++ b/src/components/sections/Leaderboard.js @@ -68,7 +68,7 @@ const Leaderboard = (props) => { const desktopRender = () => { return ( - +

Leaderboard