Fix login and registration form not hidding automatically

CHANGELOG.md

@@ -4,7 +4,7 @@ All notable, unreleased changes to this project will be documented in this file.
 
 ## [Unreleased]
 
-...
+- Fix login and registration overlay not showing - #322 by @mateuszkula
 
 ## 0.6.0
 

src/components/LoginForm/index.tsx

@@ -8,22 +8,32 @@ import { UserContext } from "../User/context";
 import { TypedTokenAuthMutation } from "../User/queries";
 import { TokenAuth, TokenAuth_tokenCreate_user } from "../User/types/TokenAuth";
 
+interface ILoginForm {
+  hide?: () => void;
+}
+
 const performLogin = (
   login: (token: string, user: TokenAuth_tokenCreate_user) => void,
-  data: TokenAuth
+  data: TokenAuth,
+  hide?: () => void
 ) => {
   const successfull = !data.tokenCreate.errors.length;
 
   if (successfull) {
+    if (!!hide) {
+      hide();
+    }
     login(data.tokenCreate.token, data.tokenCreate.user);
   }
 };
 
-const LoginForm: React.FC = () => (
+const LoginForm: React.FC<ILoginForm> = ({ hide }) => (
   <div className="login-form">
     <UserContext.Consumer>
       {({ login }) => (
-        <TypedTokenAuthMutation onCompleted={data => performLogin(login, data)}>
+        <TypedTokenAuthMutation
+          onCompleted={data => performLogin(login, data, hide)}
+        >
           {(tokenCreate, { data, loading }) => {
             return (
               <Form

src/components/OverlayManager/Login/RegisterForm.tsx

@@ -4,59 +4,68 @@ import * as React from "react";
 
 import { Button, Form, TextField } from "../..";
 import { maybe } from "../../../core/utils";
-import { OverlayType, ShowOverlayType } from "../../Overlay/context";
 import { TypedCustomerRegisterMutation } from "./queries";
 import { RegisterCutomer } from "./types/RegisterCutomer";
 
-const showSuccessNotofication = (
-  show: ShowOverlayType,
-  data: RegisterCutomer
+import { AlertManager, useAlert } from "react-alert";
+
+const showSuccessNotification = (
+  data: RegisterCutomer,
+  hide: () => void,
+  alert: AlertManager
 ) => {
   const successful = maybe(() => !data.customerRegister.errors.length);
 
   if (successful) {
-    show(OverlayType.message, null, {
-      title: `New user has been created.`
-    });
+    hide();
+    alert.show(
+      {
+        title: "New user has been created"
+      },
+      { type: "success" }
+    );
   }
 };
 
-const RegisterForm: React.FC<{ show: ShowOverlayType }> = ({ show }) => (
-  <TypedCustomerRegisterMutation
-    onCompleted={data => showSuccessNotofication(show, data)}
-  >
-    {(registerCustomer, { loading, data }) => {
-      return (
-        <Form
-          errors={maybe(() => data.customerRegister.errors, [])}
-          onSubmit={(event, { email, password }) => {
-            event.preventDefault();
-            registerCustomer({ variables: { email, password } });
-          }}
-        >
-          <TextField
-            name="email"
-            autoComplete="email"
-            label="Email Address"
-            type="email"
-            required
-          />
-          <TextField
-            name="password"
-            autoComplete="password"
-            label="Password"
-            type="password"
-            required
-          />
-          <div className="login__content__button">
-            <Button type="submit" {...loading && { disabled: true }}>
-              {loading ? "Loading" : "Register"}
-            </Button>
-          </div>
-        </Form>
-      );
-    }}
-  </TypedCustomerRegisterMutation>
-);
+const RegisterForm: React.FC<{ hide: () => void }> = ({ hide }) => {
+  const alert = useAlert();
+  return (
+    <TypedCustomerRegisterMutation
+      onCompleted={data => showSuccessNotification(data, hide, alert)}
+    >
+      {(registerCustomer, { loading, data }) => {
+        return (
+          <Form
+            errors={maybe(() => data.customerRegister.errors, [])}
+            onSubmit={(event, { email, password }) => {
+              event.preventDefault();
+              registerCustomer({ variables: { email, password } });
+            }}
+          >
+            <TextField
+              name="email"
+              autoComplete="email"
+              label="Email Address"
+              type="email"
+              required
+            />
+            <TextField
+              name="password"
+              autoComplete="password"
+              label="Password"
+              type="password"
+              required
+            />
+            <div className="login__content__button">
+              <Button type="submit" {...loading && { disabled: true }}>
+                {loading ? "Loading" : "Register"}
+              </Button>
+            </div>
+          </Form>
+        );
+      }}
+    </TypedCustomerRegisterMutation>
+  );
+};
 
 export default RegisterForm;

src/components/OverlayManager/Login/index.tsx

@@ -69,15 +69,15 @@ class Login extends React.Component<
             <div className="login__content">
               {this.state.active === "login" ? (
                 <>
-                  <LoginForm />
+                  <LoginForm hide={hide} />
                   <ForgottenPassword
                     onClick={() => {
                       show(OverlayType.password, OverlayTheme.right);
                     }}
                   />
                 </>
               ) : (
-                <RegisterForm show={show} />
+                <RegisterForm hide={hide} />
               )}
             </div>
           </Online>