From a5e53d74dc2f4fff19081e8c415c718b4e28b4d4 Mon Sep 17 00:00:00 2001 From: Weiko Date: Mon, 3 Nov 2025 16:35:30 +0100 Subject: [PATCH] fix calendar view when switched from other layout type bis (#15569) --- .../RecordIndexCalendarDataLoaderEffect.tsx | 15 ++++++++------- .../month/components/RecordCalendarMonthBody.tsx | 2 +- .../components/RecordCalendarMonthBodyDay.tsx | 2 +- .../components/RecordCalendarMonthBodyWeek.tsx | 2 +- .../recordCalendarRecordIdsComponentState.ts | 11 +++++++++++ .../calendarDayRecordsComponentFamilySelector.ts | 4 ++-- 6 files changed, 24 insertions(+), 12 deletions(-) create mode 100644 packages/twenty-front/src/modules/object-record/record-calendar/states/recordCalendarRecordIdsComponentState.ts diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordIndexCalendarDataLoaderEffect.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordIndexCalendarDataLoaderEffect.tsx index f382ff28f65..2b5eb07dcf8 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordIndexCalendarDataLoaderEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordIndexCalendarDataLoaderEffect.tsx @@ -1,9 +1,9 @@ import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState'; import { useRecordCalendarGroupByRecords } from '@/object-record/record-calendar/hooks/useRecordCalendarGroupByRecords'; import { RecordCalendarComponentInstanceContext } from '@/object-record/record-calendar/states/contexts/RecordCalendarComponentInstanceContext'; +import { recordCalendarRecordIdsComponentState } from '@/object-record/record-calendar/states/recordCalendarRecordIdsComponentState'; import { recordCalendarSelectedDateComponentState } from '@/object-record/record-calendar/states/recordCalendarSelectedDateComponentState'; import { recordCalendarSelectedRecordIdsComponentSelector } from '@/object-record/record-calendar/states/selectors/recordCalendarSelectedRecordIdsComponentSelector'; -import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore'; import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue'; @@ -26,22 +26,23 @@ export const RecordIndexCalendarDataLoaderEffect = () => { const { upsertRecordsInStore } = useUpsertRecordsInStore(); - const setRecordIndexAllRecordIdsSelector = useSetRecoilComponentState( - recordIndexAllRecordIdsComponentSelector, - ); - const setContextStoreTargetedRecords = useSetRecoilComponentState( contextStoreTargetedRecordsRuleComponentState, ); + const setRecordCalendarRecordIds = useSetRecoilComponentState( + recordCalendarRecordIdsComponentState, + ); + const { records } = useRecordCalendarGroupByRecords( recordCalendarSelectedDate, ); useEffect(() => { upsertRecordsInStore(records); - setRecordIndexAllRecordIdsSelector(records.map((record) => record.id)); - }, [records, setRecordIndexAllRecordIdsSelector, upsertRecordsInStore]); + const recordIds = records.map((record) => record.id); + setRecordCalendarRecordIds(recordIds); + }, [records, setRecordCalendarRecordIds, upsertRecordsInStore]); useEffect(() => { setContextStoreTargetedRecords({ diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx index 6b916b5336e..dc3a81e94b7 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx +++ b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx @@ -8,7 +8,7 @@ const StyledContainer = styled.div` display: flex; flex-direction: column; flex: 1; - border: 0.5px solid ${({ theme }) => theme.border.color.light}; + border: 1px solid ${({ theme }) => theme.border.color.light}; border-radius: 4px; overflow: hidden; `; diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx index f4832038038..c8887f1e7d1 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx +++ b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx @@ -25,7 +25,7 @@ const StyledContainer = styled.div<{ color: ${({ theme }) => theme.font.color.primary}; &:not(:last-child) { - border-right: 0.5px solid ${({ theme }) => theme.border.color.light}; + border-right: 1px solid ${({ theme }) => theme.border.color.light}; } ${({ isOtherMonth, theme }) => diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyWeek.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyWeek.tsx index 04a045786b5..d1f50a67454 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyWeek.tsx +++ b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyWeek.tsx @@ -9,7 +9,7 @@ const StyledContainer = styled.div` flex: 1; &:not(:last-of-type) { - border-bottom: 0.5px solid ${({ theme }) => theme.border.color.light}; + border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; } `; diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/states/recordCalendarRecordIdsComponentState.ts b/packages/twenty-front/src/modules/object-record/record-calendar/states/recordCalendarRecordIdsComponentState.ts new file mode 100644 index 00000000000..18b8eb27004 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-calendar/states/recordCalendarRecordIdsComponentState.ts @@ -0,0 +1,11 @@ +import { RecordCalendarComponentInstanceContext } from '@/object-record/record-calendar/states/contexts/RecordCalendarComponentInstanceContext'; +import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; + +export const recordCalendarRecordIdsComponentState = createComponentState< + string[] +>({ + key: 'recordCalendarRecordIdsComponentState', + defaultValue: [], + componentInstanceContext: RecordCalendarComponentInstanceContext, +}); + diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/states/selectors/calendarDayRecordsComponentFamilySelector.ts b/packages/twenty-front/src/modules/object-record/record-calendar/states/selectors/calendarDayRecordsComponentFamilySelector.ts index e629a13954d..4e401155af5 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/states/selectors/calendarDayRecordsComponentFamilySelector.ts +++ b/packages/twenty-front/src/modules/object-record/record-calendar/states/selectors/calendarDayRecordsComponentFamilySelector.ts @@ -1,8 +1,8 @@ import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; import { hasObjectMetadataItemPositionField } from '@/object-metadata/utils/hasObjectMetadataItemPositionField'; import { RecordCalendarComponentInstanceContext } from '@/object-record/record-calendar/states/contexts/RecordCalendarComponentInstanceContext'; +import { recordCalendarRecordIdsComponentState } from '@/object-record/record-calendar/states/recordCalendarRecordIdsComponentState'; import { recordIndexCalendarFieldMetadataIdState } from '@/object-record/record-index/states/recordIndexCalendarFieldMetadataIdState'; -import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { createComponentFamilySelector } from '@/ui/utilities/state/component-state/utils/createComponentFamilySelector'; import { isSameDay, parse } from 'date-fns'; @@ -42,7 +42,7 @@ export const calendarDayRecordIdsComponentFamilySelector = } const allRecordIds = get( - recordIndexAllRecordIdsComponentSelector.selectorFamily({ + recordCalendarRecordIdsComponentState.atomFamily({ instanceId, }), );