192. useEffect In Our App

navin-moorthy · Aug 22, 2019 · 5f2b923 · 5f2b923
1 parent 18180c3
commit 5f2b923
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 56 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Switch, Route, Redirect } from "react-router-dom";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -14,36 +14,29 @@ import { checkUserSession } from "./redux/user/user.actions";
 
 import "./App.css";
 
-class App extends React.Component {
+const App = ({ checkUserSession, currentUser }) => {
-  componentDidMount() {
+  useEffect(() => {
-    const { checkUserSession } = this.props;
     checkUserSession();
-  }
+  }, [checkUserSession]);
-
+
-  render() {
+  return (
-    return (
+    <div>
-      <div>
+      <Header />
-        <Header />
+      <Switch>
-        <Switch>
+        <Route exact path="/" component={HomePage} />
-          <Route exact path="/" component={HomePage} />
+        <Route
-          <Route
+          exact
-            exact
+          path="/signin"
-            path="/signin"
+          render={() =>
-            render={() =>
+            currentUser ? <Redirect to="/" /> : <SignInAndSignUpPage />
-              this.props.currentUser ? (
+          }
-                <Redirect to="/" />
+        />
-              ) : (
+        <Route path="/shop" component={ShopPage} />
-                <SignInAndSignUpPage />
+        <Route exact path="/checkout" component={CheckoutPage} />
-              )
+      </Switch>
-            }
+    </div>
-          />
+  );
-          <Route path="/shop" component={ShopPage} />
+};
-          <Route exact path="/checkout" component={CheckoutPage} />
-        </Switch>
-      </div>
-    );
-  }
-}
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser

diff --git a/src/pages/shop/shop.component.jsx b/src/pages/shop/shop.component.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Route } from "react-router-dom";
 import { connect } from "react-redux";
 
@@ -7,30 +7,26 @@ import { fetchCollectionsStart } from "../../redux/shop/shop.actions";
 import CollectionPageContainer from "../collection/collection.container";
 import CollectionsOverviewContainer from "../../components/collections-overview/collections-overview.container";
 
-class ShopPage extends React.Component {
+const ShopPage = ({ match, fetchCollectionsStart }) => {
-  componentDidMount() {
+  useEffect(() => {
-    const { fetchCollectionsStart } = this.props;
     fetchCollectionsStart();
-  }
+  }, [fetchCollectionsStart]);
 
-  render() {
+  return (
-    const { match } = this.props;
+    <div className="shop-page">
-    return (
+      <Route
-      <div className="shop-page">
+        exact
-        <Route
+        path={`${match.path}`}
-          exact
+        component={CollectionsOverviewContainer}
-          path={`${match.path}`}
+      />
-          component={CollectionsOverviewContainer}
+      <Route
-        />
+        exact
-        <Route
+        path={`${match.path}/:collectionId`}
-          exact
+        component={CollectionPageContainer}
-          path={`${match.path}/:collectionId`}
+      />
-          component={CollectionPageContainer}
+    </div>
-        />
+  );
-      </div>
+};
-    );
-  }
-}
 
 const mapDispatchToProps = dispatch => ({
   fetchCollectionsStart: () => dispatch(fetchCollectionsStart())

diff --git a/src/redux/shop/shop.sagas.js b/src/redux/shop/shop.sagas.js
@@ -13,8 +13,6 @@ import {
 } from "../../firebase/firebase.utils";
 
 export function* fetchCollectionAsync() {
-  yield console.log("I am fired");
-
   try {
     const collectionRef = firestore.collection("collections");
     const snapshot = yield collectionRef.get();
@@ -29,7 +27,6 @@ export function* fetchCollectionAsync() {
 }
 
 export function* fetchCollectionsStart() {
-  console.log("1");
   yield takeLatest(
     ShopActionTypes.FETCH_COLLECTIONS_START,
     fetchCollectionAsync