@nodeject/ui-components
Version:
UI library for non-trivial components
94 lines (93 loc) • 4.34 kB
JavaScript
;
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);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useOptimisticRendering = void 0;
var lodash_1 = require("lodash");
var react_1 = require("react");
var use_deep_compare_effect_1 = require("use-deep-compare-effect");
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 = react_1.useState({
event: [],
}), optimisticState = _a[0], setOptimisticState = _a[1];
react_1.useEffect(function () {
// console.log('optimisticState', optimisticState)
}, [optimisticState]);
var _b = react_1.useState(false), isFirstLoadFinished = _b[0], setIsFirstLoadFinished = _b[1];
// Updates local state with data coming from server
// uses optimistic, or not.
use_deep_compare_effect_1.default(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 = lodash_1.difference(lodash_1.keys(createdItemList), lodash_1.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,
};
};
exports.useOptimisticRendering = useOptimisticRendering;