chore: Show my completed tasks without date categories (#1375)

* 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>

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 } =
+  const {
-    useTasks(entity);
+    todayOrPreviousTasks,
+    upcomingTasks,
+    unscheduledTasks,
+    completedTasks,
+  } = useTasks(entity);
   const theme = useTheme();
 
   const openCreateActivity = useOpenCreateActivityDrawer();
 
+  const [activeTabId] = useRecoilScopedState(
+    activeTabIdScopedState,
+    TasksRecoilScopeContext,
+  );
+
   if (
-    todayOrPreviousTasks?.length === 0 &&
+    (todayOrPreviousTasks?.length === 0 &&
       upcomingTasks?.length === 0 &&
-    unscheduledTasks?.length === 0
+      unscheduledTasks?.length === 0) ||
+    (activeTabId === 'done' && completedTasks?.length === 0)
   ) {
     return (
       <StyledTaskGroupEmptyContainer>
@@ -80,6 +93,13 @@ export function TaskGroups({ entity, showAddButton }: OwnProps) {
 
   return (
     <StyledContainer>
+      {activeTabId === 'done' ? (
+        <TaskList
+          tasks={completedTasks ?? []}
+          button={showAddButton && <AddTaskButton entity={entity} />}
+        />
+      ) : (
+        <>
           <TaskList
             title="Today"
             tasks={todayOrPreviousTasks ?? []}
@@ -102,6 +122,8 @@ export function TaskGroups({ entity, showAddButton }: OwnProps) {
               !upcomingTasks?.length && <AddTaskButton entity={entity} />
             }
           />
+        </>
+      )}
     </StyledContainer>
   );
 }

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 && (
         <StyledContainer>
           <StyledTitleBar>
+            {title && (
               <StyledTitle>
                 {title} <StyledCount>{tasks.length}</StyledCount>
               </StyledTitle>
+            )}
             {button}
           </StyledTitleBar>
           <StyledTaskRows>

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 =
+  const todayOrPreviousTasks = incompleteTaskData?.findManyActivities.filter(
-    activeTabId === 'to-do' || entity ? incompleteTaskData : completeTasksData;
+    (task) => {
-
-  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 = tasksData?.findManyActivities.filter((task) => {
+  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 unscheduledTasks = tasksData?.findManyActivities.filter((task) => {
+  const unscheduledTasks = incompleteTaskData?.findManyActivities.filter(
+    (task) => {
       return !task.dueAt;
-  });
+    },
+  );
+
+  const completedTasks = completeTasksData?.findManyActivities;
 
   return {
     todayOrPreviousTasks,
     upcomingTasks,
     unscheduledTasks,
+    completedTasks,
   };
 }