Skip to content

Commit

Permalink
refactor task deatils
Browse files Browse the repository at this point in the history
  • Loading branch information
@vinit717
vinit717 committed Jul 26, 2023
1 parent 57259d2 commit d9966a3
Showing 1 changed file with 55 additions and 63 deletions.
118 changes: 55 additions & 63 deletions src/components/taskDetails/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import React, {
ChangeEvent,
FC,
useEffect,
useContext,
useRef,
useState,
ReactElement,
useEffect,
} from 'react';
import TaskContainer from './TaskContainer';
import Details from './Details';
Expand All @@ -19,10 +17,13 @@ import {
} from '@/app/services/taskDetailsApi';

import useUserData from '@/hooks/useUserData';
import { ButtonProps, TextAreaProps } from '@/interfaces/taskDetails.type';
import {
ButtonProps,
TextAreaProps,
taskDetailsDataType,
} from '@/interfaces/taskDetails.type';
import Layout from '@/components/Layout';
import TaskDependency from '@/components/taskDetails/taskDependency';
import { parseDependencyValue } from '@/utils/parseDependency';
import { useGetProgressDetailsQuery } from '@/app/services/progressesApi';
import { ProgressDetailsData } from '@/types/standup.type';
import { getDateFromTimestamp } from '@/utils/getDateFromTimestamp';
Expand Down Expand Up @@ -57,75 +58,63 @@ type Props = {
url?: string;
taskID: string;
};

const TaskDetails: FC<Props> = ({ taskID }) => {
const router = useRouter();
const { query } = router;
const isDevModeEnabled = query.dev === 'true' ? true : false;

const { data: userData, isUserAuthorized } = useUserData();
const { isUserAuthorized } = useUserData();

const [isEditing, setIsEditing] = useState<boolean>(false);
const initialDataRef = useRef<Record<string, any> | undefined>({});
const { data, isError, isLoading, isFetching } =
useGetTaskDetailsQuery(taskID);

const taskDependencyIds: string[] = !isFetching
? data?.taskData?.dependsOn || []
: [];

const { SUCCESS, ERROR } = ToastTypes;

const taskDetailsData = data?.taskData;
const [taskDetails, setTaskDetails] = useState<
Record<string, any> | undefined
>({});
const [editedDetails, setEditedDetails] = useState({});
const taskDetailsData: taskDetailsDataType['taskData'] = data?.taskData;

const [updateTaskDetails] = useUpdateTaskDetailsMutation();
const [updatedDependencies, setUpdatedDependencies] = useState<string[]>(
taskDetails?.dependsOn || []
);
const [editedTaskDetails, setEditedTaskDetails] = useState<
taskDetailsDataType['taskData'] | undefined
>(data?.taskData);

console.log('edittaskdetails', editedTaskDetails);
useEffect(() => {
const fetchedData = data?.taskData;
setTaskDetails(taskDetailsData);
initialDataRef.current = fetchedData;
}, [isLoading, data]);

function handleChange(
event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
) {
const { name, value } = event.target;

if (name === 'dependsOn') {
const updatedDependencies = parseDependencyValue(value);
setUpdatedDependencies(updatedDependencies);
if (data?.taskData) {
setEditedTaskDetails(data.taskData);
}
const formData = {
...taskDetails,
[event.target.name]: event.target.value,
dependsOn: [...updatedDependencies],
};
setEditedDetails(formData);
setTaskDetails(formData);
}
}, [data]);

const [updateTaskDetails] = useUpdateTaskDetailsMutation();

function onCancel() {
setIsEditing(false);
setTaskDetails(initialDataRef.current);
setEditedTaskDetails(taskDetailsData);
}

async function onSave() {
setIsEditing(false);
updateTaskDetails({
editedDetails,
await updateTaskDetails({
editedDetails: editedTaskDetails,
taskID,
})
.unwrap()
.then(() => toast(SUCCESS, 'Successfully saved'))
.catch((error) => toast(ERROR, error.data.message));
setTaskDetails(initialDataRef.current);
}

function handleChange(
event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
) {
const { name, value } = event.target;

setEditedTaskDetails((prevState) => ({
...prevState!,
...(prevState
? { [name]: name === 'dependsOn' ? [value] : value }
: {}),
}));
}

function renderLoadingComponent() {
Expand Down Expand Up @@ -169,7 +158,7 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
{isEditing ? (
<Textarea
name="title"
value={taskDetails?.title}
value={editedTaskDetails?.title}
onChange={handleChange}
testId="title-textarea"
/>
Expand All @@ -178,7 +167,7 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
data-testid="task-title"
className={classNames.taskTitle}
>
{taskDetails?.title}
{taskDetailsData?.title}
</span>
)}
{!isEditing ? (
Expand Down Expand Up @@ -209,15 +198,15 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
{isEditing ? (
<Textarea
name="purpose"
value={taskDetails?.purpose}
value={editedTaskDetails?.purpose}
onChange={handleChange}
testId="purpose-textarea"
/>
) : (
<p>
{!taskDetails?.purpose
{!taskDetailsData?.purpose
? 'No description available'
: taskDetails?.purpose}
: taskDetailsData?.purpose}
</p>
)}
</TaskContainer>
Expand All @@ -229,20 +218,20 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
>
<Details
detailType={'Type'}
value={taskDetails?.type}
value={taskDetailsData?.type}
/>
<Details
detailType={'Priority'}
value={taskDetails?.priority}
value={taskDetailsData?.priority}
/>
<Details
detailType={'Status'}
value={taskDetails?.status}
value={taskDetailsData?.status}
/>
<Details
{/* <Details
detailType={'Link'}
value={taskDetails?.featureUrl}
/>
value={taskDetailsData?.featureUrl}
/> */}
</div>
</TaskContainer>
{isDevModeEnabled && (
Expand All @@ -257,9 +246,12 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
}
isEditing={isEditing}
updatedDependencies={
updatedDependencies
taskDetailsData?.dependsOn || []
}
handleChange={handleChange}
setEditedTaskDetails={
setEditedTaskDetails
}
/>
</TaskContainer>
<TaskContainer
Expand Down Expand Up @@ -296,9 +288,9 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
<Details
detailType={'Assignee'}
value={
taskDetails?.type === 'feature'
? taskDetails?.assignee
: taskDetails?.participants?.join(
taskDetailsData?.type === 'feature'
? taskDetailsData?.assignee
: taskDetailsData?.participants?.join(
' , '
)
}
Expand All @@ -314,15 +306,15 @@ const TaskDetails: FC<Props> = ({ taskID }) => {
hasImg={true}
>
<Details
detailType={'StartedOn'}
detailType={'Started On'}
value={convertTimeStamp(
taskDetails?.startedOn
taskDetailsData?.startedOn ?? 0
)}
/>
<Details
detailType={'EndsOn'}
detailType={'Ends On'}
value={convertTimeStamp(
taskDetails?.endsOn
taskDetailsData?.endsOn ?? 0
)}
/>
</TaskContainer>
Expand Down

0 comments on commit d9966a3

Please sign in to comment.