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

Clean and re-organize post table refactoring (#1000)

Browse Source 
* Clean and re-organize post table refactoring

* Fix tests
This commit is contained in:
Charles Bochet
2023-07-30 18:26:32 -07:00
committed by GitHub
parent 86a2d67efd
commit ade5e52e55
336 changed files with 638 additions and 2757 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
front/src/modules/companies/table/components/CompanyEntityTableData.tsx
View File

@ -1,28 +0,0 @@
import { defaultOrderBy } from '@/companies/queries';
import {
PersonOrderByWithRelationInput,
useGetCompaniesQuery,
} from '~/generated/graphql';
import { useSetCompanyEntityTable } from '../hooks/useSetCompanyEntityTable';
export function CompanyEntityTableData({
orderBy = defaultOrderBy,
whereFilters,
}: {
orderBy?: PersonOrderByWithRelationInput[];
whereFilters?: any;
}) {
const setCompanyEntityTable = useSetCompanyEntityTable();
useGetCompaniesQuery({
variables: { orderBy, where: whereFilters },
onCompleted: (data) => {
const companies = data.companies ?? [];
setCompanyEntityTable(companies);
},
});
return <></>;
}

15
front/src/modules/companies/table/components/CompanyEntityTableDataMocked.tsx
View File

@ -1,15 +0,0 @@
import { useEffect } from 'react';
import { useSetCompanyEntityTable } from '../hooks/useSetCompanyEntityTable';
import { mockedCompaniesData } from './companies-mock-data';
export function CompanyEntityTableDataMocked() {
const setCompanyEntityTable = useSetCompanyEntityTable();
useEffect(() => {
setCompanyEntityTable(mockedCompaniesData);
}, [setCompanyEntityTable]);
return <></>;
}

24
front/src/modules/companies/table/components/CompanyTable.tsx
View File

@ -1,16 +1,21 @@
import { useCallback, useMemo, useState } from 'react';
import { companyViewFields } from '@/companies/constants/companyViewFields';
import { CompaniesSelectedSortType, defaultOrderBy } from '@/companies/queries';
import { companyColumns } from '@/companies/table/components/companyColumns';
import { CompanyEntityTableData } from '@/companies/table/components/CompanyEntityTableData';
import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
import { IconList } from '@/ui/icon';
import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue';
import { EntityTable } from '@/ui/table/components/EntityTable';
import { GenericEntityTableData } from '@/ui/table/components/GenericEntityTableData';
import { TableContext } from '@/ui/table/states/TableContext';
import { CompanyOrderByWithRelationInput } from '~/generated/graphql';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import {
CompanyOrderByWithRelationInput,
useGetCompaniesQuery,
useUpdateOneCompanyMutation,
} from '~/generated/graphql';
import { companiesFilters } from '~/pages/companies/companies-filters';
import { availableSorts } from '~/pages/companies/companies-sorts';
export function CompanyTable() {
@ -29,13 +34,20 @@ export function CompanyTable() {
return (
<>
<CompanyEntityTableData orderBy={orderBy} whereFilters={whereFilters} />
<GenericEntityTableData
getRequestResultKey="companies"
useGetRequest={useGetCompaniesQuery}
orderBy={orderBy}
whereFilters={whereFilters}
viewFields={companyViewFields}
filterDefinitionArray={companiesFilters}
/>
<EntityTable
columns={companyColumns}
viewName="All Companies"
viewIcon={<IconList size={16} />}
availableSorts={availableSorts}
onSortsUpdate={updateSorts}
useUpdateEntityMutation={useUpdateOneCompanyMutation}
/>
</>
);

6
front/src/modules/companies/table/components/CompanyTableMockMode.tsx
View File

@ -1,18 +1,16 @@
import { companyColumns } from '@/companies/table/components/companyColumns';
import { CompanyEntityTableDataMocked } from '@/companies/table/components/CompanyEntityTableDataMocked';
import { IconList } from '@/ui/icon';
import { EntityTable } from '@/ui/table/components/EntityTable';
import { useUpdateOneCompanyMutation } from '~/generated/graphql';
import { availableSorts } from '~/pages/companies/companies-sorts';
export function CompanyTableMockMode() {
return (
<>
<CompanyEntityTableDataMocked />
<EntityTable
columns={companyColumns}
viewName="All Companies"
viewIcon={<IconList size={16} />}
availableSorts={availableSorts}
useUpdateEntityMutation={useUpdateOneCompanyMutation}
/>
</>
);

54
front/src/modules/companies/table/components/CompanyTableV2.tsx
View File

@ -1,54 +0,0 @@
import { useCallback, useMemo, useState } from 'react';
import { companyViewFields } from '@/companies/constants/companyViewFields';
import { CompaniesSelectedSortType, defaultOrderBy } from '@/companies/queries';
import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
import { IconList } from '@/ui/icon';
import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue';
import { EntityTable } from '@/ui/table/components/EntityTableV2';
import { GenericEntityTableData } from '@/ui/table/components/GenericEntityTableData';
import { TableContext } from '@/ui/table/states/TableContext';
import {
CompanyOrderByWithRelationInput,
useGetCompaniesQuery,
useUpdateOneCompanyMutation,
} from '~/generated/graphql';
import { companiesFilters } from '~/pages/companies/companies-filters';
import { availableSorts } from '~/pages/companies/companies-sorts';
export function CompanyTable() {
const [orderBy, setOrderBy] =
useState<CompanyOrderByWithRelationInput[]>(defaultOrderBy);
const updateSorts = useCallback((sorts: Array<CompaniesSelectedSortType>) => {
setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
}, []);
const filters = useRecoilScopedValue(filtersScopedState, TableContext);
const whereFilters = useMemo(() => {
return { AND: filters.map(turnFilterIntoWhereClause) };
}, [filters]) as any;
return (
<>
<GenericEntityTableData
getRequestResultKey="companies"
useGetRequest={useGetCompaniesQuery}
orderBy={orderBy}
whereFilters={whereFilters}
viewFields={companyViewFields}
filterDefinitionArray={companiesFilters}
/>
<EntityTable
viewName="All Companies"
viewIcon={<IconList size={16} />}
availableSorts={availableSorts}
onSortsUpdate={updateSorts}
useUpdateEntityMutation={useUpdateOneCompanyMutation}
/>
</>
);
}

26
front/src/modules/companies/table/components/EditableCompanyAccountOwnerCell.tsx
View File

@ -1,26 +0,0 @@
import { useRecoilValue } from 'recoil';
import { CompanyAccountOwnerCell } from '@/companies/components/CompanyAccountOwnerCell';
import { companyAccountOwnerFamilyState } from '@/companies/states/companyAccountOwnerFamilyState';
import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
export function EditableCompanyAccountOwnerCell() {
const currentRowEntityId = useCurrentRowEntityId();
const accountOwner = useRecoilValue(
companyAccountOwnerFamilyState(currentRowEntityId ?? ''),
);
return (
<CompanyAccountOwnerCell
company={{
id: currentRowEntityId ?? '',
accountOwner: {
avatarUrl: accountOwner?.avatarUrl ?? '',
displayName: accountOwner?.displayName ?? '',
id: accountOwner?.id ?? '',
},
}}
/>
);
}

40
front/src/modules/companies/table/components/EditableCompanyAddressCell.tsx
View File

@ -1,40 +0,0 @@
import { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { companyAddressFamilyState } from '@/companies/states/companyAddressFamilyState';
import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText';
import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
import { useUpdateOneCompanyMutation } from '~/generated/graphql';
export function EditableCompanyAddressCell() {
const currentRowEntityId = useCurrentRowEntityId();
const [updateCompany] = useUpdateOneCompanyMutation();
const address = useRecoilValue(
companyAddressFamilyState(currentRowEntityId ?? ''),
);
const [internalValue, setInternalValue] = useState(address ?? '');
useEffect(() => {
setInternalValue(address ?? '');
}, [address]);
return (
<EditableCellText
value={internalValue}
onSubmit={(newValue: string) =>
updateCompany({
variables: {
where: {
id: currentRowEntityId,
},
data: {
address: newValue,
},
},
})
}
/>
);
}

37
front/src/modules/companies/table/components/EditableCompanyCreatedAtCell.tsx
View File

@ -1,37 +0,0 @@
import { DateTime } from 'luxon';
import { useRecoilValue } from 'recoil';
import { companyCreatedAtFamilyState } from '@/companies/states/companyCreatedAtFamilyState';
import { EditableCellDate } from '@/ui/table/editable-cell/types/EditableCellDate';
import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
import { useUpdateOneCompanyMutation } from '~/generated/graphql';
export function EditableCompanyCreatedAtCell() {
const currentRowEntityId = useCurrentRowEntityId();
const createdAt = useRecoilValue(
companyCreatedAtFamilyState(currentRowEntityId ?? ''),
);
const [updateCompany] = useUpdateOneCompanyMutation();
return (
<EditableCellDate
onChange={async (newDate: Date) => {
if (!currentRowEntityId) return;
await updateCompany({
variables: {
where: {
id: currentRowEntityId,
},
data: {
createdAt: newDate.toISOString(),
},
},
});
}}
value={createdAt ? DateTime.fromISO(createdAt).toJSDate() : new Date()}
/>
);
}

35
front/src/modules/companies/table/components/EditableCompanyDomainNameCell.tsx
View File

@ -1,35 +0,0 @@
import { useRecoilValue } from 'recoil';
import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState';
import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
import { useUpdateOneCompanyMutation } from '~/generated/graphql';
import { EditableCellURL } from '../../../ui/table/editable-cell/types/EditableCellURL';
export function EditableCompanyDomainNameCell() {
const currentRowEntityId = useCurrentRowEntityId();
const [updateCompany] = useUpdateOneCompanyMutation();
const domainName = useRecoilValue(
companyDomainNameFamilyState(currentRowEntityId ?? ''),
);
return (
<EditableCellURL
url={domainName ?? ''}
onSubmit={(newURL) =>
updateCompany({
variables: {
where: {
id: currentRowEntityId,
},
data: {
domainName: newURL,
},
},
})
}
/>
);
}

35
front/src/modules/companies/table/components/EditableCompanyEmployeesCell.tsx
View File

@ -1,35 +0,0 @@
import { useRecoilValue } from 'recoil';
import { companyEmployeesFamilyState } from '@/companies/states/companyEmployeesFamilyState';
import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText';
import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
import { useUpdateOneCompanyMutation } from '~/generated/graphql';
export function EditableCompanyEmployeesCell() {
const currentRowEntityId = useCurrentRowEntityId();
const [updateCompany] = useUpdateOneCompanyMutation();
const employees = useRecoilValue(
companyEmployeesFamilyState(currentRowEntityId ?? ''),
);
return (
// TODO: Create an EditableCellNumber component
<EditableCellText
value={employees || ''}
onSubmit={(newValue) =>
updateCompany({
variables: {
where: {
id: currentRowEntityId,
},
data: {
employees: parseInt(newValue),
},
},
})
}
/>
);
}

35
front/src/modules/companies/table/components/EditableCompanyLinkedinUrlCell.tsx
View File

@ -1,35 +0,0 @@
import { useRecoilValue } from 'recoil';
import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
import { useUpdateOneCompanyMutation } from '~/generated/graphql';
import { EditableCellURL } from '../../../ui/table/editable-cell/types/EditableCellURL';
import { companyLinkedinUrlFamilyState } from '../../states/companyLinkedinUrlFamilyState';
export function EditableCompanyLinkedinUrlCell() {
const currentRowEntityId = useCurrentRowEntityId();
const [updateCompany] = useUpdateOneCompanyMutation();
const linkedinUrl = useRecoilValue(
companyLinkedinUrlFamilyState(currentRowEntityId ?? ''),
);
return (
<EditableCellURL
url={linkedinUrl || ''}
onSubmit={(newUrl) =>
updateCompany({
variables: {
where: {
id: currentRowEntityId,
},
data: {
linkedinUrl: newUrl,
},
},
})
}
/>
);
}

32
front/src/modules/companies/table/components/EditableCompanyNameCell.tsx
View File

@ -1,32 +0,0 @@
import { useRecoilValue } from 'recoil';
import { CompanyEditableNameChipCell } from '@/companies/components/CompanyEditableNameCell';
import { companyCommentCountFamilyState } from '@/companies/states/companyCommentCountFamilyState';
import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState';
import { companyNameFamilyState } from '@/companies/states/companyNameFamilyState';
import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
export function EditableCompanyNameCell() {
const currentRowEntityId = useCurrentRowEntityId();
const name = useRecoilValue(companyNameFamilyState(currentRowEntityId ?? ''));
const domainName = useRecoilValue(
companyDomainNameFamilyState(currentRowEntityId ?? ''),
);
const commentCount = useRecoilValue(
companyCommentCountFamilyState(currentRowEntityId ?? ''),
);
return (
<CompanyEditableNameChipCell
company={{
id: currentRowEntityId ?? '',
name: name ?? '',
domainName: domainName ?? '',
_activityCount: commentCount ?? 0,
}}
/>
);
}

70
front/src/modules/companies/table/components/companyColumns.tsx
View File

@ -1,70 +0,0 @@
import { TableColumn } from '@/people/table/components/peopleColumns';
import {
IconBrandLinkedin,
IconBuildingSkyscraper,
IconCalendarEvent,
IconLink,
IconMap,
IconUser,
IconUsers,
} from '@/ui/icon/index';
import { EditableCompanyAccountOwnerCell } from './EditableCompanyAccountOwnerCell';
import { EditableCompanyAddressCell } from './EditableCompanyAddressCell';
import { EditableCompanyCreatedAtCell } from './EditableCompanyCreatedAtCell';
import { EditableCompanyDomainNameCell } from './EditableCompanyDomainNameCell';
import { EditableCompanyEmployeesCell } from './EditableCompanyEmployeesCell';
import { EditableCompanyLinkedinUrlCell } from './EditableCompanyLinkedinUrlCell';
import { EditableCompanyNameCell } from './EditableCompanyNameCell';
export const companyColumns: TableColumn[] = [
{
id: 'name',
title: 'Name',
icon: <IconBuildingSkyscraper size={16} />,
size: 180,
cellComponent: <EditableCompanyNameCell />,
},
{
id: 'domainName',
title: 'URL',
icon: <IconLink size={16} />,
size: 100,
cellComponent: <EditableCompanyDomainNameCell />,
},
{
id: 'accountOwner',
title: 'Account owner',
icon: <IconUser size={16} />,
size: 150,
cellComponent: <EditableCompanyAccountOwnerCell />,
},
{
id: 'createdAt',
title: 'Creation',
icon: <IconCalendarEvent size={16} />,
size: 150,
cellComponent: <EditableCompanyCreatedAtCell />,
},
{
id: 'employees',
title: 'Employees',
icon: <IconUsers size={16} />,
size: 150,
cellComponent: <EditableCompanyEmployeesCell />,
},
{
id: 'linkedinUrl',
title: 'Linkedin',
icon: <IconBrandLinkedin size={16} />,
size: 170,
cellComponent: <EditableCompanyLinkedinUrlCell />,
},
{
id: 'address',
title: 'Address',
icon: <IconMap size={16} />,
size: 170,
cellComponent: <EditableCompanyAddressCell />,
},
];

141
front/src/modules/companies/table/hooks/useSetCompanyEntityTable.ts
View File

@ -1,141 +0,0 @@
import { useLocation } from 'react-router-dom';
import { useRecoilCallback } from 'recoil';
import { companyAccountOwnerFamilyState } from '@/companies/states/companyAccountOwnerFamilyState';
import { companyAddressFamilyState } from '@/companies/states/companyAddressFamilyState';
import { companyCommentCountFamilyState } from '@/companies/states/companyCommentCountFamilyState';
import { companyCreatedAtFamilyState } from '@/companies/states/companyCreatedAtFamilyState';
import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState';
import { companyEmployeesFamilyState } from '@/companies/states/companyEmployeesFamilyState';
import { companyLinkedinUrlFamilyState } from '@/companies/states/companyLinkedinUrlFamilyState';
import { companyNameFamilyState } from '@/companies/states/companyNameFamilyState';
import { GetCompaniesQuery } from '~/generated/graphql';
import { companiesFilters } from '../../../../pages/companies/companies-filters';
import { availableFiltersScopedState } from '../../../ui/filter-n-sort/states/availableFiltersScopedState';
import { useContextScopeId } from '../../../ui/recoil-scope/hooks/useContextScopeId';
import { currentPageLocationState } from '../../../ui/states/currentPageLocationState';
import { useResetTableRowSelection } from '../../../ui/table/hooks/useResetTableRowSelection';
import { entityTableDimensionsState } from '../../../ui/table/states/entityTableDimensionsState';
import { isFetchingEntityTableDataState } from '../../../ui/table/states/isFetchingEntityTableDataState';
import { TableContext } from '../../../ui/table/states/TableContext';
import { tableRowIdsState } from '../../../ui/table/states/tableRowIdsState';
import { companyColumns } from '../components/companyColumns';
export function useSetCompanyEntityTable() {
const resetTableRowSelection = useResetTableRowSelection();
const tableContextScopeId = useContextScopeId(TableContext);
const currentLocation = useLocation().pathname;
return useRecoilCallback(
({ set, snapshot }) =>
(newCompanyArray: GetCompaniesQuery['companies']) => {
for (const company of newCompanyArray) {
const currentName = snapshot
.getLoadable(companyNameFamilyState(company.id))
.valueOrThrow();
if (currentName !== company.name) {
set(companyNameFamilyState(company.id), company.name);
}
const currentDomainName = snapshot
.getLoadable(companyDomainNameFamilyState(company.id))
.valueOrThrow();
if (currentDomainName !== company.domainName) {
set(companyDomainNameFamilyState(company.id), company.domainName);
}
const currentLinkedinUrl = snapshot
.getLoadable(companyLinkedinUrlFamilyState(company.id))
.valueOrThrow();
if (currentLinkedinUrl !== company.linkedinUrl) {
set(
companyLinkedinUrlFamilyState(company.id),
company.linkedinUrl ?? '',
);
}
const currentEmployees = snapshot
.getLoadable(companyEmployeesFamilyState(company.id))
.valueOrThrow();
if (currentEmployees !== company.employees) {
set(
companyEmployeesFamilyState(company.id),
company.employees?.toString() ?? '',
);
}
const currentAddress = snapshot
.getLoadable(companyAddressFamilyState(company.id))
.valueOrThrow();
if (currentAddress !== company.address) {
set(companyAddressFamilyState(company.id), company.address);
}
const currentCommentCount = snapshot
.getLoadable(companyCommentCountFamilyState(company.id))
.valueOrThrow();
if (currentCommentCount !== company._activityCount) {
set(
companyCommentCountFamilyState(company.id),
company._activityCount,
);
}
const currentAccountOwner = snapshot
.getLoadable(companyAccountOwnerFamilyState(company.id))
.valueOrThrow();
if (
JSON.stringify(currentAccountOwner) !==
JSON.stringify(company.accountOwner)
) {
set(
companyAccountOwnerFamilyState(company.id),
company.accountOwner,
);
}
const currentCreatedAt = snapshot
.getLoadable(companyCreatedAtFamilyState(company.id))
.valueOrThrow();
if (currentCreatedAt !== company.createdAt) {
set(companyCreatedAtFamilyState(company.id), company.createdAt);
}
}
const companyIds = newCompanyArray.map((company) => company.id);
set(tableRowIdsState, (currentRowIds) => {
if (JSON.stringify(currentRowIds) !== JSON.stringify(companyIds)) {
return companyIds;
}
return currentRowIds;
});
resetTableRowSelection();
set(entityTableDimensionsState, {
numberOfColumns: companyColumns.length,
numberOfRows: companyIds.length,
});
set(availableFiltersScopedState(tableContextScopeId), companiesFilters);
set(currentPageLocationState, currentLocation);
set(isFetchingEntityTableDataState, false);
},
[resetTableRowSelection, tableContextScopeId, currentLocation],
);
}