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

* Use dedicated EntityIdContext for editable fields instead of CardIds

* update context name

* remove unused hook

front/src/generated/graphql.tsx

@@ -2404,6 +2404,8 @@ export type DeleteActivityMutationVariables = Exact<{
 
 export type DeleteActivityMutation = { __typename?: 'Mutation', deleteManyActivities: { __typename?: 'AffectedRows', count: number } };
 
+export type ActivityUpdatePartsFragment = { __typename?: 'Activity', id: string, body?: string | null, title?: string | null, type: ActivityType, completedAt?: string | null, dueAt?: string | null, assignee?: { __typename?: 'User', id: string, firstName?: string | null, lastName?: string | null, displayName: string } | null };
+
 export type UpdateActivityMutationVariables = Exact<{
   where: ActivityWhereUniqueInput;
   data: ActivityUpdateInput;
@@ -2831,7 +2833,22 @@ export type DeleteCurrentWorkspaceMutationVariables = Exact<{ [key: string]: nev
 
 export type DeleteCurrentWorkspaceMutation = { __typename?: 'Mutation', deleteCurrentWorkspace: { __typename?: 'Workspace', id: string } };
 
-
+export const ActivityUpdatePartsFragmentDoc = gql`
+    fragment ActivityUpdateParts on Activity {
+  id
+  body
+  title
+  type
+  completedAt
+  dueAt
+  assignee {
+    id
+    firstName
+    lastName
+    displayName
+  }
+}
+    `;
 export const CreateCommentDocument = gql`
     mutation CreateComment($commentId: String!, $commentText: String!, $authorId: String!, $activityId: String!, $createdAt: DateTime!) {
   createOneComment(
@@ -3286,21 +3303,10 @@ export type DeleteActivityMutationOptions = Apollo.BaseMutationOptions<DeleteAct
 export const UpdateActivityDocument = gql`
     mutation UpdateActivity($where: ActivityWhereUniqueInput!, $data: ActivityUpdateInput!) {
   updateOneActivity(where: $where, data: $data) {
-    id
-    body
-    title
-    type
-    completedAt
-    dueAt
-    assignee {
-      id
-      firstName
-      lastName
-      displayName
+    ...ActivityUpdateParts
   }
 }
-}
-    `;
+    ${ActivityUpdatePartsFragmentDoc}`;
 export type UpdateActivityMutationFn = Apollo.MutationFunction<UpdateActivityMutation, UpdateActivityMutationVariables>;
 
 /**

front/src/modules/companies/components/CompanyBoardCard.tsx

@@ -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}>
+                  <EditableFieldEntityIdContext.Provider value={boardCardId}>
                     <GenericEditableField viewField={viewField} />
+                  </EditableFieldEntityIdContext.Provider>
                 </PreventSelectOnClickContainer>
               );
             })}

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

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

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

@@ -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);
     }
   }
 

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

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

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

@@ -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),
       );

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

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

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

@@ -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();

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

@@ -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();
   }

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

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

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

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

front/src/modules/ui/editable-field/states/EditableFieldEntityIdContext.ts

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

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

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