Skip to content

Commit b8aaa47

Browse files
Anton van den BergAnton van den Berg
Anton van den Berg
authored and
Anton van den Berg
committed
fix: login interaction works with form again
1 parent 2be60bd commit b8aaa47

File tree

2 files changed

+91
-57
lines changed

2 files changed

+91
-57
lines changed

‎src/components/form.js

+61-57
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
jsx: (
77
<div>
88
{(() => {
9-
const { env, Children, useAction, useGetAll } = B;
9+
const { env, Children, Action, useGetAll } = B;
1010

1111
const {
1212
actionId,
@@ -16,11 +16,12 @@
1616
formSuccessMessage,
1717
redirect,
1818
showError,
19+
showSuccess,
1920
} = options;
20-
2121
const formRef = React.createRef();
2222

2323
const displayError = showError === 'built-in';
24+
const displaySuccess = showSuccess === 'built-in';
2425
const empty = children.length === 0;
2526
const isDev = B.env === 'dev';
2627
const isPristine = empty && isDev;
@@ -31,28 +32,6 @@
3132
const [isInvalid, setIsInvalid] = useState(false);
3233
const location = isDev ? {} : useLocation();
3334

34-
const [callAction, { data, loading, error }] = useAction(actionId, {
35-
onCompleted({ actionb5 }) {
36-
if (actionb5) {
37-
B.triggerEvent('onSuccess', actionb5);
38-
} else {
39-
B.triggerEvent('onNoResults');
40-
}
41-
if (hasRedirect) {
42-
if (redirectTo === location.pathname) {
43-
history.go(0);
44-
} else {
45-
history.push(redirectTo);
46-
}
47-
}
48-
},
49-
onError(err) {
50-
if (err && !displayError) {
51-
B.triggerEvent('onError', formErrorMessage || err.message);
52-
}
53-
},
54-
});
55-
5635
const { loading: isFetching, data: models, error: err } =
5736
model &&
5837
useGetAll(model, {
@@ -61,29 +40,25 @@
6140
take: 1,
6241
});
6342

64-
if (loading) {
65-
B.triggerEvent('onLoad', loading);
66-
}
67-
6843
const mounted = useRef(true);
6944
useEffect(() => {
7045
if (!mounted.current && isFetching) {
71-
B.triggerEvent('onLoad', isFetching);
46+
B.triggerEvent('onDataLoad', isFetching);
7247
}
7348
mounted.current = false;
7449
}, [isFetching]);
7550

7651
if (err && !displayError) {
77-
B.triggerEvent('onError', formErrorMessage || err.message);
52+
B.triggerEvent('onDataError', formErrorMessage || err.message);
7853
}
7954

8055
const item = models && models.results[0];
8156

8257
if (item) {
8358
if (item.id) {
84-
B.triggerEvent('onSuccess', item);
59+
B.triggerEvent('onDataSuccess', item);
8560
} else {
86-
B.triggerEvent('onNoResults');
61+
B.triggerEvent('onDataNoResults');
8762
}
8863
}
8964

@@ -94,7 +69,7 @@
9469
}
9570
};
9671

97-
const handleSubmit = evt => {
72+
const handleSubmit = (evt, callAction) => {
9873
evt.preventDefault();
9974
setIsInvalid(false);
10075
B.triggerEvent('onSubmit');
@@ -107,7 +82,7 @@
10782
callAction({ variables: { input: values } });
10883
};
10984

110-
const renderContent = () => {
85+
const renderContent = loading => {
11186
if (!model || isDev) {
11287
return <Children loading={loading}>{children}</Children>;
11388
}
@@ -121,30 +96,59 @@
12196
);
12297
};
12398

99+
const trigger = (data, loading, error) => {
100+
if (data) {
101+
B.triggerEvent('onActionSuccess', data);
102+
103+
if (hasRedirect) {
104+
if (redirectTo === location.pathname) {
105+
history.go(0);
106+
} else {
107+
history.push(redirectTo);
108+
}
109+
}
110+
}
111+
112+
if (loading) {
113+
B.triggerEvent('onActionLoad', loading);
114+
}
115+
116+
if (error) {
117+
B.triggerEvent('onActionError', formErrorMessage || error.message);
118+
}
119+
};
120+
124121
return (
125-
<>
126-
<div className={classes.messageContainer}>
127-
{error && displayError && (
128-
<span className={classes.error}>{formErrorMessage}</span>
129-
)}
130-
{data && (
131-
<span className={classes.success}>{formSuccessMessage}</span>
132-
)}
133-
</div>
134-
135-
<form
136-
onInvalid={handleInvalid}
137-
onSubmit={handleSubmit}
138-
ref={formRef}
139-
className={[
140-
empty && classes.empty,
141-
isPristine && classes.pristine,
142-
].join(' ')}
143-
>
144-
{isPristine && <span>form</span>}
145-
{renderContent()}
146-
</form>
147-
</>
122+
<Action actionId={actionId}>
123+
{(callAction, { data, loading, error }) => (
124+
<>
125+
{trigger(data, loading, error)}
126+
<div className={classes.messageContainer}>
127+
{error && displayError && (
128+
<span className={classes.error}>{formErrorMessage}</span>
129+
)}
130+
{data && displaySuccess && (
131+
<span className={classes.success}>
132+
{formSuccessMessage}
133+
</span>
134+
)}
135+
</div>
136+
137+
<form
138+
onInvalid={handleInvalid}
139+
onSubmit={evt => handleSubmit(evt, callAction)}
140+
ref={formRef}
141+
className={[
142+
empty && classes.empty,
143+
isPristine && classes.pristine,
144+
].join(' ')}
145+
>
146+
{isPristine && <span>form</span>}
147+
{renderContent(loading)}
148+
</form>
149+
</>
150+
)}
151+
</Action>
148152
);
149153
})()}
150154
</div>

‎src/prefabs/form.js

+30
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,33 @@
3030
dependsOn: 'model',
3131
},
3232
},
33+
{
34+
value: 'built-in',
35+
label: 'Success message',
36+
key: 'showSuccess',
37+
type: 'CUSTOM',
38+
configuration: {
39+
as: 'BUTTONGROUP',
40+
dataType: 'string',
41+
allowedInput: [
42+
{ name: 'Built in', value: 'built-in' },
43+
{ name: 'Interaction', value: 'interaction' },
44+
],
45+
},
46+
},
3347
{
3448
value: 'Thanks for submitting the form!',
3549
label: 'Success message',
3650
key: 'formSuccessMessage',
3751
type: 'TEXT',
52+
configuration: {
53+
condition: {
54+
type: 'SHOW',
55+
option: 'showSuccess',
56+
comparator: 'EQ',
57+
value: 'built-in',
58+
},
59+
},
3860
},
3961
{
4062
value: 'built-in',
@@ -55,6 +77,14 @@
5577
label: 'Error message',
5678
key: 'formErrorMessage',
5779
type: 'TEXT',
80+
configuration: {
81+
condition: {
82+
type: 'SHOW',
83+
option: 'showError',
84+
comparator: 'EQ',
85+
value: 'built-in',
86+
},
87+
},
5888
},
5989
{
6090
value: ['0rem', '0rem', 'M', '0rem'],

0 commit comments

Comments
 (0)