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`} path={`${CHALLENGE_PAGE}/:challengeId/submit`}
element={<Challenge section={CHALLENGE_SECTIONS.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={CHALLENGES_PAGE} element={<Challenges />} />
<Route <Route
path={POLICY_PRIVACY_PAGE} path={POLICY_PRIVACY_PAGE}

6
src/api/getAllEntries.js
View File

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

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

@ -1,223 +1,44 @@
import React from 'react'; import React from 'react';
import { import pensilIco from '../../../assets/pencil_ico.svg';
Container, import deleteIco from '../../../assets/delete_ico.svg';
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 TableStyle from './styles/TableStyle'; import TableStyle from './styles/TableStyle';
import TableLine from './styles/TableLine'; import TableHeader from './components/TableHeader';
import MobileTableStyle from './styles/MobileTableStyle'; 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 [, updateState] = React.useState();
const forceUpdate = React.useCallback(() => updateState({}), []); const tableUpdate = 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 ( return (
<Body <TableStyle>
key={`metric-result-${i}`} <TableHeader
as="td" orderedKeys={orderedKeys}
order={props.iterableColumnElement.order} sortByUpdate={sortByUpdate}
textAlign={props.iterableColumnElement.align} tableUpdate={tableUpdate}
minWidth="88px" />
margin="auto 0" {items.map((item, i) => {
overflowWrap="anywhere" return (
> <tr key={`table-row-${i}`} className="TableStyle__tr">
{IS_MOBILE() && ( <TableRowItems orderedKeys={orderedKeys} item={item} i={i} />
<Container className="mobile-table-header"> <FlexRow className="TableStyle__row-footer">
{props.headerElements[indexModificator + i]} <TableRowTags item={item} i={i} />
</Container> <TableRowButtons
)} buttons={[
{props.iterableColumnElement.format { icon: pensilIco, handler: () => console.log('edit') },
? props.iterableColumnElement.format(iterableElem) { icon: deleteIco, handler: () => console.log('delete') },
: 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> </FlexRow>
<RowsBackgroundStyle i={i} />
</tr>
); );
})} })}
<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> </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>;
};
return (
<>
<Media query={theme.mobile}>{mobileRender()}</Media>
<Media query={theme.desktop}>{desktopRender()}</Media>
</>
);
}; };
export default Table; export default Table;

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 React from 'react';
import SortButtonContainerStyle from '../../styles/SortButtonContainerStyle'; import { FlexRow } from '../../../../../utils/containers';
import ColumnFilterIcon from '../../../../components/generic/ColumnFilterIcon'; import ColumnFilterIcon from '../../../ColumnFilterIcon';
import { FlexRow } from '../../../../utils/containers';
const TableHeader = (props) => { const TableHeader = (props) => {
const [activeIcon, setActiveIcon] = React.useState(null); const [activeIcon, setActiveIcon] = React.useState(null);
const [rotateActiveIcon, setRotateActiveIcon] = React.useState(false); const [rotateActiveIcon, setRotateActiveIcon] = React.useState(false);
return ( return (
<tr className="NewTableStyle__tr-header"> <tr className="TableStyle__tr-header">
{props.orderedKeys.map((keyValue, i) => { {props.orderedKeys.map((keyValue, i) => {
return ( return (
<th <th
key={`table-header-${i}`} key={`table-header-${i}`}
className="NewTableStyle__th" className="TableStyle__th"
onClick={() => { onClick={() => {
if (activeIcon === i) { if (activeIcon === i) {
let newRotateActiveIcon = !rotateActiveIcon; let newRotateActiveIcon = !rotateActiveIcon;
@ -27,17 +26,21 @@ const TableHeader = (props) => {
}} }}
> >
{keyValue} {keyValue}
<SortButtonContainerStyle as="span" column={keyValue}> <FlexRow
as="span"
className="TableStyle__sort-button"
column={keyValue}
>
<ColumnFilterIcon <ColumnFilterIcon
index={i} index={i}
active={activeIcon} active={activeIcon}
rotateIcon={rotateActiveIcon} rotateIcon={rotateActiveIcon}
/> />
</SortButtonContainerStyle> </FlexRow>
</th> </th>
); );
})} })}
<FlexRow className="NewTableStyle__line" as="td" /> <FlexRow className="TableStyle__line" as="td" />
</tr> </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 React from 'react';
import { FlexRow, Svg } from '../../../../utils/containers'; import { FlexRow, Svg } from '../../../../../utils/containers';
import theme from '../../../../utils/theme'; import theme from '../../../../../utils/theme';
const TableRowButtons = ({ buttons, i }) => { const TableRowButtons = ({ buttons, i }) => {
return ( 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 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 }) => { const TableRowItems = ({ orderedKeys, item, i }) => {
return ( return (
<> <>
{orderedKeys.map((keyValue, j) => { {orderedKeys.map((keyValue, j) => {
return ( return (
<td key={`table-item-${i}-${j}`} className="NewTableStyle__td"> <td key={`table-item-${i}-${j}`} className="TableStyle__td">
{keyValue === 'when' {keyValue === 'when'
? RENDER_WHEN(item[keyValue]) ? RENDER_WHEN(item[keyValue])
: RENDER_METRIC_VALUE(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 renderTags from './renderTags';
import { FlexRow } from '../../../../../utils/containers';
const TableRowTags = ({ item, i }) => { const TableRowTags = ({ item, i }) => {
return ( return (
<FlexRow className="NewTableStyle__tags-container"> <FlexRow className="TableStyle__tags-container">
{renderTags(item.tags)} {renderTags(item.tags)}
</FlexRow> </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 styled from 'styled-components';
import { FlexRow } from '../../../utils/containers'; import { FlexRow } from '../../../../utils/containers';
const RowsBackgroundStyle = styled(FlexRow)` const RowsBackgroundStyle = styled(FlexRow)`
width: calc(100% + 12px); 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 styled from 'styled-components';
import { FlexColumn } from '../../../../utils/containers';
const TableStyle = styled(FlexColumn)` const TableStyle = styled.table`
overflow-x: ${({ metrics }) => (metrics > 10 ? 'scroll' : 'auto')}; 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; export default TableStyle;

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

@ -1,77 +1,57 @@
import React from 'react'; import React from 'react';
import theme from '../../utils/theme';
import Media from 'react-media';
import { FlexColumn } from '../../utils/containers'; import { FlexColumn } from '../../utils/containers';
import { H2 } from '../../utils/fonts'; 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 Pager from '../../components/generic/Pager';
import Table from '../../components/generic/Table/Table';
import Search from '../../components/generic/Search'; import Search from '../../components/generic/Search';
import allEntriesSearchQueryHandler from './allEntriesSearchQueryHandler';
import getAllEntries from '../../api/getAllEntries'; 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 NewTablePageTest = (props) => {
const [entriesFromApi, setEntriesFromApi] = React.useState([]);
const [entriesAll, setEntriesAll] = React.useState([]); const [entriesAll, setEntriesAll] = React.useState([]);
const [entries, setEntries] = React.useState([]); const [entries, setEntries] = React.useState([]);
const [pageNr, setPageNr] = React.useState(1); const [pageNr, setPageNr] = React.useState(1);
const [loading, setLoading] = React.useState(true); const [loading, setLoading] = React.useState(true);
const [idSorted, setIdSorted] = React.useState([]);
const [scoresSorted, setScoresSorted] = React.useState([]); const [scoresSorted, setScoresSorted] = React.useState([]);
const [submitterSorted, setSubmitterSorted] = React.useState(false); const [submitterSorted, setSubmitterSorted] = React.useState(false);
const [whenSorted, setWhenSorted] = React.useState(false); const [whenSorted, setWhenSorted] = React.useState(false);
React.useEffect(() => { React.useMemo(() => {
if (props.challengeName) challengeDataRequest(props.challengeName); if (props.challengeName) {
}, [props.challengeName]);
const challengeDataRequest = (challengeName) => {
getAllEntries(challengeName, setEntriesFromApi, setEntriesAll);
getAllEntries( getAllEntries(
challengeName, props.challengeName,
undefined, [setEntries, setEntriesAll],
setEntries,
setLoading, setLoading,
setScoresSorted 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);
} }
} }, [props.challengeName]);
}
return metrics;
};
const getAllEntriesHeader = () => { const sortByUpdate = React.useCallback(
let header = ['#', 'submitter']; (elem) => {
if (IS_MOBILE()) header.push('when'); let newEntries = entries.slice();
for (let metric of getPossibleMetrics()) { const possibleMetrics = orderKeys(entries[0]).filter(
header.push(metric); (key) => !['id', 'submitter', 'when'].includes(key)
} );
if (!IS_MOBILE()) header.push('when'); let metricIndex = possibleMetrics.indexOf(elem);
return header; let newScoresSorted = scoresSorted.slice();
};
const searchQueryHandler = (event) => {
allEntriesSearchQueryHandler(event, entriesAll, setPageNr, setEntries);
};
const sortByUpdate = (elem, i) => {
let newEntries = entries;
switch (elem) { switch (elem) {
case '#': 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; break;
case 'submitter': case 'submitter':
if (submitterSorted) { if (submitterSorted) {
@ -108,23 +88,15 @@ const AllEntries = (props) => {
} }
break; break;
default: 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]) { if (scoresSorted[metricIndex]) {
newEntries = newEntries.sort( newEntries = newEntries.sort(
(a, b) => (a, b) => (b ? b[elem] : -1) - (a ? a[elem] : -1)
(b.evaluations ? b.evaluations[elem] : -1) -
(a.evaluations ? a.evaluations[elem] : -1)
); );
newScoresSorted[metricIndex] = false; newScoresSorted[metricIndex] = false;
setScoresSorted(newScoresSorted); setScoresSorted(newScoresSorted);
} else { } else {
newEntries = newEntries.sort( newEntries = newEntries.sort(
(a, b) => (a, b) => (a ? a[elem] : -1) - (b ? b[elem] : -1)
(a.evaluations ? a.evaluations[elem] : -1) -
(b.evaluations ? b.evaluations[elem] : -1)
); );
newScoresSorted[metricIndex] = true; newScoresSorted[metricIndex] = true;
setScoresSorted(newScoresSorted); setScoresSorted(newScoresSorted);
@ -132,91 +104,36 @@ const AllEntries = (props) => {
break; break;
} }
setEntries(newEntries); setEntries(newEntries);
}; },
[entries, idSorted, scoresSorted, submitterSorted, whenSorted]
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 = () => { const n = (pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
let elements = entries.slice(n, n + ELEMENTS_PER_PAGE * 2);
return ( return (
<FlexColumn padding="24px" as="section" width="100%" maxWidth="1600px"> <FlexColumn
<H2 as="h2" margin="0 0 32px 0"> padding="24px"
All Entries gap="32px"
</H2> as="section"
width="100%"
maxWidth="1600px"
>
<H2 as="h2">All Entries</H2>
{!loading ? ( {!loading ? (
<> <>
<Search searchQueryHandler={searchQueryHandler} /> <Search
<Table searchQueryHandler={(event) =>
challengeName={props.challengeName} searchQueryHandler(event, entriesAll, setPageNr, setEntries)
headerElements={getAllEntriesHeader()}
possibleMetrics={getPossibleMetrics()}
gridTemplateColumns={
'1fr 3fr ' + '3fr '.repeat(getPossibleMetrics().length) + ' 3fr'
} }
user={props.user} />
staticColumnElements={[ {elements.length > 0 && entries[0] && (
{ name: 'id', format: null, order: 1, align: 'left' }, <Table
{ name: 'submitter', format: null, order: 2, align: 'left' }, items={elements}
{ name: 'when', format: RENDER_WHEN, order: 5, align: 'right' }, orderedKeys={orderKeys(entries[0])}
]}
metrics={getPossibleMetrics()}
iterableColumnElement={{
name: 'evaluations',
format: EVALUATIONS_FORMAT,
order: 3,
align: 'left',
}}
pageNr={pageNr}
elements={entries}
setPageNr={setPageNr}
sortByUpdate={sortByUpdate} sortByUpdate={sortByUpdate}
/> />
)}
<Pager <Pager
pageNr={pageNr} pageNr={pageNr}
elements={entries} elements={entries}
@ -233,12 +150,5 @@ const AllEntries = (props) => {
</FlexColumn> </FlexColumn>
); );
}; };
return (
<>
<Media query={theme.mobile}>{mobileRender()}</Media>
<Media query={theme.desktop}>{desktopRender()}</Media>
</>
);
};
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 Loading from '../../components/generic/Loading';
import getUser from '../../api/getUser'; import getUser from '../../api/getUser';
import AllEntries from '../AllEntries/AllEntries'; import AllEntries from '../AllEntries/AllEntries';
import NewTablePageTest from '../NewTable/NewTablePageTest';
const Challenge = (props) => { const Challenge = (props) => {
const challengeName = useParams().challengeId; const challengeName = useParams().challengeId;
@ -65,8 +64,6 @@ const Challenge = (props) => {
return <MyEntries challengeName={challengeName} />; return <MyEntries challengeName={challengeName} />;
case CHALLENGE_SECTIONS.SUBMIT: case CHALLENGE_SECTIONS.SUBMIT:
return <Submit challengeName={challengeName} setLoading={setLoading} />; return <Submit challengeName={challengeName} setLoading={setLoading} />;
case 7:
return <NewTablePageTest challengeName={challengeName} />;
default: default:
return ( return (
<Leaderboard <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;