Merge pull request #940 from rjmacarthy/refactor/tasks-page

website: Refactor task page routes and repetition
This commit is contained in:
Keith Stevens
2023-01-28 16:07:42 +09:00
committed by GitHub
18 changed files with 174 additions and 271 deletions
+1 -1
View File
@@ -15,7 +15,7 @@ export const EmptyState = (props: EmptyStateProps) => {
<Box data-cy={props["data-cy"]} bg={backgroundColor} p="10" borderRadius="xl" shadow="base">
<Box display="flex" flexDirection="column" alignItems="center" gap="8" fontSize="lg">
<props.icon size="30" color="DarkOrange" />
<Text>{props.text}</Text>
<Text data-cy="cy-no-tasks">{props.text}</Text>
<NextLink href="/dashboard">
<Text color="blue.500">Go back to the dashboard</Text>
</NextLink>
@@ -0,0 +1,40 @@
import Head from "next/head";
import { useTranslation } from "next-i18next";
import { TaskEmptyState } from "src/components/EmptyState";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
import { TaskInfos } from "src/components/Tasks/TaskTypes";
import { ERROR_CODES, taskApiHooks } from "src/lib/constants";
import { getTypeSafei18nKey } from "src/lib/i18n";
import { TaskType } from "src/types/Task";
type TaskPageProps = {
type: TaskType;
};
export const TaskPage = ({ type }: TaskPageProps) => {
const { t } = useTranslation(["tasks", "common"]);
const taskApiHook = taskApiHooks[type];
const { tasks, isLoading, reset, trigger, error } = taskApiHook(type);
const taskInfo = TaskInfos.find((taskType) => taskType.type === type);
if (isLoading) {
return <LoadingScreen text={t("common:loading")} />;
}
if (tasks.length === 0 || error?.errorCode === ERROR_CODES.TASK_REQUESTED_TYPE_NOT_AVAILABLE) {
return <TaskEmptyState />;
}
const task = tasks[0];
return (
<>
<Head>
<title>{t(getTypeSafei18nKey(`${taskInfo.id}.label`))}</title>
<meta name="description" content={t(getTypeSafei18nKey(`${taskInfo.id}.desc`))} />
</Head>
<Task key={task.task.id} frontendId={task.id} task={task.task} trigger={trigger} mutate={reset} />
</>
);
};