scroll-x for tables

src/api/getFullUserInfo.js

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

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' }}>
-            <Table
-              items={elements}
-              orderedKeys={orderKeys(entries[0])}
-              sortByUpdate={sortByUpdate}
-              popUpMessageHandler={props.popUpMessageHandler}
-            />
-            // </div>
+            <div style={{ width: '100%', overflowX: 'auto' }}>
+              <Table
+                items={elements}
+                orderedKeys={orderKeys(entries[0])}
+                sortByUpdate={sortByUpdate}
+                popUpMessageHandler={props.popUpMessageHandler}
+              />
+            </div>
           )}
           <Pager
             pageNr={pageNr}

src/pages/HowTo/HowTo.js

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

src/pages/Leaderboard/Leaderboard.js

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