scroll-x for tables

src/api/getFullUserInfo.js

@@ -1,15 +1,14 @@
 import { API } from '../utils/globals';
 import KeyCloakService from '../services/KeyCloakService';
 
-const getFullUser = (setDataState, setLoadingState) => {
+const getFullUser = async (setDataState, setLoadingState) => {
   fetch(`${API}/full-user-info`, {
-        headers: {'Authorization': `Bearer ${KeyCloakService.getToken()}`}
+    headers: { Authorization: `Bearer ${KeyCloakService.getToken()}` },
   })
-        .then(response => response.json())
-        .then(data => {
+    .then((response) => response.json())
+    .then((data) => {
       setDataState(data);
-            if (setLoadingState)
-                setLoadingState(false);
+      if (setLoadingState) setLoadingState(false);
     });
 };
 

src/pages/AllEntries/AllEntries.js

@@ -112,6 +112,8 @@ const AllEntries = (props) => {
   const n = (pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
   let elements = entries.slice(n, n + ELEMENTS_PER_PAGE * 2);
 
+  console.log(CALC_PAGES(entries, 2));
+  console.log(entries);
   return (
     <FlexColumn
       padding="24px"
@@ -129,14 +131,14 @@ const AllEntries = (props) => {
             }
           />
           {elements.length > 0 && entries[0] && (
-            // <div style={{ width: '100%', overflowX: 'scroll' }}>
+            <div style={{ width: '100%', overflowX: 'auto' }}>
               <Table
                 items={elements}
                 orderedKeys={orderKeys(entries[0])}
                 sortByUpdate={sortByUpdate}
                 popUpMessageHandler={props.popUpMessageHandler}
               />
-            // </div>
+            </div>
           )}
           <Pager
             pageNr={pageNr}

src/pages/HowTo/HowTo.js

@@ -9,9 +9,9 @@ const HowTo = (props) => {
   const [userFullInfo, setUserFullInfo] = React.useState(null);
   const username = KeyCloakService.getUsername();
 
-  React.useEffect(() => {
-    getFullUser(setUserFullInfo);
-
+  React.useMemo(async () => {
+    await getFullUser(setUserFullInfo);
+    setTimeout(() => {
       if (!KeyCloakService.isLoggedIn()) {
         props.popUpMessageHandler(
           'Please log in',
@@ -19,6 +19,7 @@ const HowTo = (props) => {
           () => KeyCloakService.doLogin
         );
       }
+    }, 1000);
   }, [props]);
 
   return (

src/pages/Leaderboard/Leaderboard.js

@@ -177,12 +177,14 @@ const Leaderboard = (props) => {
             }
           />
           {elements.length > 0 && entries[0] && (
+            <div style={{ width: '100%', overflowX: 'auto' }}>
               <Table
                 items={elements}
                 orderedKeys={orderKeys(entries[0])}
                 sortByUpdate={sortByUpdate}
                 rowFooter={false}
               />
+            </div>
           )}
           <Pager
             pageNr={pageNr}

src/pages/MyEntries/MyEntries.js

@@ -107,11 +107,13 @@ const MyEntries = (props) => {
             }
           />
           {elements.length > 0 && myEntries[0] && (
+            <div style={{ width: '100%', overflowX: 'auto' }}>
               <Table
                 items={elements}
                 orderedKeys={orderKeys(myEntries[0])}
                 sortByUpdate={sortByUpdate}
               />
+            </div>
           )}
           <Pager
             pageNr={pageNr}