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 &&
+      upcomingTasks?.length === 0 &&
-    unscheduledTasks?.length === 0
+      unscheduledTasks?.length === 0) ||
+    (activeTabId === 'done' && completedTasks?.length === 0)
   ) {
     return (
       <StyledTaskGroupEmptyContainer>
@@ -80,28 +93,37 @@ export function TaskGroups({ entity, showAddButton }: OwnProps) {
 
   return (
     <StyledContainer>
-      <TaskList
+      {activeTabId === 'done' ? (
-        title="Today"
+        <TaskList
-        tasks={todayOrPreviousTasks ?? []}
+          tasks={completedTasks ?? []}
-        button={showAddButton && <AddTaskButton entity={entity} />}
+          button={showAddButton && <AddTaskButton entity={entity} />}
-      />
+        />
-      <TaskList
+      ) : (
-        title="Upcoming"
+        <>
-        tasks={upcomingTasks ?? []}
+          <TaskList
-        button={
+            title="Today"
-          showAddButton &&
+            tasks={todayOrPreviousTasks ?? []}
-          !todayOrPreviousTasks?.length && <AddTaskButton entity={entity} />
+            button={showAddButton && <AddTaskButton entity={entity} />}
-        }
+          />
-      />
+          <TaskList
-      <TaskList
+            title="Upcoming"
-        title="Unscheduled"
+            tasks={upcomingTasks ?? []}
-        tasks={unscheduledTasks ?? []}
+            button={
-        button={
+              showAddButton &&
-          showAddButton &&
+              !todayOrPreviousTasks?.length && <AddTaskButton entity={entity} />
-          !todayOrPreviousTasks?.length &&
+            }
-          !upcomingTasks?.length && <AddTaskButton entity={entity} />
+          />
-        }
+          <TaskList
-      />
+            title="Unscheduled"
+            tasks={unscheduledTasks ?? []}
+            button={
+              showAddButton &&
+              !todayOrPreviousTasks?.length &&
+              !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>
-            <StyledTitle>
+            {title && (
-              {title} <StyledCount>{tasks.length}</StyledCount>
+              <StyledTitle>
-            </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) => {
+      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) => {
+  const upcomingTasks = incompleteTaskData?.findManyActivities.filter(
-    if (!task.dueAt) {
+    (task) => {
-      return false;
+      if (!task.dueAt) {
-    }
+        return false;
-    const dueDate = parseDate(task.dueAt).toJSDate();
+      }
-    const today = DateTime.now().endOf('day').toJSDate();
+      const dueDate = parseDate(task.dueAt).toJSDate();
-    return dueDate <= today;
+      const today = DateTime.now().endOf('day').toJSDate();
-  });
+      return dueDate > today;
+    },
+  );
 
-  const upcomingTasks = tasksData?.findManyActivities.filter((task) => {
+  const unscheduledTasks = incompleteTaskData?.findManyActivities.filter(
-    if (!task.dueAt) {
+    (task) => {
-      return false;
+      return !task.dueAt;
-    }
+    },
-    const dueDate = parseDate(task.dueAt).toJSDate();
+  );
-    const today = DateTime.now().endOf('day').toJSDate();
-    return dueDate > today;
-  });
 
-  const unscheduledTasks = tasksData?.findManyActivities.filter((task) => {
+  const completedTasks = completeTasksData?.findManyActivities;
-    return !task.dueAt;
-  });
 
   return {
     todayOrPreviousTasks,
     upcomingTasks,
     unscheduledTasks,
+    completedTasks,
   };
 }