Create SignOut components

Author: SafdarJamal

src/components/Home/index.js

@@ -1,21 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Home = ({ user, handleSignOut }) => {
+import SignOutContainer from '../../containers/SignOutContainer';
+
+const Home = ({ user }) => {
   return (
     <div>
       <h1>Home</h1>
       <p>First Name: {user.firstName}</p>
       <p>Last Name: {user.lastName}</p>
       <p>Email: {user.email}</p>
-      <button onClick={handleSignOut}>Sign Out</button>
+      <SignOutContainer />
     </div>
   );
 };
 
 Home.propTypes = {
-  user: PropTypes.object.isRequired,
-  handleSignOut: PropTypes.func.isRequired
+  user: PropTypes.object.isRequired
 };
 
 export default Home;

src/components/SignOut/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const SignOut = ({ handleSignOut }) => {
+  return <button onClick={handleSignOut}>Sign Out</button>;
+};
+
+SignOut.propTypes = {
+  handleSignOut: PropTypes.func.isRequired
+};
+
+export default SignOut;

src/containers/HomeContainer/index.js

@@ -1,36 +1,16 @@
 import React, { Component } from 'react';
-import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { removeUser } from '../../actions';
-import { withFirebase } from '../../services/firebase';
 
 import Home from '../../components/Home';
 
 class HomeContainer extends Component {
-  handleSignOut = () => {
-    const { firebase, removeUser } = this.props;
-
-    firebase
-      .signOut()
-      .then(() => {
-        removeUser();
-      })
-      .catch(error => {
-        const errorMessage = error.message;
-        console.log(errorMessage);
-      });
-  };
-
   render() {
-    return <Home user={this.props.user} handleSignOut={this.handleSignOut} />;
+    return <Home user={this.props.user} />;
   }
 }
 
 const mapStateToProps = state => {
   return { user: state.user };
 };
 
-export default compose(
-  connect(mapStateToProps, { removeUser }),
-  withFirebase
-)(HomeContainer);
+export default connect(mapStateToProps)(HomeContainer);

src/containers/SignOutContainer/index.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { removeUser } from '../../actions';
+import { withFirebase } from '../../services/firebase';
+
+import SignOut from '../../components/SignOut';
+
+class SignOutContainer extends Component {
+  handleSignOut = () => {
+    const { firebase, removeUser } = this.props;
+
+    firebase
+      .signOut()
+      .then(() => {
+        removeUser();
+      })
+      .catch(error => {
+        const errorMessage = error.message;
+        console.log(errorMessage);
+      });
+  };
+
+  render() {
+    return <SignOut handleSignOut={this.handleSignOut} />;
+  }
+}
+
+export default compose(
+  connect(null, { removeUser }),
+  withFirebase
+)(SignOutContainer);