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

2357 Refactor RecordTable to use the new scope architecture (#2407)

Browse Source 
* create RecordTableScope

* use RecordTableScope

* working on useRecordTable hook

* add RecordTableScope to company-table

* add RecordTableScope to person-table

* add filter state and sort state

* add useSetRecordTableData to useRecordTable

* wip

* add setRecordTableData to useRecordTable

* update in RecordTableEffect

* fix bug

* getting rid of unnecessary context and hooks

* remove console.log

* wip

* fix bug by creating an init effect

* fix viewbar not in scope in company and people tables

* wip

* updating useRecordTable to use internal hooks

* updating useRecordTable to use internal hooks

* updating useRecordTable to use internal hooks

* updating useRecordTable to use internal hooks

* modified according to comments
This commit is contained in:
bosiraphael
2023-11-09 17:45:58 +01:00
committed by GitHub
parent 0d4949484c
commit 588091d3dd
93 changed files with 871 additions and 875 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
front/src/pages/companies/Companies.tsx
View File

@ -14,10 +14,8 @@ import { PageHeader } from '@/ui/layout/page/PageHeader';
import { PageHotkeysEffect } from '@/ui/layout/page/PageHotkeysEffect';
import { RecordTableActionBar } from '@/ui/object/record-table/action-bar/components/RecordTableActionBar';
import { RecordTableContextMenu } from '@/ui/object/record-table/context-menu/components/RecordTableContextMenu';
import { useUpsertRecordTableItem } from '@/ui/object/record-table/hooks/useUpsertRecordTableItem';
import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
import { useUpsertTableRowId } from '@/ui/object/record-table/hooks/useUpsertTableRowId';
import { TableRecoilScopeContext } from '@/ui/object/record-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { useInsertOneCompanyMutation } from '~/generated/graphql';
const StyledTableContainer = styled.div`
@ -27,7 +25,9 @@ const StyledTableContainer = styled.div`
export const Companies = () => {
const [insertCompany] = useInsertOneCompanyMutation();
const upsertRecordTableItem = useUpsertRecordTableItem();
const { upsertRecordTableItem } = useRecordTable({
recordTableScopeId: 'companies',
});
const upsertTableRowIds = useUpsertTableRowId();
const { triggerOptimisticEffects } = useOptimisticEffect();
@ -61,16 +61,11 @@ export const Companies = () => {
<PageAddButton onClick={handleAddButtonClick} />
</PageHeader>
<PageBody>
<RecoilScope
scopeId="companies"
CustomRecoilScopeContext={TableRecoilScopeContext}
>
<StyledTableContainer>
<CompanyTable />
</StyledTableContainer>
<RecordTableActionBar />
<RecordTableContextMenu />
</RecoilScope>
<StyledTableContainer>
<CompanyTable />
</StyledTableContainer>
<RecordTableActionBar />
<RecordTableContextMenu />
</PageBody>
</PageContainer>
</SpreadsheetImportProvider>

10
front/src/pages/companies/CompaniesMockMode.tsx
View File

@ -5,8 +5,6 @@ import { IconBuildingSkyscraper } from '@/ui/display/icon';
import { PageBody } from '@/ui/layout/page/PageBody';
import { PageContainer } from '@/ui/layout/page/PageContainer';
import { PageHeader } from '@/ui/layout/page/PageHeader';
import { TableRecoilScopeContext } from '@/ui/object/record-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
const StyledTableContainer = styled.div`
display: flex;
@ -18,11 +16,9 @@ export const CompaniesMockMode = () => {
<PageContainer>
<PageHeader title="Companies" Icon={IconBuildingSkyscraper} />
<PageBody>
<RecoilScope CustomRecoilScopeContext={TableRecoilScopeContext}>
<StyledTableContainer>
<CompanyTableMockMode />
</StyledTableContainer>
</RecoilScope>
<StyledTableContainer>
<CompanyTableMockMode />
</StyledTableContainer>
</PageBody>
</PageContainer>
);

23
front/src/pages/people/People.tsx
View File

@ -12,10 +12,8 @@ import { PageHeader } from '@/ui/layout/page/PageHeader';
import { PageHotkeysEffect } from '@/ui/layout/page/PageHotkeysEffect';
import { RecordTableActionBar } from '@/ui/object/record-table/action-bar/components/RecordTableActionBar';
import { RecordTableContextMenu } from '@/ui/object/record-table/context-menu/components/RecordTableContextMenu';
import { useUpsertRecordTableItem } from '@/ui/object/record-table/hooks/useUpsertRecordTableItem';
import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
import { useUpsertTableRowId } from '@/ui/object/record-table/hooks/useUpsertTableRowId';
import { TableRecoilScopeContext } from '@/ui/object/record-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { useInsertOnePersonMutation } from '~/generated/graphql';
const StyledTableContainer = styled.div`
@ -25,7 +23,9 @@ const StyledTableContainer = styled.div`
export const People = () => {
const [insertOnePerson] = useInsertOnePersonMutation();
const upsertRecordTableItem = useUpsertRecordTableItem();
const { upsertRecordTableItem } = useRecordTable({
recordTableScopeId: 'people',
});
const upsertTableRowIds = useUpsertTableRowId();
const { triggerOptimisticEffects } = useOptimisticEffect();
@ -57,16 +57,11 @@ export const People = () => {
<PageAddButton onClick={handleAddButtonClick} />
</PageHeader>
<PageBody>
<RecoilScope
scopeId="people"
CustomRecoilScopeContext={TableRecoilScopeContext}
>
<StyledTableContainer>
<PersonTable />
</StyledTableContainer>
<RecordTableActionBar />
<RecordTableContextMenu />
</RecoilScope>
<StyledTableContainer>
<PersonTable />
</StyledTableContainer>
<RecordTableActionBar />
<RecordTableContextMenu />
</PageBody>
</PageContainer>
</SpreadsheetImportProvider>