Added status on outside of task card, Created a dev feature component (…

…#959) * Added status on outside of task card, Created a dev feature component * Added task maping for NEEDS_REVIEW * Added test for status on task card * Correct the test name * Removed any type * Correct the spelling of test case --------- Co-authored-by: Shubham Sharma <[email protected]> Co-authored-by: Amit Prakash <[email protected]> Co-authored-by: Shubham Kumar Singh <[email protected]>
Real-Dev-Squad · Oct 21, 2023 · 1846697 · 1846697
1 parent 6e9f0e5
commit 1846697
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 1 deletion.
diff --git a/__tests__/Unit/Components/DevFeature/DevFeature.test.tsx b/__tests__/Unit/Components/DevFeature/DevFeature.test.tsx
@@ -0,0 +1,28 @@
+import { screen } from '@testing-library/react';
+import DevFeature from '@/components/DevFeature';
+
+import { renderWithRouter } from '@/test_utils/createMockRouter';
+
+describe('DevFeature', () => {
+    it('Should not render anything when there is no dev flag', () => {
+        renderWithRouter(
+            <DevFeature>
+                <p>Children</p>
+            </DevFeature>
+        );
+
+        expect(screen.queryByText('Children')).not.toBeInTheDocument();
+    });
+    it('Should render children when dev=true', () => {
+        renderWithRouter(
+            <DevFeature>
+                <p>Children</p>
+            </DevFeature>,
+            {
+                query: { dev: 'true' },
+            }
+        );
+
+        expect(screen.queryByText('Children')).toBeInTheDocument();
+    });
+});
diff --git a/__tests__/Unit/Components/Tasks/Card.test.tsx b/__tests__/Unit/Components/Tasks/Card.test.tsx
@@ -531,4 +531,15 @@ describe('Task card', () => {
         const spanElement = screen.getByTestId('started-on');
         expect(spanElement).toHaveTextContent('Started 3 years ago'); // Mocked date from moment
     });
+    it('Should show the status of the task', () => {
+        // TODO: After UI change remove dev flag
+        renderWithRouter(
+            <Provider store={store()}>
+                <Card {...DEFAULT_PROPS} />
+            </Provider>,
+            { query: { dev: 'true' } }
+        );
+        const spanElement = screen.getByTestId('task-status');
+        expect(spanElement).toHaveTextContent('Completed');
+    });
 });
diff --git a/src/components/DevFeature/index.tsx b/src/components/DevFeature/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+type props = {
+    children: React.ReactNode;
+};
+
+export default function DevFeature({ children }: props) {
+    const router = useRouter();
+    const { dev } = router.query;
+    if (dev !== 'true') {
+        return <></>;
+    }
+    return <>{children}</>;
+}
diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss
@@ -445,3 +445,12 @@ $progressTextAnimation: #9babb8;
 .selfAlignEnd {
     align-self: end;
 }
+
+.statusContainer {
+    display: flex;
+    align-items: center;
+}
+
+.statusText {
+    margin-left: 0.5rem;
+}
diff --git a/src/components/tasks/card/index.tsx b/src/components/tasks/card/index.tsx
@@ -1,6 +1,7 @@
 import { FC, useState, useEffect, useRef, ChangeEvent } from 'react';
 import Image from 'next/image';
 import classNames from '@/components/tasks/card/card.module.scss';
+import DevFeature from '@/components/DevFeature';
 import getDateInString from '@/helperFunctions/getDateInString';
 import { useKeyLongPressed } from '@/hooks/useKeyLongPressed';
 import { CardProps } from '@/interfaces/task.type';
@@ -14,7 +15,7 @@ import {
     DUMMY_NAME,
     DUMMY_PROFILE as placeholderImageURL,
 } from '@/constants/display-sections';
-import { MAX_SEARCH_RESULTS } from '@/constants/constants';
+import { MAX_SEARCH_RESULTS, TASK_STATUS_MAPING } from '@/constants/constants';
 import moment from 'moment';
 import { Loader } from './Loader';
 import { TaskLevelMap } from './TaskLevelMap';
@@ -571,6 +572,25 @@ const Card: FC<CardProps> = ({
                         />
                     )}
                 </div>
+                <DevFeature>
+                    {cardDetails.status && (
+                        <div className={classNames.statusContainer} style={{}}>
+                            <p className={classNames.cardSpecialFont}>
+                                Status:
+                            </p>
+                            <p
+                                data-testid="task-status"
+                                className={classNames.statusText}
+                            >
+                                {TASK_STATUS_MAPING[
+                                    cardDetails.status as keyof typeof TASK_STATUS_MAPING
+                                ] ||
+                                    cardDetails.status ||
+                                    'NA'}
+                            </p>
+                        </div>
+                    )}
+                </DevFeature>
             </div>
 
             <div className={classNames.contributor}>

diff --git a/src/constants/constants.ts b/src/constants/constants.ts
@@ -11,3 +11,16 @@ export const STANDUP_ALREADY_SUBMITTED =
 export const DATEFORMAT = 'MMMM DD, YYYY ';
 export const STANDUPTIME = 6;
 export const TASK_RESULT_SIZE = 5;
+
+export const TASK_STATUS_MAPING = {
+    AVAILABLE: 'Available',
+    BLOCKED: 'Blocked',
+    COMPLETED: 'Completed',
+    VERIFIED: 'Verified',
+    IN_PROGRESS: 'In Progress',
+    ASSIGNED: 'Assigned',
+    MERGED: 'Merged',
+    APPROVED: 'Approved',
+    IN_REVIEW: 'In Review',
+    NEEDS_REVIEW: 'Needs Review',
+};