[state] Re-use in components

Author: jamesgpearce

src/ui-react-dom/EditableCellView.tsx

@@ -1,12 +1,7 @@
-import type {Cell} from '../@types/index.d.ts';
 import type {EditableCellView as EditableCellViewDecl} from '../@types/ui-react-dom/index.d.ts';
 import type {CellProps} from '../@types/ui-react/index.d.ts';
 import {CELL} from '../common/strings.ts';
-import {
-  useCell,
-  useSetCellCallback,
-  useStoreOrStoreById,
-} from '../ui-react/hooks.ts';
+import {useCellState, useStoreOrStoreById} from '../ui-react/hooks.ts';
 import {EditableThing} from './common/components.tsx';
 import {EDITABLE} from './common/index.tsx';
 
@@ -17,19 +12,15 @@ export const EditableCellView: typeof EditableCellViewDecl = ({
   store,
   className,
   showType,
-}: CellProps & {readonly className?: string; readonly showType?: boolean}) => (
-  <EditableThing
-    thing={useCell(tableId, rowId, cellId, store)}
-    onThingChange={useSetCellCallback(
-      tableId,
-      rowId,
-      cellId,
-      (cell: Cell) => cell,
-      [],
-      store,
-    )}
-    className={className ?? EDITABLE + CELL}
-    showType={showType}
-    hasSchema={useStoreOrStoreById(store)?.hasTablesSchema}
-  />
-);
+}: CellProps & {readonly className?: string; readonly showType?: boolean}) => {
+  const [cell, setCell] = useCellState(tableId, rowId, cellId, store);
+  return (
+    <EditableThing
+      thing={cell}
+      onThingChange={setCell}
+      className={className ?? EDITABLE + CELL}
+      showType={showType}
+      hasSchema={useStoreOrStoreById(store)?.hasTablesSchema}
+    />
+  );
+};

src/ui-react-dom/EditableValueView.tsx

@@ -1,12 +1,7 @@
-import type {Value} from '../@types/index.d.ts';
 import type {EditableValueView as EditableValueViewDecl} from '../@types/ui-react-dom/index.d.ts';
 import type {ValueProps} from '../@types/ui-react/index.d.ts';
 import {VALUE} from '../common/strings.ts';
-import {
-  useSetValueCallback,
-  useStoreOrStoreById,
-  useValue,
-} from '../ui-react/hooks.ts';
+import {useStoreOrStoreById, useValueState} from '../ui-react/hooks.ts';
 import {EditableThing} from './common/components.tsx';
 import {EDITABLE} from './common/index.tsx';
 
@@ -15,17 +10,15 @@ export const EditableValueView: typeof EditableValueViewDecl = ({
   store,
   className,
   showType,
-}: ValueProps & {readonly className?: string; readonly showType?: boolean}) => (
-  <EditableThing
-    thing={useValue(valueId, store)}
-    onThingChange={useSetValueCallback(
-      valueId,
-      (value: Value) => value,
-      [],
-      store,
-    )}
-    className={className ?? EDITABLE + VALUE}
-    showType={showType}
-    hasSchema={useStoreOrStoreById(store)?.hasValuesSchema}
-  />
-);
+}: ValueProps & {readonly className?: string; readonly showType?: boolean}) => {
+  const [value, setValue] = useValueState(valueId, store);
+  return (
+    <EditableThing
+      thing={value}
+      onThingChange={setValue}
+      className={className ?? EDITABLE + VALUE}
+      showType={showType}
+      hasSchema={useStoreOrStoreById(store)?.hasValuesSchema}
+    />
+  );
+};

src/ui-react-dom/common/components.tsx

@@ -136,7 +136,7 @@ export const EditableThing = <Thing extends Cell | Value>({
   showType = true,
 }: {
   readonly thing: Thing | undefined;
-  readonly onThingChange: (thing: Thing | undefined) => void;
+  readonly onThingChange: (thing: Thing) => void;
   readonly className: string;
   readonly hasSchema: (() => boolean) | undefined;
   readonly showType?: boolean;