routes-v6

AppRouter.js

import { useEffect, useState } from "react";
import { BrowserRouter as Router, Redirect, Route, Navigate, BrowserRouter, Routes } from "react-router-dom";
import { useDispatch } from "react-redux";

import { AuthRouter } from "./AuthRouter";
/* import { firebase } from "../firebase/firebase-config"; */
/* import { login } from "../actions/Auth"; */
import { PrivateRoute } from "./PrivateRoute";
import { PublicRoute } from "./PublicRoute";
/* import { startLoadingNotes } from "../actions/notes"; */
import { ChatApp } from "../ChatApp";
import { Home } from "../components/pages/Home";
import { ChatRoutes } from "./ChatRoutes";

export const AppRouter = () => {
  /* const dispatch = useDispatch();

  const [checking, setChecking] = useState(true);
  const [isLoggedIn, setIsLoggedIn] = useState(false); */

  /* useEffect(() => {
    firebase.auth().onAuthStateChanged(async (user) => {
      if (user?.uid) {
        dispatch(login(user.uid, user.displayName));
        setIsLoggedIn(true);

        dispatch(startLoadingNotes(user.uid));
      } else {
        setIsLoggedIn(false);
      }
      setChecking(false);
    });
  }, [dispatch, checking]); */

  /* if (checking) {
    return <h1>Espere...</h1>;
  } */

  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/auth/*"
          element={
            <PublicRoute>
              <AuthRouter />
            </PublicRoute>
          }
        />
        <Route
          path="/*"
          element={
            <PrivateRoute>
              <ChatRoutes />
            </PrivateRoute>
          }
        />
      </Routes>
    </BrowserRouter>
  );
};

AuthRouter.js

import { Navigate, Route, Routes } from "react-router-dom";
import { LoginScreen } from "../components/pages/LoginScreen";
import { NotFound } from "../components/pages/NotFound";
import { RegisterScreen } from "../components/pages/RegisterScreen";

export const AuthRouter = () => {
  return (
    <div className="auth__main">
      <div className="auth__box-container">
        <Routes>
          <Route path="/login" element={<LoginScreen />} />
          <Route path="/register" element={<RegisterScreen />} />
          <Route path="*" element={<NotFound />} />
          {/* <Route path="*" element={<Navigate to="/" />} /> */}
        </Routes>
      </div>
    </div>
  );
};

ChatRoutes.js

import { Routes, Route, Navigate } from "react-router-dom";
import { Home } from "../components/pages/Home";
import { NotFound } from "../components/pages/NotFound";

export const ChatRoutes = () => {
  return (
    <>
      <div className="container">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="*" element={<NotFound />} />
          {/* <Route path="*" element={<Navigate to="/" />} /> */}
        </Routes>
      </div>
    </>
  );
};

PrivateRoute.js

import { useContext } from "react";
import { Navigate, useLocation } from "react-router-dom";
/* import { AuthContext } from "../auth/authContext"; */

export const PrivateRoute = ({ children }) => {
  /* const { user } = useContext(AuthContext); */
  /* const { pathname, search } = useLocation(); */
  const isAuthenticated = false;

  /* localStorage.setItem("lastPath", pathname + search); */

  return isAuthenticated ? children : <Navigate to="/auth/login" />;
};

PublicRoute.js

import React, { useContext } from "react";
import { Navigate } from "react-router-dom";
/* import { AuthContext } from "../auth/authContext"; */

export const PublicRoute = ({ children }) => {
  /* const { user } = useContext(AuthContext); */
  const isAuthenticated = false;
  return isAuthenticated ? <Navigate to="/" /> : children;
};