From 21e48cc09fb640fa49a0b7690ca6585dcd689a46 Mon Sep 17 00:00:00 2001
From: teffcode <estefanyaguilar@lahaus.com>
Date: Wed, 8 Mar 2023 22:42:30 -0500
Subject: [PATCH] add: lab reto 7

---
 src/Components/Navbar/index.jsx | 33 ++++++++++++++++++++-------------
 src/Pages/App/index.jsx         | 32 ++++++++++++++++++++++++--------
 src/Pages/SignIn/index.jsx      |  1 +
 3 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/src/Components/Navbar/index.jsx b/src/Components/Navbar/index.jsx
index 6729340..276efc3 100644
--- a/src/Components/Navbar/index.jsx
+++ b/src/Components/Navbar/index.jsx
@@ -11,6 +11,13 @@ const Navbar = () => {
   const signOut = localStorage.getItem('sign-out')
   const parsedSignOut = JSON.parse(signOut)
   const isUserSignOut = context.signOut || parsedSignOut
+  // Account
+  const account = localStorage.getItem('account')
+  const parsedAccount = JSON.parse(account)
+  // Has an account
+  const noAccountInLocalStorage = parsedAccount ? Object.keys(parsedAccount).length === 0 : true
+  const noAccountInLocalState = context.account ? Object.keys(context.account).length === 0 : true
+  const hasUserAnAccount = !noAccountInLocalStorage || !noAccountInLocalState
 
   const handleSignOut = () => {
     const stringifiedSignOut = JSON.stringify(true)
@@ -19,18 +26,7 @@ const Navbar = () => {
   }
 
   const renderView = () => {
-    if (isUserSignOut) {
-      return (
-        <li>
-          <NavLink
-            to="/sign-in"
-            className={({ isActive }) => isActive ? activeStyle : undefined }
-            onClick={() => handleSignOut()}>
-            Sign out
-          </NavLink>
-        </li>
-      )
-    } else {
+    if (hasUserAnAccount && !isUserSignOut) {
       return (
         <>
           <li className='text-black/60'>
@@ -60,6 +56,17 @@ const Navbar = () => {
           </li>
         </>
       )
+    } else {
+      return (
+        <li>
+          <NavLink
+            to="/sign-in"
+            className={({ isActive }) => isActive ? activeStyle : undefined }
+            onClick={() => handleSignOut()}>
+            Sign in
+          </NavLink>
+        </li>
+      )
     }
   }
 
@@ -67,7 +74,7 @@ const Navbar = () => {
     <nav className='flex justify-between items-center fixed z-10 top-0 w-full py-5 px-8 text-sm font-light'>
       <ul className='flex items-center gap-3'>
         <li className='font-semibold text-lg'>
-          <NavLink to='/'>
+          <NavLink to={`${isUserSignOut ? '/sign-in' : '/'}`}>
             Shopi
           </NavLink>
         </li>
diff --git a/src/Pages/App/index.jsx b/src/Pages/App/index.jsx
index c5b29b1..49384ce 100644
--- a/src/Pages/App/index.jsx
+++ b/src/Pages/App/index.jsx
@@ -1,5 +1,6 @@
-import { useRoutes, BrowserRouter } from 'react-router-dom'
-import { ShoppingCartProvider } from '../../Context'
+import { useContext } from 'react'
+import { useRoutes, BrowserRouter, Navigate } from 'react-router-dom'
+import { ShoppingCartProvider, initializeLocalStorage, ShoppingCartContext } from '../../Context'
 import Home from '../Home'
 import MyAccount from '../MyAccount'
 import MyOrder from '../MyOrder'
@@ -11,13 +12,26 @@ import CheckoutSideMenu from '../../Components/CheckoutSideMenu'
 import './App.css'
 
 const AppRoutes = () => {
+  const context = useContext(ShoppingCartContext)
+  // Account
+  const account = localStorage.getItem('account')
+  const parsedAccount = JSON.parse(account)
+  // Sign Out
+  const signOut = localStorage.getItem('sign-out')
+  const parsedSignOut = JSON.parse(signOut)
+  // Has an account
+  const noAccountInLocalStorage = parsedAccount ? Object.keys(parsedAccount).length === 0 : true
+  const noAccountInLocalState = Object.keys(context.account).length === 0
+  const hasUserAnAccount = !noAccountInLocalStorage || !noAccountInLocalState
+  const isUserSignOut = context.signOut || parsedSignOut
+
   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: '/', element: hasUserAnAccount && !isUserSignOut ? <Home /> : <Navigate replace to={'/sign-in'} /> },
+    { path: '/clothes', element: hasUserAnAccount && !isUserSignOut ? <Home /> : <Navigate replace to={'/sign-in'} /> },
+    { path: '/electronics', element: hasUserAnAccount && !isUserSignOut ? <Home /> : <Navigate replace to={'/sign-in'} /> },
+    { path: '/furnitures', element: hasUserAnAccount && !isUserSignOut ? <Home /> : <Navigate replace to={'/sign-in'} /> },
+    { path: '/toys', element: hasUserAnAccount && !isUserSignOut ? <Home /> : <Navigate replace to={'/sign-in'} /> },
+    { path: '/others', element: hasUserAnAccount && !isUserSignOut ? <Home /> : <Navigate replace to={'/sign-in'} /> },
     { path: '/my-account', element: <MyAccount /> },
     { path: '/my-order', element: <MyOrder /> },
     { path: '/my-orders', element: <MyOrders /> },
@@ -31,6 +45,8 @@ const AppRoutes = () => {
 }
 
 const App = () => {
+  initializeLocalStorage()
+
   return (
     <ShoppingCartProvider>
       <BrowserRouter>
diff --git a/src/Pages/SignIn/index.jsx b/src/Pages/SignIn/index.jsx
index bf34c95..1851f78 100644
--- a/src/Pages/SignIn/index.jsx
+++ b/src/Pages/SignIn/index.jsx
@@ -54,6 +54,7 @@ function SignIn() {
           to="/">
           <button
             className='bg-black disabled:bg-black/40 text-white  w-full rounded-lg py-3 mt-4 mb-2'
+            onClick={() => handleSignIn()}
             disabled={!hasUserAnAccount}>
             Log in
           </button>