From 62d6262857e416a5ef4b958a65157d0ae9e163ea Mon Sep 17 00:00:00 2001 From: sylenien Date: Wed, 23 Nov 2022 12:39:46 +0100 Subject: [PATCH] refactor(ui/player): remove more connectplayer --- .../DevTools/ConsolePanel/ConsolePanel.tsx | 42 +++++----- .../DevTools/NetworkPanel/NetworkPanel.tsx | 78 ++++--------------- .../DevTools/ProfilerPanel/ProfilerPanel.tsx | 20 ++--- .../SessionCopyLink/SessionCopyLink.tsx | 25 ++---- 4 files changed, 47 insertions(+), 118 deletions(-) diff --git a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx index 361084221..ce8d08059 100644 --- a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx +++ b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx @@ -1,13 +1,13 @@ import React, { useState } from 'react'; -import { connectPlayer, jump } from 'Player'; import Log from 'Types/session/log'; import BottomBlock from '../BottomBlock'; import { LEVEL } from 'Types/session/log'; import { Tabs, Input, Icon, NoContent } from 'UI'; -// import Autoscroll from 'App/components/Session_/Autoscroll'; import cn from 'classnames'; import ConsoleRow from '../ConsoleRow'; import { getRE } from 'App/utils'; +import { PlayerContext } from 'App/components/Session/playerContext'; +import { observer } from 'mobx-react-lite'; const ALL = 'ALL'; const INFO = 'INFO'; @@ -52,12 +52,22 @@ const getIconProps = (level: any) => { return null; }; -interface Props { - logs: any; - exceptions: any; -} -function ConsolePanel(props: Props) { - const { logs } = props; +function ConsolePanel() { + const { player, store } = React.useContext(PlayerContext) + + const jump = (t: number) => player.jump(t) + const { logList, exceptionsList } = store.get() + + const logExceptions = exceptionsList.map(({ time, errorId, name, projectId }: any) => + Log({ + level: LEVEL.ERROR, + value: name, + time, + errorId, + }) + ); + const logs = logList.concat(logExceptions) + const additionalHeight = 0; const [activeTab, setActiveTab] = useState(ALL); const [filter, setFilter] = useState(''); @@ -122,18 +132,4 @@ function ConsolePanel(props: Props) { ); } -export default connectPlayer((state: any) => { - const logs = state.logList; - const exceptions = state.exceptionsList; // TODO merge - const logExceptions = exceptions.map(({ time, errorId, name, projectId }: any) => - Log({ - level: LEVEL.ERROR, - value: name, - time, - errorId, - }) - ); - return { - logs: logs.concat(logExceptions), - }; -})(ConsolePanel); +export default observer(ConsolePanel); diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx index 6cb6b66bc..444d448fc 100644 --- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx +++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { QuestionMarkHint, Tooltip, Tabs, Input, NoContent, Icon, Toggler, Button } from 'UI'; +import { Tooltip, Tabs, Input, NoContent, Icon, Toggler } from 'UI'; import { getRE } from 'App/utils'; import Resource, { TYPES } from 'Types/session/resource'; import { formatBytes } from 'App/utils'; @@ -9,9 +9,10 @@ import TimeTable from '../TimeTable'; import BottomBlock from '../BottomBlock'; import InfoLine from '../BottomBlock/InfoLine'; import { Duration } from 'luxon'; -import { connectPlayer, jump } from 'Player'; import { useModal } from 'App/components/Modal'; import FetchDetailsModal from 'Shared/FetchDetailsModal'; +import { PlayerContext } from 'App/components/Session/playerContext'; +import { observer } from 'mobx-react-lite'; const ALL = 'ALL'; const XHR = 'xhr'; @@ -67,37 +68,6 @@ export function renderStart(r: any) { ); } -// const renderXHRText = () => ( -// -// {XHR} -// -// Use our{' '} -// -// Fetch plugin -// -// {' to capture HTTP requests and responses, including status codes and bodies.'}
-// We also provide{' '} -// -// support for GraphQL -// -// {' for easy debugging of your queries.'} -// -// } -// className="ml-1" -// /> -// -// ); - function renderSize(r: any) { if (r.responseBodySize) return formatBytes(r.responseBodySize); let triggerText; @@ -107,8 +77,6 @@ function renderSize(r: any) { content = 'Not captured'; } else { const headerSize = r.headerSize || 0; - const encodedSize = r.encodedBodySize || 0; - const transferred = headerSize + encodedSize; const showTransferred = r.headerSize != null; triggerText = formatBytes(r.decodedBodySize); @@ -152,35 +120,24 @@ export function renderDuration(r: any) { ); } -interface Props { - location: any; - resources: any; - fetchList: any; - domContentLoadedTime: any; - loadTime: any; - playing: boolean; - domBuildingTime: any; - currentIndex: any; - time: any; -} -function NetworkPanel(props: Props) { +function NetworkPanel() { + const { player, store } = React.useContext(PlayerContext) + const { - resources, - time, - currentIndex, + resourceList: resources, domContentLoadedTime, loadTime, - playing, domBuildingTime, - fetchList, - } = props; + fetchList: fetchUnmap, + } = store.get(); + const fetchList = fetchUnmap.map((i: any) => Resource({ ...i.toJS(), type: TYPES.XHR })) + const { showModal, hideModal } = useModal(); const [activeTab, setActiveTab] = useState(ALL); const [sortBy, setSortBy] = useState('time'); const [sortAscending, setSortAscending] = useState(true); const [filter, setFilter] = useState(''); const [showOnlyErrors, setShowOnlyErrors] = useState(false); - const [activeRequest, setActiveRequest] = useState(false ) const onTabClick = (activeTab: any) => setActiveTab(activeTab); const onFilterChange = ({ target: { value } }: any) => setFilter(value); const additionalHeight = 0; @@ -333,7 +290,7 @@ function NetworkPanel(props: Props) { renderPopup onRowClick={onRowClick} additionalHeight={additionalHeight} - onJump={jump} + onJump={(t: number) => player.jump(t)} sortBy={sortBy} sortAscending={sortAscending} // activeIndex={lastIndex} @@ -388,13 +345,4 @@ function NetworkPanel(props: Props) { ); } -export default connectPlayer((state: any) => ({ - location: state.location, - resources: state.resourceList, - fetchList: state.fetchList.map((i: any) => Resource({ ...i.toJS(), type: TYPES.XHR })), - domContentLoadedTime: state.domContentLoadedTime, - loadTime: state.loadTime, - // time: state.time, - playing: state.playing, - domBuildingTime: state.domBuildingTime, -}))(NetworkPanel); +export default observer(NetworkPanel); diff --git a/frontend/app/components/shared/DevTools/ProfilerPanel/ProfilerPanel.tsx b/frontend/app/components/shared/DevTools/ProfilerPanel/ProfilerPanel.tsx index f1fa16219..e95f5ada6 100644 --- a/frontend/app/components/shared/DevTools/ProfilerPanel/ProfilerPanel.tsx +++ b/frontend/app/components/shared/DevTools/ProfilerPanel/ProfilerPanel.tsx @@ -1,9 +1,9 @@ import React, { useState } from 'react'; -import { connectPlayer } from 'Player'; import { TextEllipsis, Input } from 'UI'; import { getRE } from 'App/utils'; +import { PlayerContext } from 'App/components/Session/playerContext'; +import { observer } from 'mobx-react-lite'; -// import ProfileInfo from './ProfileInfo'; import TimeTable from '../TimeTable'; import BottomBlock from '../BottomBlock'; import { useModal } from 'App/components/Modal'; @@ -12,11 +12,11 @@ import ProfilerModal from '../ProfilerModal'; const renderDuration = (p: any) => `${p.duration}ms`; const renderName = (p: any) => ; -interface Props { - profiles: any; -} -function ProfilerPanel(props: Props) { - const { profiles } = props; +function ProfilerPanel() { + const { store } = React.useContext(PlayerContext) + + const profiles = store.get().profilesList + const { showModal } = useModal(); const [filter, setFilter] = useState(''); const filtered: any = React.useMemo(() => { @@ -68,8 +68,4 @@ function ProfilerPanel(props: Props) { ); } -export default connectPlayer((state: any) => { - return { - profiles: state.profilesList, - }; -})(ProfilerPanel); +export default observer(ProfilerPanel); diff --git a/frontend/app/components/shared/SharePopup/SessionCopyLink/SessionCopyLink.tsx b/frontend/app/components/shared/SharePopup/SessionCopyLink/SessionCopyLink.tsx index fccbb6b81..6131e9c8f 100644 --- a/frontend/app/components/shared/SharePopup/SessionCopyLink/SessionCopyLink.tsx +++ b/frontend/app/components/shared/SharePopup/SessionCopyLink/SessionCopyLink.tsx @@ -1,15 +1,14 @@ import React from 'react'; import { Button, Icon } from 'UI'; import copy from 'copy-to-clipboard'; -import { connectPlayer } from 'Player'; +import { PlayerContext } from 'App/components/Session/playerContext'; +import { observer } from 'mobx-react-lite'; -interface Props { - content: string; - time: any; -} - -function SessionCopyLink({ content = '', time }: Props) { +function SessionCopyLink() { const [copied, setCopied] = React.useState(false); + const { store } = React.useContext(PlayerContext) + + const time = store.get().time const copyHandler = () => { setCopied(true); @@ -21,12 +20,6 @@ function SessionCopyLink({ content = '', time }: Props) { return (
- {/* */}