admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
bosiraphael
2023-11-28 18:24:18 +01:00
committed by GitHub
parent 9d3e000055
commit ade41c916d
60 changed files with 651 additions and 529 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
front/src/pages/tasks/Tasks.tsx
View File

@ -11,7 +11,6 @@ import { PageHeader } from '@/ui/layout/page/PageHeader';
import { TabList } from '@/ui/layout/tab/components/TabList';
import { TopBar } from '@/ui/layout/top-bar/TopBar';
import { ObjectFilterDropdownButton } from '@/ui/object/object-filter-dropdown/components/ObjectFilterDropdownButton';
import { ObjectFilterDropdownScope } from '@/ui/object/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { TasksEffect } from './TasksEffect';
@ -45,38 +44,36 @@ export const Tasks = () => {
},
];
const filterDropdownId = 'tasks-assignee-filter';
return (
<PageContainer>
<RecoilScope CustomRecoilScopeContext={TasksRecoilScopeContext}>
<ObjectFilterDropdownScope filterScopeId="tasks-filter-scope">
<TasksEffect />
<PageHeader title="Tasks" Icon={IconCheckbox}>
<PageAddTaskButton />
</PageHeader>
<PageBody>
<StyledTasksContainer>
<TopBar
leftComponent={
<StyledTabListContainer>
<TabList
context={TasksRecoilScopeContext}
tabs={TASK_TABS}
/>
</StyledTabListContainer>
}
rightComponent={
<ObjectFilterDropdownButton
key="tasks-filter-dropdown-button"
hotkeyScope={{
scope: RelationPickerHotkeyScope.RelationPicker,
}}
/>
}
/>
<TaskGroups />
</StyledTasksContainer>
</PageBody>
</ObjectFilterDropdownScope>
<TasksEffect filterDropdownId={filterDropdownId} />
<PageHeader title="Tasks" Icon={IconCheckbox}>
<PageAddTaskButton filterDropdownId={filterDropdownId} />
</PageHeader>
<PageBody>
<StyledTasksContainer>
<TopBar
leftComponent={
<StyledTabListContainer>
<TabList context={TasksRecoilScopeContext} tabs={TASK_TABS} />
</StyledTabListContainer>
}
rightComponent={
<ObjectFilterDropdownButton
filterDropdownId={filterDropdownId}
key="tasks-filter-dropdown-button"
hotkeyScope={{
scope: RelationPickerHotkeyScope.RelationPicker,
}}
/>
}
/>
<TaskGroups filterDropdownId={filterDropdownId} />
</StyledTasksContainer>
</PageBody>
</RecoilScope>
</PageContainer>
);

13
front/src/pages/tasks/TasksEffect.tsx
View File

@ -2,14 +2,21 @@ import { useEffect } from 'react';
import { useRecoilValue } from 'recoil';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { useFilter } from '@/ui/object/object-filter-dropdown/hooks/useFilter';
import { useFilterDropdown } from '@/ui/object/object-filter-dropdown/hooks/useFilterDropdown';
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
import { tasksFilterDefinitions } from './tasks-filter-definitions';
export const TasksEffect = () => {
type TasksEffectProps = {
filterDropdownId: string;
};
export const TasksEffect = ({ filterDropdownId }: TasksEffectProps) => {
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
const { setSelectedFilter, setAvailableFilterDefinitions } = useFilter();
const { setSelectedFilter, setAvailableFilterDefinitions } =
useFilterDropdown({
filterDropdownId: filterDropdownId,
});
useEffect(() => {
setAvailableFilterDefinitions(tasksFilterDefinitions);