chore: fixing errors

Author: Hubert Koster

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

@@ -19,8 +19,16 @@ const JsonData = <T extends TSocketEndpointNames | TSocketSubscribableEndpointNa
   name,
   error,
 }: TJsonData<T>) => {
-  const getResponse = useCallback((key: string) => full_response[key], [full_response]);
-  const key = getResponse('msg_type') ?? name;
+  const getResponse = useCallback(
+    (key: string) => {
+      const response = full_response;
+      const selected_key = response[key] ?? name;
+      if (response !== null) return selected_key;
+    },
+    [full_response],
+  );
+
+  const key = getResponse('msg_type');
   const echo_req_json = {
     echo_req: getResponse('echo_req'),
     msg_type: getResponse('msg_type'),

src/features/Apiexplorer/SubscribeRenderer/__tests__/SubscribeRenderer.test.tsx

@@ -100,13 +100,19 @@ describe('SubscribeRenderer', () => {
     expect(mockUnsubscribe).toBeCalledTimes(1);
   });
 
-  it('should throw an error if incorrect json is being parsed', () => {
+  it('should throw an error if incorrect json is being parsed', async () => {
     const consoleOutput = [];
     const mockedError = (output) => consoleOutput.push(output);
     console.error = mockedError;
 
     render(<SubscribeRenderer name='ticks' auth={1} reqData={'asdawefaewf3232'} />);
 
-    expect(consoleOutput[0]).toEqual('something went wrong when parsing the json data: ');
+    const send_request_button = screen.getByRole('button', { name: 'Send Request' });
+
+    await userEvent.click(send_request_button);
+
+    expect(consoleOutput[0]).toEqual(
+      'Could not parse the JSON data while trying to send the request: ',
+    );
   });
 });

src/features/Apiexplorer/SubscribeRenderer/index.tsx

@@ -1,5 +1,8 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { TSocketSubscribableEndpointNames } from '@site/src/configs/websocket/types';
+import {
+  TSocketSubscribableEndpointNames,
+  TSocketRequestProps,
+} from '@site/src/configs/websocket/types';
 import { Button } from '@deriv/ui';
 import styles from '../RequestJSONBox/RequestJSONBox.module.scss';
 import useAuthContext from '@site/src/hooks/useAuthContext';
@@ -31,17 +34,21 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
     }
   }, [error]);
 
-  let json_data;
-  try {
-    json_data = JSON.parse(reqData);
-  } catch (error) {
-    json_data = '';
-    console.error('something went wrong when parsing the json data: ', error);
-  }
+  const parseRequestJSON = () => {
+    let json_data: TSocketRequestProps<T> extends never ? undefined : TSocketRequestProps<T>;
+
+    try {
+      json_data = JSON.parse(reqData);
+    } catch (error) {
+      console.error('Could not parse the JSON data while trying to send the request: ', error);
+    }
+
+    return json_data;
+  };
 
   const handleClick = useCallback(() => {
     unsubscribe();
-    subscribe(json_data);
+    subscribe(parseRequestJSON());
     setResponseState(true);
   }, [reqData, subscribe, unsubscribe]);
 

src/hooks/useSubscription/index.tsx

@@ -18,7 +18,7 @@ const useSubscription = <T extends TSocketSubscribableEndpointNames>(name: T) =>
     (response: TSocketResponse<T>) => {
       const key = response['msg_type'] ?? name;
       setData(response[key] as TSocketResponseData<T>);
-      setFullResponse(full_response);
+      setFullResponse(response);
       setIsLoading(false);
     },
     [name],