refactor progress update card presentation

Real-Dev-Squad · Dec 27, 2024 · c1dd839 · c1dd839
1 parent c149f05
commit c1dd839
Show file tree

Hide file tree

Showing 6 changed files with 117 additions and 98 deletions.
diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx
@@ -89,7 +89,7 @@ describe('ProgressUpdateCard Component', () => {
         );
 
         const readMoreButton = screen.getByTestId(
-            'progress-update-card-read-more-completed'
+            'progress-update-read-more-toggle-button'
         );
         expect(readMoreButton).toBeInTheDocument();
         expect(readMoreButton).toHaveTextContent('More');

diff --git a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardOverview.tsx b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardOverview.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import { FaAngleRight, FaRegClock } from 'react-icons/fa6';
+import Tooltip from '@/components/common/Tooltip/Tooltip';
+import styles from './progress-update-card.module.scss';
+import { USER_MANAGEMENT_URL } from '@/constants/url';
+import { ProgressUpdateCardOverviewProps } from './progressUpdateCard.types';
+import { UserAvatar } from '@/components/common/UserAvatar/UserAvatar';
+
+export default function ProgressUpdateCardOverview({
+    titleToShow,
+    dateInAgoFormat,
+    username,
+    userProfileImageUrl,
+    tooltipString,
+    isDevMode,
+    isExpanded,
+}: ProgressUpdateCardOverviewProps) {
+    return (
+        <div className={styles['progress-update-card__main']}>
+            <h3 className={styles['progress-update-card__title']}>
+                {titleToShow}
+            </h3>
+            <div className={styles['progress-update-card__details-container']}>
+                <Tooltip
+                    tooltipPosition={
+                        isDevMode
+                            ? { top: '-2.5rem', right: '0rem' }
+                            : { top: '-2.7rem', right: '-3rem' }
+                    }
+                    content={tooltipString}
+                >
+                    <span
+                        className={
+                            styles['progress-update-card__date-container']
+                        }
+                        onClick={(event) => event.stopPropagation()}
+                        data-testid="progress-update-card-date"
+                    >
+                        <FaRegClock />
+                        <span
+                            className={
+                                styles['progress-update-card__date-text']
+                            }
+                        >
+                            {dateInAgoFormat}
+                        </span>
+                    </span>
+                </Tooltip>
+
+                {isDevMode &&
+                    (username === '' ? (
+                        <UserAvatar userProfileImageUrl={userProfileImageUrl} />
+                    ) : (
+                        <Tooltip
+                            tooltipPosition={{
+                                top: '-2rem',
+                                right: '-2rem',
+                                width: '10rem',
+                            }}
+                            content={username}
+                        >
+                            <a
+                                href={`${USER_MANAGEMENT_URL}?username=${username}`}
+                                className={
+                                    styles[
+                                        'progress-update-card__user-info-link'
+                                    ]
+                                }
+                                data-testid="progress-update-card-user-info-link"
+                                onClick={(event) => event.stopPropagation()}
+                            >
+                                <UserAvatar
+                                    userProfileImageUrl={userProfileImageUrl}
+                                />
+                            </a>
+                        </Tooltip>
+                    ))}
+
+                <FaAngleRight
+                    data-testid="progress-update-card-angle-icon"
+                    className={`${styles['progress-update-card__angle-icon']} ${
+                        isExpanded
+                            ? styles[
+                                  'progress-update-card__angle-icon--expanded'
+                              ]
+                            : ''
+                    }`}
+                />
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx
@@ -1,14 +1,11 @@
 import React from 'react';
 import { useRouter } from 'next/router';
-import { FaAngleRight, FaRegClock } from 'react-icons/fa6';
-import Tooltip from '@/components/common/Tooltip/Tooltip';
 import styles from './progress-update-card.module.scss';
-import { USER_MANAGEMENT_URL } from '@/constants/url';
 import {
     ProgressUpdateCardPresentationProps,
     ProgressUpdateDataToShow,
 } from './progressUpdateCard.types';
-import { UserAvatar } from '@/components/common/UserAvatar/UserAvatar';
+import ProgressUpdateCardOverview from './ProgressUpdateCardOverview';
 
 export default function ProgressUpdateCardPresentation({
     titleToShow,
@@ -22,7 +19,6 @@ export default function ProgressUpdateCardPresentation({
     isExpanded,
 }: ProgressUpdateCardPresentationProps) {
     const router = useRouter();
-    console.log(isExpanded);
     const isDevMode = router.query.dev === 'true';
     const progressInfoMapping = dataToShowState.map(
         (datum: ProgressUpdateDataToShow) => (
@@ -45,7 +41,7 @@ export default function ProgressUpdateCardPresentation({
                             className={
                                 styles['progress-update-card__more-less-button']
                             }
-                            data-testid="progress-update-card-read-more-completed"
+                            data-testid="progress-update-read-more-toggle-button"
                         >
                             {datum.isReadMoreEnabled ? 'Less' : 'More'}
                         </button>
@@ -64,94 +60,15 @@ export default function ProgressUpdateCardPresentation({
                 data-testid="progress-update-card-container"
                 onClick={onCardClick}
             >
-                <div className={styles['progress-update-card__main']}>
-                    <h3 className={styles['progress-update-card__title']}>
-                        {titleToShow}
-                    </h3>
-                    <div
-                        className={
-                            styles['progress-update-card__details-container']
-                        }
-                    >
-                        <Tooltip
-                            tooltipPosition={
-                                isDevMode
-                                    ? { bottom: '2.7rem', right: '0rem' }
-                                    : { bottom: '2.7rem', right: '-3rem' }
-                            }
-                            content={tooltipString}
-                        >
-                            <span
-                                className={
-                                    styles[
-                                        'progress-update-card__date-container'
-                                    ]
-                                }
-                                onClick={(event) => event.stopPropagation()}
-                                data-testid="progress-update-card-date"
-                            >
-                                <FaRegClock />
-                                <span
-                                    className={
-                                        styles[
-                                            'progress-update-card__date-text'
-                                        ]
-                                    }
-                                >
-                                    {dateInAgoFormat}
-                                </span>
-                            </span>
-                        </Tooltip>
-
-                        {isDevMode &&
-                            (username === '' ? (
-                                <UserAvatar
-                                    userProfileImageUrl={userProfileImageUrl}
-                                />
-                            ) : (
-                                <Tooltip
-                                    tooltipPosition={{
-                                        top: '-2rem',
-                                        right: '-2rem',
-                                        width: '10rem',
-                                    }}
-                                    content={username}
-                                >
-                                    <a
-                                        href={`${USER_MANAGEMENT_URL}?username=${username}`}
-                                        className={
-                                            styles[
-                                                'progress-update-card__user-info-link'
-                                            ]
-                                        }
-                                        data-testid="progress-update-card-user-info-link"
-                                        onClick={(event) =>
-                                            event.stopPropagation()
-                                        }
-                                    >
-                                        <UserAvatar
-                                            userProfileImageUrl={
-                                                userProfileImageUrl
-                                            }
-                                        />
-                                    </a>
-                                </Tooltip>
-                            ))}
-
-                        <FaAngleRight
-                            data-testid="progress-update-card-angle-icon"
-                            className={`${
-                                styles['progress-update-card__angle-icon']
-                            } ${
-                                isExpanded
-                                    ? styles[
-                                          'progress-update-card__angle-icon--expanded'
-                                      ]
-                                    : ''
-                            }`}
-                        />
-                    </div>
-                </div>
+                <ProgressUpdateCardOverview
+                    titleToShow={titleToShow}
+                    dateInAgoFormat={dateInAgoFormat}
+                    username={username}
+                    userProfileImageUrl={userProfileImageUrl}
+                    tooltipString={tooltipString}
+                    isDevMode={isDevMode}
+                    isExpanded={isExpanded}
+                />
                 <div
                     className={`${
                         styles['progress-update-card__expand-content']

diff --git a/src/components/taskDetails/ProgressUpdateCard/latest-progress-update-card.module.scss b/src/components/taskDetails/ProgressUpdateCard/latest-progress-update-card.module.scss
@@ -54,7 +54,7 @@
         &:last-of-type {
             display: flex;
             justify-content: flex-end;
-            margin-right: 12px;
+            margin-right: 0.75rem;
         }
 
         .latest-progress-update-card__more-less-button {
@@ -69,7 +69,7 @@
             position: relative;
             display: flex;
             align-items: center;
-            justify-content: start;
+            justify-content: flex-start;
             gap: 4px;
             z-index: 0;
             cursor: pointer;

diff --git a/src/components/taskDetails/ProgressUpdateCard/progress-update-card.module.scss b/src/components/taskDetails/ProgressUpdateCard/progress-update-card.module.scss
@@ -36,7 +36,7 @@
         font-weight: 600;
         font-size: 1rem;
         flex-grow: 2;
-        margin: 8px 4px;
+        margin: 0.5rem 0.25rem;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;

diff --git a/src/components/taskDetails/ProgressUpdateCard/progressUpdateCard.types.ts b/src/components/taskDetails/ProgressUpdateCard/progressUpdateCard.types.ts
@@ -42,3 +42,13 @@ export type ProgressUpdateDataToShow = {
     shouldReadMoreButtonShow: boolean;
     isReadMoreEnabled: boolean;
 };
+
+export type ProgressUpdateCardOverviewProps = {
+    titleToShow: string;
+    dateInAgoFormat: string;
+    username: string;
+    userProfileImageUrl: string;
+    tooltipString: string;
+    isDevMode: boolean;
+    isExpanded: boolean;
+};