@dxos/react-async 2.28.2

package/src/useStateUpdater.test.tsx

@@ -0,0 +1,58 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import expect from 'expect';
+import 'raf/polyfill';
+import React, { useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import waitForExpect from 'wait-for-expect';
+
+import { useStateUpdater } from './useStateUpdater';
+
+// Don't copy this.
+const complex = {
+
+};
+
+const Test = () => {
+  const [value,, updateValue] = useStateUpdater({ complex, items: [] });
+  useEffect(() => {
+    updateValue({
+      items: {
+        $push: [1, 2, 3]
+      }
+    });
+  }, []);
+
+  return (
+    <pre>{JSON.stringify(value)}</pre>
+  );
+};
+
+let rootContainer: any;
+
+beforeEach(() => {
+  rootContainer = document.createElement('div');
+  document.body.appendChild(rootContainer);
+});
+
+afterEach(() => {
+  document.body.removeChild(rootContainer);
+  rootContainer = null;
+});
+
+describe('useStateMutator', () => {
+  it('udpates the value.', async () => {
+    act(() => {
+      ReactDOM.render(<Test />, rootContainer);
+    });
+
+    const pre = rootContainer.querySelector('pre');
+    await waitForExpect(() => {
+      const data = JSON.parse(pre.textContent);
+      expect(data).toEqual({ complex, items: [1, 2, 3] });
+    });
+  });
+});

package/src/useStateUpdater.ts

@@ -0,0 +1,40 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import update from 'immutability-helper';
+import { Dispatch, SetStateAction, useState } from 'react';
+
+/**
+ * Partially updates state without copying complex (expensive) objects.
+ * https://github.com/kolodny/immutability-helper
+ *
+ * ```tsx
+ * const [value,, updateValue] = useStateMutator({ items: [], ... });
+ * useEffect(() => {
+ *   updateValue({
+ *     items: {
+ *       $push: [1, 2, 3] // Only update the items property.
+ *     }
+ *   })
+ * }, []);
+ * ```
+ *
+ * @param initialValue
+ */
+export const useStateUpdater = <T> (
+  initialValue: T
+): [T, Dispatch<SetStateAction<T>>, (spec: any) => T] => {
+  const [value, setValue] = useState<T>(initialValue);
+  const handleUpdate = (spec: any) => {
+    const newValue = update(value, spec);
+    setValue(newValue);
+    return newValue;
+  };
+
+  return [
+    value,
+    setValue,
+    handleUpdate
+  ];
+};

package/src/useStateWithRef.ts

@@ -0,0 +1,31 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { Dispatch, RefObject, SetStateAction, useEffect, useRef, useState } from 'react';
+
+/**
+ * Extension of useState to return an up-to-date reference.
+ * E.g., to use in callbacks where the state value is stale.
+ * https://css-tricks.com/dealing-with-stale-props-and-states-in-reacts-functional-components
+ *
+ * ```tsx
+ * const [value, setValue, valueRef] = useStateWithRef<string>();
+ * const handleAction = () => {
+ *   console.log(valueRef.current);
+ * }
+ * ```
+ *
+ * @param initialValue
+ */
+export const useStateWithRef = <V>(
+  initialValue?: V | (() => V)
+): [V | undefined, Dispatch<SetStateAction<V | undefined>>, RefObject<V | undefined>] => {
+  const [value, setValue] = useState<V | undefined>(initialValue);
+  const ref = useRef<V>();
+  useEffect(() => {
+    ref.current = value;
+  }, [initialValue, value]);
+
+  return [value, setValue, ref];
+};

package/src/useTimestamp.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+/**
+ * Provides a timestamp that can be used to force re-rendering based on deps.
+ *
+ * ```tsx
+ * const [, update] = useTimestamp();
+ * const handleRefresh = () => update();
+ * ```
+ *
+ * @param deps
+ */
+export const useTimestamp = (deps?: any[]): [number, () => void, number | undefined] => {
+  const [{ timestamp, previous }, setTimestamp] = useState<{ timestamp: number, previous?: number }>({
+    timestamp: Date.now()
+  });
+
+  useEffect(() => {
+    setTimestamp({ timestamp: Date.now(), previous: timestamp });
+  }, deps || []);
+
+  return [timestamp, () => setTimestamp({ timestamp: Date.now(), previous: timestamp }), previous];
+};