feat (issue platzi#14): Protección de Rutas

src/Components/ProtectedRoute/index.jsx

@@ -0,0 +1,11 @@
+import { useContext } from "react"
+import { ShoppingCartContext } from "../../Context"
+import { Navigate, Outlet } from "react-router-dom"
+
+export const ProtectedRoute = () => {
+    const { isLogged } = useContext(ShoppingCartContext)
+
+    return (
+        isLogged ? <Outlet /> : <Navigate replace to='/sign-in' />
+    )
+}

src/Components/SignUp/index.jsx

@@ -31,7 +31,7 @@ export const SignUp = () => {
     return (
         <div className="signUp-container flex flex-col w-80">
         <h2 className='font-bold mb-3 text-center text-lg'>Welcome</h2>
-        <form action="">
+        <form action="" id='signUp_form'>
           <div className="input-container flex flex-col mb-4">
             <label htmlFor="name" className='text-sm'>Your Name:</label>
             <input type="text" id='name' name='name' placeholder='John Doe' value={newUser.name} onChange={handleInputChange} className='py-2 px-4 border border-slate-900 rounded-lg outline-none'/>

src/Pages/App/index.jsx

@@ -9,27 +9,32 @@ import SignIn from '../SignIn'
 import Navbar from '../../Components/Navbar'
 import CheckoutSideMenu from '../../Components/CheckoutSideMenu'
 import './App.css'
+import { ProtectedRoute } from '../../Components/ProtectedRoute'
 
 const AppRoutes = () => {
   let routes = useRoutes([
-    { path: '/', element: <Home /> },
-    { path: '/clothes', element: <Home /> },
-    { path: '/electronics', element: <Home /> },
-    { path: '/furnitures', element: <Home /> },
-    { path: '/toys', element: <Home /> },
-    { path: '/othes', element: <Home /> },
-    { path: '/my-account', element: <MyAccount /> },
-    { path: '/my-order', element: <MyOrder /> },
-    { path: '/my-orders', element: <MyOrders /> },
-    { path: '/my-orders/last', element: <MyOrder /> },
-    { path: '/my-orders/:id', element: <MyOrder /> },
+    {element: <ProtectedRoute />, children: [
+      { path: '/', element: <Home /> },
+      { path: '/clothes', element: <Home /> },
+      { path: '/electronics', element: <Home /> },
+      { path: '/furnitures', element: <Home /> },
+      { path: '/toys', element: <Home /> },
+      { path: '/othes', element: <Home /> },
+      { path: '/my-account', element: <MyAccount /> },
+      { path: '/my-order', element: <MyOrder /> },
+      { path: '/my-orders', element: <MyOrders /> },
+      { path: '/my-orders/last', element: <MyOrder /> },
+      { path: '/my-orders/:id', element: <MyOrder /> },
+    ]},
     { path: '/sign-in', element: <SignIn /> },
     { path: '/*', element: <NotFound /> },
   ])
 
   return routes
 }
 
+
+
 const App = () => {
   return (
     <ShoppingCartProvider>