Dung fork

package.json

@@ -7,6 +7,7 @@
     "@material-ui/icons": "^3.0.2",
     "firebase": "^5.8.0",
     "react": "^16.7.0",
+    "react-bootstrap": "^1.0.0-beta.5",
     "react-dom": "^16.7.0",
     "react-redux": "^6.0.0",
     "react-redux-firebase": "^2.2.6",

src/components/Profile/Profile.js → src/components/profile/Profile.js

@@ -91,32 +91,32 @@ class Profile extends React.Component {
         </div>
       </div>
     </div>);
-    var editPayment = (<div className="modal" tabIndex="-1" role="dialog">
-
-      <div className="modal-dialog" role="document">
-        <div className="modal-content">
-          <div className="modal-header">
-            <h5 className="modal-title">Modal title</h5>
-            <button type="button" className="close" data-dismiss="modal" aria-label="Close">
-              <span aria-hidden="false">&times;</span>
-            </button>
-          </div>
-          <div className="modal-body">
-            <p>Modal body text goes here.</p>
-          </div>
-          <div className="modal-footer">
-            <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
-            <button type="button" className="btn btn-primary">Save changes</button>
-          </div>
-        </div>
-      </div>
-    </div>);
+    // var editPayment = (<div className="modal" tabIndex="-1" role="dialog">
+    //
+    //   <div className="modal-dialog" role="document">
+    //     <div className="modal-content">
+    //       <div className="modal-header">
+    //         <h5 className="modal-title">Modal title</h5>
+    //         <button type="button" className="close" data-dismiss="modal" aria-label="Close">
+    //           <span aria-hidden="false">&times;</span>
+    //         </button>
+    //       </div>
+    //       <div className="modal-body">
+    //         <p>Modal body text goes here.</p>
+    //       </div>
+    //       <div className="modal-footer">
+    //         <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
+    //         <button type="button" className="btn btn-primary">Save changes</button>
+    //       </div>
+    //     </div>
+    //   </div>
+    // </div>);
     return (
         <div >
           {this.state.showEditPayment === true ? <PaymentRegisterForm/> : (<div/>)}
 
-          <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
-          <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"/>
+          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"/>
           <div className="bootstrapiso">
 
             <div className="container emp-profile">
@@ -141,14 +141,14 @@ class Profile extends React.Component {
                     <h6>
                       Web Developer and Designer
                     </h6>
-                    <p className="proile-rating"></p>
+                    <p className="proile-rating"/>
                     <ul className="nav nav-tabs" id="myTab" role="tablist">
                       <li className="nav-item">
-                        <a className="nav-link" id="profile-tab" data-toggle="tab" href="#home" role="tab"
+                        <a className="nav-link" id="profile-tab" data-toggle="tab"  role="tab"
                             onClick={this.changeTab}>About</a>
                       </li>
                       <li className="nav-item">
-                        <a className="nav-link" id="payment-tab" data-toggle="tab" href="#profile" role="tab"
+                        <a className="nav-link" id="payment-tab" data-toggle="tab"  role="tab"
                             onClick={this.changeTab}>Payment methods</a>
                       </li>
                     </ul>
@@ -199,6 +199,6 @@ const mapStateToProps = (state) => {
     expDate : state.auth.expDate,
     cvv : state.auth.cvv
   }
-}
+};
 
 export default connect(mapStateToProps,null)(Profile);

src/components/register/Register.js

@@ -12,6 +12,8 @@ import PaymentRegisterForm from './PaymentRegisterForm';
 import TailorRegisterForm from './TailorRegisterForm';
 import { connect } from 'react-redux';
 import { register } from '../../store/actions/authActions'
+import { changePayment } from '../../store/actions/ChangePaymentActions'
+
 import './Register.css'
 
 const styles = theme => ({
@@ -54,6 +56,9 @@ const steps = ['Basic information', 'Payment details', 'Tailor your experience']
 
 
 class Register extends React.Component {
+  firstStep = true;
+  secondStep = false;
+  thirdStep = false;
   state = {
     activeStep: 0,
     email: '',
@@ -81,21 +86,41 @@ class Register extends React.Component {
 
   componentWillReceiveProps(nextProps) {
     // Go next step when success register
-    if (nextProps.authSuccess) {
+    console.log("props.payment "+nextProps.paymentSuccess);
+
+    if (nextProps.authSuccess && this.firstStep) {
+      this.setState(state => ({
+        activeStep: state.activeStep + 1,
+      }));
+
+      this.firstStep = false;
+      this.secondStep = true;
+    }
+
+    else if (nextProps.paymentSuccess && this.secondStep ) {
       this.setState(state => ({
         activeStep: state.activeStep + 1,
       }));
+      this.secondStep = false;
+      this.firstStep = false;
     }
   }
 
 
   //change register to optional. require to click to the final state .
   handleNext = (e) => {
+    console.log(this.firstStep + "  " + this.secondStep);
     // Authentication
-    if (this.state.activeStep === 2) {
+    if (this.state.activeStep === 0) {
+      console.log(this.state.activeStep);
       e.preventDefault();
       this.props.register(this.state);
     }
+    else if( this.state.activeStep === 1){
+      console.log(this.state.activeStep);
+      const{uid} = this.props;
+      this.props.changePayment(this.state,uid);
+    }
     else {
       this.setState(state => ({
         activeStep: state.activeStep + 1,
@@ -119,7 +144,7 @@ class Register extends React.Component {
   myCallback = (dataFromChild) => {
       this.setState({
         [dataFromChild.target.id]: dataFromChild.target.value
-      })
+      });
     console.log(this.state.cards);
   };
 
@@ -190,13 +215,17 @@ Register.propTypes = {
 const mapStateToProps = (state) => {
   return {
     authSuccess: state.auth.authSuccess,
-    authError: state.auth.authError
+    authError: state.auth.authError,
+    uid : state.auth.uid,
+    paymentSuccess : state.auth.paymentSuccess,
   }
-}
+};
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    register: (newUser) => dispatch(register(newUser))
+    register: (newUser) => dispatch(register(newUser)),
+    changePayment: (UserPayment,uid) => dispatch(changePayment(UserPayment,uid))
+
   }
 }
 

src/index.js

@@ -24,14 +24,42 @@ const theme = createMuiTheme({
     }
 });
 
-const store = createStore(rootReducer,
+
+function saveToLocalStorage(state){
+    try{
+        const serializedState = JSON.stringify(state);
+        localStorage.setItem('state',serializedState);
+    }catch(e){
+        console.log(e)
+    }
+}
+
+function loadFromLocalStorage(){
+    try{
+        const serializedState = localStorage.getItem('state');
+        if (serializedState ===null) return undefined;
+        return JSON.parse(serializedState)
+    }catch(e){
+        console.log(e);
+        return undefined
+    }
+}
+
+const persistState = loadFromLocalStorage();
+
+const store = createStore(
+    rootReducer,
+    persistState,
     compose(
         applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
         reduxFirestore(firebaseConfig),
         reactReduxFirebase(firebaseConfig)
     )
 );
 
+store.subscribe(() => saveToLocalStorage(store.getState()));
+
+
 ReactDOM.render(
     <Provider store={store}>
         <MuiThemeProvider theme={theme} >

src/store/actions/SignOutActions.js

@@ -1,6 +1,7 @@
 export const signout = () => {
     return (dispatch,getState, {getFirebase}) => {
         const firebase = getFirebase();
+        localStorage.clear();
         firebase.auth().signOut().then((u) => {
         }).then(()=> {
             dispatch({type: 'SIGNOUT_SUCCESS'})

src/store/actions/authActions.js

@@ -1,28 +1,24 @@
-import { actionTypes } from "react-redux-firebase";
 
 export const register = (newUser) => {
+    var uid ;
     return (dispatch, getState, { getFirebase, getFirestore }) => {
         if(newUser.password !== newUser.pass_chk){
             dispatch({ type: 'NOT_SAME'})
-        }else{ 
+        }else{
             const firebase = getFirebase();
             const firestore = getFirestore();
             firebase.auth().createUserWithEmailAndPassword(
                 newUser.email,
                 newUser.password
             ).then((response) => {
+                uid = response.user.uid;
                 return firestore.collection('users').doc(response.user.uid).set({
                     firstName: newUser.firstName,
                     lastName: newUser.lastName,
-                    card: {
-                        cardName: newUser.cardName,
-                        cardNumber : newUser.cardNumber,
-                        expDate : newUser.expDate,
-                        cvv : newUser.cvv
-                    }
+
                 })
             }).then(() => {
-                dispatch({ type: 'REGISTER_SUCCESS'})
+                dispatch({ type: 'REGISTER_SUCCESS',uid})
             }).catch(error => {
                 dispatch({ type: 'REGISTER_ERROR', error })
         })}

src/store/actions/authSignInActions.js

@@ -1,19 +1,22 @@
-import {applyMiddleware as dispatch} from "redux";
+import {admin} from "firebase";
 
 export const signin = (User) => {
+
     return (dispatch,getState, {getFirebase,getFirestore}) => {
         const firebase = getFirebase();
         const firestore = getFirestore();
+
+
+
         firebase.auth().signInWithEmailAndPassword(User.email,User.password).then((response) => {
-            console.log("@@ : "  +response);
             firestore.collection("users").doc(response.user.uid).get().then(function(doc){
                 if(doc.exists){
                     console.log("Document data:",doc.data());
                 }
                 else{
                     console.log("Document data:", doc.data());
                 }
-                dispatch({type: 'SIGNIN_SUCCESS',profile_info : doc.data()});
+                dispatch({type: 'SIGNIN_SUCCESS',profile_info : doc.data(),uid:response.user.uid,});
 
             })
         })