fix bad JSON patch usage

We were not considering the fact that we need to add the
patch prefix to the "from" key in a "mode" operation. To
solve this we decide to apply the patch inplace at the
given path. This is both faster and simpler.

Author: rmorshea

Diff for: idom/client/app/core_modules/layout.js

@@ -53,29 +53,12 @@ export function mountLayout(mountElement, saveUpdateHook, sendEvent) {
 }
 
 export default function Layout({ saveUpdateHook, sendEvent }) {
-  const [modelRef, setModel] = useStateRef({});
-
-  react.useEffect(() => {
-    saveUpdateHook((pathPrefix, patch) => {
-      setModel(
-        jsonpatch.applyPatch(
-          modelRef.current,
-          patch.map((op) => {
-            op.path = pathPrefix + op.path;
-            return op;
-          }),
-          undefined,
-          false
-        ).newDocument
-      );
-    });
-  }, [modelRef]);
+  const [model, patchModel] = useInplaceJsonPatch({});
 
-  if (modelRef.current.tagName) {
-    return html`<${Element}
-      sendEvent=${sendEvent}
-      model=${modelRef.current}
-    />`;
+  react.useEffect(() => saveUpdateHook(patchModel), [patchModel]);
+
+  if (model.tagName) {
+    return html`<${Element} sendEvent=${sendEvent} model=${model} />`;
   } else {
     return html`<div />`;
   }
@@ -204,9 +187,24 @@ function getPathProperty(obj, prop) {
   return value;
 }
 
-function useStateRef(initialValue) {
-  const ref = react.useRef(initialValue);
-  const [state, setState] = react.useState(initialValue);
-  ref.current = state;
-  return [ref, setState];
+function useInplaceJsonPatch(doc) {
+  const ref = react.useRef(doc);
+  const forceUpdate = useForceUpdate();
+
+  const applyPatch = react.useCallback(
+    (path, patch) => {
+      jsonpatch.applyPatch(
+        jsonpatch.getValueByPointer(ref.current, path),
+        patch
+      );
+      forceUpdate();
+    },
+    [ref, forceUpdate]
+  );
+  return [ref.current, applyPatch];
+}
+
+function useForceUpdate() {
+  const [, updateState] = react.useState();
+  return react.useCallback(() => updateState({}), []);
 }