@nodeject/ui-components/esm/dnd-lists/hooks/useOptimisticRendering.js

UI library for non-trivial components

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { difference, keys } from 'lodash';
import { useEffect, useState } from 'react';
import useDeepCompareEffect from 'use-deep-compare-effect';
export var useOptimisticRendering = function (props) {
    var dataFromServer = props.dataFromServer, setState = props.setState;
    // Array that contains all the actions (create, delete, move),
    // the state of the full app for each call (would allow time travel)
    // and the status of the server calls.
    var _a = useState({
        event: [],
    }), optimisticState = _a[0], setOptimisticState = _a[1];
    useEffect(function () {
        // console.log('optimisticState', optimisticState)
    }, [optimisticState]);
    var _b = useState(false), isFirstLoadFinished = _b[0], setIsFirstLoadFinished = _b[1];
    // Updates local state with data coming from server
    // uses optimistic, or not.
    useDeepCompareEffect(function () {
        var itemsBasicProps = {};
        for (var _i = 0, _a = Object.keys(dataFromServer.items); _i < _a.length; _i++) {
            var key = _a[_i];
            itemsBasicProps[key] = { id: key };
        }
        // Optimistic Rendering
        if (isFirstLoadFinished) {
            setState(function (state) {
                var lastOptimisticData = optimisticState.event[optimisticState.event.length - 1];
                if (lastOptimisticData) {
                    var createdItemList = dataFromServer.items;
                    // List the new items from server
                    var listAllNewItemsFromServer = difference(keys(createdItemList), keys(state.items));
                    // console.log(
                    //     '   listAllNewItemsFromServer',
                    //     listAllNewItemsFromServer
                    // )
                    // If the server does not have the newly created items yet, do NOT
                    // refresh using only the data from the server.
                    // Instead, merge data inside local state, taking into account optimistic stuff
                    // const dataToState: State = {...data, itemsBasicProps: }
                }
                // const mergedData: DragDropData = merge(dataFromServer, state)
                // console.log(
                //     '   useOptimisticRendering: state',
                //     state
                //     // mergedData
                // )
                // console.log(
                //     '   useOptimisticRendering: dataFromServer',
                //     dataFromServer
                //     // mergedData
                // )
                // console.log(
                //     '   useOptimisticRendering: further loads (optimistic), mergedData',
                //     mergedData
                // )
                // console.log('data', data)
                // console.log('state', state)
                // console.log('mergedData', mergedData)
                return __assign(__assign({}, dataFromServer), { itemsBasicProps: itemsBasicProps });
            });
            setIsFirstLoadFinished(true);
        }
        // First Load (nothing optimistic here)
        if (!isFirstLoadFinished) {
            // console.log(
            //     '   useOptimisticRendering: firstLoad (not optimistic)',
            //     dataFromServer,
            //     itemsBasicProps
            // )
            setState(__assign(__assign({}, dataFromServer), { itemsBasicProps: itemsBasicProps }));
            setIsFirstLoadFinished(true);
        }
    }, [dataFromServer, isFirstLoadFinished]);
    return {
        optimisticState: optimisticState,
        setOptimisticState: setOptimisticState,
    };
};