forked from b00tc4mp/isdi-bootcamp-202405
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
create changing header for login home and register in app b00tc4mp#101
- Loading branch information
1 parent
938e3e5
commit 46ff525
Showing
10 changed files
with
142 additions
and
169 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,57 +1,59 @@ | ||
| import { useState, useEffect } from 'react' | ||
| import { Routes, Route, useNavigate, Navigate } from 'react-router-dom' | ||
|
|
||
| import { Routes, Route, useNavigate } from 'react-router-dom' | ||
| import Header from './home/Header' | ||
| import Home from './home' | ||
| import Login from './login' | ||
| import Register from './register' | ||
| import Home from './home' | ||
| import Alert from './common/Alert' | ||
| import logic from '../logic' | ||
|
|
||
| import Alert from './common/Alert' | ||
| import { Context } from './context' | ||
|
|
||
| import logic from '../logic' | ||
|
|
||
| const App = () => { | ||
| export default function App() { | ||
| const navigate = useNavigate() | ||
|
|
||
| const [theme, setTheme] = useState(localStorage.theme) | ||
| const [isAuthenticated, setIsAuthenticated] = useState(logic.isUserLoggedIn()) | ||
| const [alertMessage, setAlertMessage] = useState(null) | ||
|
|
||
| useEffect(() => { | ||
| document.documentElement.className = theme | ||
| localStorage.theme = theme | ||
| }, [theme]) | ||
|
|
||
| const handleLogin = () => { | ||
| const handleHomeClick = () => { | ||
| navigate('/') | ||
| } | ||
|
|
||
| const handleRegisterClick = () => { | ||
| navigate('/register') | ||
| } | ||
|
|
||
| const handleRegister = () => { | ||
| navigate('/login') | ||
| } | ||
|
|
||
| const handleLoginClick = () => { | ||
| navigate('/login') | ||
| } | ||
|
|
||
| const handleLogout = () => { | ||
| setIsAuthenticated(false) | ||
| navigate('/') // Redirigir a Home después de logout | ||
| } | ||
|
|
||
| const handleLogin = () => { | ||
| setIsAuthenticated(true) | ||
| navigate('/') | ||
| } | ||
|
|
||
| const handleAlertAccept = () => setAlertMessage(null) | ||
| const handleRegisterClick = () => { | ||
| navigate('/register') | ||
| } | ||
|
|
||
| return <Context.Provider value={{ theme, setTheme, alert: setAlertMessage }}> | ||
| <Routes> | ||
| <Route path="/login" element={<Login onLogin={handleLogin} onRegisterClick={handleRegisterClick} />} /> | ||
| <Route path="/register" element={<Register onRegister={handleRegister} onLoginClick={handleLoginClick} />} /> | ||
| <Route path="/*" element={<Home onLogout={handleLogout} />} /> | ||
| </Routes> | ||
| const handleAlertAccept = () => setAlertMessage(null) | ||
|
|
||
| {alertMessage && <Alert message={alertMessage} onAccept={handleAlertAccept} />} | ||
| </Context.Provider> | ||
| return ( | ||
| <Context.Provider value={{ alert: setAlertMessage }}> | ||
| <> | ||
| <Header | ||
| onHomeClick={handleHomeClick} | ||
| onLogout={handleLogout} | ||
| onLoginClick={handleLoginClick} // Aquí pasamos la función correctamente | ||
| isAuthenticated={isAuthenticated} | ||
| /> | ||
| <Routes> | ||
| <Route path="/" element={<Home />} /> | ||
| <Route path="/login" element={<Login onLogin={handleLogin} onRegisterClick={handleRegisterClick} />} /> | ||
| <Route path="/register" element={<Register onRegister={() => navigate('/login')} onLoginClick={handleLoginClick} />} /> | ||
| </Routes> | ||
| {alertMessage && <Alert message={alertMessage} onAccept={handleAlertAccept} />} | ||
| </> | ||
| </Context.Provider> | ||
| ) | ||
| } | ||
|
|
||
| export default App |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| import Container from '../library/Container' | ||
| import logic from '../../logic' | ||
|
|
||
| export default function Profile() { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,12 @@ | ||
| import { useState } from 'react' | ||
| import { Routes, Route, useNavigate } from 'react-router-dom' | ||
|
|
||
| import Header from './Header' | ||
| // import Footer from './Footer' | ||
| import { Routes, Route } from 'react-router-dom' | ||
| import Hello from './Hello' | ||
| import isUserLoggedIn from '../../logic/isUserLoggedIn' | ||
|
|
||
| export default function Home() { | ||
| const navigate = useNavigate() | ||
| const [isAuthenticated, setIsAuthenticated] = useState(isUserLoggedIn()) | ||
|
|
||
| const handleHomeClick = () => { | ||
| navigate('/') | ||
| } | ||
|
|
||
| const handleLogout = () => { | ||
| setIsAuthenticated(false) | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <Header | ||
| onHomeClick={handleHomeClick} | ||
| onLogout={handleLogout} | ||
| isAuthenticated={isAuthenticated} | ||
| /> | ||
|
|
||
| <main className="flex flex-col items-center gap-4 mt-16 mb-12 dark:bg-black"> | ||
| <Routes> | ||
|
|
||
| <Route path="/hello/:to" element={<Hello />} /> | ||
| </Routes> | ||
| </main> | ||
|
|
||
| {/* <Footer/> */} | ||
| </> | ||
| <main className='flex flex-col items-center gap-4 mt-16 mb-12 dark:bg-black'> | ||
| <Routes> | ||
| <Route path='/hello/:to' element={<Hello />} /> | ||
| </Routes> | ||
| </main> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.