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 />,
},
];