Feat/filter activity inbox (#1032)

* Move files

* Add filtering for tasks inbox

* Add filter dropdown for single entity

* Minor

* Fill empty button

* Refine logic for filter dropdown

* remove log

* Fix unwanted change

* Set current user as default filter

* Add avatar on filter

* Improve initialization of assignee filter

* Add story for Tasks page

* Add more stories

* Add sotry with no tasks

* Improve dates

* Enh tests

---------

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>

front/src/modules/activities/hooks/useCompleteTask.ts

@@ -0,0 +1,35 @@
+import { useCallback } from 'react';
+import { getOperationName } from '@apollo/client/utilities';
+
+import {
+  GET_ACTIVITIES,
+  GET_ACTIVITIES_BY_TARGETS,
+} from '@/activities/queries';
+import { Activity, useUpdateActivityMutation } from '~/generated/graphql';
+
+type Task = Pick<Activity, 'id'>;
+
+export function useCompleteTask(task: Task) {
+  const [updateActivityMutation] = useUpdateActivityMutation();
+  const completeTask = useCallback(
+    (value: boolean) => {
+      updateActivityMutation({
+        variables: {
+          where: { id: task.id },
+          data: {
+            completedAt: value ? new Date().toISOString() : null,
+          },
+        },
+        refetchQueries: [
+          getOperationName(GET_ACTIVITIES_BY_TARGETS) ?? '',
+          getOperationName(GET_ACTIVITIES) ?? '',
+        ],
+      });
+    },
+    [task, updateActivityMutation],
+  );
+
+  return {
+    completeTask,
+  };
+}

front/src/modules/activities/hooks/useInitializeTasksFilters.ts

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+import { availableFiltersScopedState } from '@/ui/filter-n-sort/states/availableFiltersScopedState';
+import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+
+import { TasksContext } from '../states/TasksContext';
+
+export function useInitializeTasksFilters({
+  availableFilters,
+}: {
+  availableFilters: FilterDefinition[];
+}) {
+  const [, setAvailableFilters] = useRecoilScopedState(
+    availableFiltersScopedState,
+    TasksContext,
+  );
+
+  useEffect(() => {
+    setAvailableFilters(availableFilters);
+  }, [setAvailableFilters, availableFilters]);
+}

front/src/modules/activities/hooks/useTasks.ts

@@ -0,0 +1,103 @@
+import { useEffect } from 'react';
+import { DateTime } from 'luxon';
+import { useRecoilState } from 'recoil';
+
+import { currentUserState } from '@/auth/states/currentUserState';
+import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
+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';
+import { parseDate } from '~/utils/date-utils';
+
+import { TasksContext } from '../states/TasksContext';
+
+import { useInitializeTasksFilters } from './useInitializeTasksFilters';
+
+export function useTasks() {
+  useInitializeTasksFilters({
+    availableFilters: tasksFilters,
+  });
+
+  const [activeTabId] = useRecoilScopedState(
+    activeTabIdScopedState,
+    TasksContext,
+  );
+
+  const [filters, setFilters] = useRecoilScopedState(
+    filtersScopedState,
+    TasksContext,
+  );
+
+  // If there is no filter, we set the default filter to the current user
+  const [currentUser] = useRecoilState(currentUserState);
+
+  useEffect(() => {
+    if (currentUser && !filters.length) {
+      setFilters([
+        {
+          field: 'assigneeId',
+          type: 'entity',
+          value: currentUser.id,
+          operand: 'is',
+          displayValue: currentUser.displayName,
+          displayAvatarUrl: currentUser.avatarUrl ?? undefined,
+        },
+      ]);
+    }
+  }, [currentUser, filters, setFilters]);
+
+  const whereFilters = Object.assign(
+    {},
+    ...filters.map((filter) => {
+      return turnFilterIntoWhereClause(filter);
+    }),
+  );
+
+  const { data: completeTasksData } = useGetActivitiesQuery({
+    variables: {
+      where: {
+        type: { equals: ActivityType.Task },
+        completedAt: { not: { equals: null } },
+        ...whereFilters,
+      },
+    },
+  });
+
+  const { data: incompleteTaskData } = useGetActivitiesQuery({
+    variables: {
+      where: {
+        type: { equals: ActivityType.Task },
+        completedAt: { equals: null },
+        ...whereFilters,
+      },
+    },
+  });
+
+  const tasksData =
+    activeTabId === 'done' ? completeTasksData : incompleteTaskData;
+
+  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) => {
+    if (!task.dueAt) {
+      return false;
+    }
+    const dueDate = parseDate(task.dueAt).toJSDate();
+    const today = DateTime.now().endOf('day').toJSDate();
+    return dueDate > today;
+  });
+
+  return {
+    todayOrPreviousTasks,
+    upcomingTasks,
+  };
+}