sineto · February 18, 2025 15:36 · Jul 23, 2020 · Jul 23, 2020 · Jul 23, 2020 · Jul 23, 2020
diff --git a/App.js b/App.js
@@ -1,24 +1,18 @@
 import React from 'react';
-import { Switch, Route } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 
-import Home from './pages/Home';
-import Login from './components/Login';
-import Dashboard from './components/Dashboard';
-import Users from './components/Users';
-import Products from './components/Products';
+import { UserProvider } from './services/UserContext';
+
+import Routes from './Routes'
 
 function App() {
   return (
-		<>
-			<Switch>
-				<Route path='/' exact component={Home} />
-				<Route path='/login' exact component={Login} />
-				<Route path='/admin' component={Dashboard} />
-				<Route path='/users' component={Users} />
-				<Route path='/products' component={Products} />
-			</Switch>
-		</>
+		<BrowserRouter>
+			<UserProvider>
+				<Routes />
+			</UserProvider>
+		</BrowserRouter>
   );
 }
 
-export default App;
+export default App;
diff --git a/Layout.js b/Layout.js
@@ -1,15 +1,11 @@
 import React from 'react';
 import Header from '../Header';
 
-import { UserProvider } from '../../services/UserContext';
-
 const Layout = ({ children }) => {
 	return (
 		<>
-			<UserProvider>
-				<Header />
-				{ children }
-			</UserProvider>
+			<Header />
+			{ children }
 		</>
 	);
 };

diff --git a/Routes.js b/Routes.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+
+import Home from './pages/Home';
+import Login from './components/Login';
+import Dashboard from './components/Dashboard';
+import Users from './components/Users';
+import Products from './components/Products';
+
+const Routes = () => {
+	return (
+		<Switch>
+			<Route path='/' exact component={Home} />
+			<Route path='/login' exact component={Login} />
+			<Route path='/admin' component={Dashboard} />
+			<Route path='/users' component={Users} />
+			<Route path='/products' component={Products} />
+		</Switch>
+	);
+};
+
+export default Routes;
diff --git a/AuthService.js b/AuthService.js
@@ -8,14 +8,14 @@ export const login = async (username, password) => {
 
 	const token = response.data.token;
 	if (token) {
-		localStorage.setItem('valentiaUser', JSON.stringify(response.data));
+		localStorage.setItem('user', JSON.stringify(response.data));
 	}
 
 	return response.data;
 };
 
 export const isAuthenticated = () => {
-	const user = localStorage.getItem('valentiaUser');
+	const user = localStorage.getItem('user');
 	if (!user) {
 		return {}
 	}

diff --git a/Header.js b/Header.js
@@ -8,7 +8,7 @@ const Header = () => {
 	const history = useHistory();
 
 	const handleLogOut = () => {
-		localStorage.removeItem('valentiaUser');
+		localStorage.removeItem('user');
 		setCurrentUser({});
 		history.push('/');
 	};

diff --git a/UserContext.js b/UserContext.js
@@ -13,7 +13,7 @@ export const UserProvider = ({ children }) => {
 		const checkLoggedIn = async () => {
 			let cuser = isAuthenticated();
 			if (cuser === null) {
-				localStorage.setItem('valentiaUser', '');
+				localStorage.setItem('user', '');
 				cuser = '';
 			}
 

diff --git a/App.js b/App.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+
+import Home from './pages/Home';
+import Login from './components/Login';
+import Dashboard from './components/Dashboard';
+import Users from './components/Users';
+import Products from './components/Products';
+
+function App() {
+  return (
+		<>
+			<Switch>
+				<Route path='/' exact component={Home} />
+				<Route path='/login' exact component={Login} />
+				<Route path='/admin' component={Dashboard} />
+				<Route path='/users' component={Users} />
+				<Route path='/products' component={Products} />
+			</Switch>
+		</>
+  );
+}
+
+export default App;
diff --git a/AuthService.js b/AuthService.js
@@ -0,0 +1,23 @@
+import api from './api';
+
+export const login = async (username, password) => {
+	const response = await api.post('login', {
+		username,
+		password
+	});
+
+	const token = response.data.token;
+	if (token) {
+		localStorage.setItem('valentiaUser', JSON.stringify(response.data));
+	}
+
+	return response.data;
+};
+
+export const isAuthenticated = () => {
+	const user = localStorage.getItem('valentiaUser');
+	if (!user) {
+		return {}
+	}
+	return JSON.parse(user);
+};
diff --git a/Dashboard.js b/Dashboard.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import Layout from '../../components/Layout';
+
+const Dashboard = () => {
+	return (
+		<>
+			<Layout>
+				<h1>Dashboard</h1>
+			</Layout>
+		</>
+	);
+};
+
+export default Dashboard;
diff --git a/Header.js b/Header.js
@@ -0,0 +1,45 @@
+import React, { useContext } from 'react';
+import { Link, useHistory } from 'react-router-dom';
+
+import UserContext from '../../services/UserContext';
+
+const Header = () => {
+	const [ currentUser, setCurrentUser ] = useContext(UserContext);
+	const history = useHistory();
+
+	const handleLogOut = () => {
+		localStorage.removeItem('valentiaUser');
+		setCurrentUser({});
+		history.push('/');
+	};
+
+	console.log('header', currentUser);
+
+	return (
+		<>
+			<header>
+				<nav>
+					<ul>
+						<li>
+							<Link to='/'>Home</Link>
+						</li>
+						<li>
+							<Link to='/products'>Products</Link>
+						</li>
+						<li>
+							<Link to='/users'>Users</Link>
+						</li>
+					</ul>
+					<button
+						type='button'
+						onClick={handleLogOut}
+					>
+						Log out
+					</button>
+				</nav>
+			</header>
+		</>
+	);
+};
+
+export default Header;
diff --git a/Layout.js b/Layout.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import Header from '../Header';
+
+import { UserProvider } from '../../services/UserContext';
+
+const Layout = ({ children }) => {
+	return (
+		<>
+			<UserProvider>
+				<Header />
+				{ children }
+			</UserProvider>
+		</>
+	);
+};
+
+export default Layout;
diff --git a/Login.js b/Login.js
@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { login } from '../../services/AuthService';
+
+
+const Login = () => {
+	const [ username, setUsername ] = useState('');
+	const [ password, setPassword ] = useState('');
+	const history = useHistory();
+
+	const onChangeUsername = (e) => {
+		setUsername(e.target.value);
+	};
+
+	const onChangePassword = (e) => {
+		setPassword(e.target.value);
+	};
+
+	const onSubmit = async (e) => {
+		e.preventDefault();
+		try {
+			await login(username, password);
+			history.push('/admin');
+		} catch (error) {
+			console.error('error', error);
+		}
+	};
+
+	return (
+		<>
+				<form onSubmit={onSubmit}>
+					<label htmlFor='username'>Username</label>
+					<input
+						type='text'
+						name='username'
+						value={username}
+						onChange={onChangeUsername}
+					/>
+					<label htmlFor='password'>Password</label>
+					<input
+						type='password'
+						name='password'
+						value={password}
+						onChange={onChangePassword}
+					/>
+					<button type='submit'>Login</button>
+				</form>
+		</>
+	);
+};
+
+export default Login;
diff --git a/Products.js b/Products.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import Layout from '../../components/Layout';
+
+const Products = () => {
+	return (
+		<>
+			<Layout>
+				<h1>Products</h1>
+			</Layout>
+		</>
+	);
+};
+
+export default Products;
diff --git a/UserContext.js b/UserContext.js
@@ -0,0 +1,36 @@
+import React, { useState, useEffect, createContext } from 'react';
+import { Redirect } from 'react-router-dom';
+import { isAuthenticated } from './AuthService';
+
+import Login from '../components/Login';
+
+const UserContext = createContext();
+
+export const UserProvider = ({ children }) => {
+	const [ currentUser, setCurrentUser ] = useState(undefined);
+
+	useEffect(() => {
+		const checkLoggedIn = async () => {
+			let cuser = isAuthenticated();
+			if (cuser === null) {
+				localStorage.setItem('valentiaUser', '');
+				cuser = '';
+			}
+
+			setCurrentUser(cuser);
+		};
+
+		checkLoggedIn();
+	}, []);
+
+	console.log('usercontext', currentUser);
+
+	return (
+		<UserContext.Provider value={[currentUser, setCurrentUser]}>
+			{ currentUser?.token ? children : <Login />}
+		</UserContext.Provider>
+	);
+};
+
+
+export default UserContext;
diff --git a/Users.js b/Users.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import Layout from '../../components/Layout';
+
+const Users = () => {
+	return (
+		<>
+			<Layout>
+				<h1>Users</h1>
+			</Layout>
+		</>
+	);
+};
+
+export default Users;
No results found