Merge pull request #69 from Fgerthoffert/develop

Fixed an issue with multiple calls to the backend
Fgerthoffert · Nov 8, 2019 · 68bf20b · 68bf20b
2 parents 8723c05 + 0a3d899
commit 68bf20b
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 79 deletions.
diff --git a/ui/src/models/global.ts b/ui/src/models/global.ts
@@ -140,6 +140,7 @@ export const global = createModel({
               authUser: user,
             });
           }
+          log.info('Authentication initialized');
         }
       }
     },

diff --git a/ui/src/models/velocity.ts b/ui/src/models/velocity.ts
@@ -41,7 +41,6 @@ export const velocity = createModel({
       }
 
       this.loadTeamsFromCache(currentTab);
-
       if (
         JSON.parse(window._env_.AUTH0_DISABLED) === true ||
         (JSON.parse(window._env_.AUTH0_DISABLED) !== true &&
@@ -51,11 +50,14 @@ export const velocity = createModel({
         this.refreshTeams(currentTab);
       } else {
         log.info(
-          'Not loading data, either there is already some data in cache or user token not present',
+          'Not loading data, either there is already some data in cache or user token not (yet) present',
         );
       }
     },
-
+    async updateSelectedTeam(teamId, rootState) {
+      this.setSelectedTeam(teamId);
+      this.fetchTeamData(teamId);
+    },
     async loadTeamsFromCache(currentTab, rootState) {
       // If previous data was loaded and saved in localstorage
       // it will first display the cache, while the call to the backend is happening
@@ -78,11 +80,11 @@ export const velocity = createModel({
       }
     },
 
-    async loadVelocityFromCache(payload, rootState) {
+    async loadVelocityFromCache(teamId, rootState) {
       // If previous data was loaded and saved in localstorage
       // it will first display the cache, while the call to the backend is happening
       const cacheVelocity = reactLocalStorage.getObject('cache-velocity');
-      if (Object.keys(cacheVelocity).length > 0) {
+      if (cacheVelocity.find((t: any) => t.id === teamId) !== undefined) {
         log.info(
           'Loading Velocity data from cache while call to the backend is happening',
         );
@@ -91,51 +93,10 @@ export const velocity = createModel({
     },
 
     async refreshTeams(currentTab, rootState) {
-      const setTeams = this.setTeams;
-      const setLoading = this.setLoading;
-      const setSelectedTeam = this.setSelectedTeam;
-      setLoading(true);
-      const host =
-        window._env_.API_URL !== undefined
-          ? window._env_.API_URL
-          : 'http://127.0.0.1:3001';
-      const headers =
-        JSON.parse(window._env_.AUTH0_DISABLED) !== true
-          ? { Authorization: `Bearer ${rootState.global.accessToken}` }
-          : {};
-      axios({
-        method: 'get',
-        url: host + '/teams',
-        headers,
-      })
-        .then(response => {
-          setTeams(response.data);
-          reactLocalStorage.setObject('cache-velocityTeams', response.data);
-          // Set value to
-          const selectedTeam =
-            response.data.find((t: any) => t.id === currentTab) === undefined
-              ? response.data[0].id
-              : response.data.find((t: any) => t.id === currentTab).id;
-          setSelectedTeam(selectedTeam);
-          setLoading(false);
-        })
-        .catch(error => {
-          setTeams([]);
-          setSelectedTeam(null);
-          setLoading(false);
-        });
-    },
-
-    async fetchTeamData(teamId, rootState) {
-      this.loadVelocityFromCache(teamId);
-      const setVelocity = this.setVelocity;
-      const setLoading = this.setLoading;
-      if (
-        rootState.velocity.teams.find((t: any) => t.id === teamId) !== undefined
-      ) {
-        const log = rootState.global.log;
-        log.info('Fetching data for team: ' + teamId);
-
+      if (rootState.velocity.loading === false) {
+        const setTeams = this.setTeams;
+        const setLoading = this.setLoading;
+        const updateSelectedTeam = this.updateSelectedTeam;
         setLoading(true);
         const host =
           window._env_.API_URL !== undefined
@@ -147,24 +108,70 @@ export const velocity = createModel({
             : {};
         axios({
           method: 'get',
-          url: host + '/velocity/' + teamId,
+          url: host + '/teams',
           headers,
         })
           .then(response => {
-            const updatedVelocity = [
-              ...rootState.velocity.velocity.filter(
-                (t: any) => t.id !== teamId,
-              ),
-              response.data,
-            ];
-            setVelocity(updatedVelocity);
-            reactLocalStorage.setObject('cache-velocity', updatedVelocity);
+            setTeams(response.data);
+            reactLocalStorage.setObject('cache-velocityTeams', response.data);
+            // Set value to
+            const selectedTeam =
+              response.data.find((t: any) => t.id === currentTab) === undefined
+                ? response.data[0].id
+                : response.data.find((t: any) => t.id === currentTab).id;
+            updateSelectedTeam(selectedTeam);
             setLoading(false);
           })
           .catch(error => {
+            setTeams([]);
+            updateSelectedTeam(null);
             setLoading(false);
           });
       }
     },
+
+    async fetchTeamData(teamId, rootState) {
+      this.loadVelocityFromCache(teamId);
+      if (rootState.velocity.loading === false) {
+        const setVelocity = this.setVelocity;
+        const setLoading = this.setLoading;
+        if (
+          rootState.velocity.teams.find((t: any) => t.id === teamId) !==
+          undefined
+        ) {
+          const log = rootState.global.log;
+          log.info('Fetching data for team: ' + teamId);
+
+          setLoading(true);
+          const host =
+            window._env_.API_URL !== undefined
+              ? window._env_.API_URL
+              : 'http://127.0.0.1:3001';
+          const headers =
+            JSON.parse(window._env_.AUTH0_DISABLED) !== true
+              ? { Authorization: `Bearer ${rootState.global.accessToken}` }
+              : {};
+          axios({
+            method: 'get',
+            url: host + '/velocity/' + teamId,
+            headers,
+          })
+            .then(response => {
+              const updatedVelocity = [
+                ...rootState.velocity.velocity.filter(
+                  (t: any) => t.id !== teamId,
+                ),
+                response.data,
+              ];
+              setVelocity(updatedVelocity);
+              reactLocalStorage.setObject('cache-velocity', updatedVelocity);
+              setLoading(false);
+            })
+            .catch(error => {
+              setLoading(false);
+            });
+        }
+      }
+    },
   },
 });
diff --git a/ui/src/views/velocity/dashboard/index.tsx b/ui/src/views/velocity/dashboard/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { FC } from 'react';
 import { connect } from 'react-redux';
 import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
@@ -50,14 +50,6 @@ const Dashboard: FC<connectedProps> = ({
 }) => {
   const classes = useStyles();
 
-  const teamVelocity: any = velocity.find((t: any) => t.id === selectedTeam);
-  useEffect(() => {
-    // If team !== null but corresponding team 's data hasn't been loaded
-    if (teamVelocity === undefined) {
-      fetchTeamData(selectedTeam);
-    }
-  });
-
   let metric = 'points';
   if (!defaultPoints) {
     metric = 'issues';

diff --git a/ui/src/views/velocity/index.tsx b/ui/src/views/velocity/index.tsx
@@ -11,6 +11,7 @@ import DataStatus from './DataStatus';
 
 const mapState = (state: iRootState) => ({
   selectedTeam: state.velocity.selectedTeam,
+  loggedIn: state.global.loggedIn,
 });
 
 const mapDispatch = (dispatch: any) => ({
@@ -29,12 +30,12 @@ const Velocity: FC<any> = ({
   history,
   selectedTeam,
   setShowMenu,
+  loggedIn,
 }) => {
   setPageTitle('Velocity');
-
   useEffect(() => {
     setShowMenu(false);
-    if (selectedTeam === null) {
+    if (selectedTeam === null && loggedIn === true) {
       initView(match.params.tab);
     }
     if (match.params.tab === undefined && selectedTeam !== null) {

diff --git a/ui/src/views/velocity/teamtabs.tsx b/ui/src/views/velocity/teamtabs.tsx
@@ -7,11 +7,11 @@ import { iRootState } from '../../store';
 
 const mapState = (state: iRootState) => ({
   teams: state.velocity.teams,
-  selectedTeam: state.velocity.selectedTeam
+  selectedTeam: state.velocity.selectedTeam,
 });
 
 const mapDispatch = (dispatch: any) => ({
-  setSelectedTeam: dispatch.velocity.setSelectedTeam
+  updateSelectedTeam: dispatch.velocity.updateSelectedTeam,
 });
 
 type connectedProps = ReturnType<typeof mapState> &
@@ -20,11 +20,11 @@ const TeamsTabs: FC<any> = ({
   teams,
   changeTab,
   selectedTeam,
-  setSelectedTeam
+  updateSelectedTeam,
 }) => {
-  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
-    changeTab(newValue);
-    setSelectedTeam(newValue);
+  const handleChange = (event: React.ChangeEvent<{}>, teamId: string) => {
+    changeTab(teamId);
+    updateSelectedTeam(teamId);
   };
   if (teams.length === 0) {
     return null;
@@ -34,8 +34,8 @@ const TeamsTabs: FC<any> = ({
     <Tabs
       value={selectedTeamValue}
       onChange={handleChange}
-      indicatorColor='primary'
-      textColor='primary'
+      indicatorColor="primary"
+      textColor="primary"
       centered
     >
       {teams.map((team: any) => {
@@ -47,5 +47,5 @@ const TeamsTabs: FC<any> = ({
 
 export default connect(
   mapState,
-  mapDispatch
+  mapDispatch,
 )(TeamsTabs);