Selective context works well for generalized DTO store with entity na…

…me key pattern.

app/generic/components/overlays/pending-overlay.tsx

@@ -1,3 +1,5 @@
+import { Spinner } from '@nextui-org/spinner';
+
 export function PendingOverlay(props: { pending: boolean }) {
   return (
     <>
@@ -7,9 +9,9 @@ export function PendingOverlay(props: { pending: boolean }) {
             'w-full h-full absolute bg-slate-100 opacity-75 top-0 left-0 z-20 flex place-content-center'
           }
         >
-          <span className='loading loading-spinner loading-lg'></span>
+          <Spinner />
         </div>
       )}
     </>
   );
-}
+}

app/playground/page.tsx

@@ -2,19 +2,28 @@ import { Card } from '@nextui-org/card';
 import SelectiveContextManagerGlobal from '../selective-context/components/global/selective-context-manager-global';
 import { isNotUndefined } from '../api/main';
 import { DataNotFoundCard } from '../timetables/students/[schedule]/data-not-found-card';
-import { getPage } from '../api/READ-ONLY-generated-actions/Carousel';
+import { getAll } from '../api/READ-ONLY-generated-actions/WorkTaskType';
+import DtoControllerArray from '../selective-context/components/controllers/dto-controller-array';
+import SomeComponentInterestedInADto from './some-component-interested-in-a-dto';
 
 export default async function PlaygroundPage({}: {}) {
-  const actionResponse = await getPage({});
+  const { data: assetList } = await getAll();
 
-  const data = undefined;
-
-  if (!isNotUndefined(data))
+  if (!isNotUndefined(assetList))
     return <DataNotFoundCard>No matrix.</DataNotFoundCard>;
 
   return (
     <SelectiveContextManagerGlobal>
-      <Card className={'flex gap-4'}></Card>
+      {<DtoControllerArray dtoArray={assetList} entityName={'workTaskType'} />}
+      <Card className={'flex gap-4'}>
+        {assetList.map((workTaskType) => (
+          <SomeComponentInterestedInADto
+            entityName={'workTaskType'}
+            id={workTaskType.id}
+            key={`asset:${workTaskType.id}`}
+          />
+        ))}
+      </Card>
     </SelectiveContextManagerGlobal>
   );
 }

app/playground/some-component-interested-in-a-dto.tsx

@@ -0,0 +1,37 @@
+'use client';
+import { useSelectiveContextGlobalListener } from '../selective-context/components/global/selective-context-manager-global';
+import { ObjectPlaceholder } from '../selective-context/components/typed/selective-context-manager-function';
+import { NameIdStringTuple } from '../api/dtos/NameIdStringTupleSchema';
+import { Badge, Card } from '@tremor/react';
+import {
+  useDtoStoreDispatch,
+  useDtoStoreListener
+} from '../selective-context/hooks/dtoStores/use-dto-store';
+import { HasNumberIdDto } from '../api/dtos/HasNumberIdDtoSchema';
+import { HasNameDto } from '../api/dtos/HasNameDtoSchema';
+import { isNotUndefined } from '../api/main';
+import { PendingOverlay } from '../generic/components/overlays/pending-overlay';
+import { Button } from '@nextui-org/button';
+
+export default function SomeComponentInterestedInADto<
+  T extends HasNumberIdDto & HasNameDto
+>({ entityName, id }: { entityName: string; id: string | number }) {
+  const { currentState, dispatchWithoutControl } = useDtoStoreDispatch<T>(
+    id,
+    entityName,
+    'someComponent'
+  );
+  console.log(currentState);
+
+  const handleClick = () => {
+    dispatchWithoutControl((dto) => ({ ...dto, name: `${dto.name}ol` }));
+  };
+
+  return (
+    <Card>
+      {<PendingOverlay pending={currentState === ObjectPlaceholder} />}
+      <Button onPress={handleClick}>Current name: {currentState.name}</Button>
+      <Badge>Current id: {currentState.id}</Badge>
+    </Card>
+  );
+}

app/selective-context/components/controllers/dto-controller-array.tsx

@@ -0,0 +1,22 @@
+import { HasNumberIdDto } from '../../../api/dtos/HasNumberIdDtoSchema';
+import { HasUuidDto } from '../../../api/dtos/HasUuidDtoSchema';
+import DtoController from './dto-controller';
+
+export interface DtoControllerArrayProps<
+  T extends HasNumberIdDto | HasUuidDto
+> {
+  dtoArray: T[];
+  entityName: string;
+}
+
+export default function DtoControllerArray<
+  T extends HasNumberIdDto | HasUuidDto
+>({ dtoArray, entityName }: DtoControllerArrayProps<T>) {
+  return dtoArray.map((dto) => (
+    <DtoController
+      key={`${entityName}:${dto.id}`}
+      dto={dto}
+      entityName={entityName}
+    />
+  ));
+}

app/selective-context/components/controllers/dto-controller.tsx

@@ -0,0 +1,18 @@
+'use client';
+import { HasNumberIdDto } from '../../../api/dtos/HasNumberIdDtoSchema';
+import { HasUuidDto } from '../../../api/dtos/HasUuidDtoSchema';
+import { useDtoStoreController } from '../../hooks/dtoStores/use-dto-store';
+
+export interface DtoControllerProps<T extends HasNumberIdDto | HasUuidDto> {
+  dto: T;
+  entityName: string;
+}
+
+export default function DtoController<T extends HasNumberIdDto | HasUuidDto>({
+  dto,
+  entityName
+}: DtoControllerProps<T>) {
+  const { currentState } = useDtoStoreController(dto, entityName);
+  console.log(currentState);
+  return null;
+}

app/selective-context/hooks/dtoStores/use-dto-store.ts

@@ -0,0 +1,41 @@
+import {
+  useSelectiveContextAnyController,
+  useSelectiveContextAnyDispatch,
+  useSelectiveContextGlobalListener
+} from '../../components/global/selective-context-manager-global';
+import { HasUuidDto } from '../../../api/dtos/HasUuidDtoSchema';
+import { HasNumberIdDto } from '../../../api/dtos/HasNumberIdDtoSchema';
+import { ObjectPlaceholder } from '../../components/typed/selective-context-manager-function';
+
+export function useDtoStoreController<T extends HasUuidDto | HasNumberIdDto>(
+  dto: T,
+  entityType: string
+) {
+  return useSelectiveContextAnyController<T>({
+    contextKey: `${entityType}:${dto.id}`,
+    initialValue: dto,
+    listenerKey: 'controller'
+  });
+}
+export function useDtoStoreDispatch<T extends HasUuidDto | HasNumberIdDto>(
+  id: number | string,
+  entityType: string,
+  listenerKey: string
+) {
+  return useSelectiveContextAnyDispatch<T>({
+    contextKey: `${entityType}:${id}`,
+    initialValue: ObjectPlaceholder as T,
+    listenerKey: listenerKey
+  });
+}
+export function useDtoStoreListener<T extends HasUuidDto | HasNumberIdDto>(
+  id: number | string,
+  entityType: string,
+  listenerKey: string
+) {
+  return useSelectiveContextGlobalListener<T>({
+    contextKey: `${entityType}:${id}`,
+    initialValue: ObjectPlaceholder as T,
+    listenerKey: listenerKey
+  });
+}