From f0674767c1aa4229591d572a78739e89d0f721cd Mon Sep 17 00:00:00 2001 From: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com> Date: Fri, 1 Sep 2023 15:50:11 +0300 Subject: [PATCH] chore: Show my completed tasks without date categories (#1375) * Show my completed tasks without date categories Co-authored-by: Thiago Nascimbeni * Refactor the code Co-authored-by: Thiago Nascimbeni --------- Co-authored-by: Thiago Nascimbeni --- .../tasks/components/TaskGroups.tsx | 76 ++++++++++++------- .../activities/tasks/components/TaskList.tsx | 10 ++- .../activities/tasks/hooks/useTasks.ts | 54 ++++++------- 3 files changed, 82 insertions(+), 58 deletions(-) diff --git a/front/src/modules/activities/tasks/components/TaskGroups.tsx b/front/src/modules/activities/tasks/components/TaskGroups.tsx index 1ffbaf2f4..8ad51a300 100644 --- a/front/src/modules/activities/tasks/components/TaskGroups.tsx +++ b/front/src/modules/activities/tasks/components/TaskGroups.tsx @@ -2,10 +2,13 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer'; +import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext'; import { useTasks } from '@/activities/tasks/hooks/useTasks'; import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity'; import { Button } from '@/ui/button/components/Button'; import { IconCheckbox } from '@/ui/icon'; +import { activeTabIdScopedState } from '@/ui/tab/states/activeTabIdScopedState'; +import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { ActivityType } from '~/generated/graphql'; import { AddTaskButton } from './AddTaskButton'; @@ -51,16 +54,26 @@ const StyledContainer = styled.div` `; export function TaskGroups({ entity, showAddButton }: OwnProps) { - const { todayOrPreviousTasks, upcomingTasks, unscheduledTasks } = - useTasks(entity); + const { + todayOrPreviousTasks, + upcomingTasks, + unscheduledTasks, + completedTasks, + } = useTasks(entity); const theme = useTheme(); const openCreateActivity = useOpenCreateActivityDrawer(); + const [activeTabId] = useRecoilScopedState( + activeTabIdScopedState, + TasksRecoilScopeContext, + ); + if ( - todayOrPreviousTasks?.length === 0 && - upcomingTasks?.length === 0 && - unscheduledTasks?.length === 0 + (todayOrPreviousTasks?.length === 0 && + upcomingTasks?.length === 0 && + unscheduledTasks?.length === 0) || + (activeTabId === 'done' && completedTasks?.length === 0) ) { return ( @@ -80,28 +93,37 @@ export function TaskGroups({ entity, showAddButton }: OwnProps) { return ( - } - /> - - } - /> - - } - /> + {activeTabId === 'done' ? ( + } + /> + ) : ( + <> + } + /> + + } + /> + + } + /> + + )} ); } diff --git a/front/src/modules/activities/tasks/components/TaskList.tsx b/front/src/modules/activities/tasks/components/TaskList.tsx index c945f6195..f6624027b 100644 --- a/front/src/modules/activities/tasks/components/TaskList.tsx +++ b/front/src/modules/activities/tasks/components/TaskList.tsx @@ -6,7 +6,7 @@ import { TaskForList } from '@/activities/types/TaskForList'; import { TaskRow } from './TaskRow'; type OwnProps = { - title: string; + title?: string; tasks: TaskForList[]; button?: ReactElement | false; }; @@ -52,9 +52,11 @@ export function TaskList({ title, tasks, button }: OwnProps) { {tasks && tasks.length > 0 && ( - - {title} {tasks.length} - + {title && ( + + {title} {tasks.length} + + )} {button} diff --git a/front/src/modules/activities/tasks/hooks/useTasks.ts b/front/src/modules/activities/tasks/hooks/useTasks.ts index 89363999f..a98061279 100644 --- a/front/src/modules/activities/tasks/hooks/useTasks.ts +++ b/front/src/modules/activities/tasks/hooks/useTasks.ts @@ -9,7 +9,6 @@ import { currentUserState } from '@/auth/states/currentUserState'; import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState'; import { FilterOperand } from '@/ui/filter-n-sort/types/FilterOperand'; import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause'; -import { activeTabIdScopedState } from '@/ui/tab/states/activeTabIdScopedState'; import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState'; import { ActivityType, useGetActivitiesQuery } from '~/generated/graphql'; import { tasksFilters } from '~/pages/tasks/tasks-filters'; @@ -20,11 +19,6 @@ export function useTasks(entity?: ActivityTargetableEntity) { availableFilters: tasksFilters, }); - const [activeTabId] = useRecoilScopedState( - activeTabIdScopedState, - TasksRecoilScopeContext, - ); - const [filters, setFilters] = useRecoilScopedState( filtersScopedState, TasksRecoilScopeContext, @@ -86,34 +80,40 @@ export function useTasks(entity?: ActivityTargetableEntity) { }, }); - const tasksData = - activeTabId === 'to-do' || entity ? incompleteTaskData : completeTasksData; + const todayOrPreviousTasks = incompleteTaskData?.findManyActivities.filter( + (task) => { + if (!task.dueAt) { + return false; + } + const dueDate = parseDate(task.dueAt).toJSDate(); + const today = DateTime.now().endOf('day').toJSDate(); + return dueDate <= today; + }, + ); - const todayOrPreviousTasks = tasksData?.findManyActivities.filter((task) => { - if (!task.dueAt) { - return false; - } - const dueDate = parseDate(task.dueAt).toJSDate(); - const today = DateTime.now().endOf('day').toJSDate(); - return dueDate <= today; - }); + const upcomingTasks = incompleteTaskData?.findManyActivities.filter( + (task) => { + if (!task.dueAt) { + return false; + } + const dueDate = parseDate(task.dueAt).toJSDate(); + const today = DateTime.now().endOf('day').toJSDate(); + return dueDate > today; + }, + ); - const upcomingTasks = tasksData?.findManyActivities.filter((task) => { - if (!task.dueAt) { - return false; - } - const dueDate = parseDate(task.dueAt).toJSDate(); - const today = DateTime.now().endOf('day').toJSDate(); - return dueDate > today; - }); + const unscheduledTasks = incompleteTaskData?.findManyActivities.filter( + (task) => { + return !task.dueAt; + }, + ); - const unscheduledTasks = tasksData?.findManyActivities.filter((task) => { - return !task.dueAt; - }); + const completedTasks = completeTasksData?.findManyActivities; return { todayOrPreviousTasks, upcomingTasks, unscheduledTasks, + completedTasks, }; }