try deleteSubmission and some refactor

src/App.js

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

src/api/deleteSubmission.js

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

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 theme from '../../../utils/theme';
-import { ELEMENTS_PER_PAGE, IS_MOBILE } from '../../utils/globals';
+import { ELEMENTS_PER_PAGE, IS_MOBILE } from '../../../utils/globals';
-import { Body, Medium } from '../../utils/fonts';
+import { Body, Medium } from '../../../utils/fonts';
-import styled from 'styled-components';
+import ColumnFilterIcon from '../ColumnFilterIcon';
-import ColumnFilterIcon from './ColumnFilterIcon';
+// import deleteSubmission from '../../api/deleteSubmission';
-
+import TableStyle from './styles/TableStyle';
-const TableStyle = styled(FlexColumn)`
+import TableLine from './styles/TableLine';
-  overflow-x: ${({metrics}) => metrics > 10 ? 'scroll' : 'auto'};
+import MobileTableStyle from './styles/MobileTableStyle';
-`;
-
-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;
-  }
-`;
 
 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"

src/components/generic/Table/index.js

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

src/components/generic/Table/styles/MobileTableStyle.js

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

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;

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;

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

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

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
             />
             <Pager
               pageNr={pageNr}