@nodeject/ui-components
Version:
UI library for non-trivial components
160 lines (159 loc) • 8.66 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SchedioTreeContainer = exports.useSchedioTree = void 0;
var immer_1 = require("immer");
var react_1 = require("react");
var unstated_next_1 = require("unstated-next");
var index_1 = require("./index");
var helpers_1 = require("../helpers");
function useSchedioTree(initialState) {
var schedioTreeFromServer = initialState.schedioTreeFromServer;
var createNewNode = initialState.createNewClientNode !== undefined ? initialState.createNewClientNode : helpers_1.createNewClientNode;
var _a = initialState.nodeActions, addChildNode = _a.addChildNode, deleteNode = _a.deleteNode, insertSiblingBefore = _a.insertSiblingBefore, insertParent = _a.insertParent, insertSiblingAfter = _a.insertSiblingAfter, moveNode = _a.moveNode;
var _b = react_1.useState(schedioTreeFromServer), cytoGraph = _b[0], setCytoGraph = _b[1];
var _c = react_1.useState([]), unreconciliatedNodes = _c[0], setUnreconciliatedNodes = _c[1];
var extraUnreconciliatedNodes = helpers_1.getArraysDifferences(schedioTreeFromServer.nodes, cytoGraph.nodes);
// Optimistic reconciliation
react_1.useEffect(function () {
var unreconciliatedNodesNext = immer_1.default(unreconciliatedNodes, function (unreconciliatedNodesDraft) {
extraUnreconciliatedNodes.map(function (extra) {
if (unreconciliatedNodes.find(function (n) { return n.data.id === extra.data.id; })) {
// Reconciliate
var nextCytoGraph_1 = immer_1.default(cytoGraph, function (draftState) {
var remoteNodeWithIsLoading = immer_1.default(extra, function (draftNode) {
draftNode.data.isLoading = undefined;
});
draftState.nodes[cytoGraph.nodes.findIndex(function (n) { return n.data.id === n.data.id; })].data =
remoteNodeWithIsLoading.data;
});
setCytoGraph(nextCytoGraph_1);
}
});
var nextCytoGraph = immer_1.default(cytoGraph, function (draftState) {
cytoGraph.nodes.map(function (localNode) {
schedioTreeFromServer.nodes.map(function (remoteNode) {
if (remoteNode.data.id === localNode.data.id) {
// Reconciliate
var remoteNodeWithIsLoading = immer_1.default(remoteNode, function (draftNode) {
draftNode.data.isLoading = undefined;
});
var nextNode = draftState.nodes[cytoGraph.nodes.findIndex(function (n) { return n.data.id === localNode.data.id; })];
nextNode.data = remoteNodeWithIsLoading.data;
// Remove node from unreconciliatedNodes list
unreconciliatedNodesDraft.splice(unreconciliatedNodes.findIndex(function (u) { return u.data.id === localNode.data.id; }), 1);
}
});
});
});
setCytoGraph(nextCytoGraph);
});
setUnreconciliatedNodes(unreconciliatedNodesNext);
}, [schedioTreeFromServer, unreconciliatedNodes]);
// Add child locally. Get the cid (client Id), and then add node to the server.
// cid is for optimistic rendering. As soon as the server returns the item created with cid
// we know it has been successfully created.
var addChildNodeClient = function (parent) {
var newNode = createNewNode(parent);
// Adds local node id, to be reconciliated after server response.
// See useEffect for reconciliation.
// idListToReconciliate.push(newNode.data.id)
var newUnreconciliatedNodes = immer_1.default(unreconciliatedNodes, function (draft) {
draft.push(newNode);
});
setUnreconciliatedNodes(newUnreconciliatedNodes);
index_1.addChildNodeLocal({ cytoGraph: cytoGraph, setCytoGraph: setCytoGraph, newNode: newNode });
if (addChildNode) {
addChildNode(newNode);
}
else {
console.log('Please pass a addChildNode props');
}
};
var deleteNodeClient = function (nodeId) {
index_1.deleteNodeLocal({ cytoGraph: cytoGraph, setCytoGraph: setCytoGraph, nodeId: nodeId });
if (deleteNode) {
deleteNode(nodeId);
}
else {
console.log('Please pass a deleteNode props');
}
};
var insertParentClient = function (nodeId) {
var currentNode = cytoGraph.nodes.find(function (n) { return n.data.id === nodeId; });
var parentId = currentNode.data.parent;
var newNode = createNewNode(parentId);
var currentNodeWithNewParent = immer_1.default(currentNode, function (draft) {
draft.data.parent = newNode.data.id;
});
var newUnreconciliatedNodes = immer_1.default(unreconciliatedNodes, function (draft) {
draft.push(newNode);
});
// insertSiblingNodeBeforeLocal({beforeNode: currentNode,cytoGraph, newNode, setCytoGraph})
// setUnreconciliatedNodes(newUnreconciliatedNodes)
// console.log('FUUUUU', cytoGraph)
index_1.insertParentLocal({ currentNodeWithNewParent: currentNodeWithNewParent, cytoGraph: cytoGraph, setCytoGraph: setCytoGraph, newNode: newNode });
// Test insert sibling before or after
if (insertParent) {
insertParent({ currentNodeWithNewParent: currentNodeWithNewParent, newNode: newNode });
}
else {
console.log('Please pass a insertParent props');
}
};
var insertSiblingAfterClient = function (nodeId) {
var afterNode = cytoGraph.nodes.find(function (n) { return n.data.id === nodeId; });
var newNode = createNewNode(afterNode.data.parent);
var newUnreconciliatedNodes = immer_1.default(unreconciliatedNodes, function (draft) {
draft.push(newNode);
});
setUnreconciliatedNodes(newUnreconciliatedNodes);
index_1.insertSiblingNodeAfterLocal({ cytoGraph: cytoGraph, setCytoGraph: setCytoGraph, afterNode: afterNode, newNode: newNode });
if (insertSiblingAfter) {
insertSiblingAfter({ afterNode: afterNode, newNode: newNode });
}
else {
console.log('Please pass a insertSiblingAfter props');
}
};
var insertSiblingBeforeClient = function (nodeId) {
var beforeNode = cytoGraph.nodes.find(function (n) { return n.data.id === nodeId; });
var newNode = createNewNode(beforeNode.data.parent);
var newUnreconciliatedNodes = immer_1.default(unreconciliatedNodes, function (draft) {
draft.push(newNode);
});
setUnreconciliatedNodes(newUnreconciliatedNodes);
index_1.insertSiblingNodeBeforeLocal({ cytoGraph: cytoGraph, setCytoGraph: setCytoGraph, beforeNode: beforeNode, newNode: newNode });
if (insertSiblingBefore) {
insertSiblingBefore({ beforeNode: beforeNode, newNode: newNode });
}
else {
console.log('Please pass a insertSiblingBefore props');
}
};
var moveNodeClient = function (args) {
var parentId = args.parentId, nodeId = args.nodeId, index = args.index;
var node = cytoGraph.nodes.find(function (n) { return n.data.id === nodeId; });
var parentNode = cytoGraph.nodes.find(function (n) { return n.data.id === parentId; });
index_1.moveNodeLocal({ cytoGraph: cytoGraph, setCytoGraph: setCytoGraph, node: node, parentNode: parentNode, dropIndex: index });
if (moveNode) {
moveNode({ index: index, nodeId: nodeId, parentId: parentId });
}
else {
console.log('Please pass a moveNode props');
}
};
var nodeActions = {
addChildNodeClient: addChildNodeClient,
deleteNodeClient: deleteNodeClient,
insertSiblingBeforeClient: insertSiblingBeforeClient,
insertParentClient: insertParentClient,
insertSiblingAfterClient: insertSiblingAfterClient,
moveNodeClient: moveNodeClient
};
return {
cytoGraph: cytoGraph,
nodeActions: nodeActions
};
}
exports.useSchedioTree = useSchedioTree;
exports.SchedioTreeContainer = unstated_next_1.createContainer(useSchedioTree);