From decd4faf227cd15ae5e927933660ca1c91d233d9 Mon Sep 17 00:00:00 2001 From: Mateusz Tylka Date: Wed, 14 Jun 2023 11:17:09 +0200 Subject: [PATCH] refactor Leaderboard and new Table component structure --- src/api/getChallengeLeaderboard.js | 2 + src/components/generic/Table/Table.js | 20 +---- .../TableRowFooter/TableRowFooter.js | 24 ++++++ .../Table/components/TableRowFooter/index.js | 1 + .../components/TableRowTags/renderTags.js | 2 +- .../generic/Table/styles/TableStyle.js | 5 +- src/pages/Leaderboard/Leaderboard.js | 84 +++++++++++-------- src/pages/Leaderboard/orderKeys.js | 4 +- 8 files changed, 85 insertions(+), 57 deletions(-) create mode 100644 src/components/generic/Table/components/TableRowFooter/TableRowFooter.js create mode 100644 src/components/generic/Table/components/TableRowFooter/index.js diff --git a/src/api/getChallengeLeaderboard.js b/src/api/getChallengeLeaderboard.js index 799ec37..c04e509 100644 --- a/src/api/getChallengeLeaderboard.js +++ b/src/api/getChallengeLeaderboard.js @@ -47,6 +47,8 @@ const getChallengeLeaderboard = ( id: submission.id, submitter: submission.submitter, when: submission.when, + description: submission.description, + entries: submission.times, tags: submission.tags, }; result.push(item); diff --git a/src/components/generic/Table/Table.js b/src/components/generic/Table/Table.js index 4dd5bfa..cd507a8 100644 --- a/src/components/generic/Table/Table.js +++ b/src/components/generic/Table/Table.js @@ -1,20 +1,16 @@ import React from 'react'; -import pensilIco from '../../../assets/pencil_ico.svg'; -import deleteIco from '../../../assets/delete_ico.svg'; import TableStyle from './styles/TableStyle'; import TableHeader from './components/TableHeader'; -import TableRowTags from './components/TableRowTags'; import TableRowItems from './components/TableRowItems'; -import TableRowButtons from './components/TableRowButtons'; import RowsBackgroundStyle from './styles/RowsBackgroundStyle'; -import { FlexRow } from '../../../utils/containers'; +import TableRowFooter from './components/TableRowFooter'; -const Table = ({ items, orderedKeys, sortByUpdate }) => { +const Table = ({ items, orderedKeys, sortByUpdate, rowFooter = true }) => { const [, updateState] = React.useState(); const tableUpdate = React.useCallback(() => updateState({}), []); return ( - + { return ( - - - console.log('edit') }, - { icon: deleteIco, handler: () => console.log('delete') }, - ]} - /> - + ); diff --git a/src/components/generic/Table/components/TableRowFooter/TableRowFooter.js b/src/components/generic/Table/components/TableRowFooter/TableRowFooter.js new file mode 100644 index 0000000..13ac655 --- /dev/null +++ b/src/components/generic/Table/components/TableRowFooter/TableRowFooter.js @@ -0,0 +1,24 @@ +import React from 'react'; +import { FlexRow } from '../../../../../utils/containers'; +import TableRowTags from '../TableRowTags/TableRowTags'; +import TableRowButtons from '../TableRowButtons/TableRowButtons'; +import pensilIco from '../../../../../assets/pencil_ico.svg'; +import deleteIco from '../../../../../assets/delete_ico.svg'; + +const TableRowFooter = ({ rowFooter, item, i }) => { + if (rowFooter) { + return ( + + + console.log('edit') }, + { icon: deleteIco, handler: () => console.log('delete') }, + ]} + /> + + ); + } +}; + +export default TableRowFooter; diff --git a/src/components/generic/Table/components/TableRowFooter/index.js b/src/components/generic/Table/components/TableRowFooter/index.js new file mode 100644 index 0000000..5dbb954 --- /dev/null +++ b/src/components/generic/Table/components/TableRowFooter/index.js @@ -0,0 +1 @@ +export { default } from './TableRowFooter'; diff --git a/src/components/generic/Table/components/TableRowTags/renderTags.js b/src/components/generic/Table/components/TableRowTags/renderTags.js index 93d210e..f7dcd16 100644 --- a/src/components/generic/Table/components/TableRowTags/renderTags.js +++ b/src/components/generic/Table/components/TableRowTags/renderTags.js @@ -1,7 +1,7 @@ import { FlexRow } from '../../../../../utils/containers'; const renderTags = (tags, i) => { - if (tags.length > 0) { + if (tags && tags.length > 0) { return tags.map((tag, j) => { return ( diff --git a/src/components/generic/Table/styles/TableStyle.js b/src/components/generic/Table/styles/TableStyle.js index 4a8e3be..c4a3425 100644 --- a/src/components/generic/Table/styles/TableStyle.js +++ b/src/components/generic/Table/styles/TableStyle.js @@ -19,12 +19,13 @@ const TableStyle = styled.table` .TableStyle__tr { position: relative; - height: 72px; + height: ${({ rowFooter }) => (rowFooter ? '72px' : 'auto')}; } .TableStyle__td { - padding: 0 0 32px 0; + padding: ${({ rowFooter }) => (rowFooter ? '0 0 32px 0' : '12px 0')}; margin: 0 0 0 2px; + min-width: 80px; } .TableStyle_line { diff --git a/src/pages/Leaderboard/Leaderboard.js b/src/pages/Leaderboard/Leaderboard.js index cb0a2d6..6079ac9 100644 --- a/src/pages/Leaderboard/Leaderboard.js +++ b/src/pages/Leaderboard/Leaderboard.js @@ -17,8 +17,8 @@ const Leaderboard = (props) => { const [pageNr, setPageNr] = React.useState(1); const [loading, setLoading] = React.useState(true); const [submitterSorted, setSubmitterSorted] = React.useState(false); - // const [descriptionSorted, setDescriptionSorted] = React.useState(false); - // const [entriesSorted, setEntriesSorted] = React.useState(false); + const [descriptionSorted, setDescriptionSorted] = React.useState(false); + const [entriesSorted, setEntriesSorted] = React.useState(false); const [whenSorted, setWhenSorted] = React.useState(false); const [scoresSorted, setScoresSorted] = React.useState([]); const [idSorted, setIdSorted] = React.useState([]); @@ -80,6 +80,40 @@ const Leaderboard = (props) => { ); } break; + case 'description': + if (descriptionSorted) { + newEntries = newEntries.sort((a, b) => + a.description.toLowerCase() < b.description.toLowerCase() + ? 1 + : b.description.toLowerCase() < a.description.toLowerCase() + ? -1 + : 0 + ); + setDescriptionSorted(false); + } else { + newEntries = newEntries.sort((a, b) => + a.description.toLowerCase() > b.description.toLowerCase() + ? 1 + : b.description.toLowerCase() > a.description.toLowerCase() + ? -1 + : 0 + ); + setDescriptionSorted(true); + } + break; + case 'times': + if (entriesSorted) { + newEntries = newEntries.sort((a, b) => + a.times > b.times ? 1 : b.times > a.times ? -1 : 0 + ); + setEntriesSorted(false); + } else { + newEntries = newEntries.sort((a, b) => + a.times < b.times ? 1 : b.times < a.times ? -1 : 0 + ); + setEntriesSorted(true); + } + break; case 'when': if (whenSorted) { setWhenSorted(false); @@ -111,11 +145,19 @@ const Leaderboard = (props) => { } setEntries(newEntries); }, - [entries, idSorted, scoresSorted, submitterSorted, whenSorted] + [ + descriptionSorted, + entries, + entriesSorted, + idSorted, + scoresSorted, + submitterSorted, + whenSorted, + ] ); const n = (pageNr - 1) * (ELEMENTS_PER_PAGE * 2); - let elements = entries.slice(n, n + ELEMENTS_PER_PAGE * 2); + const elements = entries.slice(n, n + ELEMENTS_PER_PAGE * 2); return ( { items={elements} orderedKeys={orderKeys(entries[0])} sortByUpdate={sortByUpdate} + rowFooter={false} /> )} { }; export default Leaderboard; - -// case 'description': -// if (descriptionSorted) { -// newEntries = newEntries.sort((a, b) => -// a.description.toLowerCase() < b.description.toLowerCase() -// ? 1 -// : b.description.toLowerCase() < a.description.toLowerCase() -// ? -1 -// : 0 -// ); -// setDescriptionSorted(false); -// } else { -// newEntries = newEntries.sort((a, b) => -// a.description.toLowerCase() > b.description.toLowerCase() -// ? 1 -// : b.description.toLowerCase() > a.description.toLowerCase() -// ? -1 -// : 0 -// ); -// setDescriptionSorted(true); -// } -// break; -// case 'entries': -// if (entriesSorted) { -// newEntries = newEntries.sort((a, b) => b.times - a.times); -// setEntriesSorted(false); -// } else { -// newEntries = newEntries.sort((a, b) => a.times - b.times); -// setEntriesSorted(true); -// } -// break; diff --git a/src/pages/Leaderboard/orderKeys.js b/src/pages/Leaderboard/orderKeys.js index 6b1e680..82dd7c1 100644 --- a/src/pages/Leaderboard/orderKeys.js +++ b/src/pages/Leaderboard/orderKeys.js @@ -1,6 +1,6 @@ const orderKeys = (elem) => { if (elem) { - let result = ['id']; + let result = ['id', 'submitter', 'description']; const elemKeys = Object.keys(elem); const dev0keys = elemKeys .filter((key) => key.split('.')[1] === 'dev-0') @@ -14,7 +14,7 @@ const orderKeys = (elem) => { result = result.concat(dev0keys); result = result.concat(dev1keys); result = result.concat(testAkeys); - result.push('when'); + result.push('entries', 'when'); return result; } return null;