Merge pull request #226 from hubert-deriv/subscription_history

Author: hubert-deriv

package-lock.json

@@ -45,7 +45,6 @@
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.41.5",
     "react-json-view": "^1.21.3",
-    "react-loader-spinner": "^5.3.4",
     "react-table": "^7.8.0",
     "sass": "^1.57.1",
     "sass-loader": "^13.2.0",

package.json

@@ -2,10 +2,10 @@ import React from 'react';
 import { cleanup, render, screen } from '@site/src/test-utils';
 import userEvent from '@testing-library/user-event';
 import AccountSwitcher from '..';
+import AuthProvider from '@site/src/contexts/auth/auth.provider';
 import useLogout from '@site/src/hooks/useLogout';
 import useAuthContext from '@site/src/hooks/useAuthContext';
 import { IAuthContext } from '@site/src/contexts/auth/auth.context';
-import AuthProvider from '@site/src/contexts/auth/auth.provider';
 import { IUserLoginAccount } from '@site/src/contexts/auth/auth.context';
 
 jest.mock('@site/src/hooks/useAuthContext');

src/components/AccountSwitcher/__tests__/AccountSwitcher.test.tsx

@@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react';
 import { isNotDemoCurrency } from '@site/src/utils';
 import useLogout from '@site/src/hooks/useLogout';
 import useAuthContext from '@site/src/hooks/useAuthContext';
-import useClickOutsideDropdown from '@site/src/hooks/useClickOutsideDropdown';
+import useOnClickOutside from '@site/src/hooks/useOnClickOutside';
 import CurrencyIcon from '../CurrencyIcon';
 import SelectedAccount from '../CustomSelectDropdown/account-dropdown/SelectedAccount';
 import AccountDropdown from '../CustomSelectDropdown/account-dropdown/AccountDropdown';
@@ -20,7 +20,7 @@ const AccountSwitcher = () => {
   const is_demo = currentLoginAccount.name.includes('VRTC') ? styles.demo : '';
 
   const dropdownRef = useRef(null);
-  useClickOutsideDropdown(dropdownRef, setToggleDropdown, false);
+  useOnClickOutside(dropdownRef, () => setToggleDropdown(false));
 
   return (
     <div

src/components/AccountSwitcher/index.tsx

@@ -48,6 +48,51 @@ describe('Api Token Navbar Item', () => {
     expect(renderResult.container).toBeEmptyDOMElement();
   });
 
+  it('Should close the token dropdown when clicking outside of it', async () => {
+    mockUseAuthContext.mockImplementation(() => ({
+      is_authorized: true,
+      is_logged_in: true,
+    }));
+
+    mockUseApiToken.mockImplementation(() => ({
+      tokens: [
+        {
+          display_name: 'first_token',
+          last_used: '',
+          scopes: ['read', 'trade'],
+          token: 'token_1',
+          valid_for_ip: '',
+        },
+        {
+          display_name: 'michio_app_pages',
+          last_used: '2022-10-04 10:33:51',
+          scopes: ['read', 'trade', 'payments', 'trading_information', 'admin'],
+          token: 'token_2',
+          valid_for_ip: '',
+        },
+      ],
+      currentToken: {
+        display_name: 'first_token',
+        last_used: '',
+        scopes: ['read', 'trade'],
+        token: 'token_1',
+        valid_for_ip: '',
+      },
+      isLoadingTokens: false,
+    }));
+
+    render(<ApiTokenNavbarItem />);
+
+    const current_account_button = screen.getByText(/first_token/i);
+    await userEvent.click(current_account_button);
+
+    const alternative_account = screen.getByText(/michio_app_pages/i);
+    expect(alternative_account).toBeVisible();
+
+    await userEvent.click(document.body);
+    expect(alternative_account).not.toBeVisible();
+  });
+
   it('Should render current api token', async () => {
     mockUseAuthContext.mockImplementation(() => ({
       is_authorized: true,

src/components/ApiTokenNavbarItem/__tests__/ApiTokenNavbarItem.test.tsx

@@ -3,7 +3,7 @@ import Link from '@docusaurus/Link';
 import useApiToken from '@site/src/hooks/useApiToken';
 import useAuthContext from '@site/src/hooks/useAuthContext';
 import TokenDropdown from '../CustomSelectDropdown/token-dropdown/TokenDropdown';
-import useClickOutsideDropdown from '@site/src/hooks/useClickOutsideDropdown';
+import useOnClickOutside from '@site/src/hooks/useOnClickOutside';
 import useAppManager from '@site/src/hooks/useAppManager';
 import styles from './api_token_switcher.module.scss';
 import RenderOfficialContents from '../RenderOfficialContents';
@@ -18,7 +18,8 @@ const ApiTokenNavbarItem = () => {
     tokens.length <= 1 && is_dashboard && currentTab === 'MANAGE_TOKENS' ? styles.oneToken : '';
 
   const dropdownRef = useRef(null);
-  useClickOutsideDropdown(dropdownRef, setToggleDropdown, false);
+
+  useOnClickOutside(dropdownRef, () => setToggleDropdown(false));
 
   if (!is_logged_in || !is_authorized || isLoadingTokens) {
     return null;

src/components/ApiTokenNavbarItem/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, ReactElement } from 'react';
-import useClickOutsideDropdown from '@site/src/hooks/useClickOutsideDropdown';
+import useOnClickOutside from '@site/src/hooks/useOnClickOutside';
 import { UseFormRegisterReturn } from 'react-hook-form';
 import styles from './custom_select_dropdown.module.scss';
 
@@ -26,23 +26,24 @@ const CustomSelectDropdown = ({
   const ErrorMessage = () => children[2];
 
   const dropdownRef = useRef(null);
-  useClickOutsideDropdown(dropdownRef, setToggleDropdown, false);
+
+  useOnClickOutside(dropdownRef, () => setToggleDropdown(false));
 
   return (
     <div className={styles.customSelectField}>
       <div
         tabIndex={0}
         ref={dropdownRef}
-        onClick={() => setToggleDropdown(!is_toggle_dropdown)}
-        onKeyDown={(e) => e.key === 'ArrowDown' && setToggleDropdown(!is_toggle_dropdown)}
+        onClick={(e) => setToggleDropdown((prev) => !prev)}
+        onKeyDown={(e) => e.key === 'ArrowDown' && setToggleDropdown((prev) => !prev)}
         className={`${styles.selectWrapper} ${toggle_dropdown} ${is_error ? styles.error : ''}`}
         data-testid={`dt_custom_dropdown_${value}`}
       >
         <label className={`${styles.selectLabel} ${value ? styles.active : ''}`}>{label}</label>
         <SelectInput />
         <input {...register} type='hidden' value={value ? value : ''} />
         <div className={`${styles.dropdownWrapper} ${toggle_dropdown}`}>
-          <div className={styles.dropdown} onClick={() => setToggleDropdown(!is_toggle_dropdown)}>
+          <div className={styles.dropdown} onClick={(e) => setToggleDropdown((prev) => !prev)}>
             <SelectDropdown />
           </div>
         </div>

src/components/CustomSelectDropdown/index.tsx

@@ -0,0 +1,37 @@
+@use 'src/styles/utility' as *;
+.spinnerContainer {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: rem(2);
+  .spinner {
+    position: relative;
+    width: var(--spinner-width);
+    height: var(--spinner-height);
+    border-radius: 100%;
+    overflow: hidden;
+    animation: rotating 0.5s linear infinite;
+    &:before {
+      content: "";
+      left: 50%;
+      top: 50%;
+      width: 70%;
+      height: 70%;
+      position: absolute;
+      border-radius: 100%;
+      transform: translate(-50%, -50%);
+      box-shadow: rem(10) rem(-20) rem(5) rem(15) var(--colors-coral500);
+    }
+  }
+
+  @keyframes rotating {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}