app.js

import React from "react";

import LoginPage from "./components/LoginPage/LoginPage";
import RegisterPage from "./components/RegisterPage/RegisterPage";
import LandingPage from "./components/LandingPage/LandingPage";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect,
} from "react-router-dom";
import { useSelector } from "react-redux";
import { isLoaded, isEmpty } from "react-redux-firebase";

function PrivateRoute({ children, ...rest }) {
  const auth = useSelector((state) => state.firebase.auth);
  console.log(auth);
  return (
    <Route
      {...rest}
      render={({ location }) =>
        isLoaded(auth) && !isEmpty(auth) ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: location },
            }}
          />
        )
      }
    />
  );
}

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact render={() => <Redirect to="/app/dashboard" />} />
        <Route
          path="/app"
          exact
          render={() => <Redirect to="/app/dashboard" />}
        />
        {/* <PrivateRoute path="/app" component={LandingPage} /> */}
        <PrivateRoute path="/app">
          <LandingPage />
        </PrivateRoute>

        <Route exact path="/register" component={RegisterPage} />

        <Route exact path="/login" component={LoginPage} />
      </Switch>
    </Router>
  );
}

export default App;