chore: refactoring component

Author: Hubert Koster

src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/JsonData.module.scss

@@ -0,0 +1,7 @@
+@use 'src/styles/utility' as *;
+
+.reactJsonContainer {
+    display: flex;
+    flex-direction: column;
+    gap: rem(2);
+}

src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/JsonData/index.tsx

@@ -0,0 +1,45 @@
+import React, { useCallback } from 'react';
+import styles from './JsonData.module.scss';
+import {
+  TSocketResponseData,
+  TSocketEndpointNames,
+  TSocketSubscribableEndpointNames,
+} from '@site/src/configs/websocket/types';
+
+const ReactJson = React.lazy(() => import('react-json-view'));
+
+type TJsonData<T extends TSocketEndpointNames> = {
+  full_response: TSocketResponseData<T>;
+  error: unknown;
+  name: string;
+};
+
+const JsonData = <T extends TSocketEndpointNames | TSocketSubscribableEndpointNames>({
+  full_response,
+  name,
+  error,
+}: TJsonData<T>) => {
+  const getResponse = useCallback((key: string) => full_response[key], [full_response]);
+  const key = getResponse('msg_type') ?? name;
+  const echo_req_json = {
+    echo_req: getResponse('echo_req'),
+    msg_type: getResponse('msg_type'),
+    req_id: getResponse('req_id'),
+  };
+  const main_object_json = { [key]: getResponse(key) };
+
+  return (
+    <React.Fragment>
+      {full_response !== null ? (
+        <div className={styles.reactJsonContainer}>
+          <ReactJson src={echo_req_json} theme='tube' />
+          <ReactJson src={main_object_json} theme='tube' />
+        </div>
+      ) : (
+        <ReactJson src={{ error }} theme='tube' />
+      )}
+    </React.Fragment>
+  );
+};
+
+export default JsonData;

src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/index.tsx

@@ -4,11 +4,10 @@ import {
   TSocketResponseData,
   TSocketSubscribableEndpointNames,
 } from '@site/src/configs/websocket/types';
+import JsonData from './JsonData';
 import Loader from '@site/src/components/Loader';
 import styles from './PlaygroundSection.module.scss';
 
-const ReactJson = React.lazy(() => import('react-json-view'));
-
 type TPlaygroundSection<T extends TSocketEndpointNames> = {
   loader: boolean;
   response_state: boolean;
@@ -26,14 +25,6 @@ const PlaygroundSection = <T extends TSocketEndpointNames | TSocketSubscribableE
 }: TPlaygroundSection<T>) => {
   if (loader) return <Loader />;
 
-  const key = full_response['msg_type'] ?? name;
-  const echo_req_json = {
-    echo_req: full_response['echo_req'],
-    msg_type: full_response['msg_type'],
-    req_id: full_response['req_id'],
-  };
-  const main_object_json = { [key]: full_response[key] };
-
   return (
     <div
       id='playground-console'
@@ -44,14 +35,7 @@ const PlaygroundSection = <T extends TSocketEndpointNames | TSocketSubscribableE
         <React.Fragment>
           <Suspense fallback={<Loader />}>
             <div data-testid='dt_json_view'>
-              {full_response !== null ? (
-                <div className={styles.reactJsonContainer}>
-                  <ReactJson src={echo_req_json} theme='tube' />
-                  <ReactJson src={main_object_json} theme='tube' />
-                </div>
-              ) : (
-                <ReactJson src={{ error }} theme='tube' />
-              )}
+              <JsonData full_response={full_response} name={name} error={error} />
             </div>
           </Suspense>
         </React.Fragment>