Refactor TaskDetails Component for Improved Maintainability and Performance

src/components/taskDetails/TaskDates.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import Details from './Details';
+import styles from './task-details.module.scss';
+import { TASK_EXTENSION_REQUEST_URL } from '@/constants/url';
+import convertTimeStamp from '@/helperFunctions/convertTimeStamp';
+
+interface TaskDatesProps {
+    isEditing: boolean;
+    isUserAuthorized: boolean;
+    startedOn: string;
+    endsOn: number;
+    newEndOnDate: string;
+    setNewEndOnDate: (date: string) => void;
+    handleBlurOfEndsOn: () => void;
+    isExtensionRequestPending: boolean;
+    taskId: string;
+}
+
+export const TaskDates: React.FC<TaskDatesProps> = ({
+    isEditing,
+    isUserAuthorized,
+    startedOn,
+    endsOn,
+    newEndOnDate,
+    setNewEndOnDate,
+    handleBlurOfEndsOn,
+    isExtensionRequestPending,
+    taskId,
+}) => {
+    const formattedEndsOn = endsOn ? convertTimeStamp(endsOn) : 'TBD';
+
+    return (
+        <>
+            <div className={styles.inputContainer}>
+                <Details detailType="Started On" value={startedOn} />
+            </div>
+            <div className={styles.inputContainer}>
+                {isExtensionRequestPending && (
+                    <Details
+                        detailType="Ends On"
+                        value={formattedEndsOn}
+                        url={`${TASK_EXTENSION_REQUEST_URL}?&q=${encodeURIComponent(
+                            `taskId:${taskId},status:PENDING`
+                        )}`}
+                    />
+                )}
+                {!isExtensionRequestPending && (
+                    <Details detailType="Ends On" value={formattedEndsOn} />
+                )}
+                {isEditing && isUserAuthorized && (
+                    <input
+                        id="endsOnTaskDetails"
+                        type="date"
+                        name="endsOn"
+                        onChange={(e) => setNewEndOnDate(e.target.value)}
+                        onBlur={handleBlurOfEndsOn}
+                        value={newEndOnDate}
+                        data-testid="endsOnTaskDetails"
+                        className={styles.inputField}
+                    />
+                )}
+            </div>
+        </>
+    );
+};

src/components/taskDetails/TaskDescription.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Textarea } from './index';
+import styles from './task-details.module.scss';
+
+interface TaskDescriptionProps {
+    isEditing: boolean;
+    purpose: string;
+    handleChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+
+export const TaskDescription: React.FC<TaskDescriptionProps> = ({
+    isEditing,
+    purpose,
+    handleChange,
+}) => {
+    if (isEditing) {
+        return (
+            <Textarea
+                name="purpose"
+                value={purpose}
+                onChange={handleChange}
+                testId="purpose-textarea"
+                placeholder="Enter task description"
+            />
+        );
+    }
+
+    return (
+        <p className={styles.taskDescription}>
+            {purpose || 'No description available'}
+        </p>
+    );
+};

src/components/taskDetails/TaskDetailsSection.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Details from './Details';
+import TaskDropDown from '../tasks/TaskDropDown';
+import ProgressContainer from '../tasks/card/progressContainer';
+import task, { taskStatusUpdateHandleProp } from '@/interfaces/task.type';
+import styles from './task-details.module.scss';
+
+interface TaskDetailsSectionProps {
+    isEditing: boolean;
+    type: string;
+    priority: string;
+    status: string;
+    link: string;
+    percentCompleted: number;
+    handleTaskStatusUpdate: (props: taskStatusUpdateHandleProp) => void;
+    taskDetailsData: task;
+}
+
+export const TaskDetailsSection: React.FC<TaskDetailsSectionProps> = ({
+    isEditing,
+    type,
+    priority,
+    status,
+    link,
+    percentCompleted,
+    handleTaskStatusUpdate,
+    taskDetailsData,
+}) => {
+    return (
+        <div className={styles['sub_details_grid_container']}>
+            <Details detailType={'Type'} value={type} />
+            <Details detailType={'Priority'} value={priority} />
+            {isEditing ? (
+                <TaskDropDown
+                    onChange={handleTaskStatusUpdate}
+                    oldStatus={status}
+                    oldProgress={percentCompleted}
+                />
+            ) : (
+                <Details detailType={'Status'} value={status} />
+            )}
+            <Details detailType={'Link'} value={link} />
+            <ProgressContainer
+                content={taskDetailsData}
+                key={percentCompleted}
+            />
+        </div>
+    );
+};

src/components/taskDetails/TaskHeader.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Button, Textarea } from './index';
+import styles from './task-details.module.scss';
+
+interface TaskHeaderProps {
+    isEditing: boolean;
+    setIsEditing: (isEditing: boolean) => void;
+    onSave: () => void;
+    onCancel: () => void;
+    title: string;
+    handleChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    isUserAuthorized: boolean;
+}
+
+export const TaskHeader: React.FC<TaskHeaderProps> = ({
+    isEditing,
+    setIsEditing,
+    onSave,
+    onCancel,
+    title,
+    handleChange,
+    isUserAuthorized,
+}) => {
+    if (isEditing) {
+        return (
+            <div className={styles.titleContainer}>
+                <Textarea
+                    name="title"
+                    value={title}
+                    onChange={handleChange}
+                    testId="title-textarea"
+                    placeholder="Enter task title"
+                />
+                <div className={styles.editMode}>
+                    <Button buttonName="Cancel" clickHandler={onCancel} />
+                    <Button buttonName="Save" clickHandler={onSave} />
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className={styles.titleContainer}>
+            <span data-testid="task-title" className={styles.taskTitle}>
+                {title}
+            </span>
+            {isUserAuthorized && (
+                <Button
+                    buttonName="Edit"
+                    clickHandler={setIsEditing}
+                    value={true}
+                    className={styles.editButton}
+                />
+            )}
+        </div>
+    );
+};

src/components/taskDetails/TaskParticipants.tsx

@@ -0,0 +1,55 @@
+import React, { useRef } from 'react';
+import Suggestions from '../tasks/SuggestionBox/Suggestions';
+import styles from './task-details.module.scss';
+
+interface TaskParticipantsProps {
+    isEditing: boolean;
+    isUserAuthorized: boolean;
+    assigneeName: string;
+    showSuggestion: boolean;
+    handleAssignment: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleAssigneSelect: (userName: string) => void;
+    setShowSuggestion: (show: boolean) => void;
+}
+
+export const TaskParticipants: React.FC<TaskParticipantsProps> = ({
+    isEditing,
+    isUserAuthorized,
+    assigneeName,
+    showSuggestion,
+    handleAssignment,
+    handleAssigneSelect,
+    setShowSuggestion,
+}) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    return (
+        <>
+            <div className={styles.inputContainer}>
+                <label htmlFor="assigneeInput" className={styles.detailType}>
+                    Assignee:
+                </label>
+                <div className={styles.inputContainer}>
+                    {isEditing && isUserAuthorized ? (
+                        <Suggestions
+                            handleClick={handleAssigneSelect}
+                            assigneeName={assigneeName}
+                            showSuggestion={showSuggestion}
+                            handleAssignment={handleAssignment}
+                            setShowSuggestion={setShowSuggestion}
+                            ref={inputRef}
+                        />
+                    ) : (
+                        <span className={styles.detailValue}>
+                            {assigneeName}
+                        </span>
+                    )}
+                </div>
+            </div>
+            <div className={styles.inputContainer}>
+                <label className={styles.detailType}>Reporter:</label>
+                <span className={styles.detailValue}>Ankush</span>
+            </div>
+        </>
+    );
+};