fix: useHttpAuthMutation to throw an error when request not success (n…

…exxtway#504)

functions/index.js

@@ -81,6 +81,16 @@ app.use(
     }),
 );
 
+app.use((req, res, next) => {
+    if (Math.random() > 0.5) {
+        return res.status(403).send({
+            code: 'permission-denied',
+            message: `You do not have permissions to excecute this operation.`,
+        });
+    }
+    return next();
+});
+
 app.get('/helloWorld', (req, res) => res.send({ message: 'Hello World!' }));
 app.post('/customHelloWorld', (req, res) => res.send({ message: `Hello World! ${req.body.name}` }));
 

packages/firebase-hooks/docs/hooks/useHttpAuthMutation.story.mdx

@@ -36,6 +36,24 @@ const onMutate = () =>
 return <Button label="Mutate" onClick={onMutate} isLoading={isLoading} />;
 ```
 
+### Example with useMutationFlow
+
+```js
+// Note that here you need to use mutateAsync in order to work with the useMutationFlow
+const { mutateAsync, data, error } = useHttpAuthMutation({
+    functionName: 'myFunctionName',
+    pathname: '/users',
+    method: 'POST',
+});
+const { mutate } = useMutationFlow({
+    mutation: mutateAsync,
+});
+
+const onMutate = () => mutate({ name: 'John Doe' }, { onError: (error) => console.log(error) });
+
+return <Button label="Mutate" onClick={onMutate} />;
+```
+
 <Preview>
     <Story name="useHttpAuthMutation">{stories.UseHttpAuthMutation()}</Story>
 </Preview>

packages/firebase-hooks/docs/stories/useHttpAuthMutation.story.js

@@ -3,6 +3,7 @@ import { RainbowFirebaseApp } from '@rainbow-modules/app';
 import { Button } from 'react-rainbow-components';
 import app from '../../../../firebase';
 import useHttpAuthMutation from '../../src/http/useHttpAuthMutation';
+import useMutationFlow from '../../../hooks/src/useMutationFlow';
 
 const Example = () => {
     const { mutate, isLoading } = useHttpAuthMutation({
@@ -32,3 +33,36 @@ export const UseHttpAuthMutation = () => {
         </RainbowFirebaseApp>
     );
 };
+
+const ExampleWithMutationFlow = () => {
+    // Note that here you need to use mutateAsync in order to work with the useMutationFlow
+    const { mutateAsync, data, error } = useHttpAuthMutation({
+        functionName: 'expressTestFn',
+        pathname: '/customHelloWorld',
+        method: 'POST',
+    });
+    const { mutate } = useMutationFlow({
+        mutation: mutateAsync,
+    });
+
+    // eslint-disable-next-line no-console
+    const onMutate = () => mutate({ name: 'John Doe' }, { onError: (error) => console.log(error) });
+
+    return (
+        <>
+            <Button label="Mutate" onClick={onMutate} />
+            <div className="rainbow-m-top_medium">Response:</div>
+            <div>{JSON.stringify(data)}</div>
+            <div className="rainbow-m-top_medium">Error:</div>
+            <div>{JSON.stringify(error)}</div>
+        </>
+    );
+};
+
+export const UseHttpAuthMutationWithMutationFlow = () => {
+    return (
+        <RainbowFirebaseApp app={app}>
+            <ExampleWithMutationFlow />
+        </RainbowFirebaseApp>
+    );
+};

packages/firebase-hooks/src/http/useAuthFetch.ts

@@ -59,7 +59,10 @@ const useAuthFetch = ({ functionName, region = DEFAULT_REGION }: Params): Return
                 });
                 const result = await response.json();
                 setLoading(false);
-                return result;
+                if (response.ok) {
+                    return result;
+                }
+                throw result;
             } catch (error) {
                 setLoading(false);
                 throw error;