refactor App and shop component with useEffects

Author: ajavieralejandro

src/App.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React , {useEffect} from "react";
 import HomePage from "./pages/homepage/homepage.component";
 import { createStructuredSelector } from "reselect";
 import { selectCurrentUser } from "./redux/user/user.selectors";
@@ -13,57 +13,46 @@ import {checkUserSession } from "./redux/user/user.actions";
 import { selectToArray } from "./redux/shop/shop.selectors";
 
 import "./App.css";
-import {
-  auth,
-  createUserProfileDocument
-} from "../src/firebase/firebase.utils";
 import CheckOutPage from "./pages/checkout/checkout.component";
 
-class App extends React.Component {
-  //usa esta variable para cerrar la sesion...
-  unsubscribeFromAuth = null;
+//Solo lo ejecuta una ves
+const App = ({checkUserSession,currentUser}) =>  {
 
-  componentDidMount() {
-    console.log("Me estoy fijando que esta pasando");
-    const {checkUserSession} = this.props;
-    const aux = checkUserSession();
-    console.log("vino : ",aux);
- 
-  }
+  useEffect( () => {
+    checkUserSession();
 
-  componentWillUnmount() {
-    //this.unsubscribeFromAuth();
-  }
+  },[checkUserSession])
 
-  handleRedirect = () => {
-    console.log("Estoy justo aqui ");
-    return this.props.currentUser ? (
+  const handleRedirect = () => {
+ 
+    return currentUser ? (
       <Redirect to="/" />
     ) : (
       <SignInAndSignUpPage />
     );
   };
 
-  render() {
+  
     return (
       <div>
         <Header />
         <Switch>
           <Route exact path="/" component={HomePage} />
           <Route path="/shop" component={ShopPage} />
           <Route exact path="/checkout" component={CheckOutPage} />
-          <Route exact path="/signin" render={this.handleRedirect} />
+          <Route exact path="/signin" render={handleRedirect} />
         </Switch>
       </div>
     );
+
+
   }
-}
+
 
 
 
 const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser,
-  collectionsArray: selectToArray
+  currentUser: selectCurrentUser
 });
 
 const mapDispatchToProps = dispatch => ({

src/components/header/header.component.jsx

@@ -2,7 +2,6 @@ import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { ReactComponent as Logo } from "../../assets/crown.svg";
-import { auth } from "../../firebase/firebase.utils";
 import CartIcon from "../cart-icon/cart-icon.component";
 import CartDropdown from "../cart-dropdown/cart-dropdown";
 import { selectCartHidden } from "../../redux/cart/cart.selectors";

src/pages/shop/shop.component.jsx

@@ -1,33 +1,18 @@
-import React from "react";
+import React,{useEffect} from "react";
 import { Route } from "react-router-dom";
-import {createStructuredSelector} from "reselect";
-import CollectionsOverview from "../../components/collections-overview/collections-overview.component";
-import CollectionPage from "../collection/collection.component";
 import {connect} from "react-redux";
 import {fetchCollectionsStart} from "../../redux/shop/shop.actions";
-import withSpinner from "../../components/with-spinner/with-spinner.component";
-import {selectIsCollectionFetching,selectIsCollectionsLoaded} from "../../redux/shop/shop.selectors";
 import {CollectionPageContainer} from "../collection/collection.container";
 import {CollectionsOverviewContainer} from "../../components/collections-overview/collections-overview.container";
 
-class ShopPage extends React.Component{
- 
- 
-
-  componentDidMount() {
-    const {fetchCollectionsStart} = this.props;
-    fetchCollectionsStart();
-    
-  }
+const ShopPage = ({fetchCollectionsStart,match}) => {
 
+      useEffect(
+        () => {
+          fetchCollectionsStart()
 
-  render(){
-    
-      const {match,isCollectionLoaded,isCollectionFetching,collections} = this.props;
-      console.log("El momento de la verdad  : ");
-      console.log(isCollectionLoaded);
-      
-      const CollectionPageSpinner = withSpinner(CollectionPage);
+        },[fetchCollectionsStart]
+      )      
 
     return (
       <div>
@@ -37,17 +22,14 @@ class ShopPage extends React.Component{
           return <CollectionPageContainer otherProps={props} />;}} />
       </div>
     );    
-  };
+  
 
   }
 
-  const mapStateToProps = createStructuredSelector({
-    isCollectionLoaded : selectIsCollectionsLoaded,
-  })
 
   const mapDispatchToProps = dispatch =>({
     fetchCollectionsStart : () => dispatch(fetchCollectionsStart())
   })
 
 
-export default connect(mapStateToProps,mapDispatchToProps)(ShopPage);
+export default connect(null,mapDispatchToProps)(ShopPage);