{/* heading */}
- {t('editTask', { ns: 'tasks' })}
+ {t('edit-task', { ns: 'tasks' })}
{/* loading state */}
diff --git a/packages/web/src/pages/Tasks/components/List/TaskListItem.tsx b/packages/web/src/pages/Tasks/components/List/TaskListItem.tsx
index 574c1c86..4d4f5883 100644
--- a/packages/web/src/pages/Tasks/components/List/TaskListItem.tsx
+++ b/packages/web/src/pages/Tasks/components/List/TaskListItem.tsx
@@ -44,7 +44,7 @@ const TaskListItem = ({ task, ...props }: TaskListItemProps) => {
const updateTaskPromise = updateTaskAsync({ task: taskData });
toast.promise(updateTaskPromise, {
loading: isComplete ? t('marking-complete', { ns: 'tasks' }) : t('marking-incomplete', { ns: 'tasks' }),
- success: isComplete ? t('markedComplete', { ns: 'tasks' }) : t('markedIncomplete', { ns: 'tasks' }),
+ success: isComplete ? t('marked-complete', { ns: 'tasks' }) : t('marked-incomplete', { ns: 'tasks' }),
error: (error) => t('update-failed', { ns: 'tasks', message: error.message }),
});
};
@@ -53,7 +53,9 @@ const TaskListItem = ({ task, ...props }: TaskListItemProps) => {
-
{task.completed ? : }
- {task.title}
+
+ {task.title}
+
diff --git a/packages/web/src/pages/Tasks/components/TaskDetailLayout.test.tsx b/packages/web/src/pages/Tasks/components/TaskDetailLayout.test.tsx
index 9a1d2c7e..eaaf72ac 100644
--- a/packages/web/src/pages/Tasks/components/TaskDetailLayout.test.tsx
+++ b/packages/web/src/pages/Tasks/components/TaskDetailLayout.test.tsx
@@ -37,11 +37,11 @@ describe('TaskDetailLayout', () => {
it('should display a task', async () => {
// ARRANGE
- render();
- await screen.findByTestId('component-task-view');
+ render();
+ await screen.findByTestId('layout-task-detail');
// ASSERT
- expect(screen.getByTestId('component-task-view')).toBeDefined();
+ expect(screen.getByTestId('task-view')).toBeDefined();
});
it('should display task error', async () => {
@@ -52,11 +52,11 @@ describe('TaskDetailLayout', () => {
error: new Error(),
isLoading: false,
} as unknown as UseQueryResult);
- render();
- await screen.findByTestId('component-error-task');
+ render();
+ await screen.findByTestId('layout-task-detail-error');
// ASSERT
- expect(screen.getByTestId('component-error-task')).toBeDefined();
+ expect(screen.getByTestId('layout-task-detail-error')).toBeDefined();
});
it('should render loading state', async () => {
@@ -67,21 +67,21 @@ describe('TaskDetailLayout', () => {
error: undefined,
isLoading: true,
} as unknown as UseQueryResult);
- render();
- await screen.findByTestId('component-loading');
+ render();
+ await screen.findByTestId('layout-task-detail-loading');
// ASSERT
- expect(screen.getByTestId('component-loading')).toBeDefined();
+ expect(screen.getByTestId('layout-task-detail-loading')).toBeDefined();
});
it('should navigate back using close button', async () => {
// ARRANGE
const user = userEvent.setup();
- render();
- await screen.findByTestId('component-button-close');
+ render();
+ const closeButton = await screen.findByTestId('layout-task-detail-button-close');
// ACT
- await user.click(screen.getByTestId('component-button-close'));
+ await user.click(closeButton);
// ASSERT
expect(mockNavigate).toHaveBeenCalledTimes(1);
@@ -91,11 +91,11 @@ describe('TaskDetailLayout', () => {
it('should navigate to edit', async () => {
// ARRANGE
const user = userEvent.setup();
- render();
- await screen.findByTestId('component-button-edit');
+ render();
+ await screen.findByTestId('layout-task-detail-button-edit');
// ACT
- await user.click(screen.getByTestId('component-button-edit'));
+ await user.click(screen.getByTestId('layout-task-detail-button-edit'));
// ASSERT
expect(mockNavigate).toHaveBeenCalledTimes(1);
diff --git a/packages/web/src/pages/Tasks/components/TaskDetailLayout.tsx b/packages/web/src/pages/Tasks/components/TaskDetailLayout.tsx
index 33b097a7..d6d7eb26 100644
--- a/packages/web/src/pages/Tasks/components/TaskDetailLayout.tsx
+++ b/packages/web/src/pages/Tasks/components/TaskDetailLayout.tsx
@@ -1,11 +1,21 @@
-import { useNavigate, useParams } from 'react-router-dom';
-import { Check, Pencil, Trash, X } from 'lucide-react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import { Pencil, SearchSlash, Trash, X } from 'lucide-react';
import { useTranslation } from 'react-i18next';
-import type { BaseComponentProps } from '@react-starter/shared/types/components';
import { Skeleton } from '@react-starter/shared/components/shadcn/skeleton';
+import { Heading } from '@react-starter/shared/components/Text/Heading';
+import { Tooltip, TooltipTrigger, TooltipContent } from '@react-starter/shared/components/shadcn/tooltip';
import { Button } from '@react-starter/shared/components/shadcn/button';
import { ErrorAlert } from '@react-starter/shared/components/Alert/ErrorAlert';
+import {
+ Empty,
+ EmptyContent,
+ EmptyDescription,
+ EmptyHeader,
+ EmptyMedia,
+ EmptyTitle,
+} from '@react-starter/shared/components/shadcn/empty';
+import { ButtonGroup, ButtonGroupSeparator } from '@react-starter/shared/components/shadcn/button-group';
import { useGetTask } from '@/pages/Tasks/api/useGetTask';
import { TaskDeleteDialog } from '@/pages/Tasks/components/Delete/TaskDeleteDialog';
@@ -14,96 +24,137 @@ import { TaskView } from '@/pages/Tasks/components/View/TaskView';
/**
* The `TaskDetailLayout` component renders a layout for viewing and maintaining
* a single `Task`. Provides buttons and navigation to perform actions on the Task.
- * @param {BaseComponentProps} props - Component properties.
*/
-const TaskDetailLayout = ({ className, testId = 'layout-task-detail' }: BaseComponentProps) => {
+const TaskDetailLayout = ({ ...props }: React.ComponentProps<'div'>) => {
const { t } = useTranslation();
const navigate = useNavigate();
const { taskId } = useParams();
- const { data: task, error: taskError, isLoading: isLoadingTask } = useGetTask({ taskId: Number(taskId) });
+ const { data: task, error, isLoading } = useGetTask({ taskId: Number(taskId) });
- return (
-
- {/* Heading */}
-
- {!!task && (
-
-
-
- {t('task', { ns: 'tasks' })}: {task.title}
-
+ // Show loading skeleton while the task data is being fetched.
+ if (isLoading)
+ return (
+
+
+
+
+
+
+
- )}
- {isLoadingTask &&
}
-
- {/* Menu */}
-
- {task && (
-
- )}
- {task && (
-
-
-
- }
- onSuccess={() => navigate(-1)}
- />
- )}
-
-
-
- {taskError && (
-
- )}
-
- {isLoadingTask && (
-
-
-
-
-
-
+
+ );
+
+ // Show error alert if there was an error fetching the task.
+ if (error) {
+ return (
+
+ );
+ }
- {task && (
-
-
+ // Show not found if the task does not exist.
+ if (!task)
+ return (
+
+
+
+
+
+ {t('errors.not-found', { ns: 'tasks' })}
+ {t('errors.unable-to-find-task', { ns: 'tasks' })}
+
+
+
+
+
+
+ );
+
+ // Render the task detail layout once the task data is available.
+ return (
+
+ {/* Heading */}
+
+
+ {task.title}
- )}
+
+ {/* Menu */}
+
+
+
+
+
+ {t('edit-task', { ns: 'tasks' })}
+
+
+
+
+
+
+
+ }
+ onSuccess={() => navigate(-1)}
+ />
+
+
+
+
+
+
+
+ {t('go-back-to-task-list', { ns: 'tasks' })}
+
+
+
+
+
+
+
);
};
diff --git a/packages/web/src/pages/Tasks/components/TasksPageBreadcrumbs.test.tsx b/packages/web/src/pages/Tasks/components/TasksPageBreadcrumbs.test.tsx
index 64d7c8da..bba6ebb2 100644
--- a/packages/web/src/pages/Tasks/components/TasksPageBreadcrumbs.test.tsx
+++ b/packages/web/src/pages/Tasks/components/TasksPageBreadcrumbs.test.tsx
@@ -3,7 +3,7 @@ import { Navigate, Route, Routes } from 'react-router-dom';
import { render, screen } from '@/test/test-utils';
-import TasksPageBreadcrumbs from './TasksPageBreadcrumbs';
+import { TasksPageBreadcrumbs } from './TasksPageBreadcrumbs';
describe('TasksPageBreadcrumbs', () => {
it('should render successfully', async () => {
diff --git a/packages/web/src/pages/Tasks/components/TasksPageBreadcrumbs.tsx b/packages/web/src/pages/Tasks/components/TasksPageBreadcrumbs.tsx
index 5c6ed945..378d8042 100644
--- a/packages/web/src/pages/Tasks/components/TasksPageBreadcrumbs.tsx
+++ b/packages/web/src/pages/Tasks/components/TasksPageBreadcrumbs.tsx
@@ -61,7 +61,7 @@ const TasksPageBreadcrumbs = ({ className, testId = 'page-tasks-breadcrumbs' }:
{!!task && (
-
+
{task.title}
@@ -83,4 +83,4 @@ const TasksPageBreadcrumbs = ({ className, testId = 'page-tasks-breadcrumbs' }:
);
};
-export default TasksPageBreadcrumbs;
+export { TasksPageBreadcrumbs };
diff --git a/packages/web/src/pages/Tasks/components/View/TaskView.test.tsx b/packages/web/src/pages/Tasks/components/View/TaskView.test.tsx
index 1a6f3f13..cc4d2bcc 100644
--- a/packages/web/src/pages/Tasks/components/View/TaskView.test.tsx
+++ b/packages/web/src/pages/Tasks/components/View/TaskView.test.tsx
@@ -26,11 +26,11 @@ describe('TaskView', () => {
isLoading: true,
isError: false,
} as unknown as UseQueryResult);
- render();
- await screen.findByTestId('component-user-loading');
+ render();
+ const loading = await screen.findByTestId('task-view-user-loading');
// ASSERT
- expect(screen.getByTestId('component-user-loading')).toBeDefined();
+ expect(loading).toBeDefined();
});
it('should show user error state', async () => {
@@ -41,11 +41,11 @@ describe('TaskView', () => {
isLoading: false,
isError: true,
} as unknown as UseQueryResult);
- render();
- await screen.findByTestId('component-user-error');
+ render();
+ const error = await screen.findByTestId('task-view-user-error');
// ASSERT
- expect(screen.getByTestId('component-user-error')).toBeDefined();
+ expect(error).toBeDefined();
});
it('should show user content', async () => {
@@ -56,11 +56,11 @@ describe('TaskView', () => {
isLoading: false,
isError: false,
} as unknown as UseQueryResult);
- render();
- await screen.findByTestId('component-user-name');
+ render();
+ const userName = await screen.findByTestId('task-view-user-name');
// ASSERT
- expect(screen.getByTestId('component-user-name')).toHaveTextContent(userFixture1.name);
+ expect(userName).toHaveTextContent(userFixture1.name);
});
it('should show complete task', async () => {
@@ -71,11 +71,11 @@ describe('TaskView', () => {
isLoading: false,
isError: false,
} as unknown as UseQueryResult);
- render();
- await screen.findByTestId('component-status');
+ render();
+ const status = await screen.findByTestId('task-view-status');
// ASSERT
- expect(screen.getByTestId('component-status')).toHaveTextContent(/^COMPLETE$/);
+ expect(status).toHaveTextContent(/^COMPLETE$/i);
});
it('should show incomplete task', async () => {
@@ -86,10 +86,10 @@ describe('TaskView', () => {
isLoading: false,
isError: false,
} as unknown as UseQueryResult);
- render();
- await screen.findByTestId('component-status');
+ render();
+ const status = await screen.findByTestId('task-view-status');
// ASSERT
- expect(screen.getByTestId('component-status')).toHaveTextContent(/^INCOMPLETE$/);
+ expect(status).toHaveTextContent(/^INCOMPLETE$/i);
});
});
diff --git a/packages/web/src/pages/Tasks/components/View/TaskView.tsx b/packages/web/src/pages/Tasks/components/View/TaskView.tsx
index 3664254d..560e2dd6 100644
--- a/packages/web/src/pages/Tasks/components/View/TaskView.tsx
+++ b/packages/web/src/pages/Tasks/components/View/TaskView.tsx
@@ -1,7 +1,6 @@
import { useTranslation } from 'react-i18next';
+import { cn } from 'cn';
-import { cn } from '@react-starter/shared/utils/css';
-import { BaseComponentProps } from '@react-starter/shared/types/components';
import { Badge } from '@react-starter/shared/components/shadcn/badge';
import { Skeleton } from '@react-starter/shared/components/shadcn/skeleton';
@@ -11,9 +10,8 @@ import { useGetUser } from '@/common/api/useGetUser';
/**
* Properties for the `TaskView` component.
* @param task - A `Task` object.
- * @see {@link BaseComponentProps}
*/
-interface TaskViewProps extends BaseComponentProps {
+interface TaskViewProps extends React.ComponentProps<'div'> {
task: Task;
}
@@ -22,34 +20,37 @@ interface TaskViewProps extends BaseComponentProps {
* This component is for the read-only display of a single Task.
* @param {TaskViewProps} props - Component properties.
*/
-export const TaskView = ({ className, task, testId = 'task-view' }: TaskViewProps) => {
+const TaskView = ({ className, task, ...props }: TaskViewProps) => {
const { t } = useTranslation();
const { data: user, isLoading: isLoadingUser, isError: isErrorUser } = useGetUser({ userId: task.userId });
return (
-
-
-
Title
-
- {task.title}
-
-
-
-
-
Assignee
+
+
+
{t('label.assignee', { ns: 'tasks' })}
- {isLoadingUser && }
- {isErrorUser && {t('unable-to-find-short')}}
- {user && {user.name}}
+ {isLoadingUser && }
+ {isErrorUser && (
+
+ {t('errors.not-found', { ns: 'tasks' })}
+
+ )}
+ {user && {user.name}}
-
-
Status
-
- {task.completed ? 'COMPLETE' : 'INCOMPLETE'}
+
+
{t('label.status', { ns: 'tasks' })}
+
+ {task.completed ? t('complete', { ns: 'tasks' }) : t('incomplete', { ns: 'tasks' })}
);
};
+
+export { TaskView };