feat: Task By Id API integration, parent badge Updated

apps/web/app/hooks/features/useTeamTasks.ts

@@ -10,10 +10,12 @@ import {
 	deleteTaskAPI,
 	getTeamTasksAPI,
 	updateTaskAPI,
-	deleteEmployeeFromTasksAPI
+	deleteEmployeeFromTasksAPI,
+	getTasksByIdAPI
 } from '@app/services/client/api';
 import {
 	activeTeamState,
+	detailedTaskState,
 	memberActiveTaskIdState,
 	userState
 } from '@app/stores';
@@ -36,6 +38,7 @@ export function useTeamTasks() {
 
 	const setAllTasks = useSetRecoilState(teamTasksState);
 	const tasks = useRecoilValue(tasksByTeamState);
+	const [detailedTask, setDetailedTask] = useRecoilState(detailedTaskState);
 	// const allTaskStatistics = useRecoilValue(allTaskStatisticsState);
 	const tasksRef = useSyncRef(tasks);
 
@@ -53,6 +56,8 @@ export function useTeamTasks() {
 
 	// Queries hooks
 	const { queryCall, loading } = useQuery(getTeamTasksAPI);
+	const { queryCall: getTasksByIdQueryCall, loading: getTasksByIdLoading } =
+		useQuery(getTasksByIdAPI);
 
 	const { queryCall: deleteQueryCall, loading: deleteLoading } =
 		useQuery(deleteTaskAPI);
@@ -68,6 +73,16 @@ export function useTeamTasks() {
 		loading: deleteEmployeeFromTasksLoading
 	} = useQuery(deleteEmployeeFromTasksAPI);
 
+	const getTaskById = useCallback(
+		(taskId: string) => {
+			return getTasksByIdQueryCall(taskId).then((res) => {
+				setDetailedTask(res?.data?.data || null);
+				return res;
+			});
+		},
+		[getTasksByIdQueryCall, setDetailedTask]
+	);
+
 	const deepCheckAndUpdateTasks = useCallback(
 		(responseTasks: ITeamTask[], deepCheck?: boolean) => {
 			if (responseTasks && responseTasks.length) {
@@ -195,11 +210,17 @@ export function useTeamTasks() {
 	const updateTask = useCallback(
 		(task: Partial<ITeamTask> & { id: string }) => {
 			return updateQueryCall(task.id, task).then((res) => {
-				deepCheckAndUpdateTasks(res?.data?.items || [], true);
+				const updatedTasks = res?.data?.items || [];
+				deepCheckAndUpdateTasks(updatedTasks, true);
+
+				if (detailedTask) {
+					getTaskById(detailedTask.id);
+				}
+
 				return res;
 			});
 		},
-		[updateQueryCall, deepCheckAndUpdateTasks]
+		[updateQueryCall, deepCheckAndUpdateTasks, detailedTask, getTaskById]
 	);
 
 	const updateTitle = useCallback(
@@ -363,6 +384,9 @@ export function useTeamTasks() {
 		setAllTasks,
 		loadTeamTasksData,
 		deleteEmployeeFromTasks,
-		deleteEmployeeFromTasksLoading
+		deleteEmployeeFromTasksLoading,
+		getTaskById,
+		getTasksByIdLoading,
+		detailedTask
 	};
 }

apps/web/app/interfaces/ITask.ts

@@ -34,6 +34,7 @@ export type ITeamTask = {
 	parentId?: string;
 	parent?: ITeamTask;
 	issueType?: string;
+	rootEpic?: ITeamTask | null;
 } & Omit<ITaskStatusStack, 'tags'>;
 
 type SelectedTeam = Pick<

apps/web/app/services/server/requests/tasks.ts

@@ -81,7 +81,7 @@ export function getTaskByIdRequest({
 		'join[alias]': 'task',
 		'join[leftJoinAndSelect][members]': 'task.members',
 		'join[leftJoinAndSelect][user]': 'members.user',
-		rootEpic: 'true'
+		includeRootEpic: 'true'
 	} as Record<string, string>;
 
 	relations.forEach((rl, i) => {

apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx

@@ -124,9 +124,7 @@ const TaskSecondaryInfo = () => {
 					/>
 				</TaskRow>
 			)}
-			{task && task.parentId && task.parent?.issueType === 'Epic' && (
-				<EpicParent task={task} />
-			)}
+			{task && <EpicParent task={task} />}
 
 			{/* Task Status */}
 			<TaskRow labelTitle={trans.STATUS}>
@@ -245,22 +243,25 @@ const TaskSecondaryInfo = () => {
 const EpicParent = ({ task }: { task: ITeamTask }) => {
 	const { trans } = useTranslation('taskDetails');
 
-	return (task.issueType === 'Task' ||
-		task.issueType === 'Bug' ||
-		task.issueType === 'Story') &&
-		task.parentId &&
-		task.parent?.issueType === 'Epic' ? (
+	if (task.issueType === 'Story') {
+		return <></>;
+	}
+
+	return (!task.issueType ||
+		task.issueType === 'Task' ||
+		task.issueType === 'Bug') &&
+		task?.rootEpic ? (
 		<TaskRow labelTitle={trans.EPIC}>
 			<Tooltip
-				label={`#${task.parent?.taskNumber} ${task.parent?.title}`}
+				label={`#${task?.rootEpic?.number} ${task?.rootEpic?.title}`}
 				placement="auto"
 			>
-				<Link href={`/task/${task.parentId}`} target="_blank">
+				<Link href={`/task/${task?.rootEpic?.id}`} target="_blank">
 					<div className="flex items-center w-32">
 						<div className="bg-[#8154BA] p-1 rounded-sm mr-1">
 							<CategoryIcon />
 						</div>
-						<div className="text-xs overflow-hidden text-ellipsis whitespace-nowrap">{`#${task.parent?.taskNumber} ${task.parent?.title}`}</div>
+						<div className="text-xs overflow-hidden text-ellipsis whitespace-nowrap">{`#${task?.rootEpic?.number} ${task?.rootEpic?.title}`}</div>
 					</div>
 				</Link>
 			</Tooltip>

apps/web/components/pages/task/title-block/task-title-block.tsx

@@ -221,6 +221,20 @@ const TaskTitleBlock = () => {
 							</div>
 						)} */}
 						{/* Parent Issue/Task Name */}
+
+						{(!task?.issueType ||
+							task?.issueType === 'Task' ||
+							task?.issueType === 'Bug') &&
+							task?.rootEpic && (
+								<ParentTaskBadge
+									task={{
+										...task,
+										parentId: task?.rootEpic.id,
+										parent: task?.rootEpic
+									}}
+								/>
+							)}
+
 						<ParentTaskBadge task={task} />
 						<ParentTaskInput task={task} />
 					</div>
@@ -286,7 +300,7 @@ const ParentTaskBadge = ({ task }: { task: ITeamTask | null }) => {
 					}
 
 							`}
-						>{`#${task.parent.taskNumber}`}</span>
+						>{`#${task.parent.taskNumber || task.parent.number}`}</span>
 						{` - ${task.parent.title}`}
 					</span>
 				</Link>
@@ -295,7 +309,9 @@ const ParentTaskBadge = ({ task }: { task: ITeamTask | null }) => {
 				<Link href={`/task/${task.parentId}`} target="_blank">
 					<div className="flex justify-between space-x-4">
 						<div className="space-y-1">
-							<h4 className="text-xl font-semibold">{`#${task.parent.taskNumber}`}</h4>
+							<h4 className="text-xl font-semibold">{`#${
+								task.parent.taskNumber || task.parent.number
+							}`}</h4>
 							<p className="text-sm">{task.parent.title}</p>
 						</div>
 					</div>

apps/web/pages/api/tasks/[id].ts

@@ -22,14 +22,17 @@ export default async function handler(
 
 	switch (req.method) {
 		case 'GET':
-			await getTaskByIdRequest({
-				taskId: taskId as string,
-				tenantId,
-				organizationId,
-				bearer_token: access_token
-			});
-			break;
+			return $res.status(200).json(
+				await getTaskByIdRequest({
+					taskId: taskId as string,
+					tenantId,
+					organizationId,
+					bearer_token: access_token
+				})
+			);
+
 		case 'PUT':
+			delete body.rootEpic;
 			await updateTaskRequest(
 				{
 					data: body,

apps/web/pages/task/[id].tsx

@@ -10,8 +10,6 @@ import { withAuthentication } from 'lib/app/authenticator';
 import TaskDetailsAside from '@components/pages/task/task-details-aside';
 import { useEffect } from 'react';
 import { useRouter } from 'next/router';
-import { useRecoilState } from 'recoil';
-import { detailedTaskState } from '@app/stores';
 import TaskTitleBlock from '@components/pages/task/title-block/task-title-block';
 import { ArrowLeft } from 'lib/components/svgs';
 import { RelatedIssueCard } from '@components/pages/task/IssueCard';
@@ -21,26 +19,32 @@ import { ChildIssueCard } from '@components/pages/task/ChildIssueCard';
 
 const TaskDetails = () => {
 	const profile = useUserProfilePage();
-	const { tasks } = useTeamTasks();
-	const [task, setTask] = useRecoilState(detailedTaskState);
 	const { trans } = useTranslation('taskDetails');
 	const router = useRouter();
 	const { isTrackingEnabled, activeTeam } = useOrganizationTeams();
+	const {
+		getTaskById,
+		detailedTask: task,
+		getTasksByIdLoading
+	} = useTeamTasks();
 
 	const breadcrumb = [
 		{ title: activeTeam?.name || '', href: '/' },
 		...trans.BREADCRUMB
 	];
 
 	useEffect(() => {
-		if (router.isReady && router.query?.id && tasks.length > 0) {
-			const foundTask = tasks.find(
-				(x) => x.id === (router.query?.id as string)
-			);
-			// console.log(foundTask);
-			foundTask && setTask(foundTask);
+		if (
+			router.isReady &&
+			// If id is passed in query param
+			router.query?.id &&
+			// Either no task or task id doesn't match query id
+			(!task || (task && task.id !== router.query?.id)) &&
+			!getTasksByIdLoading
+		) {
+			getTaskById(router.query?.id as string);
 		}
-	}, [tasks, router.isReady, router.query?.id, setTask]);
+	}, [getTaskById, router, task, getTasksByIdLoading]);
 
 	return (
 		<MainLayout