Merge pull request #157 from hubert-deriv/HOTFIX_playground_submit_error

Hubert / fixing error playground

Author: mohsen-deriv

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

@@ -20,7 +20,7 @@ const JsonData = <T extends TSocketEndpointNames | TSocketSubscribableEndpointNa
 }: TJsonData<T>) => {
   return (
     <React.Fragment>
-      {full_response !== null ? (
+      {full_response !== null && full_response?.echo_req ? (
         <div className={styles.reactJsonContainer}>
           <ReactJson src={full_response.echo_req} theme='tube' />
           <ReactJson src={full_response} theme='tube' />

src/features/Apiexplorer/RequestResponseRenderer/index.tsx

@@ -25,7 +25,7 @@ function RequestResponseRenderer<T extends TSocketEndpointNames>({
   const { full_response, is_loading, send, clear, error } = useWS<T>(name);
   const [toggle_modal, setToggleModal] = useState(false);
   const [response_state, setResponseState] = useState(false);
-  const [is_valid, setIsValid] = useState(false);
+  const [is_not_valid, setIsNotValid] = useState(false);
 
   const parseRequestJSON = () => {
     let request_data: TSocketRequestProps<T> extends never ? undefined : TSocketRequestProps<T>;
@@ -35,7 +35,7 @@ function RequestResponseRenderer<T extends TSocketEndpointNames>({
     } catch (error) {
       console.error('Could not parse the JSON data while trying to send the request: ', error);
       console.log(error);
-      setIsValid(true);
+      setIsNotValid(true);
       setToggleModal(false);
     }
 
@@ -65,7 +65,7 @@ function RequestResponseRenderer<T extends TSocketEndpointNames>({
           Clear
         </Button>
       </div>
-      {!is_valid ? (
+      {!is_not_valid ? (
         !is_logged_in && toggle_modal ? (
           <LoginDialog setToggleModal={setToggleModal} />
         ) : (
@@ -78,7 +78,7 @@ function RequestResponseRenderer<T extends TSocketEndpointNames>({
           />
         )
       ) : (
-        <ValidDialog setIsValid={setIsValid} setToggleModal={setToggleModal} />
+        <ValidDialog setIsNotValid={setIsNotValid} setToggleModal={setToggleModal} />
       )}
     </div>
   );

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

@@ -54,7 +54,7 @@ const mockUnsubscribe = jest.fn();
 mockUseSubscription.mockImplementation(() => ({
   subscribe: mockSubscribe,
   unsubscribe: mockUnsubscribe,
-  error: '',
+  error: { code: '' },
   full_response: {
     tick: 1,
     echo_req: { tick: 1 },

src/features/Apiexplorer/SubscribeRenderer/index.tsx

@@ -28,7 +28,13 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
   const { full_response, is_loading, subscribe, unsubscribe, error } = useSubscription<T>(name);
   const [response_state, setResponseState] = useState(false);
   const [toggle_modal, setToggleModal] = useState(false);
-  const [is_valid, setIsValid] = useState(false);
+  const [is_not_valid, setIsNotValid] = useState(false);
+
+  useEffect(() => {
+    if (error && error.code === 'AuthorizationRequired') {
+      setToggleModal(true);
+    }
+  }, [error]);
 
   const parseRequestJSON = () => {
     let request_data: TSocketRequestProps<T> extends never ? undefined : TSocketRequestProps<T>;
@@ -37,8 +43,7 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
       request_data = JSON.parse(reqData);
     } catch (error) {
       console.error('Could not parse the JSON data while trying to send the request: ', error);
-      console.log(error);
-      setIsValid(true);
+      setIsNotValid(true);
       setToggleModal(false);
     }
 
@@ -66,8 +71,8 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
           Clear
         </Button>
       </div>
-      {is_valid ? (
-        <ValidDialog setIsValid={setIsValid} setToggleModal={setToggleModal} />
+      {is_not_valid ? (
+        <ValidDialog setIsNotValid={setIsNotValid} setToggleModal={setToggleModal} />
       ) : !is_logged_in && auth == 1 && toggle_modal ? (
         <LoginDialog setToggleModal={setToggleModal} />
       ) : (

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

@@ -6,7 +6,7 @@ describe('ValidDialog', () => {
   test('if correct test is rendered', () => {
     location.assign = jest.fn();
 
-    render(<ValidDialog setIsValid={jest.fn()} setToggleModal={jest.fn()} />);
+    render(<ValidDialog setIsNotValid={jest.fn()} setToggleModal={jest.fn()} />);
     const text = screen.getByText(
       'Your JSON object is invalid. Please make sure you provide the correct syntax for your JSON object.',
     );

src/features/Apiexplorer/ValidDialog/index.tsx

@@ -3,19 +3,19 @@ import { Modal } from '@deriv/ui';
 import styles from '../LoginDialog/LoginDialog.module.scss';
 
 type TValidDialog = {
-  setIsValid: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsNotValid: React.Dispatch<React.SetStateAction<boolean>>;
   setToggleModal: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-export const ValidDialog = ({ setIsValid, setToggleModal }: TValidDialog) => {
+export const ValidDialog = ({ setIsNotValid, setToggleModal }: TValidDialog) => {
   const onOpenChange = useCallback(
     (open: boolean) => {
       if (!open) {
-        setIsValid(false);
+        setIsNotValid(false);
         setToggleModal(false);
       }
     },
-    [setIsValid, setToggleModal],
+    [setIsNotValid, setToggleModal],
   );
   return (
     <Modal defaultOpen onOpenChange={onOpenChange}>

src/features/Apiexplorer/index.tsx

@@ -17,7 +17,6 @@ export default function ApiExplorerFeatures() {
     response_info,
     handleTextAreaInput,
   } = useDynamicImportJSON();
-
   const has_info = Object.keys(request_info).length === 0;
   return (
     <div className={styles.playgroundContent}>

src/hooks/useDynamicImportJSON/index.tsx

@@ -56,15 +56,15 @@ const useDynamicImportJSON = () => {
         })
         .catch((error) => {
           // eslint-disable-next-line
-          console.log(error);
+          console.error(error);
         });
       import(`../../../config/v3/${selected_value}/receive.json`)
         .then((data) => {
           setResponseInfo(data);
         })
         .catch((error) => {
           // eslint-disable-next-line
-          console.log(error);
+          console.error(error);
         });
     },
     [setRequestInfo, setResponseInfo],

src/hooks/useSubscription/index.tsx

@@ -6,10 +6,15 @@ import {
 } from '@site/src/configs/websocket/types';
 import { useCallback, useState } from 'react';
 
+type TError = {
+  code?: string;
+  message?: string;
+};
+
 const useSubscription = <T extends TSocketSubscribableEndpointNames>(name: T) => {
   const [is_loading, setIsLoading] = useState(false);
   const [is_subscribed, setSubscribed] = useState(false);
-  const [error, setError] = useState<unknown>();
+  const [error, setError] = useState<TError>();
   const [data, setData] = useState<TSocketResponseData<T>>();
   const [full_response, setFullResponse] = useState<TSocketResponse<T>>();
   const [subscriber, setSubscriber] = useState<{ unsubscribe?: VoidFunction }>();