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

- refactored to use multiple states

Browse Source
This commit is contained in:
brendanlaschke
2023-08-11 10:27:31 +02:00
parent b76f01d930
commit accfaafcfa
34 changed files with 486 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,13 @@
import { useEffect } from 'react';
import { getOperationName } from '@apollo/client/utilities';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { v4 } from 'uuid';
import { useOpenActionBar } from '@/companies/hooks/useOpenActionBar';
import { useOpenContextMenu } from '@/companies/hooks/useOpenContextMenu';
import { CompanyTable } from '@/companies/table/components/CompanyTable';
import { TableActionBarButtonCreateActivityCompany } from '@/companies/table/components/TableActionBarButtonCreateActivityCompany';
import { TableActionBarButtonDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies';
import { TableContextMenuEntryDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies copy';
import { TableContextMenuEntryCreateActivityCompany } from '@/companies/table/components/TableContextMenuEntryCreateActivityCompany copy';
import { SEARCH_COMPANY_QUERY } from '@/search/queries/search';
import { IconBuildingSkyscraper } from '@/ui/icon';
import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
@ -60,6 +59,14 @@ export function Companies() {
const theme = useTheme();
const setContextMenu = useOpenContextMenu();
const setActionBar = useOpenActionBar();
useEffect(() => {
setContextMenu();
setActionBar();
}, [setContextMenu, setActionBar]);
return (
<>
<WithTopBarContainer
@ -71,14 +78,8 @@ export function Companies() {
<StyledTableContainer>
<CompanyTable />
</StyledTableContainer>
<EntityTableActionBar>
<TableActionBarButtonCreateActivityCompany />
<TableActionBarButtonDeleteCompanies />
</EntityTableActionBar>
<EntityTableContextMenu>
<TableContextMenuEntryCreateActivityCompany />
<TableContextMenuEntryDeleteCompanies />
</EntityTableContextMenu>
<EntityTableActionBar></EntityTableActionBar>
<EntityTableContextMenu></EntityTableContextMenu>
</RecoilScope>
</WithTopBarContainer>
</>

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

@ -2,8 +2,6 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
import { TableActionBarButtonCreateActivityCompany } from '@/companies/table/components/TableActionBarButtonCreateActivityCompany';
import { TableActionBarButtonDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies';
import { IconBuildingSkyscraper } from '@/ui/icon';
import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
@ -28,10 +26,7 @@ export function CompaniesMockMode() {
<StyledTableContainer>
<CompanyTableMockMode />
</StyledTableContainer>
<EntityTableActionBar>
<TableActionBarButtonCreateActivityCompany />
<TableActionBarButtonDeleteCompanies />
</EntityTableActionBar>
<EntityTableActionBar></EntityTableActionBar>
</RecoilScope>
</WithTopBarContainer>
</>

25
front/src/pages/opportunities/Opportunities.tsx
View File

@ -1,17 +1,15 @@
import { useCallback, useState } from 'react';
import { getOperationName } from '@apollo/client/utilities';
import { useCallback, useEffect, useState } from 'react';
import { useTheme } from '@emotion/react';
import { HooksCompanyBoard } from '@/companies/components/HooksCompanyBoard';
import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext';
import {
defaultPipelineProgressOrderBy,
GET_PIPELINES,
PipelineProgressesSelectedSortType,
} from '@/pipeline/queries';
import { BoardActionBarButtonDeleteBoardCard } from '@/ui/board/components/BoardActionBarButtonDeleteBoardCard';
import { EntityBoard } from '@/ui/board/components/EntityBoard';
import { EntityBoardActionBar } from '@/ui/board/components/EntityBoardActionBar';
import { useOpenActionBar } from '@/ui/board/hooks/useActionBar';
import { BoardOptionsContext } from '@/ui/board/states/BoardOptionsContext';
import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
import { AvailableFiltersContext } from '@/ui/filter-n-sort/states/AvailableFiltersContext';
@ -20,7 +18,6 @@ import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import {
PipelineProgressOrderByWithRelationInput,
useDeleteManyPipelineProgressMutation,
useUpdatePipelineStageMutation,
} from '~/generated/graphql';
import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions';
@ -67,17 +64,11 @@ export function Opportunities() {
});
}
const [deletePipelineProgress] = useDeleteManyPipelineProgressMutation({
refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
});
const setActionBar = useOpenActionBar();
async function handleDelete(cardIdsToDelete: string[]) {
await deletePipelineProgress({
variables: {
ids: cardIdsToDelete,
},
});
}
useEffect(() => {
setActionBar();
}, [setActionBar]);
return (
<WithTopBarContainer
@ -95,9 +86,7 @@ export function Opportunities() {
updateSorts={updateSorts}
onEditColumnTitle={handleEditColumnTitle}
/>
<EntityBoardActionBar>
<BoardActionBarButtonDeleteBoardCard onDelete={handleDelete} />
</EntityBoardActionBar>
<EntityBoardActionBar></EntityBoardActionBar>
</AvailableFiltersContext.Provider>
</RecoilScope>
</BoardOptionsContext.Provider>

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

@ -1,13 +1,12 @@
import { useEffect } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { v4 } from 'uuid';
import { useOpenActionBar } from '@/people/hooks/useOpenActionBar';
import { useOpenContextMenu } from '@/people/hooks/useOpenContextMenu';
import { PeopleTable } from '@/people/table/components/PeopleTable';
import { TableActionBarButtonCreateActivityPeople } from '@/people/table/components/TableActionBarButtonCreateActivityPeople';
import { TableActionBarButtonDeletePeople } from '@/people/table/components/TableActionBarButtonDeletePeople';
import { TableContextMenuEntryDeletePeople } from '@/people/table/components/TableActionContextMenuEntryDeletePeople';
import { TableContextMenuEntryCreateActivityPeople } from '@/people/table/components/TableContextMenuEntryCreateActivityPeople';
import { IconUser } from '@/ui/icon';
import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar';
@ -56,6 +55,14 @@ export function People() {
const theme = useTheme();
const setContextMenu = useOpenContextMenu();
const setActionBar = useOpenActionBar();
useEffect(() => {
setContextMenu();
setActionBar();
}, [setContextMenu, setActionBar]);
return (
<RecoilScope SpecificContext={TableContext}>
<WithTopBarContainer
@ -66,14 +73,8 @@ export function People() {
<StyledTableContainer>
<PeopleTable />
</StyledTableContainer>
<EntityTableActionBar>
<TableActionBarButtonCreateActivityPeople />
<TableActionBarButtonDeletePeople />
</EntityTableActionBar>
<EntityTableContextMenu>
<TableContextMenuEntryCreateActivityPeople />
<TableContextMenuEntryDeletePeople />
</EntityTableContextMenu>
<EntityTableActionBar></EntityTableActionBar>
<EntityTableContextMenu></EntityTableContextMenu>
</WithTopBarContainer>
</RecoilScope>
);