Merge pull request #201 from sanjam-deriv/balanceerror

Author: hubert-deriv

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

@@ -1,11 +1,12 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { cleanup, render, screen } from '@testing-library/react';
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
 import SubscribeRenderer from '..';
 import useAuthContext from '@site/src/hooks/useAuthContext';
 import useSubscription from '@site/src/hooks/useSubscription';
 import useDynamicImportJSON from '@site/src/hooks/useDynamicImportJSON';
 import { IAuthContext } from '@site/src/contexts/auth/auth.context';
+import LoginDialog from '../../LoginDialog';
 
 jest.mock('@site/src/hooks/useAuthContext');
 
@@ -78,39 +79,82 @@ describe('SubscribeRenderer', () => {
     expect(button).toBeVisible();
   });
 
+  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'} />);
+    const button = await screen.findByRole('button', { name: /Send Request/i });
+    await userEvent.click(button);
+
+    expect(consoleOutput[0]).toEqual(
+      'Could not parse the JSON data while trying to send the request: ',
+    );
+  });
+
   it('should call subscribe and unsubscribe when pressing the send request button', async () => {
+    jest.spyOn(React, 'useRef').mockReturnValue({
+      current: {
+        unsubscribe: mockUnsubscribe,
+      },
+    });
     render(<SubscribeRenderer name='ticks' auth={1} reqData={request_data} />);
     const button = await screen.findByRole('button', { name: /Send Request/i });
     expect(button).toBeVisible();
 
     await userEvent.click(button);
-
     expect(mockUnsubscribe).toBeCalledTimes(1);
     expect(mockSubscribe).toBeCalledTimes(1);
     expect(mockSubscribe).toBeCalledWith({ ticks: 'R_50', subscribe: 1 });
   });
 
   it('should call unsubscribe when pressing the clear button', async () => {
+    jest.spyOn(React, 'useRef').mockReturnValue({
+      current: {
+        unsubscribe: mockUnsubscribe,
+      },
+    });
     render(<SubscribeRenderer name='ticks' auth={1} reqData={request_data} />);
     const button = await screen.findByRole('button', { name: 'Clear' });
     expect(button).toBeVisible();
 
     await userEvent.click(button);
-
     expect(mockUnsubscribe).toBeCalledTimes(1);
   });
 
-  it('should throw an error if incorrect json is being parsed', async () => {
-    const consoleOutput = [];
-    const mockedError = (output) => consoleOutput.push(output);
-    console.error = mockedError;
+  it('should call unsubscribe when unmounting the component', async () => {
+    jest.spyOn(React, 'useRef').mockReturnValue({
+      current: {
+        unsubscribe: mockUnsubscribe,
+      },
+    });
+    const { unmount } = render(<SubscribeRenderer name='ticks' auth={1} reqData={request_data} />);
+    unmount();
+    expect(mockUnsubscribe).toBeCalledTimes(1);
+  });
+  it('should call login dialog when the error code is not authourized', async () => {
+    const setToggleModal = jest.fn();
+    jest.spyOn(React, 'useState').mockReturnValue([false, setToggleModal]);
+    mockUseAuthContext.mockImplementation(() => ({
+      is_logged_in: false,
+      is_authorized: false,
+    }));
+    mockUseSubscription.mockImplementation(() => ({
+      subscribe: mockSubscribe,
+      unsubscribe: mockUnsubscribe,
+      error: { code: 'AuthorizationRequired' },
+      full_response: {
+        tick: 1,
+        echo_req: { tick: 1 },
+      },
+    }));
 
-    render(<SubscribeRenderer name='ticks' auth={1} reqData={'asdawefaewf3232'} />);
+    render(<SubscribeRenderer name='ticks' auth={1} reqData={request_data} />);
     const button = await screen.findByRole('button', { name: /Send Request/i });
     await userEvent.click(button);
-
-    expect(consoleOutput[0]).toEqual(
-      'Could not parse the JSON data while trying to send the request: ',
-    );
+    await waitFor(() => {
+      expect(setToggleModal).toHaveBeenCalled();
+    });
   });
 });

src/features/Apiexplorer/SubscribeRenderer/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import {
   TSocketSubscribableEndpointNames,
   TSocketRequestProps,
@@ -25,18 +25,24 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
 }: IResponseRendererProps<T>) {
   const { is_logged_in } = useAuthContext();
   const { disableSendRequest } = useDisableSendRequest();
-  const { full_response, is_loading, subscribe, unsubscribe, error } = useSubscription<T>(name);
+  const { full_response, is_loading, subscribe, error } = useSubscription<T>(name);
   const [response_state, setResponseState] = useState(false);
   const [toggle_modal, setToggleModal] = useState(false);
   const [is_not_valid, setIsNotValid] = useState(false);
 
+  const subscribe_ref: React.MutableRefObject<{ unsubscribe: () => void }> = useRef();
+
   useEffect(() => {
     if (error && error.code === 'AuthorizationRequired') {
       setToggleModal(true);
     }
+
+    return () => {
+      if (subscribe_ref.current) subscribe_ref.current.unsubscribe();
+    };
   }, [error]);
 
-  const parseRequestJSON = () => {
+  const parseRequestJSON = useCallback(() => {
     let request_data: TSocketRequestProps<T> extends never ? undefined : TSocketRequestProps<T>;
 
     try {
@@ -48,16 +54,16 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
     }
 
     return request_data;
-  };
+  }, [reqData]);
 
   const handleClick = useCallback(() => {
-    unsubscribe();
-    subscribe(parseRequestJSON());
+    if (subscribe_ref.current) subscribe_ref.current.unsubscribe();
+    subscribe_ref.current = subscribe(parseRequestJSON());
     setResponseState(true);
-  }, [reqData, subscribe, unsubscribe]);
+  }, [parseRequestJSON, subscribe]);
 
   const handleClear = () => {
-    unsubscribe();
+    subscribe_ref.current.unsubscribe();
     setResponseState(false);
   };
 
@@ -88,4 +94,4 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
   );
 }
 
-export default SubscribeRenderer;
+export default React.memo(SubscribeRenderer);

src/hooks/useSubscription/index.tsx

@@ -39,7 +39,9 @@ const useSubscription = <T extends TSocketSubscribableEndpointNames>(name: T) =>
     (data: Parameters<typeof apiManager.augmentedSubscribe<T>>[1]) => {
       setIsLoading(true);
       setSubscribed(true);
-      setSubscriber(apiManager.augmentedSubscribe(name, data).subscribe(onData, onError));
+      const subscriber_ref = apiManager.augmentedSubscribe(name, data).subscribe(onData, onError);
+      setSubscriber(subscriber_ref);
+      return subscriber_ref;
     },
     [name, onData, onError],
   );
@@ -49,7 +51,15 @@ const useSubscription = <T extends TSocketSubscribableEndpointNames>(name: T) =>
     setSubscribed(false);
   }, [subscriber]);
 
-  return { subscribe, unsubscribe, is_loading, is_subscribed, error, data, full_response };
+  return {
+    subscribe,
+    unsubscribe,
+    is_loading,
+    is_subscribed,
+    error,
+    data,
+    full_response,
+  };
 };
 
 export default useSubscription;