diff --git a/frontend/app/Router.js b/frontend/app/Router.js index 74c09b761..b303c6b40 100644 --- a/frontend/app/Router.js +++ b/frontend/app/Router.js @@ -6,6 +6,23 @@ import { Notification } from 'UI'; import { Loader } from 'UI'; import { fetchUserInfo } from 'Duck/user'; import withSiteIdUpdater from 'HOCs/withSiteIdUpdater'; +import WidgetViewPure from 'Components/Dashboard/components/WidgetView'; +import Header from 'Components/Header/Header'; +import { fetchList as fetchMetadata } from 'Duck/customField'; +import { fetchList as fetchSiteList } from 'Duck/site'; +import { fetchList as fetchAnnouncements } from 'Duck/announcements'; +import { fetchList as fetchAlerts } from 'Duck/alerts'; +import { withStore } from 'App/mstore'; + +import APIClient from './api_client'; +import * as routes from './routes'; +import { OB_DEFAULT_TAB } from 'App/routes'; +import Signup from './components/Signup/Signup'; +import { fetchTenants } from 'Duck/user'; +import { setSessionPath } from 'Duck/sessions'; +import { ModalProvider } from './components/Modal'; +import { GLOBAL_DESTINATION_PATH } from 'App/constants/storageKeys'; + const Login = lazy(() => import('Components/Login/Login')); const ForgotPassword = lazy(() => import('Components/ForgotPassword/ForgotPassword')); const UpdatePassword = lazy(() => import('Components/UpdatePassword/UpdatePassword')); @@ -20,21 +37,6 @@ const ErrorsPure = lazy(() => import('Components/Errors/Errors')); const FunnelDetailsPure = lazy(() => import('Components/Funnels/FunnelDetails')); const FunnelIssueDetails = lazy(() => import('Components/Funnels/FunnelIssueDetails')); const FunnelPagePure = lazy(() => import('Components/Funnels/FunnelPage')); -import WidgetViewPure from 'Components/Dashboard/components/WidgetView'; -import Header from 'Components/Header/Header'; -import { fetchList as fetchMetadata } from 'Duck/customField'; -import { fetchList as fetchSiteList } from 'Duck/site'; -import { fetchList as fetchAnnouncements } from 'Duck/announcements'; -import { fetchList as fetchAlerts } from 'Duck/alerts'; -import { withStore } from 'App/mstore' - -import APIClient from './api_client'; -import * as routes from './routes'; -import { OB_DEFAULT_TAB } from 'App/routes'; -import Signup from './components/Signup/Signup'; -import { fetchTenants } from 'Duck/user'; -import { setSessionPath } from 'Duck/sessions'; -import { ModalProvider } from './components/Modal'; const BugFinder = withSiteIdUpdater(BugFinderPure); const Dashboard = withSiteIdUpdater(DashboardPure); @@ -48,7 +50,6 @@ const FunnelPage = withSiteIdUpdater(FunnelPagePure); const FunnelsDetails = withSiteIdUpdater(FunnelDetailsPure); const FunnelIssue = withSiteIdUpdater(FunnelIssueDetails); const withSiteId = routes.withSiteId; -// const withObTab = routes.withObTab; const METRICS_PATH = routes.metrics(); const METRICS_DETAILS = routes.metricDetails(); @@ -78,170 +79,166 @@ const ONBOARDING_REDIRECT_PATH = routes.onboarding(OB_DEFAULT_TAB); @withStore @withRouter -@connect((state) => { - const siteId = state.getIn([ 'site', 'siteId' ]); - const jwt = state.get('jwt'); - const changePassword = state.getIn([ 'user', 'account', 'changePassword' ]); - const userInfoLoading = state.getIn([ 'user', 'fetchUserInfoRequest', 'loading' ]); - return { - jwt, - siteId, - changePassword, - sites: state.getIn([ 'site', 'list' ]), - isLoggedIn: jwt !== null && !changePassword, - loading: siteId === null || userInfoLoading, - email: state.getIn([ 'user', 'account', 'email' ]), - account: state.getIn([ 'user', 'account' ]), - organisation: state.getIn([ 'user', 'account', 'name' ]), - tenantId: state.getIn([ 'user', 'account', 'tenantId' ]), - tenants: state.getIn(['user', 'tenants']), - existingTenant: state.getIn(['user', 'authDetails', 'tenants']), - onboarding: state.getIn([ 'user', 'onboarding' ]) - }; -}, { - fetchUserInfo, - fetchTenants, - setSessionPath, - fetchMetadata, - fetchSiteList, - fetchAnnouncements, - fetchAlerts, -}) +@connect( + (state) => { + const siteId = state.getIn(['site', 'siteId']); + const jwt = state.get('jwt'); + const changePassword = state.getIn(['user', 'account', 'changePassword']); + const userInfoLoading = state.getIn(['user', 'fetchUserInfoRequest', 'loading']); + return { + jwt, + siteId, + changePassword, + sites: state.getIn(['site', 'list']), + isLoggedIn: jwt !== null && !changePassword, + loading: siteId === null || userInfoLoading, + email: state.getIn(['user', 'account', 'email']), + account: state.getIn(['user', 'account']), + organisation: state.getIn(['user', 'account', 'name']), + tenantId: state.getIn(['user', 'account', 'tenantId']), + tenants: state.getIn(['user', 'tenants']), + existingTenant: state.getIn(['user', 'authDetails', 'tenants']), + onboarding: state.getIn(['user', 'onboarding']), + }; + }, + { + fetchUserInfo, + fetchTenants, + setSessionPath, + fetchMetadata, + fetchSiteList, + fetchAnnouncements, + fetchAlerts, + } +) class Router extends React.Component { - state = { - destinationPath: null - } - constructor(props) { - super(props); - if (props.isLoggedIn) { - this.fetchInitialData(); - } else { - props.fetchTenants(); - } - } - - fetchInitialData = () => { - Promise.all([ - this.props.fetchUserInfo().then(() => { - this.props.fetchSiteList().then(() => { - const { mstore } = this.props - mstore.initClient(); - - // setTimeout(() => { - // this.props.fetchMetadata() - // this.props.fetchAnnouncements(); - // this.props.fetchAlerts(); - // }, 100); - }) - }) - ]) - } - - componentDidMount() { - const { isLoggedIn, location } = this.props; - if (!isLoggedIn) { - this.setState({ destinationPath: location.pathname }); - } - } - - componentDidUpdate(prevProps, prevState) { - this.props.setSessionPath(prevProps.location) - if (prevProps.email !== this.props.email && !this.props.email) { - this.props.fetchTenants(); + constructor(props) { + super(props); + if (props.isLoggedIn) { + this.fetchInitialData(); + } else { + props.fetchTenants(); + } } - if (this.state.destinationPath && !prevProps.isLoggedIn && this.props.isLoggedIn && this.state.destinationPath !== routes.login() && this.state.destinationPath !== '/') { - this.props.history.push(this.state.destinationPath); - this.setState({ destinationPath: null }); + fetchInitialData = () => { + Promise.all([ + this.props.fetchUserInfo().then(() => { + this.props.fetchSiteList().then(() => { + const { mstore } = this.props; + mstore.initClient(); + }); + }), + ]); + }; + + componentDidMount() { + const { isLoggedIn, location } = this.props; + const destinationPath = localStorage.getItem(GLOBAL_DESTINATION_PATH); + if (!isLoggedIn && !location.pathname.includes('login')) { + localStorage.setItem(GLOBAL_DESTINATION_PATH, location.pathname); + } else if (isLoggedIn && !location.pathname.includes(destinationPath)) { + this.props.history.push(destinationPath || '/'); + localStorage.removeItem(GLOBAL_DESTINATION_PATH); + } } - if (!prevProps.isLoggedIn && this.props.isLoggedIn) { - this.fetchInitialData(); + componentDidUpdate(prevProps, prevState) { + this.props.setSessionPath(prevProps.location); + const destinationPath = localStorage.getItem(GLOBAL_DESTINATION_PATH); + + if (prevProps.email !== this.props.email && !this.props.email) { + this.props.fetchTenants(); + } + + if ( + destinationPath && + !prevProps.isLoggedIn && + this.props.isLoggedIn && + destinationPath !== routes.login() && + destinationPath !== '/' + ) { + this.props.history.push(destinationPath); + } + + if (!prevProps.isLoggedIn && this.props.isLoggedIn) { + this.fetchInitialData(); + } } - } - render() { - const { isLoggedIn, jwt, siteId, sites, loading, changePassword, location, existingTenant, onboarding } = this.props; - const siteIdList = sites.map(({ id }) => id).toJS(); - const hideHeader = location.pathname && location.pathname.includes('/session/') || location.pathname.includes('/assist/'); + render() { + const { isLoggedIn, jwt, siteId, sites, loading, changePassword, location, existingTenant, onboarding } = this.props; + const siteIdList = sites.map(({ id }) => id).toJS(); + const hideHeader = (location.pathname && location.pathname.includes('/session/')) || location.pathname.includes('/assist/'); - return isLoggedIn ? - - - - {!hideHeader &&
} - }> - - - - - { - const client = new APIClient(jwt); - switch (location.pathname) { - case '/integrations/slack': - client.post('integrations/slack/add', { - code: location.search.split('=')[ 1 ], - state: tenantId, - }); - break; - } - return ; - } - } - /> - { onboarding && - - } - {/* { siteIdList.length === 0 && - - } */} - - {/* DASHBOARD and Metrics */} - - - - - - - + return isLoggedIn ? ( + + + + {!hideHeader &&
} + }> + + + + { + const client = new APIClient(jwt); + switch (location.pathname) { + case '/integrations/slack': + client.post('integrations/slack/add', { + code: location.search.split('=')[1], + state: tenantId, + }); + break; + } + return ; + }} + /> + {onboarding && } - - - - - - {/* */} - - - - - } /> - { routes.redirects.map(([ fr, to ]) => ( - - )) } - - - - - - : - }> - - - - { !existingTenant && } - - - - ; - } + {/* DASHBOARD and Metrics */} + + + + + + + + + + + + + + + + + + } /> + {routes.redirects.map(([fr, to]) => ( + + ))} + + + + + + ) : ( + }> + + + + {!existingTenant && } + + + + ); + } } export default () => ( - - - + + + ); diff --git a/frontend/app/constants/storageKeys.ts b/frontend/app/constants/storageKeys.ts index 2ae160d49..be644872a 100644 --- a/frontend/app/constants/storageKeys.ts +++ b/frontend/app/constants/storageKeys.ts @@ -1,4 +1,5 @@ export const SKIP_TO_ISSUE = "__$session-skipToIssue$__" export const TIMEZONE = "__$session-timezone$__" export const DURATION_FILTER = "__$session-durationFilter$__" -export const SESSION_FILTER = "__$session-filter$__" \ No newline at end of file +export const SESSION_FILTER = "__$session-filter$__" +export const GLOBAL_DESTINATION_PATH = "__$global-destinationPath$__" \ No newline at end of file