refactor(ui/player): remove deprecated devtools files, refactor graphql tab

frontend/app/components/Session_/GraphQL/GQLDetails.js

@@ -6,8 +6,6 @@ export default class GQLDetails extends React.PureComponent {
   render() {
     const {
       gql: { variables, response, duration, operationKind, operationName },
-      nextClick,
-      prevClick,
       first = false,
       last = false,
     } = this.props;
@@ -57,15 +55,6 @@ export default class GQLDetails extends React.PureComponent {
             </div>
           </div>
         </div>
-
-        <div className="flex justify-between absolute bottom-0 left-0 right-0 p-3 border-t bg-white">
-          <Button variant="outline" onClick={prevClick} disabled={first}>
-            Prev
-          </Button>
-          <Button variant="outline" onClick={nextClick} disabled={last}>
-            Next
-          </Button>
-        </div>
       </div>
     );
   }

frontend/app/components/Session_/GraphQL/GraphQL.js

@@ -1,177 +0,0 @@
-import React from 'react';
-import { NoContent, Input, SlideModal, CloseButton, Button } from 'UI';
-import { getRE } from 'App/utils';
-import { connectPlayer, pause, jump } from 'Player';
-import BottomBlock from '../BottomBlock';
-import TimeTable from '../TimeTable';
-import GQLDetails from './GQLDetails';
-import { renderStart } from 'Components/Session_/Network/NetworkContent';
-
-function renderDefaultStatus() {
-  return '2xx-3xx';
-}
-
-export function renderName(r) {
-  return (
-    <div className="flex justify-between items-center grow-0 w-full">
-      <div>{r.operationName}</div>
-      <Button
-        variant="text"
-        className="right-0 text-xs uppercase p-2 color-gray-500 hover:color-teal"
-        onClick={(e) => {
-          e.stopPropagation();
-          jump(r.time);
-        }}
-      >
-        Jump
-      </Button>
-    </div>
-  );
-}
-
-@connectPlayer((state) => ({
-  list: state.graphqlList,
-  listNow: state.graphqlListNow,
-  time: state.time,
-  livePlay: state.livePlay,
-}))
-export default class GraphQL extends React.PureComponent {
-  state = {
-    filter: '',
-    filteredList: this.props.list,
-    filteredListNow: this.props.listNow,
-    current: null,
-    currentIndex: 0,
-    showFetchDetails: false,
-    hasNextError: false,
-    hasPreviousError: false,
-    lastActiveItem: 0,
-  };
-
-  static filterList(list, value) {
-    const filterRE = getRE(value, 'i');
-
-    return value
-      ? list.filter(
-          (r) =>
-            filterRE.test(r.operationKind) ||
-            filterRE.test(r.operationName) ||
-            filterRE.test(r.variables)
-        )
-      : list;
-  }
-
-  onFilterChange = ({ target: { value } }) => {
-    const { list } = this.props;
-    const filtered = GraphQL.filterList(list, value);
-    this.setState({ filter: value, filteredList: filtered, currentIndex: 0 });
-  };
-
-  setCurrent = (item, index) => {
-    if (!this.props.livePlay) {
-      pause();
-      jump(item.time);
-    }
-    this.setState({ current: item, currentIndex: index });
-  };
-
-  closeModal = () => this.setState({ current: null, showFetchDetails: false });
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    const { list } = nextProps;
-    if (nextProps.time) {
-      const filtered = GraphQL.filterList(list, prevState.filter);
-      let i = 0;
-      filtered.forEach((item, index) => {
-        if (item.time <= nextProps.time) {
-          i = index;
-        }
-      });
-
-      return {
-        lastActiveItem: i,
-      };
-    }
-  }
-
-  render() {
-    const { current, currentIndex, filteredList, lastActiveItem } = this.state;
-
-    return (
-      <React.Fragment>
-        <SlideModal
-          size="middle"
-          right
-          title={
-            <div className="flex justify-between">
-              <h1>GraphQL</h1>
-              <div className="flex items-center">
-                <CloseButton onClick={this.closeModal} size="18" className="ml-2" />
-              </div>
-            </div>
-          }
-          isDisplayed={current != null}
-          content={
-            current && (
-              <GQLDetails
-                gql={current}
-                nextClick={this.nextClickHander}
-                prevClick={this.prevClickHander}
-                first={currentIndex === 0}
-                last={currentIndex === filteredList.length - 1}
-              />
-            )
-          }
-          onClose={this.closeModal}
-        />
-        <BottomBlock>
-          <BottomBlock.Header>
-            <span className="font-semibold color-gray-medium mr-4">GraphQL</span>
-            <div className="flex items-center">
-              <Input
-                // className="input-small"
-                placeholder="Filter by name or type"
-                icon="search"
-                name="filter"
-                onChange={this.onFilterChange}
-              />
-            </div>
-          </BottomBlock.Header>
-          <BottomBlock.Content>
-            <NoContent size="small" title="No recordings found" show={filteredList.length === 0}>
-              <TimeTable
-                rows={filteredList}
-                onRowClick={this.setCurrent}
-                hoverable
-                activeIndex={lastActiveItem}
-              >
-                {[
-                  {
-                    label: 'Start',
-                    width: 90,
-                    render: renderStart,
-                  },
-                  {
-                    label: 'Status',
-                    width: 70,
-                    render: renderDefaultStatus,
-                  },
-                  {
-                    label: 'Type',
-                    dataKey: 'operationKind',
-                    width: 60,
-                  },
-                  {
-                    label: 'Name',
-                    width: 240,
-                    render: renderName,
-                  },
-                ]}
-              </TimeTable>
-            </NoContent>
-          </BottomBlock.Content>
-        </BottomBlock>
-      </React.Fragment>
-    );
-  }
-}

frontend/app/components/Session_/GraphQL/GraphQL.tsx

@@ -0,0 +1,174 @@
+import React, { useEffect } from 'react';
+import { NoContent, Input, SlideModal, CloseButton, Button } from 'UI';
+import { getRE } from 'App/utils';
+import BottomBlock from '../BottomBlock';
+import TimeTable from '../TimeTable';
+import GQLDetails from './GQLDetails';
+import { renderStart } from 'Components/Session_/Network/NetworkContent';
+import { PlayerContext } from 'App/components/Session/playerContext';
+import { observer } from 'mobx-react-lite';
+
+function renderDefaultStatus() {
+  return '2xx-3xx';
+}
+
+export function renderName(r: Record<string, any>) {
+  const { player } = React.useContext(PlayerContext);
+
+  return (
+    <div className="flex justify-between items-center grow-0 w-full">
+      <div>{r.operationName}</div>
+      <Button
+        variant="text"
+        className="right-0 text-xs uppercase p-2 color-gray-500 hover:color-teal"
+        onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+          e.stopPropagation();
+          player.jump(r.time);
+        }}
+      >
+        Jump
+      </Button>
+    </div>
+  );
+}
+
+function GraphQL() {
+  const { player, store } = React.useContext(PlayerContext);
+
+  const { graphqlList: list, graphqlListNow: listNow, time, livePlay } = store.get();
+
+  const defaultState = {
+    filter: '',
+    filteredList: list,
+    filteredListNow: listNow,
+    // @ts-ignore
+    current: null,
+    currentIndex: 0,
+    showFetchDetails: false,
+    hasNextError: false,
+    hasPreviousError: false,
+    lastActiveItem: 0,
+  };
+
+  const [state, setState] = React.useState(defaultState);
+
+  const filterList = (list: any, value: string) => {
+    const filterRE = getRE(value, 'i');
+
+    return value
+      ? list.filter(
+          (r: any) =>
+            filterRE.test(r.operationKind) ||
+            filterRE.test(r.operationName) ||
+            filterRE.test(r.variables)
+        )
+      : list;
+  };
+
+  const onFilterChange = ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => {
+    const filtered = filterList(list, value);
+    setState((prevState) => ({
+      ...prevState,
+      filter: value,
+      filteredList: filtered,
+      currentIndex: 0,
+    }));
+  };
+
+  const setCurrent = (item: any, index: number) => {
+    if (!livePlay) {
+      player.pause();
+      player.jump(item.time);
+    }
+    setState((prevState) => ({ ...prevState, current: item, currentIndex: index }));
+  };
+
+  const closeModal = () =>
+    setState((prevState) => ({ ...prevState, current: null, showFetchDetails: false }));
+
+  useEffect(() => {
+    const filtered = filterList(listNow, state.filter);
+    if (filtered.length !== lastActiveItem) {
+      setState((prevState) => ({ ...prevState, lastActiveItem: listNow.length }));
+    }
+  }, [time]);
+
+  const { current, currentIndex, filteredList, lastActiveItem } = state;
+
+  return (
+    <React.Fragment>
+      <SlideModal
+        size="middle"
+        right
+        title={
+          <div className="flex justify-between">
+            <h1>GraphQL</h1>
+            <div className="flex items-center">
+              <CloseButton onClick={closeModal} size="18" className="ml-2" />
+            </div>
+          </div>
+        }
+        isDisplayed={current != null}
+        content={
+          current && (
+            <GQLDetails
+              gql={current}
+              first={currentIndex === 0}
+              last={currentIndex === filteredList.length - 1}
+            />
+          )
+        }
+        onClose={closeModal}
+      />
+      <BottomBlock>
+        <BottomBlock.Header>
+          <span className="font-semibold color-gray-medium mr-4">GraphQL</span>
+          <div className="flex items-center">
+            <Input
+              // className="input-small"
+              placeholder="Filter by name or type"
+              icon="search"
+              name="filter"
+              onChange={onFilterChange}
+            />
+          </div>
+        </BottomBlock.Header>
+        <BottomBlock.Content>
+          <NoContent size="small" title="No recordings found" show={filteredList.length === 0}>
+            <TimeTable
+              rows={filteredList}
+              onRowClick={setCurrent}
+              hoverable
+              activeIndex={lastActiveItem}
+            >
+              {[
+                {
+                  label: 'Start',
+                  width: 90,
+                  render: renderStart,
+                },
+                {
+                  label: 'Status',
+                  width: 70,
+                  render: renderDefaultStatus,
+                },
+                {
+                  label: 'Type',
+                  dataKey: 'operationKind',
+                  width: 60,
+                },
+                {
+                  label: 'Name',
+                  width: 240,
+                  render: renderName,
+                },
+              ]}
+            </TimeTable>
+          </NoContent>
+        </BottomBlock.Content>
+      </BottomBlock>
+    </React.Fragment>
+  );
+}
+
+export default observer(GraphQL);

frontend/app/components/ui/Button/Button.tsx

@@ -5,7 +5,7 @@ import { CircularLoader, Icon, Tooltip } from 'UI';
 interface Props {
   className?: string;
   children?: React.ReactNode;
-  onClick?: () => void;
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
   disabled?: boolean;
   type?: 'button' | 'submit' | 'reset';
   variant?: 'default' | 'primary' | 'text' | 'text-primary' | 'text-red' | 'outline' | 'green';