diff --git a/src/App.js b/src/App.js index b10db3a..5b908ee 100644 --- a/src/App.js +++ b/src/App.js @@ -100,7 +100,7 @@ const App = () => { loggedBarVisibleHandler={loggedBarVisibleHandler} popUpMessageHandler={popUpMessageHandler} /> - {!IS_MOBILE() ? ( + {!IS_MOBILE() && ( { loggedBarHoverFalse={() => setLoggedBarHover(false)} username={KeyCloakService.getUsername()} /> - ) : ( - '' )} { + 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; diff --git a/src/components/generic/Table.js b/src/components/generic/Table/Table.js similarity index 79% rename from src/components/generic/Table.js rename to src/components/generic/Table/Table.js index 6aed3d3..54a1ac6 100644 --- a/src/components/generic/Table.js +++ b/src/components/generic/Table/Table.js @@ -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() && ( @@ -196,8 +139,6 @@ const Table = (props) => { padding="0 4px 0 0" overflowWrap="anywhere" minWidth="72px" - - // minWidth={elem === 'result' ? '72px' : 'none'} > {elem.replace('.', ' ')} @@ -212,7 +153,7 @@ const Table = (props) => { ); })} - 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; diff --git a/src/components/generic/Table/styles/TableLine.js b/src/components/generic/Table/styles/TableLine.js new file mode 100644 index 0000000..a108dc9 --- /dev/null +++ b/src/components/generic/Table/styles/TableLine.js @@ -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; diff --git a/src/components/generic/Table/styles/TableStyle.js b/src/components/generic/Table/styles/TableStyle.js new file mode 100644 index 0000000..d018c02 --- /dev/null +++ b/src/components/generic/Table/styles/TableStyle.js @@ -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; diff --git a/src/pages/AllEntries/AllEntries.js b/src/pages/AllEntries/AllEntries.js index eddcdd1..f8a972a 100644 --- a/src/pages/AllEntries/AllEntries.js +++ b/src/pages/AllEntries/AllEntries.js @@ -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'; diff --git a/src/pages/Leaderboard/Leaderboard.js b/src/pages/Leaderboard/Leaderboard.js index e02cdf2..b1c4d3d 100644 --- a/src/pages/Leaderboard/Leaderboard.js +++ b/src/pages/Leaderboard/Leaderboard.js @@ -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'; diff --git a/src/pages/MyEntries/MyEntries.js b/src/pages/MyEntries/MyEntries.js index a83e867..5714d4d 100644 --- a/src/pages/MyEntries/MyEntries.js +++ b/src/pages/MyEntries/MyEntries.js @@ -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 />