List dependencies on build

This will prevent the case where we are using
an expired access token to call our API

Added a loadOnce to prevent not loading the page at least once

.github/workflows/build_and_push.yml

@@ -22,6 +22,9 @@ jobs:
       - name: Install dependecies
         run: npm install
 
+      - name: List dependencies
+        run: npm list
+
       - name: Build 
         # skiping fail on warning for now
         run: CI=false npm run build

src/views/AccessControl.tsx

@@ -22,6 +22,7 @@ import {Group} from "../store/group/types";
 import AccessControlModalGroups from "../components/AccessControlModalGroups";
 import tableSpin from "../components/Spin";
 import {useOidcAccessToken} from '@axa-fr/react-oidc';
+import {actions as userActions} from "../store/user";
 const { Title, Paragraph } = Typography;
 const { Column } = Table;
 const { confirm } = Modal;
@@ -41,7 +42,7 @@ interface GroupsToShow {
 }
 
 export const AccessControl = () => {
-    const {accessToken} = useOidcAccessToken()
+    const {accessToken,accessTokenPayload} = useOidcAccessToken()
     const dispatch = useDispatch()
 
     const rules = useSelector((state: RootState) => state.rule.data);
@@ -60,6 +61,7 @@ export const AccessControl = () => {
     const [groupsToShow, setGroupsToShow] = useState({} as GroupsToShow)
     const setupNewRuleVisible = useSelector((state: RootState) => state.rule.setupNewRuleVisible);
     const [groupPopupVisible,setGroupPopupVisible] = useState(false as boolean|undefined)
+    const [loadOnce, setLoadOnce] = useState(false)
 
     const pageSizeOptions = [
         {label: "5", value: "5"},
@@ -107,11 +109,28 @@ export const AccessControl = () => {
         })
     }
 
-    useEffect(() => {
+    const doPageRequests = () => {
         dispatch(ruleActions.getRules.request({getAccessTokenSilently:accessToken, payload: null}));
         dispatch(groupActions.getGroups.request({getAccessTokenSilently:accessToken, payload: null}));
+    }
+
+    useEffect(() => {
+        if (!loadOnce) {
+            doPageRequests()
+            setLoadOnce(true)
+        }
+    },[accessToken])
+
+    useEffect(() => {
+        if ((accessTokenPayload.exp * 1000) > (Date.now() - 5000)) {
+            doPageRequests()
+            if (!loadOnce) {
+                setLoadOnce(true)
+            }
+        }
     }, [])
 
+
     useEffect(() => {
         setShowTutorial(isShowTutorial(rules))
         setDataTable(sortBy(transformDataTable(filterDataTable()), "name"))

src/views/Peers.tsx

@@ -52,7 +52,7 @@ interface PeerDataTable extends Peer {
 
 export const Peers = () => {
 
-    const {accessToken} = useOidcAccessToken()
+    const {accessToken,accessTokenPayload} = useOidcAccessToken()
     const dispatch = useDispatch()
 
     const peers = useSelector((state: RootState) => state.peer.data);
@@ -72,6 +72,7 @@ export const Peers = () => {
     const [dataTable, setDataTable] = useState([] as PeerDataTable[]);
     const [peerToAction, setPeerToAction] = useState(null as PeerDataTable | null);
     const [groupPopupVisible,setGroupPopupVisible] = useState(false as boolean|undefined)
+    const [loadOnce, setLoadOnce] = useState(false)
 
     const pageSizeOptions = [
         {label: "5", value: "5"},
@@ -108,10 +109,26 @@ export const Peers = () => {
         })
     }
 
-    useEffect(() => {
+    const doPageRequests = () => {
         dispatch(peerActions.getPeers.request({getAccessTokenSilently: accessToken, payload: null}));
         dispatch(groupActions.getGroups.request({getAccessTokenSilently: accessToken, payload: null}));
         dispatch(routeActions.getRoutes.request({getAccessTokenSilently: accessToken, payload: null}));
+    }
+
+    useEffect(() => {
+        if (!loadOnce) {
+            doPageRequests()
+            setLoadOnce(true)
+        }
+    },[accessToken])
+
+    useEffect(() => {
+        if ((accessTokenPayload.exp * 1000) > (Date.now() - 5000)) {
+            doPageRequests()
+            if (!loadOnce) {
+                setLoadOnce(true)
+            }
+        }
     }, [])
 
     useEffect(() => {

src/views/Routes.tsx

@@ -22,13 +22,14 @@ import {
     RouteDataTable,GroupedDataTable,
     transformGroupedDataTable,transformDataTable
 } from '../utils/routes'
+import {actions as userActions} from "../store/user";
 
 const { Title, Paragraph } = Typography;
 const { Column } = Table;
 const { confirm } = Modal;
 
 export const Routes = () => {
-    const {accessToken} = useOidcAccessToken()
+    const {accessToken,accessTokenPayload} = useOidcAccessToken()
     const dispatch = useDispatch()
 
     const routes = useSelector((state: RootState) => state.route.data);
@@ -47,6 +48,7 @@ export const Routes = () => {
     const [routeToAction, setRouteToAction] = useState(null as RouteDataTable | null);
     const [groupedDataTable, setGroupedDataTable] = useState([] as GroupedDataTable[]);
     const [expandRowsOnClick,setExpandRowsOnClick] = useState(true)
+    const [loadOnce, setLoadOnce] = useState(false)
 
     const [peerNameToIP, peerIPToName] = initPeerMaps(peers);
 
@@ -82,8 +84,24 @@ export const Routes = () => {
         dispatch(routeActions.getRoutes.request({getAccessTokenSilently:accessToken, payload: null}));
     }, [peers])
 
-    useEffect(() => {
+    const doPageRequests = () => {
         dispatch(peerActions.getPeers.request({getAccessTokenSilently:accessToken, payload: null}));
+    }
+
+    useEffect(() => {
+        if (!loadOnce) {
+            doPageRequests()
+            setLoadOnce(true)
+        }
+    },[accessToken])
+
+    useEffect(() => {
+        if ((accessTokenPayload.exp * 1000) > (Date.now() - 5000)) {
+            doPageRequests()
+            if (!loadOnce) {
+                setLoadOnce(true)
+            }
+        }
     }, [])
 
     const filterGroupedDataTable = (routes:GroupedDataTable[]):GroupedDataTable[] => {

src/views/SetupKeys.tsx

@@ -33,6 +33,7 @@ import tableSpin from "../components/Spin";
 import {actions as groupActions} from "../store/group";
 import {Group} from "../store/group/types";
 import {TooltipPlacement} from "antd/es/tooltip";
+import {actions as userActions} from "../store/user";
 
 const {Title, Text, Paragraph} = Typography;
 const {Column} = Table;
@@ -44,7 +45,7 @@ interface SetupKeyDataTable extends SetupKey {
 }
 
 export const SetupKeys = () => {
-    const {accessToken} = useOidcAccessToken()
+    const {accessToken,accessTokenPayload} = useOidcAccessToken()
     const dispatch = useDispatch()
 
     const setupKeys = useSelector((state: RootState) => state.setupKey.data);
@@ -61,6 +62,7 @@ export const SetupKeys = () => {
     const [setupKeyToAction, setSetupKeyToAction] = useState(null as SetupKeyDataTable | null);
     const setupNewKeyVisible =   useSelector((state: RootState) => state.setupKey.setupNewKeyVisible)
     const [groupPopupVisible,setGroupPopupVisible] = useState(false as boolean|undefined)
+    const [loadOnce, setLoadOnce] = useState(false)
 
     const styleNotification = {marginTop: 85}
 
@@ -89,9 +91,25 @@ export const SetupKeys = () => {
         return d.map(p => ({...p, groupsCount: p.auto_groups ? p.auto_groups.length : 0} as SetupKeyDataTable))
     }
 
-    useEffect(() => {
+    const doPageRequests = () => {
         dispatch(setupKeyActions.getSetupKeys.request({getAccessTokenSilently: accessToken, payload: null}));
         dispatch(groupActions.getGroups.request({getAccessTokenSilently: accessToken, payload: null}));
+    }
+
+    useEffect(() => {
+        if (!loadOnce) {
+            doPageRequests()
+            setLoadOnce(true)
+        }
+    },[accessToken])
+
+    useEffect(() => {
+        if ((accessTokenPayload.exp * 1000) > (Date.now() - 5000)) {
+            doPageRequests()
+            if (!loadOnce) {
+                setLoadOnce(true)
+            }
+        }
     }, [])
 
     useEffect(() => {

src/views/Users.tsx

@@ -15,6 +15,9 @@ import {
 import { User } from "../store/user/types";
 import {filter} from "lodash";
 import tableSpin from "../components/Spin";
+import {actions as peerActions} from "../store/peer";
+import {actions as groupActions} from "../store/group";
+import {actions as routeActions} from "../store/route";
 
 const { Title, Paragraph } = Typography;
 const { Column } = Table;
@@ -24,7 +27,7 @@ interface UserDataTable extends User {
 }
 
 export const Users = () => {
-    const {accessToken} = useOidcAccessToken()
+    const {accessToken,accessTokenPayload} = useOidcAccessToken()
     const dispatch = useDispatch()
 
     const users = useSelector((state: RootState) => state.user.data);
@@ -40,13 +43,32 @@ export const Users = () => {
         {label: "15", value: "15"}
     ]
 
+    const [loadOnce, setLoadOnce] = useState(false)
+
     const transformDataTable = (d:User[]):UserDataTable[] => {
         return d.map(p => ({ key: p.id, ...p } as UserDataTable))
     }
 
-    useEffect(() => {
+    const doPageRequests = () => {
         dispatch(userActions.getUsers.request({getAccessTokenSilently:accessToken,payload: null}));
+    }
+
+    useEffect(() => {
+        if (!loadOnce) {
+            doPageRequests()
+            setLoadOnce(true)
+        }
+    },[accessToken])
+
+    useEffect(() => {
+        if ((accessTokenPayload.exp * 1000) > (Date.now() - 5000)) {
+            doPageRequests()
+            if (!loadOnce) {
+                setLoadOnce(true)
+            }
+        }
     }, [])
+
     useEffect(() => {
         setDataTable(transformDataTable(users))
     }, [users])