chore: refactoring code

Author: Hubert Koster

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

@@ -1,44 +1,29 @@
 import React from 'react';
 import styles from './JsonData.module.scss';
 import {
-  TSocketResponseData,
   TSocketEndpointNames,
   TSocketSubscribableEndpointNames,
+  TSocketResponse,
 } from '@site/src/configs/websocket/types';
 
 const ReactJson = React.lazy(() => import('react-json-view'));
 
 type TJsonData<T extends TSocketEndpointNames> = {
-  full_response: TSocketResponseData<T>;
+  full_response: TSocketResponse<T>;
   error: unknown;
   name: string;
 };
 
 const JsonData = <T extends TSocketEndpointNames | TSocketSubscribableEndpointNames>({
   full_response,
-  name,
   error,
 }: TJsonData<T>) => {
-  const getResponse = (key: string) => {
-    const response = full_response;
-    const selected_key = response[key] ?? name;
-    if (response !== null) return selected_key;
-  };
-
-  const key = getResponse('msg_type');
-  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' />
+          <ReactJson src={full_response.echo_req} theme='tube' />
+          <ReactJson src={full_response} theme='tube' />
         </div>
       ) : (
         <ReactJson src={{ error }} theme='tube' />

src/features/Apiexplorer/RequestResponseRenderer/PlaygroundSection/__tests__/PlaygroundSection.test.tsx

@@ -2,20 +2,10 @@ import React from 'react';
 import PlaygroundSection from '..';
 import { render, screen } from '@testing-library/react';
 
-const fake_full_response = {
-  msg_type: 'test',
-};
-
 describe('PlaygroundSection', () => {
   it('should render the loader', async () => {
     render(
-      <PlaygroundSection
-        loader
-        response_state={false}
-        full_response={fake_full_response}
-        error={null}
-        name=''
-      />,
+      <PlaygroundSection loader response_state={false} full_response={null} error={null} name='' />,
     );
     const loader = await screen.findByTestId('circles-loading');
     expect(loader).toBeVisible();
@@ -26,7 +16,7 @@ describe('PlaygroundSection', () => {
       <PlaygroundSection
         loader={false}
         response_state={false}
-        full_response={fake_full_response}
+        full_response={null}
         error={null}
         name=''
       />,
@@ -37,13 +27,7 @@ describe('PlaygroundSection', () => {
 
   it('should render the ReactJson', async () => {
     render(
-      <PlaygroundSection
-        loader={false}
-        response_state
-        full_response={fake_full_response}
-        error={null}
-        name=''
-      />,
+      <PlaygroundSection loader={false} response_state full_response={null} error={null} name='' />,
     );
 
     const playground_section = await screen.findByTestId('dt_playground_section');

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

@@ -1,8 +1,8 @@
 import React, { Suspense } from 'react';
 import {
   TSocketEndpointNames,
-  TSocketResponseData,
   TSocketSubscribableEndpointNames,
+  TSocketResponse,
 } from '@site/src/configs/websocket/types';
 import JsonData from './JsonData';
 import Loader from '@site/src/components/Loader';
@@ -11,7 +11,7 @@ import styles from './PlaygroundSection.module.scss';
 type TPlaygroundSection<T extends TSocketEndpointNames> = {
   loader: boolean;
   response_state: boolean;
-  full_response: TSocketResponseData<T>;
+  full_response: TSocketResponse<T>;
   error: unknown;
   name: string;
 };