From c6b97151c9228c6f5e392776af13622fb87d3a6a Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Thu, 30 Mar 2023 14:12:09 +0200 Subject: [PATCH] fix(ui): fix duplicate assist creation on /credentials call --- .../app/components/Session/LivePlayer.tsx | 45 ++++++++++--------- .../SessionListContainer.tsx | 2 - frontend/app/player/create.ts | 2 +- frontend/app/player/web/WebLivePlayer.ts | 2 +- .../app/player/web/assist/AssistManager.ts | 2 +- frontend/app/player/web/assist/Call.ts | 2 +- 6 files changed, 27 insertions(+), 28 deletions(-) diff --git a/frontend/app/components/Session/LivePlayer.tsx b/frontend/app/components/Session/LivePlayer.tsx index cace337e8..f558c3103 100644 --- a/frontend/app/components/Session/LivePlayer.tsx +++ b/frontend/app/components/Session/LivePlayer.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { useEffect, useState } from 'react'; import { connect } from 'react-redux'; -import withRequest from 'HOCs/withRequest'; import withPermissions from 'HOCs/withPermissions'; import { PlayerContext, defaultContextValue, ILivePlayerContext } from './playerContext'; import { makeAutoObservable } from 'mobx'; @@ -11,6 +10,7 @@ import PlayerBlock from './Player/LivePlayer/LivePlayerBlock'; import styles from '../Session_/session.module.css'; import Session from 'App/mstore/types/session'; import withLocationHandlers from 'HOCs/withLocationHandlers'; +import APIClient from 'App/api_client'; interface Props { session: Session; @@ -28,14 +28,12 @@ interface Props { function LivePlayer({ session, loadingCredentials, - assistCredentials, - request, - isEnterprise, userEmail, userName, isMultiview, customSession, - query + query, + isEnterprise }: Props) { // @ts-ignore const [contextValue, setContextValue] = useState(defaultContextValue); @@ -52,13 +50,21 @@ function LivePlayer({ name: userName, }, }; - const [player, store] = createLiveWebPlayer(sessionWithAgentData, assistCredentials, (state) => - makeAutoObservable(state) - ); - setContextValue({ player, store }); - - return () => player.clean(); - }, [session.sessionId, assistCredentials]); + if (isEnterprise) { + new APIClient().get('/config/assist/credentials').then(r => r.json()) + .then(({ data }) => { + const [player, store] = createLiveWebPlayer(sessionWithAgentData, data, (state) => + makeAutoObservable(state) + ); + setContextValue({ player, store }); + }) + } else { + const [player, store] = createLiveWebPlayer(sessionWithAgentData, null, (state) => + makeAutoObservable(state) + ); + setContextValue({ player, store }); + } + }, [session.sessionId]); // LAYOUT (TODO: local layout state - useContext or something..) useEffect(() => { @@ -70,8 +76,10 @@ function LivePlayer({ setFullView(true); } - if (isEnterprise) { - request(); + return () => { + contextValue.player?.clean?.(); + // @ts-ignore default empty + setContextValue(defaultContextValue) } }, []); @@ -98,13 +106,7 @@ function LivePlayer({ ); } -export default withRequest({ - initialData: null, - endpoint: '/assist/credentials', - dataName: 'assistCredentials', - loadingName: 'loadingCredentials', -})( - withPermissions( +export default withPermissions( ['ASSIST_LIVE'], '', true @@ -121,4 +123,3 @@ export default withRequest({ } )(withLocationHandlers()(LivePlayer)) ) -); diff --git a/frontend/app/components/shared/SessionListContainer/SessionListContainer.tsx b/frontend/app/components/shared/SessionListContainer/SessionListContainer.tsx index 1f02679b1..bd340e4b0 100644 --- a/frontend/app/components/shared/SessionListContainer/SessionListContainer.tsx +++ b/frontend/app/components/shared/SessionListContainer/SessionListContainer.tsx @@ -12,9 +12,7 @@ function SessionListContainer({ clearCurrentSession, }: { activeTab: string; - fetchMembers: () => void; members: object[]; - clearCurrentSession: () => void; }) { React.useEffect(() => { clearCurrentSession() diff --git a/frontend/app/player/create.ts b/frontend/app/player/create.ts index 016b8eb52..2d46c5b0e 100644 --- a/frontend/app/player/create.ts +++ b/frontend/app/player/create.ts @@ -39,7 +39,7 @@ export function createClickMapPlayer(session: Record, wrapStore?: ( return [player, store] } -export function createLiveWebPlayer(session: Record, config: RTCIceServer[], wrapStore?: (s:IWebLivePlayerStore) => IWebLivePlayerStore): [IWebLivePlayer, IWebLivePlayerStore] { +export function createLiveWebPlayer(session: Record, config: RTCIceServer[] | null, wrapStore?: (s:IWebLivePlayerStore) => IWebLivePlayerStore): [IWebLivePlayer, IWebLivePlayerStore] { let store: WebLivePlayerStore = new SimpleStore({ ...WebLivePlayer.INITIAL_STATE, }) diff --git a/frontend/app/player/web/WebLivePlayer.ts b/frontend/app/player/web/WebLivePlayer.ts index 7ed1e3400..4d02fa1f8 100644 --- a/frontend/app/player/web/WebLivePlayer.ts +++ b/frontend/app/player/web/WebLivePlayer.ts @@ -23,7 +23,7 @@ export default class WebLivePlayer extends WebPlayer { private lastMessageInFileTime = 0 private lastMessageInFileIndex = 0 - constructor(wpState: Store, private session:any, config: RTCIceServer[]) { + constructor(wpState: Store, private session:any, config: RTCIceServer[] | null) { super(wpState, session, true) this.assistManager = new AssistManager( diff --git a/frontend/app/player/web/assist/AssistManager.ts b/frontend/app/player/web/assist/AssistManager.ts index e75db1388..413de0857 100644 --- a/frontend/app/player/web/assist/AssistManager.ts +++ b/frontend/app/player/web/assist/AssistManager.ts @@ -66,7 +66,7 @@ export default class AssistManager { private setMessagesLoading: (flag: boolean) => void, private handleMessage: (m: Message, index: number) => void, private screen: Screen, - private config: RTCIceServer[], + private config: RTCIceServer[] | null, private store: Store, ) {} diff --git a/frontend/app/player/web/assist/Call.ts b/frontend/app/player/web/assist/Call.ts index 2119b9935..2cb136243 100644 --- a/frontend/app/player/web/assist/Call.ts +++ b/frontend/app/player/web/assist/Call.ts @@ -33,7 +33,7 @@ export default class Call { constructor( private store: Store, private socket: Socket, - private config: RTCIceServer[], + private config: RTCIceServer[] | null, private peerID: string, ) { socket.on('call_end', this.onRemoteCallEnd)