From 997d69c3890cb3fd3e93785d00ec03599beb552d Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Thu, 19 Sep 2024 10:38:07 +0200 Subject: [PATCH] move all critical components, drop site duck --- .../app/components/Session/LivePlayer.tsx | 10 +- .../LivePlayer/LivePlayerBlockHeader.tsx | 5 +- .../Player/MobilePlayer/MobileControls.tsx | 5 +- .../MobilePlayer/MobilePlayerHeader.tsx | 6 +- .../MobilePlayer/MobilePlayerSubheader.tsx | 4 +- .../Player/ReplayPlayer/PlayerBlockHeader.tsx | 5 +- .../Session/Player/TagWatch/SaveModal.tsx | 5 +- .../Session_/Multiview/Multiview.tsx | 6 +- .../AssistSessionsTabs/AssistSessionsTabs.tsx | 9 +- .../Session_/Player/Controls/Controls.tsx | 5 +- frontend/app/components/Session_/Subheader.js | 63 ++++--- .../NoSessionsMessage/NoSessionsMessage.js | 21 +-- .../shared/SessionItem/PlayLink/PlayLink.tsx | 10 +- .../shared/SessionSearch/SessionSearch.tsx | 6 +- .../SessionSettings/SessionSettings.tsx | 11 +- .../components/CaptureRate.tsx | 2 +- .../shared/SiteDropdown/SiteDropdown.js | 13 +- frontend/app/components/ui/Link/Link.js | 25 +-- frontend/app/duck/site.js | 164 ------------------ 19 files changed, 108 insertions(+), 267 deletions(-) delete mode 100644 frontend/app/duck/site.js diff --git a/frontend/app/components/Session/LivePlayer.tsx b/frontend/app/components/Session/LivePlayer.tsx index 516427d11..2e1eda943 100644 --- a/frontend/app/components/Session/LivePlayer.tsx +++ b/frontend/app/components/Session/LivePlayer.tsx @@ -14,6 +14,7 @@ import withLocationHandlers from 'HOCs/withLocationHandlers'; import APIClient from 'App/api_client'; import { useLocation } from 'react-router-dom'; import { toast } from 'react-toastify'; +import { useStore } from 'App/mstore'; interface Props { session: Session; @@ -26,7 +27,6 @@ interface Props { query?: Record any>; request: () => void; userId: number; - siteId: number; } let playerInst: ILivePlayerContext['player'] | undefined; @@ -40,7 +40,6 @@ function LivePlayer({ query, isEnterprise, userId, - siteId, }: Props) { // @ts-ignore const [contextValue, setContextValue] = useState(defaultContextValue); @@ -48,8 +47,10 @@ function LivePlayer({ const openedFromMultiview = query?.get('multi') === 'true'; const usedSession = isMultiview ? customSession! : session; const location = useLocation(); + const { projectsStore } = useStore(); useEffect(() => { + const projectId = projectsStore.getSiteId(); playerInst = undefined; if (!usedSession.sessionId || contextValue.player !== undefined) return; console.debug('creating live player for', usedSession.sessionId); @@ -69,7 +70,7 @@ function LivePlayer({ sessionWithAgentData, data, userId, - siteId, + projectId, (state) => makeAutoObservable(state), toast ); @@ -81,7 +82,7 @@ function LivePlayer({ sessionWithAgentData, null, userId, - siteId, + projectId, (state) => makeAutoObservable(state), toast ); @@ -140,7 +141,6 @@ function LivePlayer({ export default withPermissions(['ASSIST_LIVE', 'SERVICE_ASSIST_LIVE'], '', true, false)( connect((state: any) => { return { - siteId: state.getIn([ 'site', 'siteId' ]), session: state.getIn(['sessions', 'current']), showAssist: state.getIn(['sessions', 'showChatWindow']), isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee', diff --git a/frontend/app/components/Session/Player/LivePlayer/LivePlayerBlockHeader.tsx b/frontend/app/components/Session/Player/LivePlayer/LivePlayerBlockHeader.tsx index df37e1684..96b7751b4 100644 --- a/frontend/app/components/Session/Player/LivePlayer/LivePlayerBlockHeader.tsx +++ b/frontend/app/components/Session/Player/LivePlayer/LivePlayerBlockHeader.tsx @@ -22,7 +22,8 @@ const ASSIST_ROUTE = assistRoute(); function LivePlayerBlockHeader(props: any) { const [hideBack, setHideBack] = React.useState(false); const { store } = React.useContext(PlayerContext); - const { assistMultiviewStore } = useStore(); + const { assistMultiviewStore, projectsStore } = useStore(); + const siteId = projectsStore.siteId; const history = useHistory(); const { width, height } = store.get(); @@ -30,7 +31,6 @@ function LivePlayerBlockHeader(props: any) { session, metaList, closedLive = false, - siteId, isMultiview, } = props; @@ -109,7 +109,6 @@ const PlayerHeaderCont = connect( isAssist, session, sessionPath: state.getIn(['sessions', 'sessionPath']), - siteId: state.getIn(['site', 'siteId']), metaList: state.getIn(['customFields', 'list']).map((i: any) => i.key), closedLive: !!state.getIn(['sessions', 'errors']) || (isAssist && !session.live), }; diff --git a/frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx b/frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx index 5bc1ab3b5..386532833 100644 --- a/frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx +++ b/frontend/app/components/Session/Player/MobilePlayer/MobileControls.tsx @@ -46,7 +46,7 @@ function Controls(props: any) { const { player, store } = React.useContext(MobilePlayerContext); const history = useHistory(); const { playing, completed, skip, speed, messagesLoading } = store.get(); - const { uiPlayerStore } = useStore(); + const { uiPlayerStore, projectsStore } = useStore(); const fullscreen = uiPlayerStore.fullscreen; const bottomBlock = uiPlayerStore.bottomBlock; const toggleBottomBlock = uiPlayerStore.toggleBottomBlock @@ -54,12 +54,12 @@ function Controls(props: any) { const fullscreenOff = uiPlayerStore.fullscreenOff; const changeSkipInterval = uiPlayerStore.changeSkipInterval; const skipInterval = uiPlayerStore.skipInterval; + const siteId = projectsStore.siteId; const { session, setActiveTab, previousSessionId, nextSessionId, - siteId, disableDevtools, } = props; @@ -289,7 +289,6 @@ export default connect( totalAssistSessions: state.getIn(['liveSearch', 'total']), previousSessionId: state.getIn(['sessions', 'previousId']), nextSessionId: state.getIn(['sessions', 'nextId']), - siteId: state.getIn(['site', 'siteId']), }; }, { diff --git a/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerHeader.tsx b/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerHeader.tsx index 183c419f1..5a4a97773 100644 --- a/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerHeader.tsx +++ b/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerHeader.tsx @@ -23,13 +23,12 @@ function PlayerBlockHeader(props: any) { const playerState = store?.get?.() || { width: 0, height: 0, showEvents: false }; const { width = 0, height = 0, showEvents = false } = playerState; - const { customFieldStore } = useStore(); - + const { customFieldStore, projectsStore } = useStore(); + const siteId = projectsStore.siteId!; const { session, fullscreen, metaList, - siteId, setActiveTab, activeTab, history, @@ -108,7 +107,6 @@ const PlayerHeaderCont = connect( sessionPath: state.getIn(['sessions', 'sessionPath']), local: state.getIn(['sessions', 'timezone']), funnelRef: state.getIn(['funnels', 'navRef']), - siteId: state.getIn(['site', 'siteId']), metaList: state.getIn(['customFields', 'list']).map((i: any) => i.key), }; }, diff --git a/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerSubheader.tsx b/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerSubheader.tsx index c07e903fd..df068843f 100644 --- a/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerSubheader.tsx +++ b/frontend/app/components/Session/Player/MobilePlayer/MobilePlayerSubheader.tsx @@ -3,7 +3,6 @@ import QueueControls from 'Components/Session_/QueueControls'; import Bookmark from 'Shared/Bookmark'; import Issues from 'Components/Session_/Issues/Issues'; import NotePopup from 'Components/Session_/components/NotePopup'; -import { observer } from 'mobx-react-lite'; import { connect } from 'react-redux'; import { Tag } from 'antd' import { ShareAltOutlined } from '@ant-design/icons'; @@ -56,8 +55,7 @@ function SubHeader(props: any) { } export default connect((state: any) => ({ - siteId: state.getIn(['site', 'siteId']), modules: state.getIn(['user', 'account', 'modules']) || [], integrations: state.getIn(['issues', 'list']), isIOS: state.getIn(['sessions', 'current']).platform === 'ios', -}))(observer(SubHeader)); +}))(SubHeader); diff --git a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx b/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx index c4ffefc89..7a8b05629 100644 --- a/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx +++ b/frontend/app/components/Session/Player/ReplayPlayer/PlayerBlockHeader.tsx @@ -24,7 +24,8 @@ const SESSIONS_ROUTE = sessionsRoute(); function PlayerBlockHeader(props: any) { const [hideBack, setHideBack] = React.useState(false); const { player, store } = React.useContext(PlayerContext); - const { uxtestingStore, customFieldStore } = useStore() + const { uxtestingStore, customFieldStore, projectsStore } = useStore() + const siteId = projectsStore.siteId!; const playerState = store?.get?.() || { width: 0, height: 0, showEvents: false } const { width = 0, height = 0, showEvents = false } = playerState @@ -33,7 +34,6 @@ function PlayerBlockHeader(props: any) { fullscreen, metaList, closedLive = false, - siteId, setActiveTab, activeTab, history, @@ -137,7 +137,6 @@ const PlayerHeaderCont = connect( sessionPath: state.getIn(['sessions', 'sessionPath']), local: state.getIn(['sessions', 'timezone']), funnelRef: state.getIn(['funnels', 'navRef']), - siteId: state.getIn(['site', 'siteId']), metaList: state.getIn(['customFields', 'list']).map((i: any) => i.key), }; }, diff --git a/frontend/app/components/Session/Player/TagWatch/SaveModal.tsx b/frontend/app/components/Session/Player/TagWatch/SaveModal.tsx index 3fa29e4ef..d612d94d7 100644 --- a/frontend/app/components/Session/Player/TagWatch/SaveModal.tsx +++ b/frontend/app/components/Session/Player/TagWatch/SaveModal.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Button, Checkbox, Input } from 'antd'; import { useHistory } from 'react-router-dom'; import { withSiteId, sessions } from 'App/routes'; -import store from 'App/store'; +import { useStore } from 'App/mstore'; interface Props { onSave: (name: string, ignoreClRage: boolean, ignoreDeadCl: boolean) => Promise; @@ -11,6 +11,7 @@ interface Props { function SaveModal({ onSave, hideModal }: Props) { const history = useHistory(); + const { projectsStore } = useStore(); const [name, setName] = React.useState(''); const [ignoreClRage, setIgnoreClRage] = React.useState(false); const [ignoreDeadCl, setIgnoreDeadCl] = React.useState(false); @@ -22,7 +23,7 @@ function SaveModal({ onSave, hideModal }: Props) { const saveAndOpen = () => { onSave(name, ignoreClRage, ignoreDeadCl).then((tagId) => { hideModal(); - const siteId = store.getState().getIn(['site', 'siteId']); + const siteId = projectsStore.getSiteId() as unknown as string; history.push(withSiteId(sessions({ tnw: `is|${tagId}`, range: 'LAST_24_HOURS' }), siteId)); }); }; diff --git a/frontend/app/components/Session_/Multiview/Multiview.tsx b/frontend/app/components/Session_/Multiview/Multiview.tsx index de5ab0865..583e0d421 100644 --- a/frontend/app/components/Session_/Multiview/Multiview.tsx +++ b/frontend/app/components/Session_/Multiview/Multiview.tsx @@ -15,20 +15,19 @@ import SessionTileFooter from './SessionTileFooter' function Multiview({ total, fetchSessions, - siteId, assistCredentials, customSetSessions, }: { total: number; customSetSessions: (data: any) => void; fetchSessions: (filter: any) => void; - siteId: string; assistCredentials: any; list: Record[]; }) { const { showModal, hideModal } = useModal(); - const { assistMultiviewStore } = useStore(); + const { assistMultiviewStore, projectsStore } = useStore(); + const siteId = projectsStore.siteId!; const history = useHistory(); // @ts-ignore const { sessionsquery } = useParams(); @@ -128,7 +127,6 @@ function Multiview({ export default connect( (state: any) => ({ total: state.getIn(['liveSearch', 'total']), - siteId: state.getIn(['site', 'siteId']), }), { fetchSessions, diff --git a/frontend/app/components/Session_/Player/Controls/AssistSessionsTabs/AssistSessionsTabs.tsx b/frontend/app/components/Session_/Player/Controls/AssistSessionsTabs/AssistSessionsTabs.tsx index 07311665a..d6e249998 100644 --- a/frontend/app/components/Session_/Player/Controls/AssistSessionsTabs/AssistSessionsTabs.tsx +++ b/frontend/app/components/Session_/Player/Controls/AssistSessionsTabs/AssistSessionsTabs.tsx @@ -42,9 +42,10 @@ const CurrentTab = React.memo(() => ( )); -function AssistTabs({ session, siteId }: { session: Record; siteId: string }) { +function AssistTabs({ session }: { session: Record }) { const history = useHistory(); - const { assistMultiviewStore } = useStore(); + const { assistMultiviewStore, projectsStore } = useStore(); + const siteId = projectsStore.siteId!; const placeholder = new Array(4 - assistMultiviewStore.sessions.length).fill(0); @@ -83,6 +84,4 @@ function AssistTabs({ session, siteId }: { session: Record; siteId: ); } -export default connect((state: any) => ({ siteId: state.getIn(['site', 'siteId']) }))( - observer(AssistTabs) -); +export default observer(AssistTabs) diff --git a/frontend/app/components/Session_/Player/Controls/Controls.tsx b/frontend/app/components/Session_/Player/Controls/Controls.tsx index b8bf33365..32de45b0a 100644 --- a/frontend/app/components/Session_/Player/Controls/Controls.tsx +++ b/frontend/app/components/Session_/Player/Controls/Controls.tsx @@ -70,7 +70,7 @@ function getStorageName(type: any) { function Controls(props: any) { const { player, store } = React.useContext(PlayerContext); - const { uxtestingStore, uiPlayerStore } = useStore(); + const { uxtestingStore, uiPlayerStore, projectsStore } = useStore(); const fullscreen = uiPlayerStore.fullscreen; const bottomBlock = uiPlayerStore.bottomBlock; const toggleBottomBlock = uiPlayerStore.toggleBottomBlock; @@ -80,6 +80,7 @@ function Controls(props: any) { const skipInterval = uiPlayerStore.skipInterval; const showStorageRedux = !uiPlayerStore.hiddenHints.storage; const history = useHistory(); + const siteId = projectsStore.siteId; const { playing, completed, @@ -95,7 +96,6 @@ function Controls(props: any) { session, previousSessionId, nextSessionId, - siteId, setActiveTab, } = props; @@ -440,7 +440,6 @@ export default connect( totalAssistSessions: state.getIn(['liveSearch', 'total']), previousSessionId: state.getIn(['sessions', 'previousId']), nextSessionId: state.getIn(['sessions', 'nextId']), - siteId: state.getIn(['site', 'siteId']), }; }, { diff --git a/frontend/app/components/Session_/Subheader.js b/frontend/app/components/Session_/Subheader.js index 970963140..65164ee94 100644 --- a/frontend/app/components/Session_/Subheader.js +++ b/frontend/app/components/Session_/Subheader.js @@ -1,34 +1,40 @@ +import { ShareAltOutlined } from '@ant-design/icons'; +import { Button as AntButton, Popover, Switch, Tooltip } from 'antd'; +import cn from 'classnames'; +import { Link2 } from 'lucide-react'; +import { observer } from 'mobx-react-lite'; import React, { useMemo } from 'react'; +import { connect } from 'react-redux'; + +import { PlayerContext } from 'App/components/Session/playerContext'; +import { IFRAME } from 'App/constants/storageKeys'; import { useStore } from 'App/mstore'; +import { checkParam, truncateStringToFit } from 'App/utils'; +import SessionTabs from 'Components/Session/Player/SharedComponents/SessionTabs'; import KeyboardHelp from 'Components/Session_/Player/Controls/components/KeyboardHelp'; import { Icon } from 'UI'; -import {Link2} from 'lucide-react'; -import QueueControls from './QueueControls'; + import Bookmark from 'Shared/Bookmark'; + import SharePopup from '../shared/SharePopup/SharePopup'; import Issues from './Issues/Issues'; +import QueueControls from './QueueControls'; import NotePopup from './components/NotePopup'; -import { PlayerContext } from 'App/components/Session/playerContext'; -import { observer } from 'mobx-react-lite'; -import { connect } from 'react-redux'; -import SessionTabs from 'Components/Session/Player/SharedComponents/SessionTabs'; -import { IFRAME } from 'App/constants/storageKeys'; -import cn from 'classnames'; -import { Switch, Button as AntButton, Popover, Tooltip } from 'antd'; -import { ShareAltOutlined } from '@ant-design/icons'; -import { checkParam, truncateStringToFit } from 'App/utils'; const localhostWarn = (project) => project + '_localhost_warn'; const disableDevtools = 'or_devtools_uxt_toggle'; function SubHeader(props) { - const localhostWarnKey = localhostWarn(props.siteId); - const defaultLocalhostWarn = localStorage.getItem(localhostWarnKey) !== '1'; + const { uxtestingStore, projectsStore } = useStore(); + const defaultLocalhostWarn = React.useMemo(() => { + const siteId = projectsStore.siteId; + const localhostWarnKey = localhostWarn(siteId); + return localStorage.getItem(localhostWarnKey) !== '1'; + }, [projectsStore.siteId]); const [showWarningModal, setWarning] = React.useState(defaultLocalhostWarn); const { store } = React.useContext(PlayerContext); const { location: currentLocation = 'loading...' } = store.get(); const hasIframe = localStorage.getItem(IFRAME) === 'true'; - const { uxtestingStore } = useStore(); const [hideTools, setHideTools] = React.useState(false); React.useEffect(() => { const hideDevtools = checkParam('hideTools'); @@ -46,10 +52,15 @@ function SubHeader(props) { return integrations.some((i) => i.token); }, [props.integrations]); - const locationTruncated = truncateStringToFit(currentLocation, window.innerWidth - 200); + const locationTruncated = truncateStringToFit( + currentLocation, + window.innerWidth - 200 + ); const showWarning = - currentLocation && /(localhost)|(127.0.0.1)|(0.0.0.0)/.test(currentLocation) && showWarningModal; + currentLocation && + /(localhost)|(127.0.0.1)|(0.0.0.0)/.test(currentLocation) && + showWarningModal; const closeWarning = () => { localStorage.setItem(localhostWarnKey, '1'); setWarning(false); @@ -65,7 +76,11 @@ function SubHeader(props) {
{showWarning ? ( @@ -77,7 +92,7 @@ function SubHeader(props) { left: '50%', bottom: '-24px', transform: 'translate(-50%, 0)', - fontWeight: 500 + fontWeight: 500, }} > Some assets may load incorrectly on localhost. @@ -114,7 +129,10 @@ function SubHeader(props) { trigger={
- + @@ -141,8 +159,8 @@ function SubHeader(props) { {locationTruncated && (
- - + + {locationTruncated} @@ -155,7 +173,6 @@ function SubHeader(props) { } export default connect((state) => ({ - siteId: state.getIn(['site', 'siteId']), integrations: state.getIn(['issues', 'list']), - modules: state.getIn(['user', 'account', 'modules']) || [] + modules: state.getIn(['user', 'account', 'modules']) || [], }))(observer(SubHeader)); diff --git a/frontend/app/components/shared/NoSessionsMessage/NoSessionsMessage.js b/frontend/app/components/shared/NoSessionsMessage/NoSessionsMessage.js index 1a8e271be..cd8b36203 100644 --- a/frontend/app/components/shared/NoSessionsMessage/NoSessionsMessage.js +++ b/frontend/app/components/shared/NoSessionsMessage/NoSessionsMessage.js @@ -1,23 +1,19 @@ import React from 'react'; import { Alert, Space, Button } from 'antd'; -import { connect } from 'react-redux'; +import { observer } from 'mobx-react-lite' +import { useStore } from "App/mstore"; import { onboarding as onboardingRoute } from 'App/routes'; import { withRouter } from 'react-router-dom'; import * as routes from '../../../routes'; -import { indigo } from 'tailwindcss/colors'; import { SquareArrowOutUpRight } from 'lucide-react'; import { useHistory } from 'react-router'; - const withSiteId = routes.withSiteId; -const indigoWithOpacity = `rgba(${parseInt(indigo[500].slice(1, 3), 16)}, ${parseInt(indigo[500].slice(3, 5), 16)}, ${parseInt(indigo[500].slice(5, 7), 16)}, 0.1)`; // 0.5 is the opacity level - -const NoSessionsMessage = (props) => { - const { - sites, - siteId - } = props; +const NoSessionsMessage = () => { + const { projectsStore } = useStore(); + const sites = projectsStore.list; + const siteId = projectsStore.siteId; const history = useHistory(); const activeSite = sites.find((s) => s.id === siteId); const showNoSessions = !!activeSite && !activeSite.recorded; @@ -60,7 +56,4 @@ const NoSessionsMessage = (props) => { ); }; -export default connect((state) => ({ - site: state.getIn(['site', 'siteId']), - sites: state.getIn(['site', 'list']) -}))(withRouter(NoSessionsMessage)); +export default withRouter(observer(NoSessionsMessage)); diff --git a/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx b/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx index 8c0543c5f..deab8d8a4 100644 --- a/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx +++ b/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx @@ -1,5 +1,4 @@ import React, { useEffect, useState } from 'react'; -import { connect } from 'react-redux'; import { useHistory } from 'react-router'; import { @@ -8,6 +7,7 @@ import { withSiteId, } from 'App/routes'; import { Icon, Link } from 'UI'; +import { useStore } from 'App/mstore'; const PLAY_ICON_NAMES = { notPlayed: 'play-fill', @@ -30,6 +30,7 @@ interface Props { siteId?: string; } function PlayLink(props: Props) { + const { projectsStore } = useStore(); const { isAssist, viewed, sessionId, onClick = null, queryParams } = props; const history = useHistory(); const defaultIconName = getDefaultIconName(viewed); @@ -47,9 +48,10 @@ function PlayLink(props: Props) { : sessionRoute(sessionId); const handleBeforeOpen = (e: any) => { + const projectId = props.siteId ?? projectsStore.getSiteId().siteId!; const replayLink = withSiteId( link + (props.query ? props.query : ''), - props.siteId + projectId ); if (props.beforeOpen) { // check for ctrl or shift @@ -86,6 +88,4 @@ function PlayLink(props: Props) { ); } -export default connect((state: any, props: Props) => ({ - siteId: props.siteId || state.getIn(['site', 'siteId']), -}))(PlayLink); +export default PlayLink diff --git a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx index f4038f396..19eda3727 100644 --- a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx +++ b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx @@ -28,8 +28,9 @@ interface Props { } function SessionSearch(props: Props) { - const { tagWatchStore, aiFiltersStore } = useStore(); - const { appliedFilter, saveRequestPayloads = false, metaLoading = false } = props; + const { tagWatchStore, aiFiltersStore, projectsStore } = useStore(); + const saveRequestPayloads = projectsStore.instance?.saveRequestPayloads ?? false + const { appliedFilter, metaLoading = false } = props; const hasEvents = appliedFilter.filters.filter((i: any) => i.isEvent).size > 0; const hasFilters = appliedFilter.filters.filter((i: any) => !i.isEvent).size > 0; @@ -154,7 +155,6 @@ function SessionSearch(props: Props) { export default connect( (state: any) => ({ - saveRequestPayloads: state.getIn(['site', 'instance', 'saveRequestPayloads']), appliedFilter: state.getIn(['search', 'instance']), metaLoading: state.getIn(['customFields', 'fetchRequestActive', 'loading']), }), diff --git a/frontend/app/components/shared/SessionSettings/SessionSettings.tsx b/frontend/app/components/shared/SessionSettings/SessionSettings.tsx index 787ced443..c0298e9ce 100644 --- a/frontend/app/components/shared/SessionSettings/SessionSettings.tsx +++ b/frontend/app/components/shared/SessionSettings/SessionSettings.tsx @@ -3,9 +3,12 @@ import ListingVisibility from './components/ListingVisibility'; import DefaultPlaying from './components/DefaultPlaying'; import DefaultTimezone from './components/DefaultTimezone'; import CaptureRate from './components/CaptureRate'; -import { connect } from 'react-redux'; +import { observer } from 'mobx-react-lite'; +import { useStore } from 'App/mstore'; -function SessionSettings({ projectId }: { projectId: number }) { +function SessionSettings() { + const { projectsStore } = useStore(); + const projectId = projectsStore.siteId; return (
@@ -32,6 +35,4 @@ function SessionSettings({ projectId }: { projectId: number }) { ); } -export default connect((state: any) => ({ - projectId: state.getIn(['site', 'siteId']) -}))(SessionSettings); +export default observer(SessionSettings) diff --git a/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx b/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx index 215a2d26b..232733a91 100644 --- a/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx +++ b/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx @@ -11,7 +11,7 @@ import ConditionalRecordingSettings from 'Shared/SessionSettings/components/Cond type Props = { isAdmin: boolean; isEnterprise?: boolean; - projectId?: number; + projectId?: string; setShowCaptureRate: (show: boolean) => void; open: boolean; showCaptureRate: boolean; diff --git a/frontend/app/components/shared/SiteDropdown/SiteDropdown.js b/frontend/app/components/shared/SiteDropdown/SiteDropdown.js index 44ebebd57..0b3916c32 100644 --- a/frontend/app/components/shared/SiteDropdown/SiteDropdown.js +++ b/frontend/app/components/shared/SiteDropdown/SiteDropdown.js @@ -1,9 +1,12 @@ import React from 'react'; -import { connect } from 'react-redux'; +import { observer } from 'mobx-react-lite' +import { useStore } from 'App/mstore' import Select from 'Shared/Select'; -const SiteDropdown = ({ contextName = '', sites, onChange, value }) => { - const options = sites.map(site => ({ value: site.id, label: site.host })).toJS(); +const SiteDropdown = ({ contextName = '', onChange, value }) => { + const { projectsStore } = useStore(); + const sites = projectsStore.list; + const options = sites.map(site => ({ value: site.id, label: site.host })); return (