Merge pull request #276 from utkarsha-deriv/utkarsha/subscribe-rerender-issue/DERA-496

Author: utkarsha-deriv

src/features/Apiexplorer/SubscribeRenderer/index.tsx

@@ -32,7 +32,12 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
   const [is_not_valid, setIsNotValid] = useState(false);
 
   useEffect(() => {
-    if (error && error.code === 'AuthorizationRequired') {
+    if (
+      error &&
+      typeof error === 'object' &&
+      'code' in error &&
+      error.code === 'AuthorizationRequired'
+    ) {
       setToggleModal(true);
     }
   }, [error]);

src/hooks/useSubscription/__tests__/useSubscription.test.tsx

@@ -206,7 +206,22 @@ describe('Use WS', () => {
       },
     });
 
-    expect(result.current.error).toEqual({ message: 'this is an error' });
+    expect(result.current.error).toEqual({
+      echo_req: {
+        base_currency: 'USD',
+        exchange_rates: 1,
+        req_id: 1,
+        subscribe: 1,
+      },
+      error: {
+        message: 'this is an error',
+      },
+      msg_type: 'exchange_rates',
+      req_id: 1,
+      subscription: {
+        id: '2f39f7e7-d986-33f2-080a-b0ee50cfb85c',
+      },
+    });
     expect(result.current.is_loading).toBeFalsy();
   });
 });

src/hooks/useSubscription/index.tsx

@@ -6,15 +6,10 @@ 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<TError>();
+  const [error, setError] = useState<unknown>();
   const [data, setData] = useState<TSocketResponseData<T>>();
   const [full_response, setFullResponse] = useState<TSocketResponse<T>>();
   const [subscriber, setSubscriber] = useState<{ unsubscribe?: VoidFunction }>();
@@ -30,7 +25,7 @@ const useSubscription = <T extends TSocketSubscribableEndpointNames>(name: T) =>
   );
 
   const onError = useCallback((response: TSocketResponse<T>) => {
-    setError(response.error);
+    setError(response);
     setIsLoading(false);
     setFullResponse(null);
   }, []);