start creating new Table component

src/App/components/RoutingManager.js

@@ -47,6 +47,10 @@ 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}

src/components/generic/Table/Table.js

@@ -68,7 +68,6 @@ 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 (

src/pages/Challenge/Challenge.js

@@ -17,6 +17,7 @@ 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;
@@ -64,6 +65,8 @@ 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

src/pages/NewTable/NewTable.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FlexRow } from '../../utils/containers';
+import theme from '../../utils/theme';
+// lista json elementów (headery to keys)
+// lista keys w celu zachowania kolejności
+
+const Table = styled.table`
+  border-collapse: separate;
+  width: 100%;
+`;
+
+const TrHeader = styled.tr`
+  height: 48px;
+  position: relative;
+`;
+
+const Tr = styled.tr`
+  position: relative;
+  height: 72px;
+  /* background-color: ${({ theme, backgroundColor }) =>
+    backgroundColor ? backgroundColor : theme.colors.white}; */
+`;
+
+const Td = styled.td`
+  padding: 0 0 32px 0;
+  /* background-color: ${({ theme, backgroundColor }) =>
+    backgroundColor ? backgroundColor : theme.colors.white}; */
+`;
+
+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')};
+`;
+
+const NewTable = ({ items, orderedKeys }) => {
+  return (
+    <Table>
+      <TrHeader>
+        {orderedKeys.map((key) => {
+          return <th>{key}</th>;
+        })}
+        <TableLine height="2px" top="94%" as="td" shadow={theme.shadow} />
+      </TrHeader>
+      {items.map((item, i) => {
+        return (
+          <Tr>
+            {orderedKeys.map((key) => {
+              return <Td>{item[key]}</Td>;
+            })}
+            <FlexRow
+              width="100%"
+              alignmentX="space-between"
+              position="absolute"
+              top="55%"
+              left="0"
+            >
+              <FlexRow>tagi tagi tagi tagi</FlexRow>
+              <FlexRow>edytuj usuń</FlexRow>
+            </FlexRow>
+            <FlexRow
+              width="100%"
+              position="absolute"
+              top="0"
+              left="0"
+              height="100%"
+              backgroundColor={
+                i % 2 === 0 ? theme.colors.dark01 : 'transparent'
+              }
+            />
+          </Tr>
+        );
+      })}
+    </Table>
+  );
+};
+
+export default NewTable;

src/pages/NewTable/NewTablePageTest.js

@@ -0,0 +1,72 @@
+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';
+
+const orderedKeys = [
+  'id',
+  'submitter',
+  'Accuracy-dev-0',
+  'Likelihood-dev-0',
+  'Accuracy-dev-1',
+  'Likelihood-dev-1',
+  'Accuracy-test-A',
+  'Likelihood-test-A',
+  'when',
+];
+
+const tableItems = [
+  {
+    id: '7962',
+    submitter: 'wirus wirus',
+    'Accuracy-dev-0': '0.68248',
+    'Likelihood-dev-0': '0.00000',
+    'Accuracy-dev-1': '0.65028',
+    'Likelihood-dev-1': '0.00000',
+    'Accuracy-test-A': '0.65503',
+    'Likelihood-test-A': '0.00000',
+    when: '2023-01-05 21:47',
+  },
+  {
+    id: '7371',
+    submitter: 'Kamil Guttmann',
+    'Accuracy-dev-0': '0.68248',
+    'Likelihood-dev-0': '0.00000',
+    'Accuracy-dev-1': '0.67544',
+    'Likelihood-dev-1': '0.00000',
+    'Accuracy-test-A': '0.67034',
+    'Likelihood-test-A': '0.00000',
+    when: '2023-01-05 21:47',
+  },
+];
+
+const NewTablePageTest = (props) => {
+  const [entriesFromApi, setEntriesFromApi] = React.useState([]);
+  const [entriesAll, setEntriesAll] = React.useState([]);
+
+  React.useEffect(() => {
+    if (props.challengeName) challengeDataRequest(props.challengeName);
+  }, [props.challengeName]);
+
+  const challengeDataRequest = (challengeName) => {
+    getAllEntries(challengeName, setEntriesFromApi, setEntriesAll);
+  };
+  console.log(entriesFromApi);
+  console.log(entriesAll);
+
+  return (
+    <FlexColumn padding="24px" as="section" width="100%" maxWidth="1600px">
+      <H2 as="h2" margin="0 0 32px 0">
+        New Table Test
+      </H2>
+      <Search searchQueryHandler={() => console.log('siema')} />
+      <NewTable items={tableItems} orderedKeys={orderedKeys} />
+      <Pager />
+    </FlexColumn>
+  );
+};
+
+export default NewTablePageTest;

src/pages/NewTable/index.js

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