src/App.js

@@ -127,30 +127,26 @@ const App = () => {
               path={`${CHALLENGE_PAGE}/:challengeId/leaderboard`}
               element={<Challenge section={0} />}
             />
-            <Route
-              path={`${CHALLENGE_PAGE}/:challengeId/allentries`}
-              element={<Challenge section={1} />}
-            />
             <Route
               path={`${CHALLENGE_PAGE}/:challengeId/readme`}
-              element={<Challenge section={2} />}
+              element={<Challenge section={1} />}
             />
             <Route
               path={`${CHALLENGE_PAGE}/:challengeId/howto`}
               element={
                 <Challenge
                   popUpMessageHandler={popUpMessageHandler}
-                  section={3}
+                  section={2}
                 />
               }
             />
             <Route
               path={`${CHALLENGE_PAGE}/:challengeId/myentries`}
-              element={<Challenge section={4} />}
+              element={<Challenge section={3} />}
             />
             <Route
               path={`${CHALLENGE_PAGE}/:challengeId/submit`}
-              element={<Challenge section={5} />}
+              element={<Challenge section={4} />}
             />
             <Route path={CHALLENGES_PAGE} element={<Challenges />} />
             <Route

src/api/getAllEntries.js

@@ -1,66 +0,0 @@
-import { API } from '../utils/globals';
-import KeyCloakService from '../services/KeyCloakService';
-
-const getAllEntries = (
-  challengeName,
-  setDataOriginalState,
-  setDataState,
-  setLoadingState,
-  setScoreSorted
-) => {
-  fetch(`${API}/challenge-all-submissions/${challengeName}`, {
-    headers: { Authorization: `Bearer ${KeyCloakService.getToken()}` },
-  })
-    .then((response) => response.json())
-    .then((data) => {
-      if (setDataOriginalState) setDataOriginalState(data);
-      let item = {};
-      let result = [];
-      let initSetScoreSorted = [];
-      let tests = data.tests;
-      for (let submission of data.submissions) {
-        for (let evaluation of submission.evaluations) {
-          item = {
-            ...item,
-            evaluations: {
-              ...item.evaluations,
-              [`${evaluation.test.metric}.${evaluation.test.name}`]:
-                evaluation.score,
-            },
-          };
-        }
-        for (let test of tests) {
-          if (item.evaluations) {
-            if (
-              !Object.hasOwn(item.evaluations, `${test.metric}.${test.name}`)
-            ) {
-              item = {
-                ...item,
-                evaluations: {
-                  ...item.evaluations,
-                  [`${test.metric}.${test.name}`]: '-1',
-                },
-              };
-            }
-          }
-        }
-        item = {
-          ...item,
-          id: submission.id,
-          submitter: submission.submitter,
-          when: submission.when,
-        };
-        result.push(item);
-        item = {};
-      }
-      // eslint-disable-next-line no-unused-vars
-      for (let _ of tests) {
-        initSetScoreSorted.push(false);
-      }
-      setDataState(result);
-      if (setScoreSorted) setScoreSorted(initSetScoreSorted);
-      if (setLoadingState) setLoadingState(false);
-    });
-};
-
-export default getAllEntries;

src/components/specific_challenge/AllEntries/AllEntries.js

@@ -1,210 +0,0 @@
-import React from 'react';
-import theme from '../../../utils/theme';
-import Media from 'react-media';
-import { FlexColumn } from '../../../utils/containers';
-import { H2 } from '../../../utils/fonts';
-import {
-  CALC_PAGES,
-  EVALUATIONS_FORMAT,
-  RENDER_WHEN,
-} from '../../../utils/globals';
-import Loading from '../../generic/Loading';
-import Pager from '../../generic/Pager';
-import Table from '../Table';
-import Search from '../../generic/Search';
-import allEntriesSearchQueryHandler from './allEntriesSearchQueryHandler';
-import getAllEntries from '../../../api/getAllEntries';
-
-const AllEntries = (props) => {
-  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 [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 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);
-        }
-      }
-    }
-    return metrics;
-  };
-
-  const getAllEntriesHeader = () => {
-    let header = ['#', 'submitter'];
-    for (let metric of getPossibleMetrics()) {
-      header.push(metric);
-    }
-    header.push('when');
-    return header;
-  };
-
-  const searchQueryHandler = (event) => {
-    allEntriesSearchQueryHandler(event, entriesAll, setPageNr, setEntries);
-  };
-
-  const nextPage = () => {
-    if (pageNr !== CALC_PAGES(entries ? entries : [])) {
-      let newPage = pageNr + 1;
-      setPageNr(newPage);
-    }
-  };
-
-  const previousPage = () => {
-    if (pageNr !== 1) {
-      let newPage = pageNr - 1;
-      setPageNr(newPage);
-    }
-  };
-
-  const sortByUpdate = (elem, i) => {
-    let newEntries = entries;
-    switch (elem) {
-      case '#':
-        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:
-        // 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]) {
-          newEntries = newEntries.sort(
-            (a, b) =>
-              (b.evaluations ? b.evaluations[elem] : -1) -
-              (a.evaluations ? a.evaluations[elem] : -1)
-          );
-          newScoresSorted[metricIndex] = false;
-          setScoresSorted(newScoresSorted);
-        } else {
-          newEntries = newEntries.sort(
-            (a, b) =>
-              (a.evaluations ? a.evaluations[elem] : -1) -
-              (b.evaluations ? b.evaluations[elem] : -1)
-          );
-          newScoresSorted[metricIndex] = true;
-          setScoresSorted(newScoresSorted);
-        }
-        break;
-    }
-    setEntries(newEntries);
-  };
-
-  const mobileRender = () => {
-    return <></>;
-  };
-
-  const desktopRender = () => {
-    return (
-      <FlexColumn padding="24px" as="section" width="100%" maxWidth="1400px">
-        <H2 as="h2" margin="0 0 32px 0">
-          All Entries
-        </H2>
-        {!loading ? (
-          <>
-            <Search searchQueryHandler={searchQueryHandler} />
-            <Table
-              challengeName={props.challengeName}
-              headerElements={getAllEntriesHeader()}
-              possibleMetrics={getPossibleMetrics()}
-              gridTemplateColumns={
-                '1fr 3fr ' + '3fr '.repeat(getPossibleMetrics().length) + ' 3fr'
-              }
-              user={props.user}
-              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' },
-              ]}
-              metrics={getPossibleMetrics()}
-              iterableColumnElement={{
-                name: 'evaluations',
-                format: EVALUATIONS_FORMAT,
-                order: 3,
-                align: 'left',
-              }}
-              pageNr={pageNr}
-              elements={entries}
-              sortByUpdate={sortByUpdate}
-            />
-            <Pager
-              pageNr={pageNr}
-              width="72px"
-              borderRadius="64px"
-              pages={CALC_PAGES(entries, 2)}
-              nextPage={nextPage}
-              previousPage={previousPage}
-              number={`${pageNr} / ${CALC_PAGES(entries, 2)}`}
-            />
-          </>
-        ) : (
-          <Loading />
-        )}
-      </FlexColumn>
-    );
-  };
-  return (
-    <>
-      <Media query={theme.mobile}>{mobileRender()}</Media>
-      <Media query={theme.desktop}>{desktopRender()}</Media>
-    </>
-  );
-};
-
-export default AllEntries;

src/components/specific_challenge/AllEntries/allEntriesSearchQueryHandler.js

@@ -1,32 +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;
-      console.log(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;

src/components/specific_challenge/AllEntries/index.js

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

src/components/specific_challenge/Challenge.js

@@ -16,7 +16,6 @@ import textIco from '../../assets/text_ico.svg';
 import getChallengeInfo from '../../api/getChallengeInfo';
 import Loading from '../generic/Loading';
 import getUser from '../../api/getUser';
-import AllEntries from './AllEntries/AllEntries';
 
 const Challenge = (props) => {
   const challengeName = useParams().challengeId;
@@ -40,10 +39,6 @@ const Challenge = (props) => {
           />
         );
       case 1:
-        return (
-          <AllEntries challengeName={challengeName} setLoading={setLoading} />
-        );
-      case 2:
         return (
           <Readme
             challengeName={challengeName}
@@ -52,7 +47,7 @@ const Challenge = (props) => {
             deadline={challenge.deadline}
           />
         );
-      case 3:
+      case 2:
         return (
           <HowTo
             popUpMessageHandler={props.popUpMessageHandler}
@@ -60,9 +55,9 @@ const Challenge = (props) => {
             user={user}
           />
         );
-      case 4:
+      case 3:
         return <MyEntries challengeName={challengeName} />;
-      case 5:
+      case 4:
         return <Submit challengeName={challengeName} setLoading={setLoading} />;
       default:
         return (

src/components/specific_challenge/ColumnFilterIcon.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Svg } from '../../utils/containers';
+import {Svg} from '../../utils/containers';
 import arrow from '../../assets/arrow.svg';
 import filterIco from '../../assets/filter_direction.svg';
 import theme from '../../utils/theme';
@@ -8,38 +8,21 @@ const ColumnFilterIcon = (props) => {
     const renderSecondIcon = () => {
         if (props.index === props.active) {
             return (
-        <Svg
+                <Svg width='8px' src={filterIco} backgroundColor={theme.colors.dark}
-          width="8px"
+                     margin='0 0 0 2px' rotate={props.rotateIcon ? '0' : '180deg'}/>
-          src={filterIco}
-          cursor={props.cursor}
-          backgroundColor={theme.colors.dark}
-          margin="0 0 0 2px"
-          rotate={props.rotateIcon ? '0' : '180deg'}
-        />
             );
         } else {
             return (
-        <Svg
+                <Svg width='8px' src={arrow} backgroundColor={theme.colors.dark}
-          width="8px"
+                     margin='0 0 2px 0'/>
-          src={arrow}
-          cursor={props.cursor}
-          backgroundColor={theme.colors.dark}
-          margin="0 0 2px 0"
-        />
             );
         }
     };
 
     return (
         <>
-      <Svg
+            <Svg width='8px' rotate='180deg' src={arrow}
-        width="8px"
+                 backgroundColor={theme.colors.dark} margin='2px 0 0 0'/>
-        rotate="180deg"
-        src={arrow}
-        cursor={props.cursor}
-        backgroundColor={theme.colors.dark}
-        margin="2px 0 0 0"
-      />
             {renderSecondIcon()}
         </>
     );

src/components/specific_challenge/DesktopChallengeMenu.js

@@ -38,16 +38,9 @@ const Option = styled(FlexColumn)`
 `;
 
 const DesktopChallengeMenu = (props) => {
-  let options = ['Leaderboard', 'All entries', 'Readme', 'How to'];
+  let options = ['Leaderboard', 'Readme', 'How to'];
   if (KeyCloakService.isLoggedIn())
-    options = [
+    options = ['Leaderboard', 'Readme', 'How to', 'My entries', 'Submit'];
-      'Leaderboard',
-      'All entries',
-      'Readme',
-      'How to',
-      'My entries',
-      'Submit',
-    ];
   return (
     <DesktopChallengeMenuStyle>
       {options.map((option, index) => {

src/components/specific_challenge/MyEntries/myEntriesSearchQueryHandler.js

@@ -1,26 +1,17 @@
-const myEntriesSearchQueryHandler = (
+const myEntriesSearchQueryHandler = (event, entriesFromApi, setPageNr, setEntries) => {
-  event,
-  entriesFromApi,
-  setPageNr,
-  setEntries
-) => {
     let searchQuery = event.target.value;
     let submissionsToRender = [];
     setPageNr(1);
-  if (searchQuery === '') setEntries(entriesFromApi);
+    if (searchQuery === '')
+        setEntries(entriesFromApi);
     else {
         for (let entry of entriesFromApi) {
-      const { id, when } = entry;
+            const {id, when} = entry;
             let evaluations = '';
-      if (entry.evaluations) {
             for (let evaluation of Object.values(entry.evaluations)) {
                 evaluations += ` ${evaluation}`;
             }
-      }
+            const str = `${id} ${when.slice(11, 16)} ${when.slice(0, 10)} ${evaluations}`;
-      const str = `${id} ${when.slice(11, 16)} ${when.slice(
-        0,
-        10
-      )} ${evaluations}`;
             console.log(entry);
             console.log(str);
             if (str.toLowerCase().includes(searchQuery.toLowerCase()))

src/components/specific_challenge/Table.js

@@ -1,20 +1,20 @@
 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 } from '../../utils/globals';
+import {ELEMENTS_PER_PAGE} from '../../utils/globals';
-import { Body, Medium } from '../../utils/fonts';
+import {Body, Medium} from '../../utils/fonts';
 import styled from 'styled-components';
 import ColumnFilterIcon from './ColumnFilterIcon';
 
 const Line = styled(FlexRow)`
   position: absolute;
-  top: ${({ top }) => (top ? top : 'auto')};
+  top: ${({top}) => top ? top : 'auto'};
-  bottom: ${({ bottom }) => (bottom ? bottom : 'auto')};
+  bottom: ${({bottom}) => bottom ? bottom : 'auto'};
   left: 0;
   width: 100%;
-  background-color: ${({ theme }) => theme.colors.dark04};
+  background-color: ${({theme}) => theme.colors.dark04};
-  height: ${({ height }) => (height ? height : '1px')};
+  height: ${({height}) => height ? height : '1px'};
 `;
 
 const MobileTableStyle = styled(Container)`
@@ -23,27 +23,23 @@ const MobileTableStyle = styled(Container)`
   margin: 32px 0;
 
   tr:nth-of-type(odd) {
-    background: ${({ theme }) => theme.colors.dark03};
+    background: ${({theme}) => theme.colors.dark03};
   }
 
   th {
-    background: ${({ theme }) => theme.colors.dark05};
+    background: ${({theme}) => theme.colors.dark05};
-    color: ${({ theme }) => theme.colors.white};
+    color: ${({theme}) => theme.colors.white};
   }
 
-  td,
+  td, th {
-  th {
     padding: 6px;
-    border: 1px solid ${({ theme }) => theme.colors.white};
+    border: 1px solid ${({theme}) => theme.colors.white};
     text-align: left;
   }
 
   display: block;
 
-  thead,
+  thead, tbody, th, td {
-  tbody,
-  th,
-  td {
     display: block;
   }
 
@@ -55,7 +51,7 @@ const MobileTableStyle = styled(Container)`
 
   td {
     border: none;
-    border-bottom: 1px solid ${({ theme }) => theme.colors.dark01};
+    border-bottom: 1px solid ${({theme}) => theme.colors.dark01};
     position: relative;
     padding-left: 50%;
 
@@ -71,53 +67,43 @@ const MobileTableStyle = styled(Container)`
   }
 
   td:nth-of-type(1):before {
-    content: ${({ headerElements }) =>
+    content: ${({headerElements}) => headerElements[0] ? `'${headerElements[0]}'` : ''};
-      headerElements[0] ? `'${headerElements[0]}'` : ''};
   }
 
   td:nth-of-type(2):before {
-    content: ${({ headerElements }) =>
+    content: ${({headerElements}) => headerElements[1] ? `'${headerElements[1]}'` : ''};
-      headerElements[1] ? `'${headerElements[1]}'` : ''};
   }
 
   td:nth-of-type(3):before {
-    content: ${({ headerElements }) =>
+    content: ${({headerElements}) => headerElements[2] ? `'${headerElements[2]}'` : ''};
-      headerElements[2] ? `'${headerElements[2]}'` : ''};
   }
 
   td:nth-of-type(4):before {
-    content: ${({ headerElements }) =>
+    content: ${({headerElements}) => headerElements[3] ? `'${headerElements[3]}'` : ''};
-      headerElements[3] ? `'${headerElements[3]}'` : ''};
   }
 
   td:nth-of-type(5):before {
-    content: ${({ headerElements }) =>
+    content: ${({headerElements}) => headerElements[4] ? `'${headerElements[4]}'` : ''};
-      headerElements[4] ? `'${headerElements[4]}'` : ''};
   }
 
   td:nth-of-type(6):before {
-    content: ${({ headerElements }) =>
+    content: ${({headerElements}) => headerElements[5] ? `'${headerElements[5]}'` : ''};
-      headerElements[5] ? `'${headerElements[5]}'` : ''};
   }
 
   td:nth-of-type(7):before {
-    content: ${({ headerElements }) =>
+    content: ${({headerElements}) => headerElements[6] ? `'${headerElements[6]}'` : ''};
-      headerElements[6] ? `'${headerElements[6]}'` : ''};
   }
 
   td:nth-of-type(8):before {
-    content: ${({ headerElements }) =>
+    content: ${({headerElements}) => headerElements[7] ? `'${headerElements[7]}'` : ''};
-      headerElements[7] ? `'${headerElements[7]}'` : ''};
   }
 
   td:nth-of-type(9):before {
-    content: ${({ headerElements }) =>
+    content: ${({headerElements}) => headerElements[8] ? `'${headerElements[8]}'` : ''};
-      headerElements[8] ? `'${headerElements[8]}'` : ''};
   }
 
   td:nth-of-type(10):before {
-    content: ${({ headerElements }) =>
+    content: ${({headerElements}) => headerElements[9] ? `'${headerElements[9]}'` : ''};
-      headerElements[9] ? `'${headerElements[9]}'` : ''};
   }
 `;
 
@@ -128,7 +114,8 @@ const Table = (props) => {
     const [rotateActiveIcon, setRotateActiveIcon] = React.useState(false);
 
     const metricsRender = (elem) => {
-    if (!props.iterableColumnElement) return <></>;
+        if (!props.iterableColumnElement)
+            return <></>;
         if (Array.isArray(elem[props.iterableColumnElement.name]))
             elem = elem[props.iterableColumnElement.name];
         else {
@@ -137,86 +124,68 @@ const Table = (props) => {
                 if (Object.hasOwn(elem, props.iterableColumnElement.name)) {
                     if (elem[props.iterableColumnElement.name][metric] === '-1')
                         newElem.push('N/A');
-          else newElem.push(elem[props.iterableColumnElement.name][metric]);
+                    else
+                        newElem.push(elem[props.iterableColumnElement.name][metric]);
                 } else {
                     newElem.push('N/A');
                 }
             }
             elem = newElem;
         }
-    return elem.map((iterableElem, i) => {
         return (
-        <Body
+            elem.map((iterableElem, i) => {
-          key={`metric-result-${i}`}
+                return (
-          as="td"
+                    <Body key={`metric-result-${i}`} as='td'
                           order={props.iterableColumnElement.order}
-          textAlign={props.iterableColumnElement.align}
+                          textAlign={props.iterableColumnElement.align} minWidth='72px'>
-          minWidth="72px"
+                        {props.iterableColumnElement.format ?
-        >
+                            props.iterableColumnElement.format(iterableElem) : iterableElem}
-          {props.iterableColumnElement.format
-            ? props.iterableColumnElement.format(iterableElem)
-            : iterableElem}
                     </Body>
                 );
-    });
+            })
+        );
     };
 
     const rowRender = (elem) => {
         if (elem.submitter === props.user) {
-      return props.staticColumnElements.map((elemName, i) => {
             return (
-          <Medium
+                props.staticColumnElements.map((elemName, i) => {
-            key={`leaderboard-static-elemName-${i}-${elem[elemName.name]}`}
+                    return (
-            as="td"
+                        <Medium key={`leaderboard-static-elemName-${i}-${elem[elemName.name]}`}
-            order={elemName.order}
+                                as='td'
-            textAlign={elemName.align}
+                                order={elemName.order} textAlign={elemName.align}>
-          >
+                            {elemName.format ? elemName.format(elem[elemName.name]) : elem[elemName.name]}
-            {elemName.format
-              ? elemName.format(elem[elemName.name])
-              : elem[elemName.name]}
                         </Medium>
                     );
-      });
+                })
+            );
         }
-    return props.staticColumnElements.map((elemName, i) => {
         return (
-        <Body
+            props.staticColumnElements.map((elemName, i) => {
-          key={`leaderboard-static-elemName-${i}-${elem[elemName.name]}`}
+                return (
-          as="td"
+                    <Body key={`leaderboard-static-elemName-${i}-${elem[elemName.name]}`}
-          order={elemName.order}
+                          as='td'
-          textAlign={elemName.align}
+                          order={elemName.order} textAlign={elemName.align}>
-        >
+                        {elemName.format ? elemName.format(elem[elemName.name]) : elem[elemName.name]}
-          {elemName.format
-            ? elemName.format(elem[elemName.name])
-            : elem[elemName.name]}
                     </Body>
                 );
-    });
+            })
+        );
     };
 
     const desktopRender = () => {
         const n = (props.pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
-    let elementsToMap = props.elements.slice(n, n + ELEMENTS_PER_PAGE * 2);
+        let elementsToMap = props.elements.slice(n, n + (ELEMENTS_PER_PAGE * 2));
         if (elementsToMap.length > 0) {
             return (
-        <FlexColumn as="table" margin="32px 0 72px 0" width="100%">
+                <FlexColumn as='table' margin='32px 0 72px 0' width='100%'>
-          <FlexColumn as="tbody" width="100%">
+                    <FlexColumn as='tbody' width='100%'>
-            <Grid
+                        <Grid as='tr'
-              as="tr"
+                              gridGap='20px' position='relative' width='100%' padding='4px' margin='0 0 6px 0'
-              gridGap="20px"
+                              gridTemplateColumns={props.gridTemplateColumns}>
-              position="relative"
-              width="100%"
-              padding="4px"
-              margin="0 0 6px 0"
-              gridTemplateColumns={props.gridTemplateColumns}
-            >
                             {props.headerElements.map((elem, i) => {
                                 return (
-                  <FlexRow
+                                    <FlexRow key={`table-header-${i}`} alignmentX='flex-start' as='td'
-                    key={`table-header-${i}`}
-                    alignmentX="flex-start"
-                    as="td"
-                    cursor="pointer"
                                              onClick={() => {
                                                  if (activeIcon === i) {
                                                      let newRotateActiveIcon = !rotateActiveIcon;
@@ -227,47 +196,27 @@ const Table = (props) => {
                                                  setActiveIcon(i);
                                                  props.sortByUpdate(elem, i);
                                                  forceUpdate();
-                    }}
+                                             }}>
-                  >
+                                        <Medium textAlign={elem === 'submitter' ? 'left' : 'right'}
-                    <Medium
+                                                width={elem === 'when' ? '100%' : 'auto'} padding='0 6px 0 0'
-                      cursor={elem !== '#' ? 'pointer' : ''}
+                                                minWidth={elem === 'result' ? '72px' : 'none'}>
-                      textAlign={elem === 'when' ? 'right' : 'left'}
+                                            {elem}
-                      width={elem === 'when' ? '100%' : 'auto'}
-                      padding="0 6px 0 0"
-                      overflowWrap="break-word"
-                      minWidth={elem === 'result' ? '72px' : 'none'}
-                    >
-                      {elem.replace('.', ' ')}
                                         </Medium>
-                    {elem !== '#' ? (
+                                        {elem !== '#' ?
-                      <ColumnFilterIcon
+                                            <ColumnFilterIcon index={i} active={activeIcon}
-                        cursor="pointer"
+                                                              rotateIcon={rotateActiveIcon}/>
-                        index={i}
+                                            : ''}
-                        active={activeIcon}
-                        rotateIcon={rotateActiveIcon}
-                      />
-                    ) : (
-                      ''
-                    )}
                                     </FlexRow>
                                 );
                             })}
-              <Line height="2px" top="100%" as="td" shadow={theme.shadow} />
+                            <Line height='2px' top='32px' as='td' shadow={theme.shadow}/>
                         </Grid>
                         {elementsToMap.map((elem, index) => {
                             return (
-                <Grid
+                                <Grid as='tr' key={`leaderboard-row-${index}`}
-                  as="tr"
+                                      backgroundColor={index % 2 === 1 ? theme.colors.dark01 : 'transparent'}
-                  key={`leaderboard-row-${index}`}
-                  backgroundColor={
-                    index % 2 === 1 ? theme.colors.dark01 : 'transparent'
-                  }
                                       gridTemplateColumns={props.gridTemplateColumns}
-                  gridGap="20px"
+                                      gridGap='20px' position='relative' width='100%' padding='4px'>
-                  position="relative"
-                  width="100%"
-                  padding="4px"
-                >
                                     {rowRender(elem)}
                                     {props.headerElements ? metricsRender(elem) : ''}
                                 </Grid>
@@ -277,7 +226,11 @@ const Table = (props) => {
                 </FlexColumn>
             );
         } else {
-      return <Medium margin="72px 0">No results ;c</Medium>;
+            return (
+                <Medium margin='72px 0'>
+                    No results ;c
+                </Medium>
+            );
         }
     };
 
@@ -286,26 +239,23 @@ const Table = (props) => {
         let elementsToMap = props.elements.slice(n, n + ELEMENTS_PER_PAGE);
         if (elementsToMap.length > 0) {
             return (
-        <MobileTableStyle
+                <MobileTableStyle as='table' staticColumnElements={props.staticColumnElements}
-          as="table"
+                                  headerElements={props.headerElements}>
-          staticColumnElements={props.staticColumnElements}
+                    <Container as='thead'>
-          headerElements={props.headerElements}
+                        <Container as='tr'>
-        >
-          <Container as="thead">
-            <Container as="tr">
                             {props.headerElements.map((elem, i) => {
                                 return (
-                  <Medium key={`table-header-${i}`} as="th">
+                                    <Medium key={`table-header-${i}`} as='th'>
                                         {elem}
                                     </Medium>
                                 );
                             })}
                         </Container>
                     </Container>
-          <Container as="tbody">
+                    <Container as='tbody'>
                         {elementsToMap.map((elem, index) => {
                             return (
-                <Grid as="tr" key={`leaderboard-row-${index}`}>
+                                <Grid as='tr' key={`leaderboard-row-${index}`}>
                                     {rowRender(elem)}
                                     {props.headerElements ? metricsRender(elem) : ''}
                                 </Grid>
@@ -315,14 +265,22 @@ const Table = (props) => {
                 </MobileTableStyle>
             );
         } else {
-      return <Medium margin="72px 0">No results ;c</Medium>;
+            return (
+                <Medium margin='72px 0'>
+                    No results ;c
+                </Medium>
+            );
         }
     };
 
     return (
         <>
-      <Media query={theme.mobile}>{mobileRender()}</Media>
+            <Media query={theme.mobile}>
-      <Media query={theme.desktop}>{desktopRender()}</Media>
+                {mobileRender()}
+            </Media>
+            <Media query={theme.desktop}>
+                {desktopRender()}
+            </Media>
         </>
     );
 };

src/utils/containers.js

@@ -35,8 +35,6 @@ const Container = styled.div`
   order: ${({ order }) => (order ? order : '0')};
   z-index: ${({ zIndex }) => (zIndex ? zIndex : '0')};
   list-style: ${({ listStyle }) => (listStyle ? listStyle : 'none')};
-  overflow-wrap: ${({ overflowWrap }) =>
-    overflowWrap ? overflowWrap : 'normal'};
 `;
 
 const FlexRow = styled(Container)`

src/utils/globals.js

@@ -16,7 +16,7 @@ const POLICY_PRIVACY_PAGE = '/policy-privacy';
 const CSI_LINK = 'https://csi.amu.edu.pl/';
 const ROOT_URL = window.location.origin;
 
-const LOGIN_REQUIRED_PAGES = ['myentries', 'submit'];
+const LOGIN_REQUIRED_PAGES = ['myentries', 'submit', 'howto'];
 
 const MINI_DESCRIPTION_RENDER = (description) => {
   if (description) {