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

refactor: AllEntries Table replaced by new table and logic

Browse Source
This commit is contained in:
Mateusz Tylka 2023-06-09 13:57:11 +02:00
parent 098e865e91
commit e5d0e50102
27 changed files with 289 additions and 877 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App/components/RoutingManager.js
View File

@ -47,10 +47,6 @@ const RoutingManager = (props) => {
path={`${CHALLENGE_PAGE}/:challengeId/submit`}
element={<Challenge section={CHALLENGE_SECTIONS.SUBMIT} />}
/>
<Route
path={`${CHALLENGE_PAGE}/:challengeId/NewTablePageTest`}
element={<Challenge section={7} />}
/>
<Route path={CHALLENGES_PAGE} element={<Challenges />} />
<Route
path={POLICY_PRIVACY_PAGE}

6
src/api/getAllEntries.js
View File

@ -3,8 +3,7 @@ import KeyCloakService from '../services/KeyCloakService';
const getAllEntries = (
challengeName,
setDataOriginalState,
setDataState,
setDataStates,
setLoadingState,
setScoreSorted
) => {
@ -13,7 +12,6 @@ const getAllEntries = (
})
.then((response) => response.json())
.then((data) => {
if (setDataOriginalState) setDataOriginalState(data);
let item = {};
let result = [];
let initSetScoreSorted = [];
@ -57,7 +55,7 @@ const getAllEntries = (
for (let _ of tests) {
initSetScoreSorted.push(false);
}
setDataState(result);
for (let setDataState of setDataStates) setDataState(result);
if (setScoreSorted) setScoreSorted(initSetScoreSorted);
if (setLoadingState) setLoadingState(false);
});

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

@ -1,222 +1,43 @@
import React from 'react';
import {
Container,
FlexColumn,
FlexRow,
Grid,
} from '../../../utils/containers';
import Media from 'react-media';
import theme from '../../../utils/theme';
import { ELEMENTS_PER_PAGE, IS_MOBILE } from '../../../utils/globals';
import { Body, Medium } from '../../../utils/fonts';
import ColumnFilterIcon from '../ColumnFilterIcon';
// import deleteSubmission from '../../api/deleteSubmission';
import pensilIco from '../../../assets/pencil_ico.svg';
import deleteIco from '../../../assets/delete_ico.svg';
import TableStyle from './styles/TableStyle';
import TableLine from './styles/TableLine';
import MobileTableStyle from './styles/MobileTableStyle';
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';
const Table = (props) => {
const Table = ({ items, orderedKeys, sortByUpdate }) => {
const [, updateState] = React.useState();
const forceUpdate = React.useCallback(() => updateState({}), []);
const [activeIcon, setActiveIcon] = React.useState(null);
const [rotateActiveIcon, setRotateActiveIcon] = React.useState(false);
const metricsRender = (elem) => {
if (!props.iterableColumnElement) return <></>;
if (Array.isArray(elem[props.iterableColumnElement.name]))
elem = elem[props.iterableColumnElement.name];
else {
let newElem = [];
for (let metric of props.possibleMetrics) {
if (Object.hasOwn(elem, props.iterableColumnElement.name)) {
if (elem[props.iterableColumnElement.name][metric] === '_')
newElem.push('N/A');
else newElem.push(elem[props.iterableColumnElement.name][metric]);
} else {
newElem.push('N/A');
}
}
elem = newElem;
}
let indexModificator = 2;
if (props.tableType === 'leaderboard') indexModificator = 4;
if (props.tableType === 'allEntries') indexModificator = 3;
return elem.map((iterableElem, i) => {
return (
<Body
key={`metric-result-${i}`}
as="td"
order={props.iterableColumnElement.order}
textAlign={props.iterableColumnElement.align}
minWidth="88px"
margin="auto 0"
overflowWrap="anywhere"
>
{IS_MOBILE() && (
<Container className="mobile-table-header">
{props.headerElements[indexModificator + i]}
</Container>
)}
{props.iterableColumnElement.format
? props.iterableColumnElement.format(iterableElem)
: iterableElem}
</Body>
);
});
};
const rowRender = (elem) => {
let RowStyle = Body;
if (elem.submitter === props.user) RowStyle = Medium;
return props.staticColumnElements.map((elemName, i) => {
return (
<RowStyle
key={`leaderboard-static-elemName-${i}-${elem[elemName.name]}`}
as="td"
order={elemName.order}
textAlign={elemName.align}
margin="auto 0"
minWidth="88px"
overflowWrap="anywhere"
cursor="pointer"
// onClick={props.myEntries && (() => deleteSubmission(elem.id))}
>
{IS_MOBILE() && (
<Container className="mobile-table-header">
{props.headerElements[i]}
</Container>
)}
{elemName.format
? elemName.format(elem[elemName.name])
: elem[elemName.name]}
</RowStyle>
);
});
};
const desktopRender = () => {
const n = (props.pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
let elementsToMap = props.elements.slice(n, n + ELEMENTS_PER_PAGE * 2);
if (elementsToMap.length > 0) {
return (
<TableStyle as="table" margin="32px 0 72px 0" width="100%">
<FlexColumn as="tbody" width="100%">
<Grid
as="tr"
gridGap="20px"
position="relative"
width="100%"
padding="0 6px"
minHeight="44px"
margin="0 0 6px 0"
gridTemplateColumns={props.gridTemplateColumns}
>
{props.headerElements.map((elem, i) => {
return (
<FlexRow
key={`table-header-${i}`}
alignmentX="flex-start"
as="td"
cursor="pointer"
onClick={() => {
if (activeIcon === i) {
let newRotateActiveIcon = !rotateActiveIcon;
setRotateActiveIcon(newRotateActiveIcon);
} else {
setRotateActiveIcon(false);
}
setActiveIcon(i);
props.sortByUpdate(elem, i);
forceUpdate();
}}
>
<Medium
cursor={elem !== '#' ? 'pointer' : ''}
textAlign={elem === 'when' ? 'right' : 'left'}
width={elem === 'when' ? '100%' : 'auto'}
padding="0 4px 0 0"
overflowWrap="anywhere"
minWidth="72px"
>
{elem.replace('.', ' ')}
</Medium>
{elem !== '#' && (
<ColumnFilterIcon
cursor="pointer"
index={i}
active={activeIcon}
rotateIcon={rotateActiveIcon}
/>
)}
</FlexRow>
);
})}
<TableLine
height="2px"
top="calc(100% + 2px)"
as="td"
shadow={theme.shadow}
/>
</Grid>
{elementsToMap.map((elem, index) => {
return (
<Grid
as="tr"
key={`leaderboard-row-${index}`}
backgroundColor={
index % 2 === 1 ? theme.colors.dark01 : 'transparent'
}
gridTemplateColumns={props.gridTemplateColumns}
gridGap="20px"
position="relative"
width="100%"
padding="4px"
minHeight="48px"
>
{rowRender(elem)}
{props.headerElements ? metricsRender(elem) : ''}
</Grid>
);
})}
</FlexColumn>
</TableStyle>
);
}
return <Medium margin="72px 0">No results ;c</Medium>;
};
const mobileRender = () => {
const n = (props.pageNr - 1) * ELEMENTS_PER_PAGE;
let elementsToMap = props.elements.slice(n, n + ELEMENTS_PER_PAGE);
if (elementsToMap.length > 0) {
return (
<MobileTableStyle
as="table"
staticColumnElements={props.staticColumnElements}
headerElements={props.headerElements}
>
<Container as="tbody">
{elementsToMap.map((elem, index) => {
return (
<Grid as="tr" key={`leaderboard-row-${index}`}>
{rowRender(elem)}
{props.headerElements ? metricsRender(elem) : ''}
</Grid>
);
})}
</Container>
</MobileTableStyle>
);
}
return <Medium margin="72px 0">No results ;c</Medium>;
};
const tableUpdate = React.useCallback(() => updateState({}), []);
return (
<>
<Media query={theme.mobile}>{mobileRender()}</Media>
<Media query={theme.desktop}>{desktopRender()}</Media>
</>
<TableStyle>
<TableHeader
orderedKeys={orderedKeys}
sortByUpdate={sortByUpdate}
tableUpdate={tableUpdate}
/>
{items.map((item, i) => {
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>
<RowsBackgroundStyle i={i} />
</tr>
);
})}
</TableStyle>
);
};

19
src/pages/NewTable/components/TableHeader/TableHeader.js → src/components/generic/Table/components/TableHeader/TableHeader.js
View File

@ -1,19 +1,18 @@
import React from 'react';
import SortButtonContainerStyle from '../../styles/SortButtonContainerStyle';
import ColumnFilterIcon from '../../../../components/generic/ColumnFilterIcon';
import { FlexRow } from '../../../../utils/containers';
import { FlexRow } from '../../../../../utils/containers';
import ColumnFilterIcon from '../../../ColumnFilterIcon';
const TableHeader = (props) => {
const [activeIcon, setActiveIcon] = React.useState(null);
const [rotateActiveIcon, setRotateActiveIcon] = React.useState(false);
return (
<tr className="NewTableStyle__tr-header">
<tr className="TableStyle__tr-header">
{props.orderedKeys.map((keyValue, i) => {
return (
<th
key={`table-header-${i}`}
className="NewTableStyle__th"
className="TableStyle__th"
onClick={() => {
if (activeIcon === i) {
let newRotateActiveIcon = !rotateActiveIcon;
@ -27,17 +26,21 @@ const TableHeader = (props) => {
}}
>
{keyValue}
<SortButtonContainerStyle as="span" column={keyValue}>
<FlexRow
as="span"
className="TableStyle__sort-button"
column={keyValue}
>
<ColumnFilterIcon
index={i}
active={activeIcon}
rotateIcon={rotateActiveIcon}
/>
</SortButtonContainerStyle>
</FlexRow>
</th>
);
})}
<FlexRow className="NewTableStyle__line" as="td" />
<FlexRow className="TableStyle__line" as="td" />
</tr>
);
};

0
src/pages/NewTable/components/TableHeader/index.js → src/components/generic/Table/components/TableHeader/index.js
View File

4
src/pages/NewTable/components/TableRowButtons/TableRowButtons.js → src/components/generic/Table/components/TableRowButtons/TableRowButtons.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import { FlexRow, Svg } from '../../../../utils/containers';
import theme from '../../../../utils/theme';
import { FlexRow, Svg } from '../../../../../utils/containers';
import theme from '../../../../../utils/theme';
const TableRowButtons = ({ buttons, i }) => {
return (

0
src/pages/NewTable/components/TableRowButtons/index.js → src/components/generic/Table/components/TableRowButtons/index.js
View File

4
src/pages/NewTable/components/TableRowItems/TableRowItems.js → src/components/generic/Table/components/TableRowItems/TableRowItems.js
View File

@ -1,12 +1,12 @@
import React from 'react';
import { RENDER_WHEN, RENDER_METRIC_VALUE } from '../../../../utils/globals';
import { RENDER_WHEN, RENDER_METRIC_VALUE } from '../../../../../utils/globals';
const TableRowItems = ({ orderedKeys, item, i }) => {
return (
<>
{orderedKeys.map((keyValue, j) => {
return (
<td key={`table-item-${i}-${j}`} className="NewTableStyle__td">
<td key={`table-item-${i}-${j}`} className="TableStyle__td">
{keyValue === 'when'
? RENDER_WHEN(item[keyValue])
: RENDER_METRIC_VALUE(item[keyValue])}

0
src/pages/NewTable/components/TableRowItems/index.js → src/components/generic/Table/components/TableRowItems/index.js
View File

4
src/pages/NewTable/components/TableRowTags/TableRowTags.js → src/components/generic/Table/components/TableRowTags/TableRowTags.js
View File

@ -1,9 +1,9 @@
import { FlexRow } from '../../../../utils/containers';
import renderTags from './renderTags';
import { FlexRow } from '../../../../../utils/containers';
const TableRowTags = ({ item, i }) => {
return (
<FlexRow className="NewTableStyle__tags-container">
<FlexRow className="TableStyle__tags-container">
{renderTags(item.tags)}
</FlexRow>
);

0
src/pages/NewTable/components/TableRowTags/index.js → src/components/generic/Table/components/TableRowTags/index.js
View File

16
src/components/generic/Table/components/TableRowTags/renderTags.js Normal file
View File

@ -0,0 +1,16 @@
import { FlexRow } from '../../../../../utils/containers';
const renderTags = (tags, i) => {
if (tags.length > 0) {
return tags.map((tag, j) => {
return (
<FlexRow className="TableStyle__tag" key={`submissionTag-${i}-${j}`}>
{tag.name}
</FlexRow>
);
});
}
return <FlexRow className="TableStyle__tag">submission without tags</FlexRow>;
};
export default renderTags;

58
src/components/generic/Table/styles/MobileTableStyle.js
View File

@ -1,58 +0,0 @@
import styled from 'styled-components';
import { Container } from '../../../../utils/containers';
const MobileTableStyle = styled(Container)`
width: 100%;
border-collapse: collapse;
margin: 32px 0;
tr:nth-of-type(odd) {
background: ${({ theme }) => theme.colors.dark03};
}
th {
background: ${({ theme }) => theme.colors.dark05};
color: ${({ theme }) => theme.colors.white};
}
td,
th {
padding: 6px;
border: 1px solid ${({ theme }) => theme.colors.white};
text-align: left;
}
display: block;
thead,
tbody,
th,
td {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
td {
border: none;
border-bottom: 1px solid ${({ theme }) => theme.colors.dark01};
position: relative;
padding-left: 50%;
}
.mobile-table-header {
font-weight: 400;
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
`;
export default MobileTableStyle;

2
src/pages/NewTable/styles/RowsBackgroundStyle.js → src/components/generic/Table/styles/RowsBackgroundStyle.js
View File

@ -1,5 +1,5 @@
import styled from 'styled-components';
import { FlexRow } from '../../../utils/containers';
import { FlexRow } from '../../../../utils/containers';
const RowsBackgroundStyle = styled(FlexRow)`
width: calc(100% + 12px);

14
src/components/generic/Table/styles/TableLine.js
View File

@ -1,14 +0,0 @@
import styled from 'styled-components';
import { FlexRow } from '../../../../utils/containers';
const TableLine = styled(FlexRow)`
position: absolute;
top: ${({ top }) => (top ? top : 'auto')};
bottom: ${({ bottom }) => (bottom ? bottom : 'auto')};
left: 0;
width: 100%;
background-color: ${({ theme }) => theme.colors.dark04};
height: ${({ height }) => (height ? height : '1px')};
`;
export default TableLine;

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

@ -1,8 +1,71 @@
import styled from 'styled-components';
import { FlexColumn } from '../../../../utils/containers';
const TableStyle = styled(FlexColumn)`
overflow-x: ${({ metrics }) => (metrics > 10 ? 'scroll' : 'auto')};
const TableStyle = styled.table`
border-collapse: separate;
width: 100%;
.TableStyle__th {
position: relative;
cursor: pointer;
* {
cursor: pointer;
}
}
.TableStyle__tr-header {
height: 48px;
position: relative;
}
.TableStyle__tr {
position: relative;
height: 72px;
}
.TableStyle__td {
padding: 0 0 32px 0;
margin: 0 0 0 2px;
}
.TableStyle_line {
position: absolute;
top: 94%;
bottom: ${({ bottom }) => (bottom ? bottom : 'auto')};
left: -6px;
width: calc(100% + 12px);
background-color: ${({ theme }) => theme.colors.dark04};
height: 3px;
box-shadow: ${({ theme }) => theme.shadow};
}
.TableStyle__tag {
color: ${({ theme }) => theme.colors.white};
background-color: ${({ theme }) => theme.colors.green08};
padding: 4px;
border-radius: 2px;
font-size: 12px;
font-weight: 600;
}
.TableStyle__row-footer {
width: 100%;
justify-content: space-between;
position: absolute;
top: 55%;
left: 0;
z-index: 2;
}
.TableStyle__tags-container {
gap: 4px;
padding: 0 2px;
}
.TableStyle__sort-button {
position: absolute;
top: 15px;
right: 16%;
}
`;
export default TableStyle;

350
src/pages/AllEntries/AllEntries.js
View File

@ -1,244 +1,154 @@
import React from 'react';
import theme from '../../utils/theme';
import Media from 'react-media';
import { FlexColumn } from '../../utils/containers';
import { H2 } from '../../utils/fonts';
import {
CALC_PAGES,
EVALUATIONS_FORMAT,
RENDER_WHEN,
IS_MOBILE,
} from '../../utils/globals';
import Loading from '../../components/generic/Loading';
import Pager from '../../components/generic/Pager';
import Table from '../../components/generic/Table/Table';
import Search from '../../components/generic/Search';
import allEntriesSearchQueryHandler from './allEntriesSearchQueryHandler';
import getAllEntries from '../../api/getAllEntries';
import Table from '../../components/generic/Table';
import Loading from '../../components/generic/Loading';
import { CALC_PAGES, ELEMENTS_PER_PAGE } from '../../utils/globals';
import searchQueryHandler from './searchHandler';
import orderKeys from './orderKeys';
const AllEntries = (props) => {
const [entriesFromApi, setEntriesFromApi] = React.useState([]);
const NewTablePageTest = (props) => {
const [entriesAll, setEntriesAll] = React.useState([]);
const [entries, setEntries] = React.useState([]);
const [pageNr, setPageNr] = React.useState(1);
const [loading, setLoading] = React.useState(true);
const [idSorted, setIdSorted] = React.useState([]);
const [scoresSorted, setScoresSorted] = React.useState([]);
const [submitterSorted, setSubmitterSorted] = React.useState(false);
const [whenSorted, setWhenSorted] = React.useState(false);
React.useEffect(() => {
if (props.challengeName) challengeDataRequest(props.challengeName);
React.useMemo(() => {
if (props.challengeName) {
getAllEntries(
props.challengeName,
[setEntries, setEntriesAll],
setLoading,
setScoresSorted
);
}
}, [props.challengeName]);
const challengeDataRequest = (challengeName) => {
getAllEntries(challengeName, setEntriesFromApi, setEntriesAll);
getAllEntries(
challengeName,
undefined,
setEntries,
setLoading,
setScoresSorted
);
};
const getPossibleMetrics = () => {
let metrics = [];
if (entriesFromApi.tests) {
for (let test of entriesFromApi.tests) {
let myEval = `${test.metric}.${test.name}`;
if (myEval && !metrics.includes(myEval)) {
metrics.push(myEval);
}
const sortByUpdate = React.useCallback(
(elem) => {
let newEntries = entries.slice();
const possibleMetrics = orderKeys(entries[0]).filter(
(key) => !['id', 'submitter', 'when'].includes(key)
);
let metricIndex = possibleMetrics.indexOf(elem);
let newScoresSorted = scoresSorted.slice();
switch (elem) {
case 'id':
if (idSorted) {
setIdSorted(false);
newEntries = newEntries.sort((a, b) =>
a.id > b.id ? 1 : b.id > a.id ? -1 : 0
);
} else {
setIdSorted(true);
newEntries = newEntries.sort((a, b) =>
a.id < b.id ? 1 : b.id < a.id ? -1 : 0
);
}
break;
case 'submitter':
if (submitterSorted) {
setSubmitterSorted(false);
newEntries = newEntries.sort((a, b) =>
a.submitter.toLowerCase() < b.submitter.toLowerCase()
? 1
: b.submitter.toLowerCase() < a.submitter.toLowerCase()
? -1
: 0
);
} else {
setSubmitterSorted(true);
newEntries = newEntries.sort((a, b) =>
a.submitter.toLowerCase() > b.submitter.toLowerCase()
? 1
: b.submitter.toLowerCase() > a.submitter.toLowerCase()
? -1
: 0
);
}
break;
case 'when':
if (whenSorted) {
setWhenSorted(false);
newEntries = newEntries.sort((a, b) =>
a.when < b.when ? 1 : b.when < a.when ? -1 : 0
);
} else {
setWhenSorted(true);
newEntries = newEntries.sort((a, b) =>
a.when > b.when ? 1 : b.when > a.when ? -1 : 0
);
}
break;
default:
if (scoresSorted[metricIndex]) {
newEntries = newEntries.sort(
(a, b) => (b ? b[elem] : -1) - (a ? a[elem] : -1)
);
newScoresSorted[metricIndex] = false;
setScoresSorted(newScoresSorted);
} else {
newEntries = newEntries.sort(
(a, b) => (a ? a[elem] : -1) - (b ? b[elem] : -1)
);
newScoresSorted[metricIndex] = true;
setScoresSorted(newScoresSorted);
}
break;
}
}
return metrics;
};
setEntries(newEntries);
},
[entries, idSorted, scoresSorted, submitterSorted, whenSorted]
);
const getAllEntriesHeader = () => {
let header = ['#', 'submitter'];
if (IS_MOBILE()) header.push('when');
for (let metric of getPossibleMetrics()) {
header.push(metric);
}
if (!IS_MOBILE()) header.push('when');
return header;
};
const n = (pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
let elements = entries.slice(n, n + ELEMENTS_PER_PAGE * 2);
const searchQueryHandler = (event) => {
allEntriesSearchQueryHandler(event, entriesAll, setPageNr, setEntries);
};
const sortByUpdate = (elem, i) => {
let newEntries = entries;
switch (elem) {
case '#':
break;
case 'submitter':
if (submitterSorted) {
setSubmitterSorted(false);
newEntries = newEntries.sort((a, b) =>
a.submitter.toLowerCase() < b.submitter.toLowerCase()
? 1
: b.submitter.toLowerCase() < a.submitter.toLowerCase()
? -1
: 0
);
} else {
setSubmitterSorted(true);
newEntries = newEntries.sort((a, b) =>
a.submitter.toLowerCase() > b.submitter.toLowerCase()
? 1
: b.submitter.toLowerCase() > a.submitter.toLowerCase()
? -1
: 0
);
}
break;
case 'when':
if (whenSorted) {
setWhenSorted(false);
newEntries = newEntries.sort((a, b) =>
a.when < b.when ? 1 : b.when < a.when ? -1 : 0
);
} else {
setWhenSorted(true);
newEntries = newEntries.sort((a, b) =>
a.when > b.when ? 1 : b.when > a.when ? -1 : 0
);
}
break;
default:
// eslint-disable-next-line no-case-declarations
let metricIndex = getPossibleMetrics().indexOf(elem);
// eslint-disable-next-line no-case-declarations
let newScoresSorted = scoresSorted;
if (scoresSorted[metricIndex]) {
newEntries = newEntries.sort(
(a, b) =>
(b.evaluations ? b.evaluations[elem] : -1) -
(a.evaluations ? a.evaluations[elem] : -1)
);
newScoresSorted[metricIndex] = false;
setScoresSorted(newScoresSorted);
} else {
newEntries = newEntries.sort(
(a, b) =>
(a.evaluations ? a.evaluations[elem] : -1) -
(b.evaluations ? b.evaluations[elem] : -1)
);
newScoresSorted[metricIndex] = true;
setScoresSorted(newScoresSorted);
}
break;
}
setEntries(newEntries);
};
const mobileRender = () => {
return (
<FlexColumn padding="24px 12px" width="70%" as="section" id="start">
<H2 as="h2" margin="0 0 12px 0">
All Entries
</H2>
{!loading ? (
<>
<Search searchQueryHandler={searchQueryHandler} />
<Table
challengeName={props.challengeName}
headerElements={getAllEntriesHeader()}
possibleMetrics={getPossibleMetrics()}
tableType="allEntries"
gridTemplateColumns={
'1fr ' + '4fr '.repeat(getAllEntriesHeader().length - 1)
}
staticColumnElements={[
{ name: 'id', format: null, order: 1, align: 'left' },
{ name: 'submitter', format: null, order: 2, align: 'left' },
{ name: 'when', format: RENDER_WHEN, order: 5, align: 'right' },
]}
iterableColumnElement={{
name: 'evaluations',
format: EVALUATIONS_FORMAT,
order: 3,
align: 'left',
}}
pageNr={pageNr}
elements={entries}
sortByUpdate={sortByUpdate}
/>
<Pager
pageNr={pageNr}
elements={entries}
setPageNr={setPageNr}
width="48px"
borderRadius="64px"
pages={CALC_PAGES(entries)}
number={`${pageNr} / ${CALC_PAGES(entries)}`}
/>
</>
) : (
<Loading />
)}
</FlexColumn>
);
};
const desktopRender = () => {
return (
<FlexColumn padding="24px" as="section" width="100%" maxWidth="1600px">
<H2 as="h2" margin="0 0 32px 0">
All Entries
</H2>
{!loading ? (
<>
<Search searchQueryHandler={searchQueryHandler} />
<Table
challengeName={props.challengeName}
headerElements={getAllEntriesHeader()}
possibleMetrics={getPossibleMetrics()}
gridTemplateColumns={
'1fr 3fr ' + '3fr '.repeat(getPossibleMetrics().length) + ' 3fr'
}
user={props.user}
staticColumnElements={[
{ name: 'id', format: null, order: 1, align: 'left' },
{ name: 'submitter', format: null, order: 2, align: 'left' },
{ name: 'when', format: RENDER_WHEN, order: 5, align: 'right' },
]}
metrics={getPossibleMetrics()}
iterableColumnElement={{
name: 'evaluations',
format: EVALUATIONS_FORMAT,
order: 3,
align: 'left',
}}
pageNr={pageNr}
elements={entries}
setPageNr={setPageNr}
sortByUpdate={sortByUpdate}
/>
<Pager
pageNr={pageNr}
elements={entries}
setPageNr={setPageNr}
width="72px"
borderRadius="64px"
pages={CALC_PAGES(entries, 2)}
number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}
/>
</>
) : (
<Loading />
)}
</FlexColumn>
);
};
return (
<>
<Media query={theme.mobile}>{mobileRender()}</Media>
<Media query={theme.desktop}>{desktopRender()}</Media>
</>
<FlexColumn
padding="24px"
gap="32px"
as="section"
width="100%"
maxWidth="1600px"
>
<H2 as="h2">All Entries</H2>
{!loading ? (
<>
<Search
searchQueryHandler={(event) =>
searchQueryHandler(event, entriesAll, setPageNr, setEntries)
}
/>
{elements.length > 0 && entries[0] && (
<Table
items={elements}
orderedKeys={orderKeys(entries[0])}
sortByUpdate={sortByUpdate}
/>
)}
<Pager
pageNr={pageNr}
elements={entries}
setPageNr={setPageNr}
width="72px"
borderRadius="64px"
pages={CALC_PAGES(entries, 2)}
number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}
/>
</>
) : (
<Loading />
)}
</FlexColumn>
);
};
export default AllEntries;
export default NewTablePageTest;

31
src/pages/AllEntries/allEntriesSearchQueryHandler.js
View File

@ -1,31 +0,0 @@
const allEntriesSearchQueryHandler = (
event,
entriesFromApi,
setPageNr,
setEntries
) => {
let searchQuery = event.target.value;
let submissionsToRender = [];
setPageNr(1);
if (searchQuery === '') setEntries(entriesFromApi);
else {
for (let entry of entriesFromApi) {
const { id, when, submitter } = entry;
let evaluations = '';
if (entry.evaluations) {
for (let evaluation of Object.values(entry.evaluations)) {
evaluations += ` ${evaluation}`;
}
}
const str = `${id} ${submitter} ${when.slice(11, 16)} ${when.slice(
0,
10
)} ${evaluations}`;
if (str.toLowerCase().includes(searchQuery.toLowerCase()))
submissionsToRender.push(entry);
}
setEntries(submissionsToRender);
}
};
export default allEntriesSearchQueryHandler;

23
src/pages/AllEntries/orderKeys.js Normal file
View File

@ -0,0 +1,23 @@
const orderKeys = (elem) => {
if (elem) {
let result = ['id', 'submitter'];
const elemKeys = Object.keys(elem);
const dev0keys = elemKeys
.filter((key) => key.split('.')[1] === 'dev-0')
.sort();
const dev1keys = elemKeys
.filter((key) => key.split('.')[1] === 'dev-1')
.sort();
const testAkeys = elemKeys
.filter((key) => key.split('.')[1] === 'test-A')
.sort();
result = result.concat(dev0keys);
result = result.concat(dev1keys);
result = result.concat(testAkeys);
result.push('when');
return result;
}
return null;
};
export default orderKeys;

0
src/pages/NewTable/searchHandler.js → src/pages/AllEntries/searchHandler.js
View File

3
src/pages/Challenge/Challenge.js
View File

@ -17,7 +17,6 @@ import getChallengeInfo from '../../api/getChallengeInfo';
import Loading from '../../components/generic/Loading';
import getUser from '../../api/getUser';
import AllEntries from '../AllEntries/AllEntries';
import NewTablePageTest from '../NewTable/NewTablePageTest';
const Challenge = (props) => {
const challengeName = useParams().challengeId;
@ -65,8 +64,6 @@ const Challenge = (props) => {
return <MyEntries challengeName={challengeName} />;
case CHALLENGE_SECTIONS.SUBMIT:
return <Submit challengeName={challengeName} setLoading={setLoading} />;
case 7:
return <NewTablePageTest challengeName={challengeName} />;
default:
return (
<Leaderboard

44
src/pages/NewTable/NewTable.js
View File

@ -1,44 +0,0 @@
import React from 'react';
import { FlexRow } from '../../utils/containers';
import pensilIco from '../../assets/pencil_ico.svg';
import deleteIco from '../../assets/delete_ico.svg';
import NewTableStyle from './styles/NewTableStyle';
import RowsBackgroundStyle from './styles/RowsBackgroundStyle';
import TableHeader from './components/TableHeader';
import TableRowTags from './components/TableRowTags';
import TableRowItems from './components/TableRowItems';
import TableRowButtons from './components/TableRowButtons';
const NewTable = ({ items, orderedKeys, sortByUpdate }) => {
const [, updateState] = React.useState();
const tableUpdate = React.useCallback(() => updateState({}), []);
return (
<NewTableStyle>
<TableHeader
orderedKeys={orderedKeys}
sortByUpdate={sortByUpdate}
tableUpdate={tableUpdate}
/>
{items.map((item, i) => {
return (
<tr key={`table-row-${i}`} className="NewTableStyle__tr">
<TableRowItems orderedKeys={orderedKeys} item={item} i={i} />
<FlexRow className="NewTableStyle__row-footer">
<TableRowTags item={item} i={i} />
<TableRowButtons
buttons={[
{ icon: pensilIco, handler: () => console.log('edit') },
{ icon: deleteIco, handler: () => console.log('delete') },
]}
/>
</FlexRow>
<RowsBackgroundStyle i={i} />
</tr>
);
})}
</NewTableStyle>
);
};
export default NewTable;

174
src/pages/NewTable/NewTablePageTest.js
View File

@ -1,174 +0,0 @@
import React from 'react';
import { FlexColumn } from '../../utils/containers';
import { H2 } from '../../utils/fonts';
import Pager from '../../components/generic/Pager';
import Search from '../../components/generic/Search';
import getAllEntries from '../../api/getAllEntries';
import NewTable from './NewTable';
import Loading from '../../components/generic/Loading';
import { CALC_PAGES, ELEMENTS_PER_PAGE } from '../../utils/globals';
import searchQueryHandler from './searchHandler';
const NewTablePageTest = (props) => {
// eslint-disable-next-line
const [entriesFromApi, setEntriesFromApi] = React.useState([]);
const [entriesAll, setEntriesAll] = React.useState([]);
const [entries, setEntries] = React.useState([]);
const [pageNr, setPageNr] = React.useState(1);
const [loading, setLoading] = React.useState(true);
const [idSorted, setIdSorted] = React.useState([]);
const [scoresSorted, setScoresSorted] = React.useState([]);
const [submitterSorted, setSubmitterSorted] = React.useState(false);
const [whenSorted, setWhenSorted] = React.useState(false);
React.useEffect(() => {
if (props.challengeName) challengeDataRequest(props.challengeName);
}, [props.challengeName]);
const challengeDataRequest = (challengeName) => {
getAllEntries(challengeName, setEntriesFromApi, setEntriesAll);
getAllEntries(
challengeName,
undefined,
setEntries,
setLoading,
setScoresSorted
);
};
const sortByUpdate = (elem) => {
let newEntries = entries.slice();
const possibleMetrics = orderKeys(entries[0]).filter(
(key) => !['id', 'submitter', 'when'].includes(key)
);
let metricIndex = possibleMetrics.indexOf(elem);
let newScoresSorted = scoresSorted.slice();
switch (elem) {
case 'id':
if (idSorted) {
setIdSorted(false);
newEntries = newEntries.sort((a, b) =>
a.id > b.id ? 1 : b.id > a.id ? -1 : 0
);
} else {
setIdSorted(true);
newEntries = newEntries.sort((a, b) =>
a.id < b.id ? 1 : b.id < a.id ? -1 : 0
);
}
break;
case 'submitter':
if (submitterSorted) {
setSubmitterSorted(false);
newEntries = newEntries.sort((a, b) =>
a.submitter.toLowerCase() < b.submitter.toLowerCase()
? 1
: b.submitter.toLowerCase() < a.submitter.toLowerCase()
? -1
: 0
);
} else {
setSubmitterSorted(true);
newEntries = newEntries.sort((a, b) =>
a.submitter.toLowerCase() > b.submitter.toLowerCase()
? 1
: b.submitter.toLowerCase() > a.submitter.toLowerCase()
? -1
: 0
);
}
break;
case 'when':
if (whenSorted) {
setWhenSorted(false);
newEntries = newEntries.sort((a, b) =>
a.when < b.when ? 1 : b.when < a.when ? -1 : 0
);
} else {
setWhenSorted(true);
newEntries = newEntries.sort((a, b) =>
a.when > b.when ? 1 : b.when > a.when ? -1 : 0
);
}
break;
default:
if (scoresSorted[metricIndex]) {
newEntries = newEntries.sort(
(a, b) => (b ? b[elem] : -1) - (a ? a[elem] : -1)
);
newScoresSorted[metricIndex] = false;
setScoresSorted(newScoresSorted);
} else {
newEntries = newEntries.sort(
(a, b) => (a ? a[elem] : -1) - (b ? b[elem] : -1)
);
newScoresSorted[metricIndex] = true;
setScoresSorted(newScoresSorted);
}
break;
}
setEntries(newEntries);
};
const orderKeys = (elem) => {
if (elem) {
let result = ['id', 'submitter'];
const elemKeys = Object.keys(elem);
const dev0keys = elemKeys
.filter((key) => key.split('.')[1] === 'dev-0')
.sort();
const dev1keys = elemKeys
.filter((key) => key.split('.')[1] === 'dev-1')
.sort();
const testAkeys = elemKeys
.filter((key) => key.split('.')[1] === 'test-A')
.sort();
result = result.concat(dev0keys);
result = result.concat(dev1keys);
result = result.concat(testAkeys);
result.push('when');
return result;
}
return null;
};
const n = (pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
let elements = entries.slice(n, n + ELEMENTS_PER_PAGE * 2);
if (!loading) {
return (
<FlexColumn
padding="24px"
gap="32px"
as="section"
width="100%"
maxWidth="1600px"
>
<H2 as="h2">New Table Test</H2>
<Search
searchQueryHandler={(event) =>
searchQueryHandler(event, entriesAll, setPageNr, setEntries)
}
/>
{elements.length > 0 && entries[0] && (
<NewTable
items={elements}
orderedKeys={orderKeys(entries[0])}
sortByUpdate={sortByUpdate}
/>
)}
<Pager
pageNr={pageNr}
elements={entries}
setPageNr={setPageNr}
width="72px"
borderRadius="64px"
pages={CALC_PAGES(entries, 2)}
number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}
/>
</FlexColumn>
);
} else return <Loading />;
};
export default NewTablePageTest;

18
src/pages/NewTable/components/TableRowTags/renderTags.js
View File

@ -1,18 +0,0 @@
import { FlexRow } from '../../../../utils/containers';
const renderTags = (tags, i) => {
if (tags.length > 0) {
return tags.map((tag, j) => {
return (
<FlexRow className="NewTableStyle__tag" key={`submissionTag-${i}-${j}`}>
{tag.name}
</FlexRow>
);
});
}
return (
<FlexRow className="NewTableStyle__tag">submission without tags</FlexRow>
);
};
export default renderTags;

1
src/pages/NewTable/index.js
View File

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

65
src/pages/NewTable/styles/NewTableStyle.js
View File

@ -1,65 +0,0 @@
import styled from 'styled-components';
const NewTableStyle = styled.table`
border-collapse: separate;
width: 100%;
.NewTableStyle__th {
position: relative;
cursor: pointer;
* {
cursor: pointer;
}
}
.NewTableStyle__tr-header {
height: 48px;
position: relative;
}
.NewTableStyle__tr {
position: relative;
height: 72px;
}
.NewTableStyle__td {
padding: 0 0 32px 0;
margin: 0 0 0 2px;
}
.NewTableStyle__line {
position: absolute;
top: 94%;
bottom: ${({ bottom }) => (bottom ? bottom : 'auto')};
left: -6px;
width: calc(100% + 12px);
background-color: ${({ theme }) => theme.colors.dark04};
height: 3px;
box-shadow: ${({ theme }) => theme.shadow};
}
.NewTableStyle__tag {
color: ${({ theme }) => theme.colors.white};
background-color: ${({ theme }) => theme.colors.green08};
padding: 4px;
border-radius: 2px;
font-size: 12px;
font-weight: 600;
}
.NewTableStyle__row-footer {
width: 100%;
justify-content: space-between;
position: absolute;
top: 55%;
left: 0;
z-index: 2;
}
.NewTableStyle__tags-container {
gap: 4px;
padding: 0 2px;
}
`;
export default NewTableStyle;

10
src/pages/NewTable/styles/SortButtonContainerStyle.js
View File

@ -1,10 +0,0 @@
import styled from 'styled-components';
import { FlexRow } from '../../../utils/containers';
const SortButtonContainerStyle = styled(FlexRow)`
position: absolute;
top: 15px;
right: 16%;
`;
export default SortButtonContainerStyle;