Use selectors instead of storing in state

Author: flaviendelangle

packages/x-scheduler-headless/src/scheduler-selectors/schedulerEventSelectors.ts

@@ -1,12 +1,40 @@
 import { createSelector, createSelectorMemoized } from '@base-ui-components/utils/store';
-import { SchedulerEvent, CalendarEventId } from '../models';
+import { SchedulerEvent, CalendarEventId, SchedulerProcessedEvent } from '../models';
 import { SchedulerState as State } from '../utils/SchedulerStore/SchedulerStore.types';
 import { schedulerResourceSelectors } from './schedulerResourceSelectors';
+import { getProcessedEventFromModel } from '../utils/SchedulerStore/SchedulerStore.utils';
+
+const processedEventsState = createSelectorMemoized(
+  (state: State) => state.adapter,
+  (state: State) => state.eventModelStructure,
+  (state: State) => state.eventModelList,
+  (adapter, eventModelStructure, eventModelList) => {
+    const eventIdList: CalendarEventId[] = [];
+    const eventModelLookup = new Map<CalendarEventId, any>();
+    const processedEventLookup = new Map<CalendarEventId, SchedulerProcessedEvent>();
+    const processedEventList: SchedulerProcessedEvent[] = [];
+
+    for (const event of eventModelList) {
+      const processedEvent = getProcessedEventFromModel(event, adapter, eventModelStructure);
+      eventIdList.push(processedEvent.id);
+      eventModelLookup.set(processedEvent.id, event);
+      processedEventLookup.set(processedEvent.id, processedEvent);
+      processedEventList.push(processedEvent);
+    }
+
+    return {
+      idList: eventIdList,
+      modelLookup: eventModelLookup,
+      processedLookup: processedEventLookup,
+      processedList: processedEventList,
+    };
+  },
+);
 
 const processedEventSelector = createSelector(
-  (state: State) => state.processedEventLookup,
-  (processedEventLookup, eventId: CalendarEventId | null | undefined) =>
-    eventId == null ? null : processedEventLookup.get(eventId),
+  processedEventsState,
+  (eventState, eventId: CalendarEventId | null | undefined) =>
+    eventId == null ? null : eventState.processedLookup.get(eventId),
 );
 
 const isEventReadOnlySelector = createSelector(
@@ -55,14 +83,13 @@ export const schedulerEventSelectors = {
     },
   ),
   isMultiDayEvent: createSelector((state: State) => state.isMultiDayEvent),
-  processedEventList: createSelectorMemoized(
-    (state: State) => state.eventIdList,
-    (state: State) => state.processedEventLookup,
-    (eventIds, processedEventLookup) => eventIds.map((id) => processedEventLookup.get(id)!),
+  processedEventList: createSelector(
+    processedEventsState,
+    (eventState) => eventState.processedList,
   ),
-  idList: createSelector((state: State) => state.eventIdList),
+  idList: createSelector(processedEventsState, (eventState) => eventState.idList),
   modelList: createSelector((state: State) => state.eventModelList),
-  modelLookup: createSelector((state: State) => state.eventModelLookup),
+  modelLookup: createSelector(processedEventsState, (eventState) => eventState.modelLookup),
   canDragEventsFromTheOutside: createSelector(
     (state: State) => state.canDragEventsFromTheOutside && !state.readOnly,
   ),

packages/x-scheduler-headless/src/scheduler-selectors/schedulerResourceSelectors.ts

@@ -1,27 +1,50 @@
 import { createSelector, createSelectorMemoized } from '@base-ui-components/utils/store';
 import { SchedulerState as State } from '../utils/SchedulerStore/SchedulerStore.types';
+import { CalendarResource, CalendarResourceId } from '../models';
+import { getProcessedResourceFromModel } from '../utils/SchedulerStore/SchedulerStore.utils';
+
+const processedResourcesState = createSelectorMemoized(
+  (state: State) => state.adapter,
+  (state: State) => state.resourceModelStructure,
+  (adapter, resourceModelStructure, resourceModelList) => {
+    const resourceIdList: string[] = [];
+    const processedResourceLookup = new Map<CalendarResourceId, CalendarResource>();
+    const processedResourceList: CalendarResource[] = [];
+
+    for (const resource of resourceModelList) {
+      const processedResource = getProcessedResourceFromModel(resource, resourceModelStructure);
+      resourceIdList.push(processedResource.id);
+      processedResourceLookup.set(processedResource.id, processedResource);
+      processedResourceList.push(processedResource);
+    }
+
+    return {
+      idList: resourceIdList,
+      processedLookup: processedResourceLookup,
+      processedList: processedResourceList,
+    };
+  },
+);
 
 const processedResourceSelector = createSelector(
-  (state: State) => state.processedResourceLookup,
-  (processedResourceLookup, resourceId: string | null | undefined) =>
-    resourceId == null ? null : processedResourceLookup.get(resourceId),
+  processedResourcesState,
+  (resourceState, resourceId: string | null | undefined) =>
+    resourceId == null ? null : resourceState.processedLookup.get(resourceId),
 );
 
 export const schedulerResourceSelectors = {
   processedResource: processedResourceSelector,
-  processedResourceList: createSelectorMemoized(
-    (state: State) => state.resourceIdList,
-    (state: State) => state.processedResourceLookup,
-    (resourceIds, processedResourceLookup) =>
-      resourceIds.map((id) => processedResourceLookup.get(id)!),
+  processedResourceList: createSelector(
+    processedResourcesState,
+    (resourceState) => resourceState.processedList,
   ),
-  idList: createSelector((state: State) => state.resourceIdList),
+  idList: createSelector(processedResourcesState, (resourceState) => resourceState.idList),
   visibleMap: createSelector((state: State) => state.visibleResources),
   visibleIdList: createSelectorMemoized(
-    (state: State) => state.resourceIdList,
+    processedResourcesState,
     (state: State) => state.visibleResources,
-    (resources, visibleResources) =>
-      resources
+    (resourceState, visibleResources) =>
+      resourceState.idList
         .filter(
           (resourceId) =>
             !visibleResources.has(resourceId) || visibleResources.get(resourceId) === true,

packages/x-scheduler-headless/src/use-event-calendar/tests/core.EventCalendarStore.test.ts

@@ -7,6 +7,7 @@ import {
   DEFAULT_VIEWS,
   EventCalendarStore,
 } from '../EventCalendarStore';
+import { EventCalendarState } from '../EventCalendarStore.types';
 import { CalendarView } from '../../models';
 import { DEFAULT_IS_MULTI_DAY_EVENT } from '../../utils/SchedulerStore';
 
@@ -19,17 +20,13 @@ describe('Core - EventCalendarStore', () => {
     it('should initialize default state', () => {
       const store = new EventCalendarStore(DEFAULT_PARAMS, adapter);
 
-      const expectedState = {
+      const expectedState: EventCalendarState = {
         adapter,
         view: DEFAULT_VIEW,
         views: DEFAULT_VIEWS,
-        eventIdList: [],
         eventModelList: [],
-        eventModelLookup: new Map(),
-        processedEventLookup: new Map(),
+        resourceModelList: [],
         eventModelStructure: undefined,
-        resourceIdList: [],
-        processedResourceLookup: new Map(),
         resourceModelStructure: undefined,
         visibleResources: new Map(),
         nowUpdatedEveryMinute: adapter.date(),

packages/x-scheduler-headless/src/use-timeline/tests/core.TimelineStore.test.ts

@@ -2,6 +2,7 @@ import { adapter } from 'test/utils/scheduler';
 import { createRenderer } from '@mui/internal-test-utils/createRenderer';
 import { DEFAULT_IS_MULTI_DAY_EVENT } from '../../utils/SchedulerStore';
 import { DEFAULT_PREFERENCES, TimelineStore } from '../TimelineStore';
+import { TimelineState } from '../TimelineStore.types';
 
 const DEFAULT_PARAMS = { events: [] };
 
@@ -12,16 +13,12 @@ describe('Core - TimelineStore', () => {
     it('should initialize default state', () => {
       const store = new TimelineStore(DEFAULT_PARAMS, adapter);
 
-      const expectedState = {
+      const expectedState: TimelineState = {
         adapter,
         visibleResources: new Map(),
-        eventIdList: [],
         eventModelList: [],
-        eventModelLookup: new Map(),
-        processedEventLookup: new Map(),
+        resourceModelList: [],
         eventModelStructure: undefined,
-        resourceIdList: [],
-        processedResourceLookup: new Map(),
         resourceModelStructure: undefined,
         nowUpdatedEveryMinute: adapter.date(),
         isMultiDayEvent: DEFAULT_IS_MULTI_DAY_EVENT,

packages/x-scheduler-headless/src/utils/SchedulerStore/SchedulerStore.ts

@@ -1,6 +1,7 @@
 import { Store } from '@base-ui-components/utils/store';
 // TODO: Use the Base UI warning utility once it supports cleanup in tests.
 import { warnOnce } from '@mui/x-internals/warning';
+import { EMPTY_ARRAY, EMPTY_OBJECT } from '@base-ui-components/utils/empty';
 import {
   SchedulerProcessedEvent,
   CalendarEventId,
@@ -29,8 +30,6 @@ import {
 } from '../recurring-event-utils';
 import { schedulerEventSelectors } from '../../scheduler-selectors';
 import {
-  buildEventsState,
-  buildResourcesState,
   createEventModel,
   getUpdatedEventModelFromChanges,
   shouldUpdateOccurrencePlaceholder,
@@ -80,10 +79,8 @@ export class SchedulerStore<
     instanceName: string,
     mapper: SchedulerParametersToStateMapper<State, Parameters>,
   ) {
-    const schedulerInitialState: SchedulerState<TEvent> = {
+    const schedulerInitialState: SchedulerState<TEvent, TResource> = {
       ...SchedulerStore.deriveStateFromParameters(parameters, adapter),
-      ...buildEventsState(parameters, adapter),
-      ...buildResourcesState(parameters),
       preferences: DEFAULT_SCHEDULER_PREFERENCES,
       adapter,
       occurrencePlaceholder: null,
@@ -130,6 +127,10 @@ export class SchedulerStore<
   ) {
     return {
       adapter,
+      eventModelList: parameters.events,
+      eventModelStructure: parameters.eventModelStructure ?? EMPTY_OBJECT,
+      resourceModelList: parameters.resources ?? EMPTY_ARRAY,
+      resourceModelStructure: parameters.resourceModelStructure ?? EMPTY_OBJECT,
       areEventsDraggable: parameters.areEventsDraggable ?? false,
       areEventsResizable: parameters.areEventsResizable ?? false,
       canDragEventsFromTheOutside: parameters.canDragEventsFromTheOutside ?? false,
@@ -183,21 +184,6 @@ export class SchedulerStore<
       adapter,
     ) as Partial<State>;
 
-    if (
-      parameters.events !== this.parameters.events ||
-      parameters.eventModelStructure !== this.parameters.eventModelStructure ||
-      adapter !== this.state.adapter
-    ) {
-      Object.assign(newSchedulerState, buildEventsState(parameters, adapter));
-    }
-
-    if (
-      parameters.resources !== this.parameters.resources ||
-      parameters.resourceModelStructure !== this.parameters.resourceModelStructure
-    ) {
-      Object.assign(newSchedulerState, buildResourcesState(parameters));
-    }
-
     updateModel(newSchedulerState, 'visibleDate', 'defaultVisibleDate');
 
     const newState = this.mapper.updateStateFromParameters(

packages/x-scheduler-headless/src/utils/SchedulerStore/SchedulerStore.types.ts

@@ -3,7 +3,6 @@ import {
   CalendarEventColor,
   CalendarEventOccurrence,
   CalendarOccurrencePlaceholder,
-  CalendarResource,
   CalendarResourceId,
   CalendarEventUpdatedProperties,
   SchedulerValidDate,
@@ -15,7 +14,7 @@ import {
 } from '../../models';
 import { Adapter } from '../../use-adapter/useAdapter.types';
 
-export interface SchedulerState<TEvent extends object = any> {
+export interface SchedulerState<TEvent extends object = any, TResource extends object = any> {
   /**
    * The adapter of the date library.
    * Not publicly exposed, is only set in state to avoid passing it to the selectors.
@@ -29,32 +28,16 @@ export interface SchedulerState<TEvent extends object = any> {
    * The model of the events available in the calendar as provided to props.events.
    */
   eventModelList: readonly TEvent[];
-  /**
-   * The IDs of the events available in the calendar.
-   */
-  eventIdList: CalendarEventId[];
-  /**
-   * A lookup to get the event model as provided to props.events from its ID.
-   */
-  eventModelLookup: Map<CalendarEventId, TEvent>;
-  /**
-   * A lookup to get the processed event from its ID.
-   */
-  processedEventLookup: Map<CalendarEventId, SchedulerProcessedEvent>;
   /**
    * The structure of the event model.
    * It defines how to read and write properties of the event model.
    * If not provided, the event model is assumed to match the `CalendarEvent` interface.
    */
   eventModelStructure: SchedulerEventModelStructure<any> | undefined;
   /**
-   * The IDs of the resources the events can be assigned to.
-   */
-  resourceIdList: readonly CalendarResourceId[];
-  /**
-   * A lookup to get the processed resource from its ID.
+   * The model of the resources available in the calendar as provided to props.resources.
    */
-  processedResourceLookup: Map<CalendarResourceId, CalendarResource>;
+  resourceModelList: readonly TResource[];
   /**
    * The structure of the resource model.
    * It defines how to read properties of the resource model.

packages/x-scheduler-headless/src/utils/SchedulerStore/SchedulerStore.utils.ts

@@ -1,17 +1,13 @@
-import { EMPTY_ARRAY } from '@base-ui-components/utils/empty';
 import {
   SchedulerProcessedEvent,
-  CalendarEventId,
   CalendarOccurrencePlaceholder,
   CalendarResource,
-  CalendarResourceId,
   SchedulerEventModelStructure,
   SchedulerResourceModelStructure,
   SchedulerEvent,
 } from '../../models';
 import { processEvent } from '../../process-event';
 import { Adapter } from '../../use-adapter/useAdapter.types';
-import { SchedulerParameters, SchedulerState } from './SchedulerStore.types';
 
 /**
  * Determines if the occurrence placeholder has changed in a meaningful way that requires updating the store.
@@ -41,8 +37,6 @@ export function shouldUpdateOccurrencePlaceholder(
   return false;
 }
 
-export const DEFAULT_EVENT_MODEL_STRUCTURE: SchedulerEventModelStructure<any> = {};
-
 const EVENT_PROPERTIES_LOOKUP: { [P in keyof SchedulerEvent]-?: true } = {
   id: true,
   title: true,
@@ -174,58 +168,3 @@ type AnyEventSetter<TEvent extends object> = (
   event: TEvent | Partial<TEvent>,
   value: any,
 ) => TEvent;
-
-export function buildEventsState<TEvent extends object, TResource extends object>(
-  parameters: Pick<SchedulerParameters<TEvent, TResource>, 'events' | 'eventModelStructure'>,
-  adapter: Adapter,
-): Pick<
-  SchedulerState<TEvent>,
-  | 'eventIdList'
-  | 'eventModelLookup'
-  | 'processedEventLookup'
-  | 'eventModelStructure'
-  | 'eventModelList'
-> {
-  const { events, eventModelStructure } = parameters;
-
-  const eventIdList: CalendarEventId[] = [];
-  const eventModelLookup = new Map<CalendarEventId, TEvent>();
-  const processedEventLookup = new Map<CalendarEventId, SchedulerProcessedEvent>();
-  for (const event of events) {
-    const processedEvent = getProcessedEventFromModel(event, adapter, eventModelStructure);
-    eventIdList.push(processedEvent.id);
-    eventModelLookup.set(processedEvent.id, event);
-    processedEventLookup.set(processedEvent.id, processedEvent);
-  }
-
-  return {
-    eventIdList,
-    eventModelLookup,
-    eventModelStructure,
-    processedEventLookup,
-    eventModelList: events,
-  };
-}
-
-export function buildResourcesState<TEvent extends object, TResource extends object>(
-  parameters: Pick<SchedulerParameters<TEvent, TResource>, 'resources' | 'resourceModelStructure'>,
-): Pick<
-  SchedulerState<TEvent>,
-  'resourceIdList' | 'processedResourceLookup' | 'resourceModelStructure'
-> {
-  const { resources = EMPTY_ARRAY, resourceModelStructure } = parameters;
-
-  const resourceIdList: string[] = [];
-  const processedResourceLookup = new Map<CalendarResourceId, CalendarResource>();
-  for (const resource of resources) {
-    const processedResource = getProcessedResourceFromModel(resource, resourceModelStructure);
-    resourceIdList.push(processedResource.id);
-    processedResourceLookup.set(processedResource.id, processedResource);
-  }
-
-  return {
-    resourceIdList,
-    processedResourceLookup,
-    resourceModelStructure,
-  };
-}