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

2
front/src/modules/companies/__stories__/Board.stories.tsx
View File

@ -2,12 +2,12 @@ import { MemoryRouter } from 'react-router-dom';
import { Meta, StoryObj } from '@storybook/react';
import { EntityBoard } from '@/pipeline/components/EntityBoard';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { defaultPipelineProgressOrderBy } from '../../pipeline/queries';
import { RecoilScope } from '../../ui/recoil-scope/components/RecoilScope';
import { HooksCompanyBoard } from '../components/HooksCompanyBoard';
import { CompanyBoardContext } from '../states/CompanyBoardContext';

4
front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx
View File

@ -3,6 +3,8 @@ import { MemoryRouter } from 'react-router-dom';
import { Meta, StoryObj } from '@storybook/react';
import { CompanyBoardCard } from '@/companies/components/CompanyBoardCard';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { mockedPipelineProgressData } from '~/testing/mock-data/pipeline-progress';
@ -11,8 +13,6 @@ import { defaultPipelineProgressOrderBy } from '../../pipeline/queries';
import { BoardCardContext } from '../../pipeline/states/BoardCardContext';
import { BoardColumnContext } from '../../pipeline/states/BoardColumnContext';
import { pipelineProgressIdScopedState } from '../../pipeline/states/pipelineProgressIdScopedState';
import { RecoilScope } from '../../ui/recoil-scope/components/RecoilScope';
import { useRecoilScopedState } from '../../ui/recoil-scope/hooks/useRecoilScopedState';
import { HooksCompanyBoard } from '../components/HooksCompanyBoard';
import { CompanyBoardContext } from '../states/CompanyBoardContext';

53
front/src/modules/companies/components/CompanyAccountOwnerCell.tsx
View File

@ -1,53 +0,0 @@
import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
import { useEditableCell } from '@/ui/table/editable-cell/hooks/useEditableCell';
import { Company, User } from '~/generated/graphql';
import { UserChip } from '../../users/components/UserChip';
import { CompanyAccountOwnerPicker } from './CompanyAccountOwnerPicker';
export type CompanyAccountOnwer = Pick<Company, 'id'> & {
accountOwner?: Pick<User, 'id' | 'displayName' | 'avatarUrl'> | null;
};
export type OwnProps = {
company: CompanyAccountOnwer;
};
export function CompanyAccountOwnerCell({ company }: OwnProps) {
const { closeEditableCell } = useEditableCell();
function handleCancel() {
closeEditableCell();
}
function handleSubmit() {
closeEditableCell();
}
return (
<EditableCell
transparent
editHotkeyScope={{ scope: RelationPickerHotkeyScope.RelationPicker }}
editModeContent={
<CompanyAccountOwnerPicker
onCancel={handleCancel}
onSubmit={handleSubmit}
company={company}
/>
}
nonEditModeContent={
company.accountOwner?.displayName ? (
<UserChip
id={company.accountOwner.id}
name={company.accountOwner?.displayName ?? ''}
pictureUrl={company.accountOwner?.avatarUrl ?? ''}
/>
) : (
<></>
)
}
/>
);
}

10
front/src/modules/companies/components/CompanyAccountOwnerPicker.tsx
View File

@ -1,9 +1,9 @@
import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect';
import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect';
import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect';
import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import {
Company,
User,

9
front/src/modules/companies/components/CompanyBoardCard.tsx
View File

@ -10,16 +10,19 @@ import { GET_PIPELINE_PROGRESS, GET_PIPELINES } from '@/pipeline/queries';
import { BoardCardContext } from '@/pipeline/states/BoardCardContext';
import { pipelineProgressIdScopedState } from '@/pipeline/states/pipelineProgressIdScopedState';
import { selectedBoardCardsState } from '@/pipeline/states/selectedBoardCardsState';
import { EntityChipVariant } from '@/ui/chip/components/EntityChip';
import { DateEditableField } from '@/ui/editable-field/variants/components/DateEditableField';
import { NumberEditableField } from '@/ui/editable-field/variants/components/NumberEditableField';
import { IconCurrencyDollar, IconProgressCheck } from '@/ui/icon';
import { IconCalendarEvent } from '@/ui/icon';
import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import {
Checkbox,
CheckboxVariant,
} from '@/ui/input/checkbox/components/Checkbox';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useUpdateOnePipelineProgressMutation } from '~/generated/graphql';
import { getLogoUrlFromDomainName } from '~/utils';
import { EntityChipVariant } from '../../ui/chip/components/EntityChip';
import { PipelineProgressForBoard } from '../types/CompanyProgress';
import { CompanyChip } from './CompanyChip';

48
front/src/modules/companies/components/CompanyEditableNameCell.tsx
View File

@ -1,48 +0,0 @@
import { getOperationName } from '@apollo/client/utilities';
import { EditableCellChip } from '@/ui/table/editable-cell/types/EditableChip';
import {
GetCompaniesQuery,
useUpdateOneCompanyMutation,
} from '~/generated/graphql';
import { getLogoUrlFromDomainName } from '~/utils';
import { GET_COMPANY } from '../queries';
import { CompanyChip } from './CompanyChip';
type OwnProps = {
company: Pick<
GetCompaniesQuery['companies'][0],
'id' | 'name' | 'domainName' | '_activityCount'
>;
};
export function CompanyEditableNameChipCell({ company }: OwnProps) {
const [updateCompany] = useUpdateOneCompanyMutation();
return (
<EditableCellChip
value={company.name}
placeholder="Name"
ChipComponent={
<CompanyChip
id={company.id}
name={company.name}
pictureUrl={getLogoUrlFromDomainName(company.domainName)}
/>
}
onSubmit={(newName) =>
updateCompany({
variables: {
where: { id: company.id },
data: {
name: newName,
},
},
refetchQueries: [getOperationName(GET_COMPANY) ?? ''],
})
}
/>
);
}

11
front/src/modules/companies/components/CompanyPickerCell.tsx
View File

@ -1,12 +1,11 @@
import { useFilteredSearchCompanyQuery } from '@/companies/queries';
import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect';
import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState';
import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope';
import { EntityForSelect } from '../../ui/relation-picker/types/EntityForSelect';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
export type OwnProps = {
companyId: string | null;

4
front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx
View File

@ -3,8 +3,8 @@ import { Context } from 'react';
import { FilterDropdownEntitySearchSelect } from '@/ui/filter-n-sort/components/FilterDropdownEntitySearchSelect';
import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/filterDropdownSearchInputScopedState';
import { filterDropdownSelectedEntityIdScopedState } from '@/ui/filter-n-sort/states/filterDropdownSelectedEntityIdScopedState';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useFilteredSearchCompanyQuery } from '../queries';

2
front/src/modules/companies/components/HooksCompanyBoard.tsx
View File

@ -15,7 +15,7 @@ import { BoardPipelineStageColumn } from '@/ui/board/components/Board';
import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition';
import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import {
PipelineProgressableType,
PipelineProgressOrderByWithRelationInput as PipelineProgresses_Order_By,

10
front/src/modules/companies/components/NewCompanyProgressButton.tsx
View File

@ -10,11 +10,11 @@ import { currentPipelineState } from '@/pipeline/states/currentPipelineState';
import { pipelineStageIdScopedState } from '@/pipeline/states/pipelineStageIdScopedState';
import { BoardPipelineStageColumn } from '@/ui/board/components/Board';
import { NewButton } from '@/ui/board/components/NewButton';
import { usePreviousHotkeyScope } from '@/ui/hotkey/hooks/usePreviousHotkeyScope';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect';
import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import {
PipelineProgressableType,
useCreateOnePipelineProgressMutation,

2
front/src/modules/companies/constants/companyViewFields.tsx
View File

@ -7,7 +7,7 @@ import {
IconUser,
IconUsers,
} from '@/ui/icon/index';
import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect';
import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
import {
ViewFieldChipMetadata,
ViewFieldDateMetadata,

4
front/src/modules/companies/editable-field/components/CompanyAccountOwnerEditableField.tsx
View File

@ -1,8 +1,8 @@
import { EditableField } from '@/ui/editable-field/components/EditableField';
import { FieldContext } from '@/ui/editable-field/states/FieldContext';
import { IconUserCircle } from '@/ui/icon';
import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { UserChip } from '@/users/components/UserChip';
import { Company, User } from '~/generated/graphql';

6
front/src/modules/companies/editable-field/components/CompanyAddressEditableField.tsx
View File

@ -3,8 +3,8 @@ import { useEffect, useState } from 'react';
import { EditableField } from '@/ui/editable-field/components/EditableField';
import { FieldContext } from '@/ui/editable-field/states/FieldContext';
import { IconMap } from '@/ui/icon';
import { InplaceInputText } from '@/ui/inplace-input/components/InplaceInputText';
import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql';
type OwnProps = {
@ -48,7 +48,7 @@ export function CompanyAddressEditableField({ company }: OwnProps) {
onCancel={handleCancel}
iconLabel={<IconMap />}
editModeContent={
<InplaceInputText
<TextInputEdit
placeholder={'Address'}
autoFocus
value={internalValue}

2
front/src/modules/companies/editable-field/components/CompanyCreatedAtEditableField.tsx
View File

@ -4,7 +4,7 @@ import { EditableField } from '@/ui/editable-field/components/EditableField';
import { FieldContext } from '@/ui/editable-field/states/FieldContext';
import { EditableFieldEditModeDate } from '@/ui/editable-field/variants/components/EditableFieldEditModeDate';
import { IconCalendar } from '@/ui/icon';
import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql';
import { formatToHumanReadableDate } from '~/utils';
import { parseDate } from '~/utils/date-utils';

6
front/src/modules/companies/editable-field/components/CompanyDomainNameEditableField.tsx
View File

@ -4,8 +4,8 @@ import { EditableField } from '@/ui/editable-field/components/EditableField';
import { FieldDisplayURL } from '@/ui/editable-field/components/FieldDisplayURL';
import { FieldContext } from '@/ui/editable-field/states/FieldContext';
import { IconLink } from '@/ui/icon';
import { InplaceInputText } from '@/ui/inplace-input/components/InplaceInputText';
import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql';
type OwnProps = {
@ -49,7 +49,7 @@ export function CompanyDomainNameEditableField({ company }: OwnProps) {
onCancel={handleCancel}
onSubmit={handleSubmit}
editModeContent={
<InplaceInputText
<TextInputEdit
placeholder={'URL'}
autoFocus
value={internalValue}

6
front/src/modules/companies/editable-field/components/CompanyEmployeesEditableField.tsx
View File

@ -3,8 +3,8 @@ import { useEffect, useState } from 'react';
import { EditableField } from '@/ui/editable-field/components/EditableField';
import { FieldContext } from '@/ui/editable-field/states/FieldContext';
import { IconUsers } from '@/ui/icon';
import { InplaceInputText } from '@/ui/inplace-input/components/InplaceInputText';
import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql';
import {
canBeCastAsIntegerOrNull,
@ -63,7 +63,7 @@ export function CompanyEmployeesEditableField({ company }: OwnProps) {
onCancel={handleCancel}
iconLabel={<IconUsers />}
editModeContent={
<InplaceInputText
<TextInputEdit
placeholder={'Employees'}
autoFocus
value={internalValue ?? ''}

2
front/src/modules/companies/editable-field/components/CompanyNameEditableField.tsx
View File

@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
import styled from '@emotion/styled';
import { FieldContext } from '@/ui/editable-field/states/FieldContext';
import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql';
type OwnProps = {

2
front/src/modules/companies/hooks/useInitializeCompanyBoardFilters.ts
View File

@ -3,7 +3,7 @@ import { useEffect } from 'react';
import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext';
import { availableFiltersScopedState } from '@/ui/filter-n-sort/states/availableFiltersScopedState';
import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
export function useInitializeCompanyBoardFilters({
availableFilters,

11
front/src/modules/companies/states/companyAccountOwnerFamilyState.ts
View File

@ -1,11 +0,0 @@
import { atomFamily } from 'recoil';
import { CompanyAccountOnwer } from '../components/CompanyAccountOwnerCell';
export const companyAccountOwnerFamilyState = atomFamily<
CompanyAccountOnwer['accountOwner'] | null,
string
>({
key: 'companyAccountOwnerFamilyState',
default: null,
});

6
front/src/modules/companies/states/companyAddressFamilyState.ts
View File

@ -1,6 +0,0 @@
import { atomFamily } from 'recoil';
export const companyAddressFamilyState = atomFamily<string | null, string>({
key: 'companyAddressFamilyState',
default: null,
});

8
front/src/modules/companies/states/companyCommentCountFamilyState.ts
View File

@ -1,8 +0,0 @@
import { atomFamily } from 'recoil';
export const companyCommentCountFamilyState = atomFamily<number | null, string>(
{
key: 'companyCommentCountFamilyState',
default: null,
},
);

6
front/src/modules/companies/states/companyCreatedAtFamilyState.ts
View File

@ -1,6 +0,0 @@
import { atomFamily } from 'recoil';
export const companyCreatedAtFamilyState = atomFamily<string | null, string>({
key: 'companyCreatedAtFamilyState',
default: null,
});

6
front/src/modules/companies/states/companyDomainNameFamilyState.ts
View File

@ -1,6 +0,0 @@
import { atomFamily } from 'recoil';
export const companyDomainNameFamilyState = atomFamily<string | null, string>({
key: 'companyDomainNameFamilyState',
default: null,
});

6
front/src/modules/companies/states/companyEmployeesFamilyState.ts
View File

@ -1,6 +0,0 @@
import { atomFamily } from 'recoil';
export const companyEmployeesFamilyState = atomFamily<string | null, string>({
key: 'companyEmployeesFamilyState',
default: null,
});

6
front/src/modules/companies/states/companyLinkedinUrlFamilyState.ts
View File

@ -1,6 +0,0 @@
import { atomFamily } from 'recoil';
export const companyLinkedinUrlFamilyState = atomFamily<string | null, string>({
key: 'companyLinkedinUrlFamilyState',
default: null,
});

6
front/src/modules/companies/states/companyNameFamilyState.ts
View File

@ -1,6 +0,0 @@
import { atomFamily } from 'recoil';
export const companyNameFamilyState = atomFamily<string | null, string>({
key: 'companyNameFamilyState',
default: null,
});

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