refactor(ui/player): remove more connectplayer

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);

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 = () => (
-//   <span className="flex items-center">
-//     {XHR}
-//     <QuestionMarkHint
-//       content={
-//         <>
-//           Use our{' '}
-//           <a
-//             className="color-teal underline"
-//             target="_blank"
-//             href="https://docs.openreplay.com/plugins/fetch"
-//           >
-//             Fetch plugin
-//           </a>
-//           {' to capture HTTP requests and responses, including status codes and bodies.'} <br />
-//           We also provide{' '}
-//           <a
-//             className="color-teal underline"
-//             target="_blank"
-//             href="https://docs.openreplay.com/plugins/graphql"
-//           >
-//             support for GraphQL
-//           </a>
-//           {' for easy debugging of your queries.'}
-//         </>
-//       }
-//       className="ml-1"
-//     />
-//   </span>
-// );
-
 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);

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) => <TextEllipsis text={p.name} />;
 
-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);

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 (
     <div className="flex justify-between items-center w-full mt-2">
-      {/* <IconButton
-        label="Copy URL at current time"
-        primaryText
-        icon="link-45deg"
-        onClick={copyHandler}
-      /> */}
       <Button variant="text-primary" onClick={copyHandler}>
         <>
           <Icon name="link-45deg" className="mr-2" color="teal" size="18" />
@@ -38,8 +31,4 @@ function SessionCopyLink({ content = '', time }: Props) {
   );
 }
 
-const SessionCopyLinkCompo = connectPlayer((state: any) => ({
-  time: state.time,
-}))(SessionCopyLink);
-
-export default React.memo(SessionCopyLinkCompo);
+export default observer(SessionCopyLink);