refactor current user, now using context hooks...

Author: ajavieralejandro

package-lock.json

@@ -1,11 +1,10 @@
 {
   "name": "crwn-clothing",
   "version": "0.1.0",
-  "proxy": "http://localhost:5000",
   "private": true,
   "dependencies": {
     "firebase": "6.0.2",
-    "node-sass": "4.12.0",
+    "node-sass": "^4.13.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-redux": "7.0.3",
@@ -17,7 +16,7 @@
     "reselect": "4.0.0"
   },
   "devDependencies": {
-    "react-scripts": "3.0.0"
+    "react-scripts": "^3.3.0"
   },
   "resolutions": {
     "babel-jest": "24.7.1"

package.json

@@ -1,41 +1,41 @@
 import React from 'react';
+import CurrentUserContext from './contexts/current-user/current-user.context';
 import { Switch, Route, Redirect } from 'react-router-dom';
-import { connect } from 'react-redux';
-import { createStructuredSelector } from 'reselect';
-
 import './App.css';
-
 import HomePage from './pages/homepage/homepage.component';
 import ShopPage from './pages/shop/shop.component';
 import SignInAndSignUpPage from './pages/sign-in-and-sign-up/sign-in-and-sign-up.component';
 import CheckoutPage from './pages/checkout/checkout.component';
-
 import Header from './components/header/header.component';
-
 import { auth, createUserProfileDocument } from './firebase/firebase.utils';
 
-import { setCurrentUser } from './redux/user/user.actions';
-import { selectCurrentUser } from './redux/user/user.selectors';
-
 class App extends React.Component {
+
+  constructor(){
+    super();
+    this.state = {
+      currentUser : null
+    }  
+  }
+
   unsubscribeFromAuth = null;
 
   componentDidMount() {
-    const { setCurrentUser } = this.props;
-
+    console.log("Estoy seteando el estado...");
     this.unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => {
       if (userAuth) {
         const userRef = await createUserProfileDocument(userAuth);
 
         userRef.onSnapshot(snapShot => {
-          setCurrentUser({
+          this.setState({currentUser : {
             id: snapShot.id,
             ...snapShot.data()
-          });
+          }});
         });
       }
 
-      setCurrentUser(userAuth);
+      this.setState({currentUser : userAuth});
+      console.log("termine de setear el estado...");
     });
   }
 
@@ -44,9 +44,12 @@ class App extends React.Component {
   }
 
   render() {
+    console.log("El valor de current user en APP.JS es : ",this.state.currentUser);
     return (
       <div>
-        <Header />
+        <CurrentUserContext.Provider value={this.state.currentUser}>
+          <Header />
+        </CurrentUserContext.Provider>
         <Switch>
           <Route exact path='/' component={HomePage} />
           <Route path='/shop' component={ShopPage} />
@@ -55,7 +58,7 @@ class App extends React.Component {
             exact
             path='/signin'
             render={() =>
-              this.props.currentUser ? (
+              this.state.currentUser ? (
                 <Redirect to='/' />
               ) : (
                 <SignInAndSignUpPage />
@@ -68,15 +71,5 @@ class App extends React.Component {
   }
 }
 
-const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser
-});
-
-const mapDispatchToProps = dispatch => ({
-  setCurrentUser: user => dispatch(setCurrentUser(user))
-});
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(App);
+export default App;

src/App.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
@@ -7,13 +7,17 @@ import { auth } from '../../firebase/firebase.utils';
 import CartIcon from '../cart-icon/cart-icon.component';
 import CartDropdown from '../cart-dropdown/cart-dropdown.component';
 import { selectCartHidden } from '../../redux/cart/cart.selectors';
-import { selectCurrentUser } from '../../redux/user/user.selectors';
+import CurrentUserContext from "../../contexts/current-user/current-user.context";
+
 
 import { ReactComponent as Logo } from '../../assets/crown.svg';
 
 import './header.styles.scss';
 
-const Header = ({ currentUser, hidden }) => (
+const Header = ({  hidden }) =>{
+const currentUser = useContext(CurrentUserContext);
+console.log("El valor del current user en el header es : ",currentUser);
+return(
   <div className='header'>
     <Link className='logo-container' to='/'>
       <Logo className='logo' />
@@ -39,9 +43,9 @@ const Header = ({ currentUser, hidden }) => (
     {hidden ? null : <CartDropdown />}
   </div>
 );
+      }
 
 const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser,
   hidden: selectCartHidden
 });
 

src/components/header/header.component.jsx

@@ -0,0 +1,7 @@
+import {createContext} from 'react';
+
+import SHOP_DATA from './shop.data';
+
+const ContextCollection = createContext(SHOP_DATA);
+
+export default ContextCollection;