From 92a897b9c0090eb597b6fbcefa0887fb6f8995c3 Mon Sep 17 00:00:00 2001 From: sylenien Date: Thu, 1 Dec 2022 13:04:16 +0100 Subject: [PATCH] change(ui): add state handlers --- .../app/components/Session/LivePlayer.tsx | 4 +- .../app/components/Session/LiveSession.js | 104 +++-- .../AssistSessionsModal.tsx | 6 +- .../AssistSessionsTabs/AssistSessionsTabs.tsx | 3 +- .../shared/SessionItem/SessionItem.tsx | 401 ++++++++++-------- .../shared/SessionItem/sessionItem.module.css | 1 - frontend/app/mstore/assistTabStore.ts | 4 + 7 files changed, 294 insertions(+), 229 deletions(-) diff --git a/frontend/app/components/Session/LivePlayer.tsx b/frontend/app/components/Session/LivePlayer.tsx index 05305a4d4..c6c0ead8a 100644 --- a/frontend/app/components/Session/LivePlayer.tsx +++ b/frontend/app/components/Session/LivePlayer.tsx @@ -7,7 +7,6 @@ import withPermissions from 'HOCs/withPermissions'; import { PlayerContext, defaultContextValue } from './playerContext'; import { makeAutoObservable } from 'mobx'; import { createLiveWebPlayer } from 'Player' - import PlayerBlockHeader from '../Session_/PlayerBlockHeader'; import PlayerBlock from '../Session_/PlayerBlock'; import styles from '../Session_/session.module.css'; @@ -42,7 +41,7 @@ function LivePlayer({ const [fullView, setFullView] = useState(false); useEffect(() => { - if (loadingCredentials || !session.sessionId) { return } + if (loadingCredentials || !session.sessionId) return; const sessionWithAgentData = { // @ts-ignore burn immutable ...session.toJS(), @@ -89,6 +88,7 @@ function LivePlayer({ {!fullView && ( { + fetchSlackList(); + }, []); - useEffect(() => { - fetchSlackList() - }, []); + useEffect(() => { + if (sessionId != null) { + fetchSession(sessionId, true); + } else { + console.error('No sessionID in route.'); + } + return () => { + if (!session.exists()) return; + }; + }, [sessionId, hasSessionsPath]); - useEffect(() => { - if (sessionId != null) { - fetchSession(sessionId, true) - } else { - console.error("No sessionID in route.") - } - return () => { - if (!session.exists()) return; - } - },[ sessionId, hasSessionsPath ]); - - return ( - - - - ); + return ( + + + + ); } -export default withPermissions(['ASSIST_LIVE'], '', true)(connect((state, props) => { - const { match: { params: { sessionId } } } = props; - const isAssist = state.getIn(['sessions', 'activeTab']).type === 'live'; - const hasSessiosPath = state.getIn([ 'sessions', 'sessionPath' ]).pathname.includes('/sessions'); - return { - sessionId, - loading: state.getIn([ 'sessions', 'loading' ]), - // hasErrors: !!state.getIn([ 'sessions', 'errors' ]), - session: state.getIn([ 'sessions', 'current' ]), - hasSessionsPath: hasSessiosPath && !isAssist, - }; -}, { - fetchSession, - fetchSlackList, -})(LiveSession)); \ No newline at end of file +export default withPermissions( + ['ASSIST_LIVE'], + '', + true +)( + connect( + (state, props) => { + const { + match: { + params: { sessionId }, + }, + } = props; + const isAssist = state.getIn(['sessions', 'activeTab']).type === 'live'; + const hasSessiosPath = state + .getIn(['sessions', 'sessionPath']) + .pathname.includes('/sessions'); + return { + sessionId, + loading: state.getIn(['sessions', 'loading']), + session: state.getIn(['sessions', 'current']), + hasSessionsPath: hasSessiosPath && !isAssist, + }; + }, + { + fetchSession, + fetchSlackList, + } + )(LiveSession) +); diff --git a/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx b/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx index 3acc14c07..9919f85f5 100644 --- a/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx +++ b/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx @@ -87,7 +87,7 @@ function AssistSessionsModal(props: Props) { <> {list.map((session) => ( -
+
onSessionAdd(session)} />
@@ -134,4 +136,4 @@ export default connect( addFilterByKeyAndValue, updateCurrentPage, } -)(AssistSessionsModal); +)(observer(AssistSessionsModal)); diff --git a/frontend/app/components/Session_/Player/Controls/AssistSessionsTabs/AssistSessionsTabs.tsx b/frontend/app/components/Session_/Player/Controls/AssistSessionsTabs/AssistSessionsTabs.tsx index a828717a3..362c87596 100644 --- a/frontend/app/components/Session_/Player/Controls/AssistSessionsTabs/AssistSessionsTabs.tsx +++ b/frontend/app/components/Session_/Player/Controls/AssistSessionsTabs/AssistSessionsTabs.tsx @@ -50,6 +50,7 @@ function AssistTabs({ session }: { session: Session }) { if (assistTabStore.sessions.length === 0) { assistTabStore.addSession(session) assistTabStore.setActiveSession(session.sessionId) + console.log(assistTabStore.sessions, assistTabStore.activeSession, session.sessionId) } }, []) @@ -59,7 +60,7 @@ function AssistTabs({ session }: { session: Session }) { {assistTabStore.sessions.map(session => ( {assistTabStore.isActive(session.sessionId) - ? : } + ? : assistTabStore.setActiveSession(session.sessionId)} />} ) )} diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx index 0288461fa..a3a3d3610 100644 --- a/frontend/app/components/shared/SessionItem/SessionItem.tsx +++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx @@ -18,194 +18,243 @@ const ASSIST_LIVE_SESSION = liveSession(); const SESSIONS_ROUTE = sessionsRoute(); interface Props { - session: { - sessionId: string; - userBrowser: string; - userOs: string; - userId: string; - userAnonymousId: string; - userDisplayName: string; - userCountry: string; - startedAt: number; - duration: string; - eventsCount: number; - errorsCount: number; - pagesCount: number; - viewed: boolean; - favorite: boolean; - userDeviceType: string; - userUuid: string; - userNumericHash: number; - live: boolean; - metadata: Record; - userSessionsCount: number; - issueTypes: []; - active: boolean; - isCallActive?: boolean; - agentIds?: string[]; - }; - onUserClick?: (userId: string, userAnonymousId: string) => void; - hasUserFilter?: boolean; - disableUser?: boolean; - metaList?: Array; - // showActive?: boolean; - lastPlayedSessionId?: string; - live?: boolean; - onClick?: any; - compact?: boolean; + session: { + sessionId: string; + userBrowser: string; + userOs: string; + userId: string; + userAnonymousId: string; + userDisplayName: string; + userCountry: string; + startedAt: number; + duration: string; + eventsCount: number; + errorsCount: number; + pagesCount: number; + viewed: boolean; + favorite: boolean; + userDeviceType: string; + userUuid: string; + userNumericHash: number; + live: boolean; + metadata: Record; + userSessionsCount: number; + issueTypes: []; + active: boolean; + isCallActive?: boolean; + agentIds?: string[]; + }; + onUserClick?: (userId: string, userAnonymousId: string) => void; + hasUserFilter?: boolean; + disableUser?: boolean; + metaList?: Array; + // showActive?: boolean; + lastPlayedSessionId?: string; + live?: boolean; + onClick?: any; + compact?: boolean; + isDisabled?: boolean; + isAdd?: boolean; } function SessionItem(props: RouteComponentProps & Props) { - const { settingsStore } = useStore(); - const { timezone } = settingsStore.sessionSettings; + const { settingsStore } = useStore(); + const { timezone } = settingsStore.sessionSettings; - const { - session, - onUserClick = () => null, - hasUserFilter = false, - disableUser = false, - metaList = [], - lastPlayedSessionId, - onClick = null, - compact = false, - } = props; + const { + session, + onUserClick = () => null, + hasUserFilter = false, + disableUser = false, + metaList = [], + lastPlayedSessionId, + onClick = null, + compact = false, + } = props; - const { - sessionId, - userBrowser, - userOs, - userId, - userAnonymousId, - userDisplayName, - userCountry, - startedAt, - duration, - eventsCount, - viewed, - userDeviceType, - userNumericHash, - live, - metadata, - issueTypes, - active, - } = session; + const { + sessionId, + userBrowser, + userOs, + userId, + userAnonymousId, + userDisplayName, + userCountry, + startedAt, + duration, + eventsCount, + viewed, + userDeviceType, + userNumericHash, + live, + metadata, + issueTypes, + active, + } = session; - const location = props.location; - const queryParams = Object.fromEntries(new URLSearchParams(location.search)); + const location = props.location; + const queryParams = Object.fromEntries(new URLSearchParams(location.search)); - const formattedDuration = durationFormatted(duration); - const hasUserId = userId || userAnonymousId; - const isSessions = isRoute(SESSIONS_ROUTE, location.pathname); - const isAssist = isRoute(ASSIST_ROUTE, location.pathname) || isRoute(ASSIST_LIVE_SESSION, location.pathname); - const isLastPlayed = lastPlayedSessionId === sessionId; + const formattedDuration = durationFormatted(duration); + const hasUserId = userId || userAnonymousId; + const isSessions = isRoute(SESSIONS_ROUTE, location.pathname); + const isAssist = + isRoute(ASSIST_ROUTE, location.pathname) || isRoute(ASSIST_LIVE_SESSION, location.pathname); + const isLastPlayed = lastPlayedSessionId === sessionId; - const _metaList = Object.keys(metadata) - .filter((i) => metaList.includes(i)) - .map((key) => { - const value = metadata[key]; - return { label: key, value }; - }); + const _metaList = Object.keys(metadata) + .filter((i) => metaList.includes(i)) + .map((key) => { + const value = metadata[key]; + return { label: key, value }; + }); - return ( -
e.stopPropagation()}> -
-
- {!compact && ( -
-
- -
-
-
!disableUser && !hasUserFilter && hasUserId ? onUserClick(userId, userAnonymousId) : null} - > - -
-
-
- )} -
-
- - - -
-
- {!isAssist && ( - <> -
- {eventsCount} - {eventsCount === 0 || eventsCount > 1 ? 'Events' : 'Event'} -
- - - )} -
{live ? : formattedDuration}
-
-
-
-
- -
-
- - - - - - - - - - - -
-
- {isSessions && ( -
- -
- )} -
- -
-
- {live && session.isCallActive && session.agentIds.length > 0 ? ( -
- -
- ) : null} - {isSessions && ( -
- {isLastPlayed && ( - - )} -
- )} - -
+ return ( +
e.stopPropagation()} + > +
+
+ {!compact && ( +
+
+ +
+
+
+ !disableUser && !hasUserFilter && hasUserId + ? onUserClick(userId, userAnonymousId) + : null + } + > +
+
- {_metaList.length > 0 && } + )} +
+
+ + + +
+
+ {!isAssist && ( + <> +
+ {eventsCount} + {eventsCount === 0 || eventsCount > 1 ? 'Events' : 'Event'} +
+ + + )} +
{live ? : formattedDuration}
+
+
+
+
+ +
+
+ + + + + + + + + + + +
+
+ {isSessions && ( +
+ +
+ )}
- ); + +
+
+ {live && session.isCallActive && session.agentIds.length > 0 ? ( +
+ +
+ ) : null} + {isSessions && ( +
+ {isLastPlayed && ( + + )} +
+ )} + {props.isAdd ? ( + (props.isDisabled ? null : props.onClick())} + /> + ) : ( + + )} +
+
+
+ {_metaList.length > 0 && } +
+ ); } export default withRouter(observer(SessionItem)); diff --git a/frontend/app/components/shared/SessionItem/sessionItem.module.css b/frontend/app/components/shared/SessionItem/sessionItem.module.css index 34ed53ad9..a7503984a 100644 --- a/frontend/app/components/shared/SessionItem/sessionItem.module.css +++ b/frontend/app/components/shared/SessionItem/sessionItem.module.css @@ -81,7 +81,6 @@ display: flex; align-items: center; transition: all 0.2s; - cursor: pointer; &[data-viewed=true] { opacity: 1; } diff --git a/frontend/app/mstore/assistTabStore.ts b/frontend/app/mstore/assistTabStore.ts index e7ee84658..e5c931190 100644 --- a/frontend/app/mstore/assistTabStore.ts +++ b/frontend/app/mstore/assistTabStore.ts @@ -15,6 +15,10 @@ export default class AssistTabStore { return this.activeSession.sessionId === sessionId } + get activeSessionId() { + return this.activeSession?.sessionId || '' + } + setSessions(sessions: TabSessions) { this.sessions = sessions }