text: import React, { lazy, Suspense } from "react";
  import { Route, Switch, Redirect } from "react-router-dom";
  import { connect } from "react-redux";
  import { createStructuredSelector } from "reselect";
  import "./App.css";
  
  import Header from "./components/header/header";
  import Spinner from "./components/spinner/spinner";
  
  import { auth, createUserProfileDocument } from "./firebase/firebase.utils";
  
  import { setCurrentUser } from "./redux/user/user.actions";
  import { selectCurrentUser } from "./redux/user/user.selectors";
  
  const HomePage = lazy(() => import("./pages/homepage/homepage"));
  const ShopPage = lazy(() => import("./pages/shop/shop"));
  const SignInSignUp = lazy(() =>
    import("./pages/sign-in-sign-up/sign-in-sign-up")
  );
  const CheckoutPage = lazy(() => import("./pages/checkout/checkout"));
  const AboutPage = lazy(() => import("./pages/about/about"));
  
  class App extends React.Component {
    unsubscribeFromAuth = null;
  
    componentDidMount() {
      const { setCurrentUser } = this.props;
  
      this.unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => {
        if (userAuth) {
          const userRef = await createUserProfileDocument(userAuth);
  
          userRef.onSnapshot(snapShot => {
            setCurrentUser({
              id: snapShot.id,
              ...snapShot.data()
            });
          });
        } else {
          setCurrentUser(userAuth);
        }
      });
    }
  
    componentWillUnmount() {
      this.unsubscribeFromAuth();
    }
  
    render() {
      return (
        <div className="content">
          <Header />
          <Switch>
            <Suspense fallback={<Spinner />}>
              <Route exact path="/" component={HomePage} />
              <Route path="/shop" component={ShopPage} />
              <Route path="/about" component={AboutPage} />
              <Route exact path="/checkout" component={CheckoutPage} />
              <Route
                exact
                path="/signin"
                render={() =>
                  this.props.currentUser ? <Redirect to="/" /> : <SignInSignUp />
                }
              />
            </Suspense>
          </Switch>
        </div>
      );
    }
  }
  
  const mapStateToProps = createStructuredSelector({
    currentUser: selectCurrentUser
  });
  
  const mapDispatchToProps = dispatch => ({
    setCurrentUser: user => dispatch(setCurrentUser(user))
  });
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(App);
  