From 270b150f8841d972ec6f509694d58922bf35a185 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 3 Mar 2023 14:24:07 +0100
Subject: [PATCH] fix(ui) - graphql crash

---
 .../components/Session_/GraphQL/GraphQL.tsx   | 39 +++++++++----------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/frontend/app/components/Session_/GraphQL/GraphQL.tsx b/frontend/app/components/Session_/GraphQL/GraphQL.tsx
index 6f89a5ec1..11f46d318 100644
--- a/frontend/app/components/Session_/GraphQL/GraphQL.tsx
+++ b/frontend/app/components/Session_/GraphQL/GraphQL.tsx
@@ -12,29 +12,8 @@ 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 = {
@@ -52,6 +31,24 @@ function GraphQL() {
 
   const [state, setState] = React.useState(defaultState);
 
+  function renderName(r: Record<string, any>) {
+    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>
+    );
+  }
+
   const filterList = (list: any, value: string) => {
     const filterRE = getRE(value, 'i');