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

Use dedicated EditableFieldEntityIdContext for editable fields instead of CardIds (#1145)

Browse Source 
* Use dedicated EntityIdContext for editable fields instead of CardIds

* update context name

* remove unused hook
This commit is contained in:
Weiko
2023-08-09 16:32:28 -07:00
committed by GitHub
parent 7dcbc56e69
commit cd831af53d
13 changed files with 57 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@ import { fieldsDefinitionsState } from '@/ui/board/states/fieldsDefinitionsState
import { selectedBoardCardIdsState } from '@/ui/board/states/selectedBoardCardIdsState';
import { EntityChipVariant } from '@/ui/chip/components/EntityChip';
import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField';
import { EditableFieldEntityIdContext } from '@/ui/editable-field/states/EditableFieldEntityIdContext';
import {
Checkbox,
CheckboxVariant,
@ -172,7 +173,9 @@ export function CompanyBoardCard() {
{fieldsDefinitions.map((viewField) => {
return (
<PreventSelectOnClickContainer key={viewField.id}>
<GenericEditableField viewField={viewField} />
<EditableFieldEntityIdContext.Provider value={boardCardId}>
<GenericEditableField viewField={viewField} />
</EditableFieldEntityIdContext.Provider>
</PreventSelectOnClickContainer>
);
})}

6
front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx
View File

@ -1,7 +1,6 @@
import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
import {
ViewFieldDateMetadata,
ViewFieldDefinition,
@ -10,6 +9,7 @@ import { DateInputDisplay } from '@/ui/input/date/components/DateInputDisplay';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { parseDate } from '~/utils/date-utils';
import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
import { FieldContext } from '../states/FieldContext';
import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
@ -21,11 +21,11 @@ type OwnProps = {
};
export function GenericEditableDateField({ viewField }: OwnProps) {
const currentEntityId = useContext(BoardCardIdContext);
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const fieldValue = useRecoilValue<string>(
genericEntityFieldFamilySelector({
entityId: currentEntityId ?? '',
entityId: currentEditableFieldEntityId ?? '',
fieldName: viewField.metadata.fieldName,
}),
);

10
front/src/modules/ui/editable-field/components/GenericEditableDateFieldEditMode.tsx
View File

@ -1,13 +1,13 @@
import { useContext } from 'react';
import { useRecoilState } from 'recoil';
import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
import {
ViewFieldDateMetadata,
ViewFieldDefinition,
} from '@/ui/editable-field/types/ViewField';
import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
import { EditableFieldEditModeDate } from '../variants/components/EditableFieldEditModeDate';
@ -16,12 +16,12 @@ type OwnProps = {
};
export function GenericEditableDateFieldEditMode({ viewField }: OwnProps) {
const currentEntityId = useContext(BoardCardIdContext);
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
// TODO: we could use a hook that would return the field value with the right type
const [fieldValue, setFieldValue] = useRecoilState<string>(
genericEntityFieldFamilySelector({
entityId: currentEntityId ?? '',
entityId: currentEditableFieldEntityId ?? '',
fieldName: viewField.metadata.fieldName,
}),
);
@ -33,8 +33,8 @@ export function GenericEditableDateFieldEditMode({ viewField }: OwnProps) {
setFieldValue(newDateISO);
if (currentEntityId && updateField && newDateISO) {
updateField(currentEntityId, viewField, newDateISO);
if (currentEditableFieldEntityId && updateField && newDateISO) {
updateField(currentEditableFieldEntityId, viewField, newDateISO);
}
}

6
front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx
View File

@ -1,13 +1,13 @@
import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
import {
ViewFieldDefinition,
ViewFieldNumberMetadata,
} from '@/ui/editable-field/types/ViewField';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
import { FieldContext } from '../states/FieldContext';
import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
@ -19,11 +19,11 @@ type OwnProps = {
};
export function GenericEditableNumberField({ viewField }: OwnProps) {
const currentEntityId = useContext(BoardCardIdContext);
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const fieldValue = useRecoilValue<string>(
genericEntityFieldFamilySelector({
entityId: currentEntityId ?? '',
entityId: currentEditableFieldEntityId ?? '',
fieldName: viewField.metadata.fieldName,
}),
);

10
front/src/modules/ui/editable-field/components/GenericEditableNumberFieldEditMode.tsx
View File

@ -1,7 +1,6 @@
import { useContext, useRef, useState } from 'react';
import { useRecoilState } from 'recoil';
import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
import {
ViewFieldDefinition,
ViewFieldNumberMetadata,
@ -14,6 +13,7 @@ import {
import { useRegisterCloseFieldHandlers } from '../hooks/useRegisterCloseFieldHandlers';
import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
type OwnProps = {
@ -21,12 +21,12 @@ type OwnProps = {
};
export function GenericEditableNumberFieldEditMode({ viewField }: OwnProps) {
const currentEntityId = useContext(BoardCardIdContext);
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
// TODO: we could use a hook that would return the field value with the right type
const [fieldValue, setFieldValue] = useRecoilState<number | null>(
genericEntityFieldFamilySelector({
entityId: currentEntityId ?? '',
entityId: currentEditableFieldEntityId ?? '',
fieldName: viewField.metadata.fieldName,
}),
);
@ -44,9 +44,9 @@ export function GenericEditableNumberFieldEditMode({ viewField }: OwnProps) {
setFieldValue(castAsIntegerOrNull(internalValue));
if (currentEntityId && updateField) {
if (currentEditableFieldEntityId && updateField) {
updateField(
currentEntityId,
currentEditableFieldEntityId,
viewField,
castAsIntegerOrNull(internalValue),
);

6
front/src/modules/ui/editable-field/components/GenericEditableRelationField.tsx
View File

@ -2,7 +2,6 @@ import { useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { PersonChip } from '@/people/components/PersonChip';
import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
import {
ViewFieldDefinition,
ViewFieldRelationMetadata,
@ -11,6 +10,7 @@ import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
import { FieldContext } from '../states/FieldContext';
import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
@ -47,11 +47,11 @@ function RelationChip({
}
export function GenericEditableRelationField({ viewField }: OwnProps) {
const currentEntityId = useContext(BoardCardIdContext);
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const fieldValue = useRecoilValue<any | null>(
genericEntityFieldFamilySelector({
entityId: currentEntityId ?? '',
entityId: currentEditableFieldEntityId ?? '',
fieldName: viewField.metadata.fieldName,
}),
);

10
front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx
View File

@ -3,7 +3,6 @@ import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { PeoplePicker } from '@/people/components/PeoplePicker';
import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
import {
ViewFieldDefinition,
ViewFieldRelationMetadata,
@ -14,6 +13,7 @@ import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
import { useEditableField } from '../hooks/useEditableField';
import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
const RelationPickerContainer = styled.div`
@ -56,12 +56,12 @@ function RelationPicker({
}
export function GenericEditableRelationFieldEditMode({ viewField }: OwnProps) {
const currentEntityId = useContext(BoardCardIdContext);
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
// TODO: we could use a hook that would return the field value with the right type
const [fieldValue, setFieldValue] = useRecoilState<any | null>(
genericEntityFieldFamilySelector({
entityId: currentEntityId ?? '',
entityId: currentEditableFieldEntityId ?? '',
fieldName: viewField.metadata.fieldName,
}),
);
@ -78,8 +78,8 @@ export function GenericEditableRelationFieldEditMode({ viewField }: OwnProps) {
avatarUrl: newRelation?.avatarUrl ?? null,
});
if (currentEntityId && updateField) {
updateField(currentEntityId, viewField, newRelation);
if (currentEditableFieldEntityId && updateField) {
updateField(currentEditableFieldEntityId, viewField, newRelation);
}
closeEditableField();

11
front/src/modules/ui/editable-field/components/ProbabilityEditableFieldEditMode.tsx
View File

@ -2,10 +2,10 @@ import { useContext, useState } from 'react';
import styled from '@emotion/styled';
import { useRecoilState } from 'recoil';
import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
import { useEditableField } from '@/ui/editable-field/hooks/useEditableField';
import { useUpdateGenericEntityField } from '../hooks/useUpdateGenericEntityField';
import { EditableFieldEntityIdContext } from '../states/EditableFieldEntityIdContext';
import { genericEntityFieldFamilySelector } from '../states/genericEntityFieldFamilySelector';
import {
ViewFieldDefinition,
@ -76,10 +76,11 @@ export function ProbabilityEditableFieldEditMode({ viewField }: OwnProps) {
const [nextProbabilityIndex, setNextProbabilityIndex] = useState<
number | null
>(null);
const currentEntityId = useContext(BoardCardIdContext);
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const [fieldValue, setFieldValue] = useRecoilState<number>(
genericEntityFieldFamilySelector({
entityId: currentEntityId ?? '',
entityId: currentEditableFieldEntityId ?? '',
fieldName: viewField.metadata.fieldName,
}),
);
@ -91,8 +92,8 @@ export function ProbabilityEditableFieldEditMode({ viewField }: OwnProps) {
function handleChange(newValue: number) {
setFieldValue(newValue);
if (currentEntityId && updateField) {
updateField(currentEntityId, viewField, newValue);
if (currentEditableFieldEntityId && updateField) {
updateField(currentEditableFieldEntityId, viewField, newValue);
}
closeEditableField();
}

7
front/src/modules/ui/editable-field/hooks/useCurrentEntityId.ts
View File

@ -1,7 +0,0 @@
import { useContext } from 'react';
import { EntityIdContext } from '../states/EntityIdContext';
export function useCurrentEntityId() {
return useContext(EntityIdContext);
}

3
front/src/modules/ui/editable-field/states/EditableFieldContext.ts
View File

@ -1,3 +0,0 @@
import { createContext } from 'react';
export const EditableFieldContext = createContext<string | null>(null);

3
front/src/modules/ui/editable-field/states/EditableFieldEntityIdContext.ts Normal file
View File

@ -0,0 +1,3 @@
import { createContext } from 'react';
export const EditableFieldEntityIdContext = createContext<string | null>(null);

3
front/src/modules/ui/editable-field/states/EntityIdContext.ts
View File

@ -1,3 +0,0 @@
import { createContext } from 'react';
export const EntityIdContext = createContext<string | null>(null);