Skip to content

Commit

Permalink
chore: Show my completed tasks without date categories (twentyhq#1375)
Browse files Browse the repository at this point in the history 
* Show my completed tasks without date categories

Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>

* Refactor the code

Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>

---------

Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
  • Loading branch information
@gitstart-twenty @Thiagomn1
gitstart-twenty and Thiagomn1 authored Sep 1, 2023
1 parent aa47579 commit f067476
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 58 deletions.
76 changes: 49 additions & 27 deletions front/src/modules/activities/tasks/components/TaskGroups.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 (
<StyledTaskGroupEmptyContainer>
Expand All @@ -80,28 +93,37 @@ export function TaskGroups({ entity, showAddButton }: OwnProps) {

return (
<StyledContainer>
<TaskList
title="Today"
tasks={todayOrPreviousTasks ?? []}
button={showAddButton && <AddTaskButton entity={entity} />}
/>
<TaskList
title="Upcoming"
tasks={upcomingTasks ?? []}
button={
showAddButton &&
!todayOrPreviousTasks?.length && <AddTaskButton entity={entity} />
}
/>
<TaskList
title="Unscheduled"
tasks={unscheduledTasks ?? []}
button={
showAddButton &&
!todayOrPreviousTasks?.length &&
!upcomingTasks?.length && <AddTaskButton entity={entity} />
}
/>
{activeTabId === 'done' ? (
<TaskList
tasks={completedTasks ?? []}
button={showAddButton && <AddTaskButton entity={entity} />}
/>
) : (
<>
<TaskList
title="Today"
tasks={todayOrPreviousTasks ?? []}
button={showAddButton && <AddTaskButton entity={entity} />}
/>
<TaskList
title="Upcoming"
tasks={upcomingTasks ?? []}
button={
showAddButton &&
!todayOrPreviousTasks?.length && <AddTaskButton entity={entity} />
}
/>
<TaskList
title="Unscheduled"
tasks={unscheduledTasks ?? []}
button={
showAddButton &&
!todayOrPreviousTasks?.length &&
!upcomingTasks?.length && <AddTaskButton entity={entity} />
}
/>
</>
)}
</StyledContainer>
);
}
10 changes: 6 additions & 4 deletions front/src/modules/activities/tasks/components/TaskList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
Expand Down Expand Up @@ -52,9 +52,11 @@ export function TaskList({ title, tasks, button }: OwnProps) {
{tasks && tasks.length > 0 && (
<StyledContainer>
<StyledTitleBar>
<StyledTitle>
{title} <StyledCount>{tasks.length}</StyledCount>
</StyledTitle>
{title && (
<StyledTitle>
{title} <StyledCount>{tasks.length}</StyledCount>
</StyledTitle>
)}
{button}
</StyledTitleBar>
<StyledTaskRows>
Expand Down
54 changes: 27 additions & 27 deletions front/src/modules/activities/tasks/hooks/useTasks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -20,11 +19,6 @@ export function useTasks(entity?: ActivityTargetableEntity) {
availableFilters: tasksFilters,
});

const [activeTabId] = useRecoilScopedState(
activeTabIdScopedState,
TasksRecoilScopeContext,
);

const [filters, setFilters] = useRecoilScopedState(
filtersScopedState,
TasksRecoilScopeContext,
Expand Down Expand Up @@ -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,
};
}

0 comments on commit f067476

Please sign in to comment.