Merge pull request binary-com#114 from henry-deriv/henry/88404/ts-mig…

…ration-account-section-security-connectedapps Henry/88404/ts migration account section security connectedapps
likhith-deriv · May 7, 2023 · c40f6f9 · c40f6f9
2 parents b0d65c0 + f89338d
commit c40f6f9
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 20 deletions.
diff --git a/packages/account/src/Components/article/article.tsx b/packages/account/src/Components/article/article.tsx
@@ -11,7 +11,7 @@ type TDescriptionsItem = {
 
 export type TArticle = {
     title: string;
-    descriptions: Array<TDescriptionsItem & React.ReactElement>;
+    descriptions: Array<TDescriptionsItem | React.ReactElement>;
     onClickLearnMore?: () => void;
     className?: string;
 };

diff --git a/.../ConnectedApps/connected-apps-article.jsx → .../ConnectedApps/connected-apps-article.tsx b/.../ConnectedApps/connected-apps-article.jsx → .../ConnectedApps/connected-apps-article.tsx
diff --git a/...Security/ConnectedApps/connected-apps.jsx → ...Security/ConnectedApps/connected-apps.tsx b/...Security/ConnectedApps/connected-apps.jsx → ...Security/ConnectedApps/connected-apps.tsx
@@ -11,17 +11,17 @@ import {
     Loading,
     Text,
 } from '@deriv/components';
-import ConnectedAppsArticle from './connected-apps-article.jsx';
+import ConnectedAppsArticle from './connected-apps-article';
 import { PlatformContext, WS } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import ErrorComponent from 'Components/error-component';
-import GetConnectedAppsColumnsTemplate from './data-table-template.jsx';
+import GetConnectedAppsColumnsTemplate from './data-table-template';
 
 const ConnectedApps = () => {
     const { is_appstore } = React.useContext(PlatformContext);
     const [is_loading, setLoading] = React.useState(true);
     const [is_modal_open, setModalVisibility] = React.useState(false);
-    const [selected_app_id, setAppId] = React.useState(null);
+    const [selected_app_id, setAppId] = React.useState<number | null>(null);
     const [is_error, setError] = React.useState(false);
     const [connected_apps, setConnectedApps] = React.useState([]);
 
@@ -39,24 +39,26 @@ const ConnectedApps = () => {
     };
 
     const handleToggleModal = React.useCallback(
-        (app_id = null) => {
+        (app_id: number | null = null) => {
             setModalVisibility(!is_modal_open);
             setAppId(app_id);
         },
         [is_modal_open]
     );
 
+    type TC = ReturnType<typeof GetConnectedAppsColumnsTemplate>[number];
+
     const columns_map = React.useMemo(
         () =>
             GetConnectedAppsColumnsTemplate(app_id => handleToggleModal(app_id)).reduce((map, item) => {
                 map[item.col_index] = item;
                 return map;
-            }, {}),
+            }, {} as { [k in TC['col_index']]: TC }),
         [handleToggleModal]
     );
 
     const mobileRowRenderer = React.useCallback(
-        ({ row }) => (
+        ({ row }: { row: TC['renderCellContent'] }) => (
             <div className='data-list__row'>
                 <div className='data-list__col'>
                     <DataList.Cell row={row} column={columns_map.name} />
@@ -71,12 +73,7 @@ const ConnectedApps = () => {
         [columns_map, is_appstore]
     );
 
-    const handleRevokeAccess = React.useCallback(() => {
-        setModalVisibility(false);
-        revokeConnectedApp(selected_app_id);
-    }, [revokeConnectedApp, selected_app_id]);
-
-    const revokeConnectedApp = React.useCallback(async app_id => {
+    const revokeConnectedApp = React.useCallback(async (app_id: number | null) => {
         setLoading(true);
         const response = await WS.authorized.send({ revoke_oauth_app: app_id });
         if (!response.error) {
@@ -86,6 +83,11 @@ const ConnectedApps = () => {
         }
     }, []);
 
+    const handleRevokeAccess = React.useCallback(() => {
+        setModalVisibility(false);
+        revokeConnectedApp(selected_app_id);
+    }, [revokeConnectedApp, selected_app_id]);
+
     return (
         <section
             className={classNames('connected-apps__wrapper', {

diff --git a/...ity/ConnectedApps/data-table-template.jsx → ...ity/ConnectedApps/data-table-template.tsx b/...ity/ConnectedApps/data-table-template.jsx → ...ity/ConnectedApps/data-table-template.tsx
@@ -4,7 +4,23 @@ import { toMoment } from '@deriv/shared';
 import { Button, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 
-const GetConnectedAppsColumnsTemplate = handleToggleModal => [
+type Column = {
+    title: string;
+    col_index: 'name' | 'scopes' | 'last_used' | 'app_id';
+    renderCellContent: React.FC<{ cell_value: string & number & string[] }>;
+};
+
+type TGetConnectedAppsColumnsTemplate = {
+    handleToggleModal: (app_id: number | null) => void;
+};
+
+type Permissions = {
+    [key: string]: string;
+};
+
+const GetConnectedAppsColumnsTemplate = (
+    handleToggleModal: TGetConnectedAppsColumnsTemplate['handleToggleModal']
+): Column[] => [
     {
         title: localize('Name'),
         col_index: 'name',
@@ -35,29 +51,32 @@ const GetConnectedAppsColumnsTemplate = handleToggleModal => [
     },
 ];
 
-const PrepareConnectedAppsAction = (app_id, handleToggleModal) => {
+const PrepareConnectedAppsAction = (
+    app_id: number,
+    handleToggleModal: TGetConnectedAppsColumnsTemplate['handleToggleModal']
+) => {
     return (
         <Button className='revoke_access' small secondary onClick={() => handleToggleModal(app_id)}>
             {localize('Revoke access')}
         </Button>
     );
 };
 
-const PrepareConnectedAppsLastLogin = last_used => (
+const PrepareConnectedAppsLastLogin = (last_used: number) => (
     <Text as='p' size='xs' className='last_used_content'>
         {toMoment(last_used).format('YYYY-MM-DD HH:mm:ss')}
     </Text>
 );
 
-const generatePermissions = () => ({
+const generatePermissions = (): Permissions => ({
     read: localize('Read'),
     trade: localize('Trade'),
     trading_information: localize('Trading information'),
     payments: localize('Payments'),
     admin: localize('Admin'),
 });
 
-const PrepareConnectedAppsScopes = permissions_list => {
+const PrepareConnectedAppsScopes = (permissions_list: string[]) => {
     const is_trading_information = permissions_list.includes('trading_information');
     let oauth_apps_list = [];
     if (is_trading_information) {
@@ -66,7 +85,7 @@ const PrepareConnectedAppsScopes = permissions_list => {
     } else {
         oauth_apps_list = permissions_list;
     }
-    const sorted_app_list = [];
+    const sorted_app_list: string[] = [];
     oauth_apps_list.forEach((permission, index) => {
         if (permissions_list.length - 1 !== index) {
             sorted_app_list.push(`${generatePermissions()[permission]}, `);

diff --git a/packages/account/src/Sections/Security/ConnectedApps/index.js b/packages/account/src/Sections/Security/ConnectedApps/index.js
@@ -1,3 +1,3 @@
-import ConnectedApps from './connected-apps.jsx';
+import ConnectedApps from './connected-apps';
 
 export default ConnectedApps;