From 69b3f7cdf4d6df1a1c592df7a1d5337d69cc33b1 Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Fri, 13 Sep 2024 15:54:17 +0200 Subject: [PATCH] ui: fix spot list header behavior, change spot login flow? --- frontend/app/Router.tsx | 59 ++++++++++--------- .../Spots/SpotsList/SpotsListHeader.tsx | 5 +- .../app/components/Spots/SpotsList/index.tsx | 1 + frontend/app/mstore/spotStore.ts | 17 +++++- frontend/app/services/spotService.ts | 1 + frontend/app/utils/index.ts | 1 - 6 files changed, 49 insertions(+), 35 deletions(-) diff --git a/frontend/app/Router.tsx b/frontend/app/Router.tsx index bdc52fc81..106fcb0b1 100644 --- a/frontend/app/Router.tsx +++ b/frontend/app/Router.tsx @@ -10,21 +10,19 @@ import { GLOBAL_DESTINATION_PATH, IFRAME, JWT_PARAM, - SPOT_ONBOARDING -} from "App/constants/storageKeys"; + SPOT_ONBOARDING, +} from 'App/constants/storageKeys'; import Layout from 'App/layout/Layout'; -import { withStore } from "App/mstore"; -import { checkParam, handleSpotJWT, isTokenExpired } from "App/utils"; +import { withStore } from 'App/mstore'; +import { checkParam, handleSpotJWT, isTokenExpired } from 'App/utils'; import { ModalProvider } from 'Components/Modal'; import { ModalProvider as NewModalProvider } from 'Components/ModalContext'; import { fetchListActive as fetchMetadata } from 'Duck/customField'; import { setSessionPath } from 'Duck/sessions'; import { fetchList as fetchSiteList } from 'Duck/site'; import { init as initSite } from 'Duck/site'; -import { fetchUserInfo, getScope, setJwt, logout } from "Duck/user"; -import { fetchTenants } from 'Duck/user'; +import { fetchUserInfo, getScope, logout, setJwt } from 'Duck/user'; import { Loader } from 'UI'; -import { spotsList } from "./routes"; import * as routes from './routes'; interface RouterProps @@ -36,7 +34,6 @@ interface RouterProps changePassword: boolean; isEnterprise: boolean; fetchUserInfo: () => any; - fetchTenants: () => any; setSessionPath: (path: any) => any; fetchSiteList: (siteId?: number) => any; match: { @@ -45,7 +42,7 @@ interface RouterProps }; }; mstore: any; - setJwt: (params: { jwt: string, spotJwt: string | null }) => any; + setJwt: (params: { jwt: string; spotJwt: string | null }) => any; fetchMetadata: (siteId: string) => void; initSite: (site: any) => void; scopeSetup: boolean; @@ -68,15 +65,15 @@ const Router: React.FC = (props) => { logout, } = props; - const params = new URLSearchParams(location.search) + const params = new URLSearchParams(location.search); const spotCb = params.get('spotCallback'); - const spotReqSent = React.useRef(false) + const spotReqSent = React.useRef(false); const [isSpotCb, setIsSpotCb] = React.useState(false); const [isIframe, setIsIframe] = React.useState(false); const [isJwt, setIsJwt] = React.useState(false); const handleJwtFromUrl = () => { - const params = new URLSearchParams(location.search) + const params = new URLSearchParams(location.search); const urlJWT = params.get('jwt'); const spotJwt = params.get('spotJwt'); if (spotJwt) { @@ -92,6 +89,7 @@ const Router: React.FC = (props) => { return; } else { spotReqSent.current = true; + setIsSpotCb(false); } handleSpotJWT(jwt); }; @@ -107,13 +105,17 @@ const Router: React.FC = (props) => { const handleUserLogin = async () => { if (isSpotCb) { - localStorage.setItem(SPOT_ONBOARDING, 'true') + localStorage.setItem(SPOT_ONBOARDING, 'true'); } await fetchUserInfo(); const siteIdFromPath = parseInt(location.pathname.split('/')[1]); await fetchSiteList(siteIdFromPath); props.mstore.initClient(); + if (localSpotJwt && !isTokenExpired(localSpotJwt)) { + handleSpotLogin(localSpotJwt); + } + const destinationPath = localStorage.getItem(GLOBAL_DESTINATION_PATH); if ( destinationPath && @@ -144,7 +146,7 @@ const Router: React.FC = (props) => { if (spotCb) { setIsSpotCb(true); } - }, [spotCb]) + }, [spotCb]); useEffect(() => { handleDestinationPath(); @@ -160,21 +162,19 @@ const Router: React.FC = (props) => { useEffect(() => { if (scopeSetup) { - history.push(routes.scopeSetup()) + history.push(routes.scopeSetup()); } - }, [scopeSetup]) + }, [scopeSetup]); useEffect(() => { - if (isLoggedIn && (location.pathname.includes('login') || isSpotCb)) { - if (localSpotJwt) { - if (!isTokenExpired(localSpotJwt)) { - handleSpotLogin(localSpotJwt); - } else { - logout(); - } + if (isLoggedIn && isSpotCb) { + if (localSpotJwt && !isTokenExpired(localSpotJwt)) { + handleSpotLogin(localSpotJwt); + } else { + logout(); } } - }, [isSpotCb, location, isLoggedIn, localSpotJwt]) + }, [isSpotCb, location, isLoggedIn, localSpotJwt]); useEffect(() => { if (siteId && siteId !== lastFetchedSiteIdRef.current) { @@ -204,8 +204,7 @@ const Router: React.FC = (props) => { location.pathname.includes('multiview') || location.pathname.includes('/view-spot/') || location.pathname.includes('/spots/') || - location.pathname.includes('/scope-setup') - + location.pathname.includes('/scope-setup'); if (isIframe) { return ( @@ -238,8 +237,11 @@ const mapStateToProps = (state: Map) => { 'loading', ]); const sitesLoading = state.getIn(['site', 'fetchListRequest', 'loading']); - const scopeSetup = getScope(state) === 0 - const loading = Boolean(userInfoLoading) || Boolean(sitesLoading) || (!scopeSetup && !siteId); + const scopeSetup = getScope(state) === 0; + const loading = + Boolean(userInfoLoading) || + Boolean(sitesLoading) || + (!scopeSetup && !siteId); return { siteId, changePassword, @@ -262,7 +264,6 @@ const mapStateToProps = (state: Map) => { const mapDispatchToProps = { fetchUserInfo, - fetchTenants, setSessionPath, fetchSiteList, setJwt, diff --git a/frontend/app/components/Spots/SpotsList/SpotsListHeader.tsx b/frontend/app/components/Spots/SpotsList/SpotsListHeader.tsx index f22ce9242..2ce776eef 100644 --- a/frontend/app/components/Spots/SpotsList/SpotsListHeader.tsx +++ b/frontend/app/components/Spots/SpotsList/SpotsListHeader.tsx @@ -10,7 +10,7 @@ const SpotsListHeader = observer( onDelete, selectedCount, onClearSelection, - isEmpty, + tenantHasSpots, onRefresh, }: { onDelete: () => void; @@ -18,6 +18,7 @@ const SpotsListHeader = observer( onClearSelection: () => void; onRefresh: () => void; isEmpty?: boolean; + tenantHasSpots: boolean; }) => { const { spotStore } = useStore(); @@ -52,7 +53,7 @@ const SpotsListHeader = observer( - {isEmpty ? null : ( + {tenantHasSpots ? null : (
{selectedCount > 0 && ( diff --git a/frontend/app/components/Spots/SpotsList/index.tsx b/frontend/app/components/Spots/SpotsList/index.tsx index 107e7e235..b5b385098 100644 --- a/frontend/app/components/Spots/SpotsList/index.tsx +++ b/frontend/app/components/Spots/SpotsList/index.tsx @@ -89,6 +89,7 @@ function SpotsList() { selectedCount={selectedSpots.length} onClearSelection={clearSelection} isEmpty={isEmpty} + tenantHasSpots={spotStore.tenantHasSpots} />
diff --git a/frontend/app/mstore/spotStore.ts b/frontend/app/mstore/spotStore.ts index 1442ed2e8..71b4571b8 100644 --- a/frontend/app/mstore/spotStore.ts +++ b/frontend/app/mstore/spotStore.ts @@ -1,10 +1,15 @@ import { makeAutoObservable } from 'mobx'; + + import { spotService } from 'App/services'; import { UpdateSpotRequest } from 'App/services/spotService'; + + import { Spot } from './types/spot'; + export default class SpotStore { isLoading: boolean = false; spots: Spot[] = []; @@ -18,6 +23,7 @@ export default class SpotStore { pubKey: { value: string; expiration: number } | null = null; readonly order = 'desc'; accessError = false; + tenantHasSpots = false; constructor() { makeAutoObservable(this); @@ -81,13 +87,18 @@ export default class SpotStore { limit: this.limit, } as const; - const response = await this.withLoader(() => + const { spots, tenantHasSpots, total } = await this.withLoader(() => spotService.fetchSpots(filters) ); - this.setSpots(response.spots.map((spot: any) => new Spot(spot))); - this.setTotal(response.total); + this.setSpots(spots.map((spot: any) => new Spot(spot))); + this.setTotal(total); + this.setTenantHasSpots(tenantHasSpots); }; + setTenantHasSpots(hasSpots: boolean) { + this.tenantHasSpots = hasSpots; + } + async fetchSpotById(id: string) { try { const response = await this.withLoader(() => diff --git a/frontend/app/services/spotService.ts b/frontend/app/services/spotService.ts index 55e5273a3..32f0fa958 100644 --- a/frontend/app/services/spotService.ts +++ b/frontend/app/services/spotService.ts @@ -33,6 +33,7 @@ interface AddCommentRequest { interface GetSpotsResponse { spots: SpotInfo[]; total: number; + tenantHasSpots: boolean; } interface GetSpotsRequest { diff --git a/frontend/app/utils/index.ts b/frontend/app/utils/index.ts index d27741ed6..513bd584d 100644 --- a/frontend/app/utils/index.ts +++ b/frontend/app/utils/index.ts @@ -504,7 +504,6 @@ export function truncateStringToFit(string: string, screenWidth: number, charWid let sendingRequest = false; export const handleSpotJWT = (jwt: string) => { - console.log(jwt, sendingRequest) let tries = 0; if (!jwt || sendingRequest) { return;