@pallasoft/ps-mobile-components 1.0.0 → 1.1.0

package/dist/hooks/use-ps-remote-data.d.ts

@@ -1,3 +1,3 @@
 import { PsRemoteDataOptions } from '../interfaces/ps-remote-data-options';
 import { PsRemoteDataResult } from '../interfaces/ps-remote-data-result';
-export declare const usePsRemoteData: <T>({ key, load, refreshKey, }: PsRemoteDataOptions<T>) => PsRemoteDataResult<T>;
+export declare const usePsRemoteData: <T>({ key, load, onWriteFailed, refreshKey, }: PsRemoteDataOptions<T>) => PsRemoteDataResult<T>;

package/dist/hooks/use-ps-remote-data.js

@@ -1,18 +1,27 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-export const usePsRemoteData = ({ key, load, refreshKey, }) => {
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { usePsChangeQueue, usePsOptimisticRows } from '@pallasoft/ps-utilities/react';
+import { PsRemoteDataService } from '../services/ps-remote-data-service';
+export const usePsRemoteData = ({ key, load, onWriteFailed, refreshKey, }) => {
     const [state, setState] = useState({
         data: null,
         error: false,
         isLoading: true,
     });
+    const [isSaving, setIsSaving] = useState(false);
+    const isSavingRef = useRef(false);
+    const submittedRef = useRef(0);
     const dataRef = useRef(null);
     const loadRef = useRef(load);
+    const onWriteFailedRef = useRef(onWriteFailed);
     const versionRef = useRef(0);
-    const queueRef = useRef(Promise.resolve(true));
-    const pendingRef = useRef(0);
     useEffect(() => {
         loadRef.current = load;
+        onWriteFailedRef.current = onWriteFailed;
     });
+    const setSaving = useCallback((value) => {
+        isSavingRef.current = value;
+        setIsSaving(value);
+    }, []);
     const fetch = useCallback(async () => {
         versionRef.current += 1;
         const version = versionRef.current;
@@ -31,42 +40,63 @@ export const usePsRemoteData = ({ key, load, refreshKey, }) => {
     }, []);
     useEffect(() => {
         dataRef.current = null;
-        pendingRef.current = 0;
+        setSaving(false);
         setState({ data: null, error: false, isLoading: true });
         void fetch();
         return () => {
             versionRef.current += 1;
         };
-    }, [key, fetch]);
+    }, [key, fetch, setSaving]);
     const refreshRef = useRef(refreshKey);
     useEffect(() => {
         if (refreshRef.current === refreshKey)
             return;
         refreshRef.current = refreshKey;
-        if (pendingRef.current === 0)
+        if (!isSavingRef.current)
             void fetch();
     }, [fetch, refreshKey]);
+    const apply = useCallback((rows, updates) => PsRemoteDataService.apply(rows, updates), []);
+    const rows = useMemo(() => PsRemoteDataService.rowsOf(state.data), [state.data]);
+    const optimistic = usePsOptimisticRows({ apply, isSaving, rows });
+    const rememberRef = useRef(optimistic.remember);
+    useEffect(() => {
+        rememberRef.current = optimistic.remember;
+    });
+    const send = useCallback(async (writes) => {
+        for (const item of writes) {
+            await item.request();
+            item.resolve(true);
+        }
+    }, []);
+    const onFailed = useCallback((failed, dropped) => {
+        for (const item of [...failed, ...dropped]) {
+            optimistic.forgetLast();
+            item.resolve(false);
+        }
+        if (onWriteFailedRef.current !== undefined)
+            onWriteFailedRef.current();
+    }, [optimistic.forgetLast]);
+    const onDrained = useCallback(() => {
+        const through = submittedRef.current;
+        void fetch().then(() => {
+            if (submittedRef.current === through)
+                setSaving(false);
+        });
+    }, [fetch, setSaving]);
+    const queue = usePsChangeQueue({ onDrained, onFailed, send });
+    const { enqueue } = queue;
     const write = useCallback((update, request) => {
-        const previous = dataRef.current;
-        if (previous === null)
+        if (dataRef.current === null)
             return Promise.resolve(false);
-        const next = update(previous);
-        versionRef.current += 1;
-        dataRef.current = next;
-        pendingRef.current += 1;
-        setState({ data: next, error: false, isLoading: false });
-        const run = queueRef.current.then(() => request().then(() => true, () => false));
-        queueRef.current = run;
-        return run.then((isSaved) => {
-            pendingRef.current -= 1;
-            if (!isSaved && pendingRef.current === 0) {
-                dataRef.current = previous;
-                setState({ data: previous, error: false, isLoading: false });
-            }
-            if (pendingRef.current === 0)
-                void fetch();
-            return isSaved;
-        });
-    }, [fetch]);
-    return { ...state, reload: fetch, write };
+        submittedRef.current += 1;
+        setSaving(true);
+        rememberRef.current(update);
+        return new Promise((resolve) => enqueue({ request, resolve }));
+    }, [enqueue, setSaving]);
+    return {
+        ...state,
+        data: PsRemoteDataService.shown(optimistic.rows),
+        reload: fetch,
+        write,
+    };
 };

package/dist/interfaces/ps-remote-data-options.d.ts

@@ -1,5 +1,6 @@
 export interface PsRemoteDataOptions<T> {
     key: string;
     load: () => Promise<T>;
+    onWriteFailed?: () => void;
     refreshKey?: number | string;
 }

package/dist/interfaces/ps-remote-data-update.d.ts

@@ -0,0 +1 @@
+export type PsRemoteDataUpdate<T> = (data: T) => T;

package/dist/interfaces/ps-remote-data-update.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/ps-remote-data-write.d.ts

@@ -0,0 +1,4 @@
+export interface PsRemoteDataWrite {
+    request: () => Promise<unknown>;
+    resolve: (isSaved: boolean) => void;
+}

package/dist/interfaces/ps-remote-data-write.js

@@ -0,0 +1 @@
+export {};

package/dist/services/ps-remote-data-service.d.ts

@@ -0,0 +1,6 @@
+import type { PsRemoteDataUpdate } from '../interfaces/ps-remote-data-update';
+export declare class PsRemoteDataService {
+    static rowsOf<T>(data: T | null): T[];
+    static apply<T>(rows: T[], updates: PsRemoteDataUpdate<T>[]): T[];
+    static shown<T>(rows: T[]): T | null;
+}

package/dist/services/ps-remote-data-service.js

@@ -0,0 +1,13 @@
+export class PsRemoteDataService {
+    static rowsOf(data) {
+        return data === null ? [] : [data];
+    }
+    static apply(rows, updates) {
+        if (rows.length === 0)
+            return rows;
+        return [updates.reduce((current, update) => update(current), rows[0])];
+    }
+    static shown(rows) {
+        return rows.length === 0 ? null : rows[0];
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-mobile-components",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"private": false,
 	"description": "Native iOS (SwiftUI) and Android (Jetpack Compose) Ps components for Pallasoft mobile apps",
 	"main": "./dist/index.js",
@@ -36,7 +36,7 @@
 	"dependencies": {
 		"@pallasoft/ps-design-system": "^1.17.0",
 		"@pallasoft/ps-icons": "^1.11.0",
-		"@pallasoft/ps-utilities": "^2.26.0"
+		"@pallasoft/ps-utilities": "^2.27.0"
 	},
 	"peerDependencies": {
 		"@expo/ui": "~58.0.0",