fix: login interaction works with form again

bettyblocks · Aug 4, 2020 · b8aaa47 · b8aaa47
1 parent 2be60bd
commit b8aaa47
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 57 deletions.
diff --git a/src/components/form.js b/src/components/form.js
@@ -6,7 +6,7 @@
   jsx: (
     <div>
       {(() => {
-        const { env, Children, useAction, useGetAll } = B;
+        const { env, Children, Action, useGetAll } = B;
 
         const {
           actionId,
@@ -16,11 +16,12 @@
           formSuccessMessage,
           redirect,
           showError,
+          showSuccess,
         } = options;
-
         const formRef = React.createRef();
 
         const displayError = showError === 'built-in';
+        const displaySuccess = showSuccess === 'built-in';
         const empty = children.length === 0;
         const isDev = B.env === 'dev';
         const isPristine = empty && isDev;
@@ -31,28 +32,6 @@
         const [isInvalid, setIsInvalid] = useState(false);
         const location = isDev ? {} : useLocation();
 
-        const [callAction, { data, loading, error }] = useAction(actionId, {
-          onCompleted({ actionb5 }) {
-            if (actionb5) {
-              B.triggerEvent('onSuccess', actionb5);
-            } else {
-              B.triggerEvent('onNoResults');
-            }
-            if (hasRedirect) {
-              if (redirectTo === location.pathname) {
-                history.go(0);
-              } else {
-                history.push(redirectTo);
-              }
-            }
-          },
-          onError(err) {
-            if (err && !displayError) {
-              B.triggerEvent('onError', formErrorMessage || err.message);
-            }
-          },
-        });
-
         const { loading: isFetching, data: models, error: err } =
           model &&
           useGetAll(model, {
@@ -61,29 +40,25 @@
             take: 1,
           });
 
-        if (loading) {
-          B.triggerEvent('onLoad', loading);
-        }
-
         const mounted = useRef(true);
         useEffect(() => {
           if (!mounted.current && isFetching) {
-            B.triggerEvent('onLoad', isFetching);
+            B.triggerEvent('onDataLoad', isFetching);
           }
           mounted.current = false;
         }, [isFetching]);
 
         if (err && !displayError) {
-          B.triggerEvent('onError', formErrorMessage || err.message);
+          B.triggerEvent('onDataError', formErrorMessage || err.message);
         }
 
         const item = models && models.results[0];
 
         if (item) {
           if (item.id) {
-            B.triggerEvent('onSuccess', item);
+            B.triggerEvent('onDataSuccess', item);
           } else {
-            B.triggerEvent('onNoResults');
+            B.triggerEvent('onDataNoResults');
           }
         }
 
@@ -94,7 +69,7 @@
           }
         };
 
-        const handleSubmit = evt => {
+        const handleSubmit = (evt, callAction) => {
           evt.preventDefault();
           setIsInvalid(false);
           B.triggerEvent('onSubmit');
@@ -107,7 +82,7 @@
           callAction({ variables: { input: values } });
         };
 
-        const renderContent = () => {
+        const renderContent = loading => {
           if (!model || isDev) {
             return <Children loading={loading}>{children}</Children>;
           }
@@ -121,30 +96,59 @@
           );
         };
 
+        const trigger = (data, loading, error) => {
+          if (data) {
+            B.triggerEvent('onActionSuccess', data);
+
+            if (hasRedirect) {
+              if (redirectTo === location.pathname) {
+                history.go(0);
+              } else {
+                history.push(redirectTo);
+              }
+            }
+          }
+
+          if (loading) {
+            B.triggerEvent('onActionLoad', loading);
+          }
+
+          if (error) {
+            B.triggerEvent('onActionError', formErrorMessage || error.message);
+          }
+        };
+
         return (
-          <>
-            <div className={classes.messageContainer}>
-              {error && displayError && (
-                <span className={classes.error}>{formErrorMessage}</span>
-              )}
-              {data && (
-                <span className={classes.success}>{formSuccessMessage}</span>
-              )}
-            </div>
-
-            <form
-              onInvalid={handleInvalid}
-              onSubmit={handleSubmit}
-              ref={formRef}
-              className={[
-                empty && classes.empty,
-                isPristine && classes.pristine,
-              ].join(' ')}
-            >
-              {isPristine && <span>form</span>}
-              {renderContent()}
-            </form>
-          </>
+          <Action actionId={actionId}>
+            {(callAction, { data, loading, error }) => (
+              <>
+                {trigger(data, loading, error)}
+                <div className={classes.messageContainer}>
+                  {error && displayError && (
+                    <span className={classes.error}>{formErrorMessage}</span>
+                  )}
+                  {data && displaySuccess && (
+                    <span className={classes.success}>
+                      {formSuccessMessage}
+                    </span>
+                  )}
+                </div>
+
+                <form
+                  onInvalid={handleInvalid}
+                  onSubmit={evt => handleSubmit(evt, callAction)}
+                  ref={formRef}
+                  className={[
+                    empty && classes.empty,
+                    isPristine && classes.pristine,
+                  ].join(' ')}
+                >
+                  {isPristine && <span>form</span>}
+                  {renderContent(loading)}
+                </form>
+              </>
+            )}
+          </Action>
         );
       })()}
     </div>

diff --git a/src/prefabs/form.js b/src/prefabs/form.js
@@ -30,11 +30,33 @@
             dependsOn: 'model',
           },
         },
+        {
+          value: 'built-in',
+          label: 'Success message',
+          key: 'showSuccess',
+          type: 'CUSTOM',
+          configuration: {
+            as: 'BUTTONGROUP',
+            dataType: 'string',
+            allowedInput: [
+              { name: 'Built in', value: 'built-in' },
+              { name: 'Interaction', value: 'interaction' },
+            ],
+          },
+        },
         {
           value: 'Thanks for submitting the form!',
           label: 'Success message',
           key: 'formSuccessMessage',
           type: 'TEXT',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'showSuccess',
+              comparator: 'EQ',
+              value: 'built-in',
+            },
+          },
         },
         {
           value: 'built-in',
@@ -55,6 +77,14 @@
           label: 'Error message',
           key: 'formErrorMessage',
           type: 'TEXT',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'showError',
+              comparator: 'EQ',
+              value: 'built-in',
+            },
+          },
         },
         {
           value: ['0rem', '0rem', 'M', '0rem'],