From 5b9a6a164865a31db4da0c6c0f4e8cc09450eba9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Magrin?= Date: Thu, 24 Oct 2024 17:57:14 +0200 Subject: [PATCH] feat: wip record table view group --- .../hooks/useRecordGroupDefinition.ts | 25 ++++++++++--------- .../states/tableRowIdsComponentState.ts | 6 ++++- .../useAvailableComponentInstanceIdOrThrow.ts | 16 +++++++++--- .../utils/createComponentFamilySelectorV2.ts | 6 ++++- .../utils/createComponentFamilyStateV2.ts | 6 ++++- .../utils/createComponentSelectorV2.ts | 16 +++++++++--- .../utils/createComponentStateV2.ts | 6 ++++- .../globalComponentInstanceContextMap.ts | 14 +++++++++-- 8 files changed, 71 insertions(+), 24 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupDefinition.ts b/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupDefinition.ts index 6eae2afe8..460c41584 100644 --- a/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupDefinition.ts +++ b/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupDefinition.ts @@ -1,25 +1,26 @@ +import { RecordGroupTableInstanceContext } from '@/object-record/record-group/states/contexts/RecordGroupTableInstanceContext'; import { recordGroupDefinitionsComponentState } from '@/object-record/record-group/states/recordGroupDefinitionsComponentState'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; -import { useMemo } from 'react'; +import { useContext, useMemo } from 'react'; +import { isDefined } from '~/utils/isDefined'; export const useRecordGroupDefintion = () => { const recordGroupDefinitions = useRecoilComponentValueV2( recordGroupDefinitionsComponentState, ); - // const currentViewContext = useContext(RecordGroupTableInstanceContext); + const currentViewContext = useContext(RecordGroupTableInstanceContext); - // if (!isDefined(currentViewContext)) { - // throw new Error('Current view context is not defined'); - // } + const recordGroupDefinition = useMemo(() => { + if (!isDefined(currentViewContext)) { + return null; + } - const recordGroupDefinition = useMemo( - () => - recordGroupDefinitions.find( - (recordGroupDefinition) => recordGroupDefinition.id === 'TODO', - ), - [recordGroupDefinitions], - ); + return recordGroupDefinitions.find( + (recordGroupDefinition) => + recordGroupDefinition.id === currentViewContext.instanceId, + ); + }, [recordGroupDefinitions, currentViewContext]); return recordGroupDefinition; }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsComponentState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsComponentState.ts index 135fd0348..29ecbb9ef 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsComponentState.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/states/tableRowIdsComponentState.ts @@ -1,8 +1,12 @@ +import { RecordGroupTableInstanceContext } from '@/object-record/record-group/states/contexts/RecordGroupTableInstanceContext'; import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext'; import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2'; export const tableRowIdsComponentState = createComponentStateV2({ key: 'tableRowIdsComponentState', defaultValue: [], - componentInstanceContext: RecordTableScopeInternalContext, + componentInstanceContext: [ + RecordTableScopeInternalContext, + RecordGroupTableInstanceContext, + ], }); diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow.ts index 8a497e3c3..ea57d67ba 100644 --- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow.ts +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow.ts @@ -1,16 +1,26 @@ import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext'; import { ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext'; import { isNonEmptyString } from '@sniptt/guards'; +import { FixedLengthArray } from 'type-fest'; export const useAvailableComponentInstanceIdOrThrow = < T extends { instanceId: string }, >( - Context: ComponentInstanceStateContext, + Context: + | FixedLengthArray, 2> + | ComponentInstanceStateContext, instanceIdFromProps?: string, ): string => { - const instanceStateContext = useComponentInstanceStateContext(Context); + const firstInstanceStateContext = useComponentInstanceStateContext( + Array.isArray(Context) ? Context[0] : Context, + ); + const secondInstanceStateContext = useComponentInstanceStateContext( + Array.isArray(Context) ? Context[1] : Context, + ); - const instanceIdFromContext = instanceStateContext?.instanceId; + const instanceIdFromContext = + secondInstanceStateContext?.instanceId ?? + firstInstanceStateContext?.instanceId; if (isNonEmptyString(instanceIdFromProps)) { return instanceIdFromProps; diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilySelectorV2.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilySelectorV2.ts index 04c9a2d2a..7209b178e 100644 --- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilySelectorV2.ts +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilySelectorV2.ts @@ -8,6 +8,7 @@ import { globalComponentInstanceContextMap } from '@/ui/utilities/state/componen import { SelectorGetter } from '@/ui/utilities/state/types/SelectorGetter'; import { SelectorSetter } from '@/ui/utilities/state/types/SelectorSetter'; import { isDefined } from 'twenty-ui'; +import { FixedLengthArray } from 'type-fest'; export const createComponentFamilySelectorV2 = < ValueType, @@ -21,7 +22,10 @@ export const createComponentFamilySelectorV2 = < key: string; get: SelectorGetter>; set?: SelectorSetter>; - componentInstanceContext: ComponentInstanceStateContext | null; + componentInstanceContext: + | FixedLengthArray, 2> + | ComponentInstanceStateContext + | null; }): | ComponentFamilySelectorV2 | ComponentFamilyReadOnlySelectorV2 => { diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilyStateV2.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilyStateV2.ts index 2d1f42e61..f41671a13 100644 --- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilyStateV2.ts +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentFamilyStateV2.ts @@ -5,11 +5,15 @@ import { globalComponentInstanceContextMap } from '@/ui/utilities/state/componen import { AtomEffect, atomFamily, SerializableParam } from 'recoil'; import { isDefined } from 'twenty-ui'; +import { FixedLengthArray } from 'type-fest'; type CreateComponentFamilyStateArgs = { key: string; defaultValue: ValueType; - componentInstanceContext: ComponentInstanceStateContext | null; + componentInstanceContext: + | FixedLengthArray, 2> + | ComponentInstanceStateContext + | null; effects?: AtomEffect[]; }; diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentSelectorV2.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentSelectorV2.ts index 8f08559d7..ae3cb356b 100644 --- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentSelectorV2.ts +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentSelectorV2.ts @@ -10,18 +10,25 @@ import { globalComponentInstanceContextMap } from '@/ui/utilities/state/componen import { SelectorGetter } from '@/ui/utilities/state/types/SelectorGetter'; import { SelectorSetter } from '@/ui/utilities/state/types/SelectorSetter'; import { isDefined } from 'twenty-ui'; +import { FixedLengthArray } from 'type-fest'; export function createComponentSelectorV2(options: { key: string; get: SelectorGetter; - componentInstanceContext: ComponentInstanceStateContext | null; + componentInstanceContext: + | FixedLengthArray, 2> + | ComponentInstanceStateContext + | null; }): ComponentReadOnlySelectorV2; export function createComponentSelectorV2(options: { key: string; get: SelectorGetter; set: SelectorSetter; - componentInstanceContext: ComponentInstanceStateContext | null; + componentInstanceContext: + | FixedLengthArray, 2> + | ComponentInstanceStateContext + | null; }): ComponentSelectorV2; export function createComponentSelectorV2({ @@ -33,7 +40,10 @@ export function createComponentSelectorV2({ key: string; get: SelectorGetter; set?: SelectorSetter; - componentInstanceContext: ComponentInstanceStateContext | null; + componentInstanceContext: + | FixedLengthArray, 2> + | ComponentInstanceStateContext + | null; }): ComponentSelectorV2 | ComponentReadOnlySelectorV2 { if (isDefined(componentInstanceContext)) { globalComponentInstanceContextMap.set(key, componentInstanceContext); diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentStateV2.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentStateV2.ts index dc87cbf0c..8bcc6bcaf 100644 --- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentStateV2.ts +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/createComponentStateV2.ts @@ -3,13 +3,17 @@ import { ComponentStateKeyV2 } from '@/ui/utilities/state/component-state/types/ import { ComponentStateV2 } from '@/ui/utilities/state/component-state/types/ComponentStateV2'; import { globalComponentInstanceContextMap } from '@/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap'; import { AtomEffect, atomFamily } from 'recoil'; +import { FixedLengthArray } from 'type-fest'; import { isDefined } from '~/utils/isDefined'; type CreateComponentInstanceStateArgs = { key: string; defaultValue: ValueType; - componentInstanceContext: ComponentInstanceStateContext | null; + componentInstanceContext: + | FixedLengthArray, 2> + | ComponentInstanceStateContext + | null; effects?: AtomEffect[]; }; diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap.ts index 3dd5ce612..6f6e50f1f 100644 --- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap.ts +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/utils/globalComponentInstanceContextMap.ts @@ -1,5 +1,6 @@ import { ComponentInstanceStateContext } from '@/ui/utilities/state/component-state/types/ComponentInstanceStateContext'; import { isDefined } from 'twenty-ui'; +import { FixedLengthArray } from 'type-fest'; class ComponentInstanceContextMap { constructor() { @@ -8,11 +9,20 @@ class ComponentInstanceContextMap { } } - public get(key: string): ComponentInstanceStateContext { + public get( + key: string, + ): + | FixedLengthArray, 2> + | ComponentInstanceStateContext { return (window as any).componentComponentStateContextMap.get(key); } - public set(key: string, context: ComponentInstanceStateContext) { + public set( + key: string, + context: + | FixedLengthArray, 2> + | ComponentInstanceStateContext, + ) { (window as any).componentComponentStateContextMap.set(key, context); } }