Adding open/close event to modal of the first access

src/client/actions/User.js

@@ -5,8 +5,7 @@ export function createAccount(email, password) {
   return dispatch => {
     dispatch({ type: actionsType.CREATE_ACCOUNT_SEND });
 
-    return BoardApi
-      .createAccount(email, password)
+    return BoardApi.createAccount(email, password)
       .then(({ data }) => {
         dispatch(accountCreated(data));
       })
@@ -23,3 +22,9 @@ export function accountCreated(response) {
 export function accountCreatedError(error) {
   return { type: actionsType.CREATE_ACCOUNT_ERROR, error };
 }
+
+export function setFirstAccess(firstAccess) {
+  return dispatch => {
+    dispatch({ type: actionsType.SET_FIRST_ACCESS, firstAccess: firstAccess });
+  };
+}

src/client/actions/actionsType.js

@@ -13,7 +13,8 @@ const actionsType = {
   LOGOUT_SUCCESS: "LOGOUT_SUCCESS",
   CREATE_ACCOUNT_SEND: "CREATE_ACCOUNT_SEND",
   CREATE_ACCOUNT_SUCCESS: "CREATE_ACCOUNT_SUCCESS",
-  CREATE_ACCOUNT_ERROR: "CREATE_ACCOUNT_ERROR"
+  CREATE_ACCOUNT_ERROR: "CREATE_ACCOUNT_ERROR",
+  SET_FIRST_ACCESS:"SET_FIRST_ACCESS"
 };
 
 export default actionsType;

src/client/components/ModalBase.js

@@ -7,9 +7,9 @@ class Modal extends React.Component {
   }
 
   onCloseModal() {
-    let { oncloseModal } = this.props;
+    let { onCloseModal } = this.props;
 
-    oncloseModal();
+    onCloseModal();
   }
 
   render() {
@@ -54,7 +54,7 @@ class Modal extends React.Component {
 Modal.propTypes = {
   children: PropTypes.object,
   title: PropTypes.string,
-  oncloseModal: PropTypes.func.isRequired,
+  onCloseModal: PropTypes.func.isRequired,
   allowClose: PropTypes.bool
 };
 

src/client/components/User/ModalFirstAccess.js

@@ -2,9 +2,13 @@ import React from "react";
 import ModalBase from "../ModalBase";
 import PropTypes from "prop-types";
 
-const ModalFirstAccess = ({ title }) => {
+const ModalFirstAccess = ({ user, onCloseModal }) => {
   return (
-    <ModalBase title={title} allowClose={false}>
+    <ModalBase
+      onCloseModal={onCloseModal}
+      title="Complete your profile"
+      allowClose={false}
+    >
       <div>
         <div className="row">
           <div className="col">
@@ -39,7 +43,11 @@ const ModalFirstAccess = ({ title }) => {
           <div className="col">
             <div className="form-group">
               <label>email</label>
-              <input type="text" className="form-control" />
+              <input
+                type="text"
+                className="form-control"
+                defaultValue={user.email}
+              />
             </div>
           </div>
           <div className="col">
@@ -75,7 +83,9 @@ const ModalFirstAccess = ({ title }) => {
         </div>
         <div className="row">
           <div className="col text-right">
-            <button className="btn">{"I'll do it later"}</button>
+            <button onClick={onCloseModal} className="btn">
+              {"I'll do it later"}
+            </button>
             {"  "}
             <button className="btn btn-murrey">
               Update <i className="fa fa-check" />
@@ -88,7 +98,9 @@ const ModalFirstAccess = ({ title }) => {
 };
 
 ModalFirstAccess.propTypes = {
-  title: PropTypes.string
+  title: PropTypes.string,
+  onCloseModal: PropTypes.func,
+  user: PropTypes.object
 };
 
 export default ModalFirstAccess;

src/client/components/User/ModalFirstAccessContainer.js

@@ -0,0 +1,22 @@
+import { connect } from "react-redux";
+import ModalFirstAccess from "./ModalFirstAccess";
+import { setFirstAccess } from "../../actions/User";
+
+let mapDispachToProps = dispatch => {
+  return {
+    onUpdateProfile() {
+      dispatch({});
+    },
+    onCloseModal() {
+      dispatch(setFirstAccess(false));
+    }
+  };
+};
+
+const mapStateToProps = ({userReducer:{user}}) => ({ user: user });
+
+let ModalFirstAccessContainer = connect(mapStateToProps, mapDispachToProps)(
+  ModalFirstAccess
+);
+
+export default ModalFirstAccessContainer;

src/client/components/home/Home.js

@@ -3,14 +3,13 @@ import NavbarContainer from "../navbar/NavbarContainer";
 import { Link } from "react-router-dom";
 import SubNav from "./SubNav";
 import PropTypes from "prop-types";
-import ModalFirstAccess from "../User/ModalFirstAccess";
+import ModalFirstAccessContainer from "../User/ModalFirstAccessContainer";
 
-const Home = ({ user }) => {
-  let firstAccess = typeof user !== "undefined" ? user.firstAccess : false;
+const Home = ({ user:{firstAccess} }) => {
 
   return (
     <div>
-      {firstAccess && <ModalFirstAccess title="Complete your profile" />}
+      {firstAccess && <ModalFirstAccessContainer />}
       <NavbarContainer />
       <SubNav />
       <br />

src/client/reducers/userReducer.js

@@ -35,7 +35,13 @@ export default function userReducer(state = initialState, action) {
       return { ...state, message, success, user };
 
     case actionsType.LOGOUT_SUCCESS:
-      return { ...state, success: false };
+      return { ...initialState };
+
+    case actionsType.SET_FIRST_ACCESS:
+      return {
+        ...state,
+        user: { ...state.user, firstAccess: action.firstAccess }
+      };
 
     default:
       return state;