Card component for responsive screens (binary-com#14390)

* fix: card component * fix: change moment to dayjs, address comments * fix: comments * fix: package-lock.json update * fix: formatDate type update
niloofar-deriv · Mar 29, 2024 · 6029392 · 6029392
1 parent 0506022
commit 6029392
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/account-v2/package.json b/packages/account-v2/package.json
@@ -28,7 +28,8 @@
         "react-transition-group": "4.4.2",
         "tailwind-merge": "^1.14.0",
         "usehooks-ts": "^2.7.0",
-        "yup": "^0.32.11"
+        "yup": "^0.32.11",
+        "dayjs": "^1.11.10"
     },
     "devDependencies": {
         "@testing-library/react": "^12.0.0",

diff --git a/packages/account-v2/src/pages/ConnectedApps/ConnectedApps.tsx b/packages/account-v2/src/pages/ConnectedApps/ConnectedApps.tsx
@@ -1,16 +1,18 @@
 import React, { useCallback, useState } from 'react';
 import { useFetchConnectedApps, useRevokeConnectedApps } from '@deriv/api-v2';
-import { Loader } from '@deriv-com/ui';
+import { Loader, useDevice } from '@deriv-com/ui';
 import { ErrorMessage } from '../../components/ErrorMessage';
 import { ConnectedAppsEmpty } from './ConnectedAppsEmpty';
 import { ConnectedAppsInfo } from './ConnectedAppsInfo';
-import { ConnectedAppsSidebar } from './ConnectedAppsSidebar';
+import { ConnectedAppsResponsive } from './ConnectedAppsResponsive';
 import { ConnectedAppsRevokeModal } from './ConnectedAppsRevokeModal';
+import { ConnectedAppsSidebar } from './ConnectedAppsSidebar';
 import { ConnectedAppsTable } from './ConnectedAppsTable';
 
 export const ConnectedApps = () => {
     const { data: connectedApps, isError, isLoading } = useFetchConnectedApps();
     const { mutate: revokeMutate } = useRevokeConnectedApps();
+    const { isMobile } = useDevice();
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [selectedAppId, setSelectedAppId] = useState<number | null>(null);
 
@@ -29,13 +31,20 @@ export const ConnectedApps = () => {
             <Loader isFullScreen={false} />
         </div>
     ) : (
-        <div className='grid grid-cols-[auto,256px] gap-24'>
+        <div className='grid md:grid-cols-[auto,256px] gap-24'>
             <section>
                 {isError && <ErrorMessage />}
                 {connectedApps?.length ? (
                     <div className='flex flex-col gap-24'>
                         <ConnectedAppsInfo />
-                        <ConnectedAppsTable connectedApps={connectedApps} handleToggleModal={handleToggleModal} />
+                        {isMobile ? (
+                            <ConnectedAppsResponsive
+                                connectedApps={connectedApps}
+                                handleToggleModal={handleToggleModal}
+                            />
+                        ) : (
+                            <ConnectedAppsTable connectedApps={connectedApps} handleToggleModal={handleToggleModal} />
+                        )}
                     </div>
                 ) : (
                     <ConnectedAppsEmpty />

diff --git a/packages/account-v2/src/pages/ConnectedApps/ConnectedAppsResponsive.tsx b/packages/account-v2/src/pages/ConnectedApps/ConnectedAppsResponsive.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { OauthApps } from '@deriv/api-types';
+import { Button } from '@deriv-com/ui';
+import { formatDate, getFormattedAppScopes } from '../../utils/connectedAppsUtils';
+import { ConnectedAppsResponsiveColumn } from './ConnectedAppsResponsiveColumn';
+
+type TConnectedAppsResponsive = {
+    connectedApps: OauthApps;
+    handleToggleModal: (appId: number) => void;
+};
+
+export const ConnectedAppsResponsive = ({ connectedApps, handleToggleModal }: TConnectedAppsResponsive) => (
+    <div className='flex flex-col gap-8'>
+        {connectedApps.map(connectedApp => (
+            <div className='bg-solid-grey-2 rounded-default p-16' key={connectedApp.app_id}>
+                <div className='flex justify-between gap-16'>
+                    <ConnectedAppsResponsiveColumn description={connectedApp.name} title='Name' />
+                    <ConnectedAppsResponsiveColumn
+                        description={connectedApp.last_used && formatDate(connectedApp.last_used)}
+                        style='w-80'
+                        title='Last Login'
+                    />
+                </div>
+                <div className='flex justify-between gap-16'>
+                    <ConnectedAppsResponsiveColumn
+                        description={getFormattedAppScopes(connectedApp.scopes)}
+                        title='Permission'
+                    />
+                    <div className='flex items-end'>
+                        <Button
+                            className='whitespace-nowrap'
+                            color='black'
+                            onClick={() => handleToggleModal(connectedApp.app_id)}
+                            rounded='sm'
+                            size='sm'
+                            textSize='sm'
+                            type='button'
+                            variant='outlined'
+                        >
+                            Revoke access
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        ))}
+    </div>
+);
diff --git a/packages/account-v2/src/pages/ConnectedApps/ConnectedAppsResponsiveColumn.tsx b/packages/account-v2/src/pages/ConnectedApps/ConnectedAppsResponsiveColumn.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Text } from '@deriv-com/ui';
+
+type TConnectedAppsResponsiveColumn = {
+    description?: string | null;
+    style?: string;
+    title: string;
+};
+
+export const ConnectedAppsResponsiveColumn = ({ description, style, title }: TConnectedAppsResponsiveColumn) => (
+    <div className={`flex flex-col gap-4 ${style}`}>
+        <Text size='sm' weight='bold'>
+            {title}
+        </Text>
+        <Text size='sm'>{description}</Text>
+    </div>
+);
diff --git a/packages/account-v2/src/pages/ConnectedApps/ConnectedAppsTable.tsx b/packages/account-v2/src/pages/ConnectedApps/ConnectedAppsTable.tsx
@@ -2,19 +2,19 @@ import React from 'react';
 import { OauthApps } from '@deriv/api-types';
 import { Button, Table } from '@deriv-com/ui';
 import { CONNECTED_APPS_HEADER } from '../../constants/connectedAppsConstants';
-import { getFormattedAppScopes } from '../../utils/connectedAppsUtils';
+import { formatDate, getFormattedAppScopes } from '../../utils/connectedAppsUtils';
 
 type TConnectedAppsTable = {
-    connectedApps: OauthApps | undefined;
+    connectedApps: OauthApps;
     handleToggleModal: (app_id: number) => void;
 };
 
 export const ConnectedAppsTable = ({ connectedApps, handleToggleModal }: TConnectedAppsTable) => {
-    const connectedAppsRows = connectedApps?.map(connectedApp => ({
-        app_id: connectedApp?.app_id,
-        lastLogin: connectedApp?.last_used,
-        name: connectedApp?.name,
-        permission: getFormattedAppScopes(connectedApp?.scopes),
+    const connectedAppsRows = connectedApps.map(connectedApp => ({
+        app_id: connectedApp.app_id,
+        lastLogin: connectedApp.last_used && formatDate(connectedApp.last_used),
+        name: connectedApp.name,
+        permission: getFormattedAppScopes(connectedApp.scopes),
     }));
 
     return (

diff --git a/packages/account-v2/src/utils/connectedAppsUtils.ts b/packages/account-v2/src/utils/connectedAppsUtils.ts
@@ -1,2 +1,6 @@
+import dayjs from 'dayjs';
+
 export const getFormattedAppScopes = (scopes: string[] | undefined) =>
     scopes?.map(scope => scope[0].toUpperCase() + scope.substring(1).toLowerCase()).join(', ');
+
+export const formatDate = (date: string) => dayjs(date).format('YYYY-MM-DD HH:mm:ss');