Merge pull request #171 from ahmed-deriv/ahmed/DAPI-820/fix--api-expl…

…orer-custom-json Ahmed/dapi 820/fix api explorer custom json
deriv-com · Dec 10, 2024 · f3dd701 · f3dd701
2 parents ef05452 + 62e7702
commit f3dd701
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 49 deletions.
diff --git a/src/features/Apiexplorer/Dropdown/Dropdown.tsx b/src/features/Apiexplorer/Dropdown/Dropdown.tsx
@@ -8,7 +8,7 @@ export type TDropdown = {
   selected: string;
   setSelected: (value: string) => void;
   selected_value: string;
-  handleChange: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, value: string) => void;
+  handleChange: (value: string) => void;
 };
 
 export const Dropdown = ({ selected, setSelected, handleChange, selected_value }: TDropdown) => {

diff --git a/src/features/Apiexplorer/Dropdown/DropdownList/index.tsx b/src/features/Apiexplorer/Dropdown/DropdownList/index.tsx
@@ -15,7 +15,7 @@ type TDropdownList = {
   selected: string;
   setSelected: (value: string) => void;
   selected_value: string;
-  handleChange: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, value: string) => void;
+  handleChange: (value: string) => void;
   searchResults: string;
   setIsActive: (value: boolean) => void;
   setSearchResults: (result: string) => void;
@@ -53,6 +53,7 @@ const DropdownList: React.FC<TDropdownList> = ({
           onChange={(event) => {
             setSearchResults(event.target.value);
           }}
+          autoFocus
         />
       </div>
       <div className={styles.dropdownList}>
@@ -72,7 +73,7 @@ const DropdownList: React.FC<TDropdownList> = ({
             onClick={(e) => {
               setSelected(option.title);
               setIsActive(false);
-              handleChange(e, option.name);
+              handleChange(option.name);
             }}
             className={clsx(styles.dropdownItem, {
               [styles.dropdownSelected]: selected_value === option.title,

diff --git a/src/features/Apiexplorer/RequestJSONBox/index.tsx b/src/features/Apiexplorer/RequestJSONBox/index.tsx
@@ -34,7 +34,6 @@ function RequestJSONBox<T extends TSocketEndpointNames>({
           onChange={handleChange}
           value={request_example}
           rows={10}
-          resizable={false}
         />
         {is_subscribe ? (
           <SubscribeRenderer

diff --git a/src/features/Apiexplorer/SubscribeRenderer/index.tsx b/src/features/Apiexplorer/SubscribeRenderer/index.tsx
@@ -24,6 +24,7 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
   reqData,
   auth,
 }: IResponseRendererProps<T>) {
+  const AUTH_ENABLED = 1;
   const { is_logged_in, is_switching_account } = useAuthContext();
   const { disableSendRequest } = useDisableSendRequest();
   const { full_response, is_loading, subscribe, unsubscribe, is_subscribed, error } =
@@ -67,10 +68,14 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
   }, [reqData]);
 
   const handleClick = useCallback(() => {
+    if (!is_logged_in && auth == AUTH_ENABLED) {
+      setToggleModal(true);
+      return;
+    }
     if (is_subscribed) unsubscribe();
     subscribe(parseRequestJSON());
     setResponseState(true);
-  }, [parseRequestJSON, subscribe]);
+  }, [parseRequestJSON, subscribe, auth]);
 
   const handleClear = () => {
     unsubscribe();
@@ -100,9 +105,7 @@ function SubscribeRenderer<T extends TSocketSubscribableEndpointNames>({
       {is_not_valid && (
         <ValidDialog setIsNotValid={setIsNotValid} setToggleModal={setToggleModal} />
       )}
-      {!is_logged_in && auth == 1 && toggle_modal && (
-        <LoginDialog setToggleModal={setToggleModal} />
-      )}
+      {toggle_modal && <LoginDialog setToggleModal={setToggleModal} />}
       <PlaygroundSection
         loader={is_loading}
         response_state={response_state}

diff --git a/src/hooks/useDynamicImportJSON/index.tsx b/src/hooks/useDynamicImportJSON/index.tsx
@@ -16,7 +16,17 @@ const useDynamicImportJSON = () => {
   const history = useHistory();
   const { hash, pathname } = useLocation();
 
-  useEffect(() => {
+  const handleTextAreaInput = useCallback(
+    (e) => setTextData({ ...text_data, request: e.target.value, name: hash.split('#')[1] }),
+    [hash, text_data],
+  );
+
+  const handleSelectChange = useCallback(
+    (name: string) => history.push(`${pathname}#${name}`),
+    [history, pathname],
+  );
+
+  const onHashChange = useCallback(() => {
     if (hash) {
       const hash_value = hash.split('#')[1];
       const find_select_value = playground_requests.find((el) => el.name === hash_value);
@@ -28,29 +38,10 @@ const useDynamicImportJSON = () => {
       };
       setTextData(hash_text_data);
     }
-  }, [hash]);
+  }, [hash, text_data]);
 
-  const handleTextAreaInput = useCallback(
-    (e) => setTextData({ ...text_data, request: e.target.value, name: hash.split('#')[1] }),
-    [hash, text_data],
-  );
-
-  const handleSelectChange = useCallback(
-    (event, name) => {
-      event.preventDefault();
-      history.push(`${pathname}#${name}`);
-      const request_body = playground_requests.find((el) => el.name === event.currentTarget.value);
-      const new_text_data = {
-        ...text_data,
-        selected_value: event.currentTarget.value,
-        request: JSON.stringify(request_body?.body, null, 4),
-      };
-      setTextData({ ...new_text_data });
-    },
-    [history, pathname, text_data],
-  );
   const dynamicImportJSON = useCallback(
-    (selected_value) => {
+    (selected_value: string) => {
       import(`../../../config/v3/${selected_value}/send.json`)
         .then((data) => {
           setRequestInfo(data);
@@ -69,6 +60,10 @@ const useDynamicImportJSON = () => {
     [setRequestInfo, setResponseInfo],
   );
 
+  useEffect(() => {
+    onHashChange();
+  }, [hash]);
+
   useEffect(() => {
     const hash_value = hash.split('#')[1];
     if (hash_value) {

diff --git a/src/hooks/useSubscription/__tests__/useSubscription.test.tsx b/src/hooks/useSubscription/__tests__/useSubscription.test.tsx
@@ -49,7 +49,6 @@ describe('Use WS', () => {
     expect(result.current.is_subscribed).toBeTruthy();
 
     await expect(wsServer).toReceiveMessage({
-      exchange_rates: 1,
       base_currency: 'USD',
       req_id: 1,
       subscribe: 1,
@@ -183,7 +182,6 @@ describe('Use WS', () => {
     expect(result.current.is_subscribed).toBeTruthy();
 
     await expect(wsServer).toReceiveMessage({
-      exchange_rates: 1,
       base_currency: 'USD',
       req_id: 1,
       subscribe: 1,

diff --git a/src/hooks/useSubscription/index.tsx b/src/hooks/useSubscription/index.tsx
@@ -32,23 +32,21 @@ const useSubscription = <T extends TSocketSubscribableEndpointNames>(name: T) =>
 
   const subscribe = useCallback(
     (data: Parameters<typeof apiManager.augmentedSubscribe<T>>[0]) => {
-      let payload = data;
-      if (name) {
-        payload = { [name]: 1, subscribe: 1, ...payload };
-      } else {
-        payload = { subscribe: 1, ...payload };
+      if (data) {
+        setIsLoading(true);
+        setSubscribed(true);
+        const subscriber_ref = apiManager
+          .augmentedSubscribe(data)
+          .subscribe({ next: onData, error: onError });
+        setSubscriber(subscriber_ref);
+        return subscriber_ref;
       }
-      setIsLoading(true);
-      setSubscribed(true);
-      const subscriber_ref = apiManager.augmentedSubscribe(payload).subscribe(onData, onError);
-      setSubscriber(subscriber_ref);
-      return subscriber_ref;
     },
     [name, onData, onError],
   );
 
   const unsubscribe = useCallback(() => {
-    subscriber?.unsubscribe?.();
+    subscriber?.unsubscribe();
     setSubscribed(false);
   }, [subscriber]);
 

diff --git a/src/hooks/useWs/index.tsx b/src/hooks/useWs/index.tsx
@@ -22,16 +22,13 @@ const useWS = <T extends TSocketEndpointNames>(name?: T) => {
     async (data?: Parameters<typeof apiManager.augmentedSend<T>>[0]) => {
       let payload = data;
 
-      if (name) {
-        if (payload === undefined || name == 'api_token' || name == 'app_register') {
-          payload = { [name]: 1, ...payload };
-        }
+      if ((!data && name) || (name == 'api_token' || name == 'app_register')) {
+        payload = { [name]: 1, ...payload };
       } else {
         payload = { ...payload };
       }
-
       setIsLoading(true);
-
+      
       try {
         const response = await apiManager.augmentedSend(payload);
         const key = response['msg_type'] ?? name;