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

try deleteSubmission and some refactor

Browse Source
This commit is contained in:
Mateusz Tylka 2023-05-31 14:21:51 +02:00
parent 8647164413
commit 3f33dc4d65
10 changed files with 122 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.js
View File

@ -100,7 +100,7 @@ const App = () => {
loggedBarVisibleHandler={loggedBarVisibleHandler}
popUpMessageHandler={popUpMessageHandler}
/>
{!IS_MOBILE() ? (
{!IS_MOBILE() && (
<LoggedBar
visible={loggedBarVisible}
loggedBarVisibleHandler={loggedBarVisibleHandler}
@ -108,8 +108,6 @@ const App = () => {
loggedBarHoverFalse={() => setLoggedBarHover(false)}
username={KeyCloakService.getUsername()}
/>
) : (
''
)}
<Routes>
<Route

18
src/api/deleteSubmission.js Normal file
View File

@ -0,0 +1,18 @@
import KeyCloakService from '../services/KeyCloakService';
import { API } from '../utils/globals';
const deleteSubmission = (submissionId) => {
fetch(`${API}/delete-submission/${submissionId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
Authorization: `Bearer ${KeyCloakService.getToken()}`,
},
})
.then((resp) => resp.json())
.then((data) => {
console.log(data);
});
};
export default deleteSubmission;

95
src/components/generic/Table.js → src/components/generic/Table/Table.js
View File

@ -1,79 +1,19 @@
import React from 'react';
import { Container, FlexColumn, FlexRow, Grid } from '../../utils/containers';
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 styled from 'styled-components';
import ColumnFilterIcon from './ColumnFilterIcon';
const TableStyle = styled(FlexColumn)`
overflow-x: ${({metrics}) => metrics > 10 ? 'scroll' : 'auto'};
`;
const Line = 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')};
`;
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;
}
`;
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 TableLine from './styles/TableLine';
import MobileTableStyle from './styles/MobileTableStyle';
const Table = (props) => {
const [, updateState] = React.useState();
@ -128,6 +68,7 @@ const Table = (props) => {
const rowRender = (elem) => {
let RowStyle = Body;
console.log(elem);
if (elem.submitter === props.user) RowStyle = Medium;
return props.staticColumnElements.map((elemName, i) => {
return (
@ -139,6 +80,8 @@ const Table = (props) => {
margin="auto 0"
minWidth="88px"
overflowWrap="anywhere"
cursor="pointer"
// onClick={props.myEntries && (() => deleteSubmission(elem.id))}
>
{IS_MOBILE() && (
<Container className="mobile-table-header">
@ -196,8 +139,6 @@ const Table = (props) => {
padding="0 4px 0 0"
overflowWrap="anywhere"
minWidth="72px"
// minWidth={elem === 'result' ? '72px' : 'none'}
>
{elem.replace('.', ' ')}
</Medium>
@ -212,7 +153,7 @@ const Table = (props) => {
</FlexRow>
);
})}
<Line
<TableLine
height="2px"
top="calc(100% + 2px)"
as="td"

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

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

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

@ -0,0 +1,58 @@
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;

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

@ -0,0 +1,14 @@
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;

8
src/components/generic/Table/styles/TableStyle.js Normal file
View File

@ -0,0 +1,8 @@
import styled from 'styled-components';
import { FlexColumn } from '../../../../utils/containers';
const TableStyle = styled(FlexColumn)`
overflow-x: ${({ metrics }) => (metrics > 10 ? 'scroll' : 'auto')};
`;
export default TableStyle;

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

@ -11,7 +11,7 @@ import {
} from '../../utils/globals';
import Loading from '../../components/generic/Loading';
import Pager from '../../components/generic/Pager';
import Table from '../../components/generic/Table';
import Table from '../../components/generic/Table/Table';
import Search from '../../components/generic/Search';
import allEntriesSearchQueryHandler from './allEntriesSearchQueryHandler';
import getAllEntries from '../../api/getAllEntries';

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

@ -3,7 +3,7 @@ import Media from 'react-media';
import theme from '../../utils/theme';
import { FlexColumn } from '../../utils/containers';
import { H2 } from '../../utils/fonts';
import Table from '../../components/generic/Table';
import Table from '../../components/generic/Table/Table';
import PropsTypes from 'prop-types';
import getChallengeLeaderboard from '../../api/getChallengeLeaderboard';
import leaderboardSearchQueryHandler from './leaderboardSearchQueryHandler';

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

@ -12,7 +12,7 @@ import {
import Media from 'react-media';
import theme from '../../utils/theme';
import Loading from '../../components/generic/Loading';
import Table from '../../components/generic/Table';
import Table from '../../components/generic/Table/Table';
import myEntriesSearchQueryHandler from './myEntriesSearchQueryHandler';
import Search from '../../components/generic/Search';
@ -190,6 +190,7 @@ const MyEntries = (props) => {
pageNr={pageNr}
elements={myEntries}
sortByUpdate={sortByUpdate}
myEntries
/>
<Pager
pageNr={pageNr}