2422 refactor scope components to improve dev experience (#2736)

* move scope inside record table

* fix imports

* update mock

* recordTable scope done

* RecordTable done

* fix board

* fix typo

* wip

* filter is working

* sort is working

* Tasks working

* Fix according to PR

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/activities/tasks/components/PageAddTaskButton.tsx

@@ -2,10 +2,18 @@ import { isNonEmptyString } from '@sniptt/guards';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { PageAddButton } from '@/ui/layout/page/PageAddButton';
-import { useFilter } from '@/ui/object/object-filter-dropdown/hooks/useFilter';
+import { useFilterDropdown } from '@/ui/object/object-filter-dropdown/hooks/useFilterDropdown';
 
-export const PageAddTaskButton = () => {
-  const { selectedFilter } = useFilter();
+type PageAddTaskButtonProps = {
+  filterDropdownId: string;
+};
+
+export const PageAddTaskButton = ({
+  filterDropdownId,
+}: PageAddTaskButtonProps) => {
+  const { selectedFilter } = useFilterDropdown({
+    filterDropdownId: filterDropdownId,
+  });
   const openCreateActivity = useOpenCreateActivityDrawer();
 
   const handleClick = () => {

front/src/modules/activities/tasks/components/TaskGroups.tsx

@@ -13,6 +13,7 @@ import { AddTaskButton } from './AddTaskButton';
 import { TaskList } from './TaskList';
 
 type TaskGroupsProps = {
+  filterDropdownId?: string;
   entity?: ActivityTargetableEntity;
   showAddButton?: boolean;
 };
@@ -51,13 +52,17 @@ const StyledContainer = styled.div`
   flex-direction: column;
 `;
 
-export const TaskGroups = ({ entity, showAddButton }: TaskGroupsProps) => {
+export const TaskGroups = ({
+  filterDropdownId,
+  entity,
+  showAddButton,
+}: TaskGroupsProps) => {
   const {
     todayOrPreviousTasks,
     upcomingTasks,
     unscheduledTasks,
     completedTasks,
-  } = useTasks(entity);
+  } = useTasks({ filterDropdownId: filterDropdownId, entity });
 
   const openCreateActivity = useOpenCreateActivityDrawer();
 

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

@@ -5,12 +5,21 @@ import { undefined } from 'zod';
 import { Activity } from '@/activities/types/Activity';
 import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
 import { useFindManyObjectRecords } from '@/object-record/hooks/useFindManyObjectRecords';
-import { useFilter } from '@/ui/object/object-filter-dropdown/hooks/useFilter';
+import { useFilterDropdown } from '@/ui/object/object-filter-dropdown/hooks/useFilterDropdown';
 import { parseDate } from '~/utils/date-utils';
 import { isDefined } from '~/utils/isDefined';
 
-export const useTasks = (entity?: ActivityTargetableEntity) => {
-  const { selectedFilter } = useFilter();
+type UseTasksProps = {
+  filterDropdownId?: string;
+  entity?: ActivityTargetableEntity;
+};
+
+export const useTasks = (props?: UseTasksProps) => {
+  const { filterDropdownId, entity } = props ?? {};
+
+  const { selectedFilter } = useFilterDropdown({
+    filterDropdownId: filterDropdownId,
+  });
 
   const { objects: activityTargets } = useFindManyObjectRecords({
     objectNamePlural: 'activityTargets',