s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor Leaderboard and new Table component structure

Browse Source
This commit is contained in:
Mateusz Tylka 2023-06-14 11:17:09 +02:00
parent 1abe2ddfaf
commit decd4faf22
8 changed files with 85 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/getChallengeLeaderboard.js
View File

@ -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);

20
src/components/generic/Table/Table.js
View File

@ -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 (
<TableStyle>
<TableStyle rowFooter={rowFooter}>
<TableHeader
orderedKeys={orderedKeys}
sortByUpdate={sortByUpdate}
@ -24,15 +20,7 @@ const Table = ({ items, orderedKeys, sortByUpdate }) => {
return (
<tr key={`table-row-${i}`} className="TableStyle__tr">
<TableRowItems orderedKeys={orderedKeys} item={item} i={i} />
<FlexRow className="TableStyle__row-footer">
<TableRowTags item={item} i={i} />
<TableRowButtons
buttons={[
{ icon: pensilIco, handler: () => console.log('edit') },
{ icon: deleteIco, handler: () => console.log('delete') },
]}
/>
</FlexRow>
<TableRowFooter rowFooter={rowFooter} item={item} i={i} />
<RowsBackgroundStyle i={i} />
</tr>
);

24
src/components/generic/Table/components/TableRowFooter/TableRowFooter.js Normal file
View File

@ -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 (
<FlexRow className="TableStyle__row-footer">
<TableRowTags item={item} i={i} />
<TableRowButtons
buttons={[
{ icon: pensilIco, handler: () => console.log('edit') },
{ icon: deleteIco, handler: () => console.log('delete') },
]}
/>
</FlexRow>
);
}
};
export default TableRowFooter;

1
src/components/generic/Table/components/TableRowFooter/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './TableRowFooter';

2
src/components/generic/Table/components/TableRowTags/renderTags.js
View File

@ -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 (
<FlexRow className="TableStyle__tag" key={`submissionTag-${i}-${j}`}>

5
src/components/generic/Table/styles/TableStyle.js
View File

@ -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 {

84
src/pages/Leaderboard/Leaderboard.js
View File

@ -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 (
<FlexColumn
@ -138,11 +180,12 @@ const Leaderboard = (props) => {
items={elements}
orderedKeys={orderKeys(entries[0])}
sortByUpdate={sortByUpdate}
rowFooter={false}
/>
)}
<Pager
pageNr={pageNr}
elements={entries}
elements={elements}
setPageNr={setPageNr}
width="72px"
borderRadius="64px"
@ -158,34 +201,3 @@ const Leaderboard = (props) => {
};
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;

4
src/pages/Leaderboard/orderKeys.js
View File

@ -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;