From 4cf85bebdab1c9a8b1150f6ecad5bc539cf19006 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Mon, 21 Aug 2023 14:33:41 +0530 Subject: [PATCH] fix(ui): login routes --- frontend/app/Router.tsx | 147 +++++++++++------- .../components/Header/UserMenu/UserMenu.tsx | 4 +- frontend/app/components/Login/Login.js | 4 +- frontend/app/layout/TopRight.tsx | 22 +-- 4 files changed, 94 insertions(+), 83 deletions(-) diff --git a/frontend/app/Router.tsx b/frontend/app/Router.tsx index 101fba9e8..d3fc74bb8 100644 --- a/frontend/app/Router.tsx +++ b/frontend/app/Router.tsx @@ -1,11 +1,10 @@ -import React, { lazy, Suspense, useEffect } from 'react'; +import React, { lazy, Suspense, useEffect, useRef } from 'react'; import { Switch, Route, Redirect, withRouter, RouteComponentProps, BrowserRouter } from 'react-router-dom'; import { connect, ConnectedProps } from 'react-redux'; import { Notification } from 'UI'; import { Loader } from 'UI'; -import { fetchUserInfo } from 'Duck/user'; +import { fetchUserInfo, setJwt } from 'Duck/user'; import withSiteIdUpdater from 'HOCs/withSiteIdUpdater'; -import Header from 'Components/Header/Header'; import { fetchList as fetchSiteList } from 'Duck/site'; import { withStore } from 'App/mstore'; import { Map } from 'immutable'; @@ -17,33 +16,38 @@ import { fetchTenants } from 'Duck/user'; import { setSessionPath } from 'Duck/sessions'; import { ModalProvider } from 'Components/Modal'; import { GLOBAL_DESTINATION_PATH, GLOBAL_HAS_NO_RECORDINGS } from 'App/constants/storageKeys'; -import SupportCallout from 'Shared/SupportCallout'; import PublicRoutes from 'App/PublicRoutes'; import Layout from 'App/layout/Layout'; -const SessionPure = lazy(() => import('Components/Session/Session')); -const LiveSessionPure = lazy(() => import('Components/Session/LiveSession')); -const OnboardingPure = lazy(() => import('Components/Onboarding/Onboarding')); -const ClientPure = lazy(() => import('Components/Client/Client')); -const AssistPure = lazy(() => import('Components/Assist/AssistRouter')); -const SessionsOverviewPure = lazy(() => import('Components/Overview')); -const DashboardPure = lazy(() => import('Components/Dashboard/NewDashboard')); -const FunnelDetailsPure = lazy(() => import('Components/Funnels/FunnelDetails')); -const FunnelIssueDetails = lazy(() => import('Components/Funnels/FunnelIssueDetails')); -const FunnelPagePure = lazy(() => import('Components/Funnels/FunnelPage')); -const MultiviewPure = lazy(() => import('Components/Session_/Multiview/Multiview')); +const components = { + SessionPure: lazy(() => import('Components/Session/Session')), + LiveSessionPure: lazy(() => import('Components/Session/LiveSession')), + OnboardingPure: lazy(() => import('Components/Onboarding/Onboarding')), + ClientPure: lazy(() => import('Components/Client/Client')), + AssistPure: lazy(() => import('Components/Assist/AssistRouter')), + SessionsOverviewPure: lazy(() => import('Components/Overview')), + DashboardPure: lazy(() => import('Components/Dashboard/NewDashboard')), + FunnelDetailsPure: lazy(() => import('Components/Funnels/FunnelDetails')), + FunnelIssueDetails: lazy(() => import('Components/Funnels/FunnelIssueDetails')), + FunnelPagePure: lazy(() => import('Components/Funnels/FunnelPage')), + MultiviewPure: lazy(() => import('Components/Session_/Multiview/Multiview')) +}; + + +const enhancedComponents = { + SessionsOverview: withSiteIdUpdater(components.SessionsOverviewPure), + Dashboard: withSiteIdUpdater(components.DashboardPure), + Session: withSiteIdUpdater(components.SessionPure), + LiveSession: withSiteIdUpdater(components.LiveSessionPure), + Assist: withSiteIdUpdater(components.AssistPure), + Client: withSiteIdUpdater(components.ClientPure), + Onboarding: withSiteIdUpdater(components.OnboardingPure), + FunnelPage: withSiteIdUpdater(components.FunnelPagePure), + FunnelsDetails: withSiteIdUpdater(components.FunnelDetailsPure), + FunnelIssue: withSiteIdUpdater(components.FunnelIssueDetails), + Multiview: withSiteIdUpdater(components.MultiviewPure) +}; -const SessionsOverview = withSiteIdUpdater(SessionsOverviewPure); -const Dashboard = withSiteIdUpdater(DashboardPure); -const Session = withSiteIdUpdater(SessionPure); -const LiveSession = withSiteIdUpdater(LiveSessionPure); -const Assist = withSiteIdUpdater(AssistPure); -const Client = withSiteIdUpdater(ClientPure); -const Onboarding = withSiteIdUpdater(OnboardingPure); -const FunnelPage = withSiteIdUpdater(FunnelPagePure); -const FunnelsDetails = withSiteIdUpdater(FunnelDetailsPure); -const FunnelIssue = withSiteIdUpdater(FunnelIssueDetails); -const Multiview = withSiteIdUpdater(MultiviewPure); const withSiteId = routes.withSiteId; const METRICS_PATH = routes.metrics(); @@ -92,13 +96,14 @@ interface RouterProps extends RouteComponentProps, ConnectedProps any; fetchTenants: () => any; setSessionPath: (path: any) => any; - fetchSiteList: (siteId: number) => any; + fetchSiteList: (siteId?: number) => any; match: { params: { siteId: string; } }; mstore: any; + setJwt: (jwt: string) => any; } const Router: React.FC = (props) => { @@ -120,7 +125,16 @@ const Router: React.FC = (props) => { match: { params: { siteId: siteIdFromPath } } } = props; + const checkJWT = () => { + const urlJWT = new URLSearchParams(window.location.search).get('jwt'); + if (urlJWT && !props.isLoggedIn) { + props.setJwt(urlJWT); + } + }; + useEffect(() => { + checkJWT(); + const fetchInitialData = async () => { const siteIdFromPath = parseInt(window.location.pathname.split('/')[1]); await fetchUserInfo(); @@ -136,27 +150,34 @@ const Router: React.FC = (props) => { }, []); useEffect(() => { - const destinationPath = localStorage.getItem(GLOBAL_DESTINATION_PATH); - - if (!isLoggedIn && !location.pathname.includes('login')) { + if (!location.pathname.includes('login')) { localStorage.setItem(GLOBAL_DESTINATION_PATH, location.pathname); - } else if (isLoggedIn && destinationPath && !location.pathname.includes(destinationPath)) { - history.push(destinationPath || '/'); - localStorage.removeItem(GLOBAL_DESTINATION_PATH); } - }, [isLoggedIn, location]); + }, [location]); + + function usePrevious(value: any) { + const ref = useRef(); + useEffect(() => { + ref.current = value; + }, [value]); + return ref.current; + } + + const prevEmail = usePrevious(props.email); + const prevIsLoggedIn = usePrevious(props.isLoggedIn); + useEffect(() => { setSessionPath(props.location); const destinationPath = localStorage.getItem(GLOBAL_DESTINATION_PATH); - if (props.email !== props.email && !props.email) { + if (prevEmail !== props.email && !props.email) { fetchTenants(); } if ( destinationPath && - !props.isLoggedIn && + !prevIsLoggedIn && props.isLoggedIn && destinationPath !== routes.login() && destinationPath !== '/' @@ -164,27 +185,30 @@ const Router: React.FC = (props) => { history.push(destinationPath); } - if (!props.isLoggedIn && props.isLoggedIn) { + if (!prevIsLoggedIn && props.isLoggedIn) { const fetchInitialData = async () => { await fetchUserInfo(); + await fetchSiteList(); const { mstore } = props; mstore.initClient(); }; fetchInitialData(); + localStorage.removeItem(GLOBAL_DESTINATION_PATH); } - }, [props.email, props.isLoggedIn]); + }, [props.email, props.isLoggedIn, props.jwt]); const siteIdList = sites.map(({ id }) => id).toJS(); const hideHeader = (location.pathname && location.pathname.includes('/session/')) || location.pathname.includes('/assist/') || location.pathname.includes('multiview'); - const isPlayer = - isRoute(SESSION_PATH, location.pathname) || - isRoute(LIVE_SESSION_PATH, location.pathname) || - isRoute(MULTIVIEW_PATH, location.pathname) || - isRoute(MULTIVIEW_INDEX_PATH, location.pathname); + + // const isPlayer = + // isRoute(SESSION_PATH, location.pathname) || + // isRoute(LIVE_SESSION_PATH, location.pathname) || + // isRoute(MULTIVIEW_PATH, location.pathname) || + // isRoute(MULTIVIEW_INDEX_PATH, location.pathname); const redirectToOnboarding = !onboarding && localStorage.getItem(GLOBAL_HAS_NO_RECORDINGS) === 'true'; @@ -196,8 +220,8 @@ const Router: React.FC = (props) => { }> - - + + { @@ -233,15 +257,20 @@ const Router: React.FC = (props) => { withSiteId(DASHBOARD_SELECT_PATH, siteIdList), withSiteId(DASHBOARD_METRIC_CREATE_PATH, siteIdList), withSiteId(DASHBOARD_METRIC_DETAILS_PATH, siteIdList) - ]} component={Dashboard} /> + ]} component={enhancedComponents.Dashboard} /> - - - - - - - + + + + + + + = (props) => { withSiteId(NOTES_PATH, siteIdList), withSiteId(BOOKMARKS_PATH, siteIdList) ]} - component={SessionsOverview} + component={enhancedComponents.SessionsOverview} /> - - + + } + render={(props) => } /> {Object.entries(routes.redirects).map(([fr, to]) => ( @@ -307,7 +337,8 @@ const mapDispatchToProps = { fetchUserInfo, fetchTenants, setSessionPath, - fetchSiteList + fetchSiteList, + setJwt }; const connector = connect(mapStateToProps, mapDispatchToProps); diff --git a/frontend/app/components/Header/UserMenu/UserMenu.tsx b/frontend/app/components/Header/UserMenu/UserMenu.tsx index 89a487e78..cfe0e29df 100644 --- a/frontend/app/components/Header/UserMenu/UserMenu.tsx +++ b/frontend/app/components/Header/UserMenu/UserMenu.tsx @@ -11,8 +11,8 @@ const CLIENT_PATH = client(CLIENT_DEFAULT_TAB); interface Props { history: any; - onLogoutClick: any; - className: string; + onLogoutClick?: any; + className?: string; account: any; } function UserMenu(props: RouteComponentProps) { diff --git a/frontend/app/components/Login/Login.js b/frontend/app/components/Login/Login.js index 70be1f029..69c8fb521 100644 --- a/frontend/app/components/Login/Login.js +++ b/frontend/app/components/Login/Login.js @@ -61,9 +61,7 @@ class Login extends React.Component { handleSubmit = (token) => { const { email, password } = this.state; - this.props.login({ email: email.trim(), password, 'g-recaptcha-response': token }).then(() => { - const { errors } = this.props; - }); + this.props.login({ email: email.trim(), password, 'g-recaptcha-response': token }); }; onSubmit = (e) => { diff --git a/frontend/app/layout/TopRight.tsx b/frontend/app/layout/TopRight.tsx index ae63adaae..89729c7b9 100644 --- a/frontend/app/layout/TopRight.tsx +++ b/frontend/app/layout/TopRight.tsx @@ -1,29 +1,14 @@ import React from 'react'; import GettingStartedProgress from 'Shared/GettingStarted/GettingStartedProgress'; import Notifications from 'Components/Alerts/Notifications/Notifications'; -import cn from 'classnames'; -import styles from 'Components/Header/header.module.css'; -import { Icon, Tooltip } from 'UI'; -import { NavLink } from 'react-router-dom'; -import SettingsMenu from 'Components/Header/SettingsMenu/SettingsMenu'; import HealthStatus from 'Components/Header/HealthStatus'; import { getInitials } from 'App/utils'; import UserMenu from 'Components/Header/UserMenu/UserMenu'; import ErrorGenPanel from 'App/dev/components/ErrorGenPanel'; -import { client, CLIENT_DEFAULT_TAB } from 'App/routes'; import { connect } from 'react-redux'; -import { Menu, MenuProps, Popover, Space } from 'antd'; -import { Button } from 'antd'; -import { SettingOutlined } from '@ant-design/icons'; +import { Popover, Space } from 'antd'; import ProjectDropdown from 'Shared/ProjectDropdown'; -const CLIENT_PATH = client(CLIENT_DEFAULT_TAB); - -const items: MenuProps['items'] = [ - { key: '1', label: 'nav 1' }, - { key: '2', label: 'nav 2' } -]; - interface Props { account: any; siteId: any; @@ -35,9 +20,6 @@ function TopRight(props: Props) { const { account } = props; // @ts-ignore return ( - // @@ -46,7 +28,7 @@ function TopRight(props: Props) { - } placement={'topRight'}> + } placement={'topRight'}>
{getInitials(account.name)}