Feature/promisify

packages/dataparcels-docs/src/pages/dev.js

@@ -1,41 +1,60 @@
 // @flow
 import React from 'react';
+import {useRef} from 'react';
 import Page from 'component/Page';
 import {H1} from 'dcme-style';
 import {ContentNav} from 'dcme-style';
 
-import useParcelState from 'react-dataparcels/useParcelState';
-import ParcelBoundary from 'react-dataparcels/ParcelBoundary';
+import promisify from 'react-dataparcels/promisify';
+import useParcel from 'react-dataparcels/useParcel';
+import Boundary from 'react-dataparcels/Boundary';
 
 export default function PersonEditor() {
 
-    let [personParcel] = useParcelState({
-        value: {
-            firstname: "Robert",
-            lastname: "Clamps"
-        }
-    });
+    let rejectRef = useRef();
+
+    let personParcel = useParcel({
+        // source: () => ({
+        //     value: {
+        //         firstname: "Robert",
+        //         lastname: "Clamps",
+        //         saves: 0
+        //     }
+        // }),
+        source: promisify({
+            key: 'load',
+            effect: async () => {
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                return {
+                    value: {
+                        firstname: "Robert",
+                        lastname: "Clamps",
+                        saves: 0
+                    }
+                };
+            }
+        }),
+        onChange: promisify({
+            key: 'save',
+            effect: async ({value}) => {
+                await new Promise(resolve => setTimeout(resolve, 1000));
 
-    personParcel = personParcel
-        .modifyUp(({changeRequest}) => {
-            // cause the change request reducer to re-execute the same effect again
-            changeRequest.nextData;
-        })
-        .modifyUp(({value}) => {
-            let {firstname} = value;
-            return {
-                effect: async (update) => {
-                    await new Promise(resolve => setTimeout(resolve, firstname.length > 2 ? 0 : 1000));
-
-                    update(({value}) => ({
-                        value: {
-                            ...value,
-                            lastname: firstname
-                        }
-                    }));
+                if(rejectRef.current) {
+                    rejectRef.current = false;
+                    throw new Error('NO!!!');
                 }
-            };
-        });
+
+                return {
+                    value: {
+                        ...value,
+                        saves: value.saves + 1
+                    }
+                };
+            },
+            revert: true
+        }),
+        buffer: true
+    });
 
     return <Page>
         <ContentNav
@@ -44,15 +63,32 @@ export default function PersonEditor() {
             mdxHeading
         >
             <H1>Dev page</H1>
-            <label>firstname</label>
-            <ParcelBoundary parcel={personParcel.get('firstname')}>
-                {(firstname) => <input type="text" {...firstname.spreadInput()} />}
-            </ParcelBoundary>
-
-            <label>lastname</label>
-            <ParcelBoundary parcel={personParcel.get('lastname')}>
-                {(lastname) => <input type="text" {...lastname.spreadInput()} />}
-            </ParcelBoundary>
+            <div>load status {personParcel.meta.loadStatus}</div>
+
+            {personParcel.value &&
+                <>
+                    <div>firstname</div>
+                    <Boundary source={personParcel.get('firstname')}>
+                        {(firstname) => <input type="text" {...firstname.spreadInput()} />}
+                    </Boundary>
+
+                    <div>lastname</div>
+                    <Boundary source={personParcel.get('lastname')}>
+                        {(lastname) => <input type="text" {...lastname.spreadInput()} />}
+                    </Boundary>
+
+                    <div>save status {personParcel.meta.saveStatus}</div>
+                    <div>save error {personParcel.meta.saveError && personParcel.meta.saveError.message}</div>
+                    <div>saves {personParcel.value.saves}</div>
+
+                    <div>
+                        <button onClick={personParcel.meta.submit}>submit</button>
+                    </div>
+                    <div>
+                        <button onClick={() => {rejectRef.current = true;}}>reject</button>
+                    </div>
+                </>
+            }
         </ContentNav>
     </Page>;
 }

packages/dataparcels/.size-limit.json

@@ -31,6 +31,10 @@
         "limit": "5.9 KB",
         "path": "arrange.js"
     },
+    {
+        "limit": "0.7 KB",
+        "path": "promisify.js"
+    },
     {
         "limit": "2.2 KB",
         "path": "translate.js"

packages/dataparcels/__test__/Exports-test.js

@@ -9,6 +9,7 @@ import deleted from '../deleted';
 import ParcelNode from '../ParcelNode';
 import arrange from '../arrange';
 import cancel from '../cancel';
+import promisify from '../promisify';
 import translate from '../translate';
 import validation from '../validation';
 
@@ -23,6 +24,7 @@ import Internaldeleted from '../lib/parcelData/deleted';
 import InternalParcelNode from '../lib/parcelNode/ParcelNode';
 import InternalAsNodes from '../lib/parcelNode/arrange';
 import Internalcancel from '../lib/change/cancel';
+import InternalPromisify from '../lib/modifiers/promisify';
 import InternalTranslate from '../lib/modifiers/translate';
 import InternalValidation from '../lib/validation/validation';
 
@@ -58,6 +60,10 @@ test('/cancel should export cancel', () => {
     expect(cancel).toBe(Internalcancel);
 });
 
+test('/promisify should export promisify', () => {
+    expect(promisify).toBe(InternalPromisify);
+});
+
 test('/translate should export translate', () => {
     expect(translate).toBe(InternalTranslate);
 });

packages/dataparcels/package.json

@@ -18,6 +18,7 @@
     "combine.js",
     "deleted.js",
     "ParcelNode.js",
+    "promisify.js",
     "translate.js",
     "validation.js"
   ],

packages/dataparcels/promisify.js

@@ -0,0 +1,2 @@
+/* eslint-disable */
+module.exports = require('./lib/modifiers/promisify.js').default;