From 0a3d8996faa10b45f0870aa83b72eb6003c8a788 Mon Sep 17 00:00:00 2001 From: Francois Gerthoffert Date: Fri, 8 Nov 2019 18:39:27 -0500 Subject: [PATCH] Fixed an issue with multiple calls to the backend --- ui/src/models/global.ts | 1 + ui/src/models/velocity.ts | 125 ++++++++++++---------- ui/src/views/velocity/dashboard/index.tsx | 10 +- ui/src/views/velocity/index.tsx | 5 +- ui/src/views/velocity/teamtabs.tsx | 18 ++-- 5 files changed, 80 insertions(+), 79 deletions(-) diff --git a/ui/src/models/global.ts b/ui/src/models/global.ts index bf8675a..1a14b9e 100644 --- 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 index 441bf39..d1603da 100644 --- 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 index 4618da3..3984105 100644 --- 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 = ({ }) => { 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 index 407d504..71958ea 100644 --- 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 = ({ 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 index d3c974a..c6f336e 100644 --- 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 & @@ -20,11 +20,11 @@ const TeamsTabs: FC = ({ 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 = ({ {teams.map((team: any) => { @@ -47,5 +47,5 @@ const TeamsTabs: FC = ({ export default connect( mapState, - mapDispatch + mapDispatch, )(TeamsTabs);