Introduce FormResponse component

components/FormResponse.tsx

@@ -0,0 +1,24 @@
+import { FC } from "react";
+import { FormMessage, Success } from "../hooks/useForm";
+
+const FormResponse: FC<{
+  error?: FormMessage;
+  success?: Success;
+  fallbackSuccessMessage?: string;
+  loading: boolean;
+}> = ({ error, success, fallbackSuccessMessage, loading }) => {
+  if (loading) {
+    return null;
+  }
+  return error ? (
+    <div role="alert" className="form-alert-msg">
+      {error.message}
+    </div>
+  ) : success ? (
+    <div role="alert" className="form-success-msg">
+      {success.message || fallbackSuccessMessage}
+    </div>
+  ) : null;
+};
+
+export default FormResponse;

components/PrivatePage.tsx

@@ -19,9 +19,7 @@ const PrivatePage: FC<{ protectedRoutes: string[] }> = ({
   }, [isAuthenticated, pathIsProtected, push]);
 
   if (!isAuthenticated && pathIsProtected) {
-    return (
-      <Spinner />
-    );
+    return <Spinner />;
   }
   return <>{children}</>;
 };

hooks/useForm.ts

@@ -1,11 +1,11 @@
 import { ApiResulState, FetchApiInterface } from "./../utils/api";
 import { FormEventHandler, useState } from "react";
 
-type FormMessage = {
+export type FormMessage = {
   message: string;
 };
 
-type Success = FormMessage & {
+export type Success = FormMessage & {
   result: User;
 };
 

pages/settings.tsx

@@ -1,5 +1,6 @@
 import { NextPage } from "next/types";
 import { useEffect } from "react";
+import FormResponse from "../components/FormResponse";
 import Layout from "../components/Layout";
 import Spinner from "../components/Spinner";
 import { useAuth } from "../context/UserContext";
@@ -80,16 +81,12 @@ const Settings: NextPage = () => {
         <button type="submit" className="form-button" disabled={loading}>
           {loading ? <Spinner /> : "Save"}
         </button>
-        {error && !success && (
-          <div role="alert" className="form-alert-msg">
-            {error.message}
-          </div>
-        )}
-        {success && (
-          <div role="alert" className="form-success-msg">
-            Profile updated correctly
-          </div>
-        )}
+        <FormResponse
+          error={error}
+          success={success}
+          loading={loading}
+          fallbackSuccessMessage="Profile updated correctly"
+        />
       </form>
     </Layout>
   ) : null;

pages/signup.tsx

@@ -1,4 +1,5 @@
 import { NextPage } from "next";
+import FormResponse from "../components/FormResponse";
 import Layout from "../components/Layout";
 import Spinner from "../components/Spinner";
 import useForm from "../hooks/useForm";
@@ -40,16 +41,12 @@ const SignUp: NextPage = () => {
         <button type="submit" className="form-button" disabled={loading}>
           {loading ? <Spinner /> : "Sign up"}
         </button>
-        {error && !success && (
-          <div role="alert" className="form-alert-msg">
-            {error.message}
-          </div>
-        )}
-        {success && (
-          <div role="alert" className="form-success-msg">
-            User created correctly! Please, log in to continue
-          </div>
-        )}
+        <FormResponse
+          error={error}
+          success={success}
+          loading={loading}
+          fallbackSuccessMessage="User created correctly! Please, log in to continue"
+        />
       </form>
     </Layout>
   );