You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.5 KiB
JavaScript
102 lines
2.5 KiB
JavaScript
import { useState, useEffect } from 'react';
|
|
import AppNavBar from './components/AppNavBar';
|
|
import { Container } from 'react-bootstrap';
|
|
import { BrowserRouter as Router } from 'react-router-dom';
|
|
import { Route, Routes } from 'react-router-dom';
|
|
import './App.css';
|
|
import { UserProvider } from './UserContext';
|
|
|
|
// Pages
|
|
import Home from './pages/Home';
|
|
import Courses from './pages/Courses';
|
|
import Register from './pages/Register';
|
|
import Login from './pages/Login';
|
|
import Logout from './pages/Logout';
|
|
import Profile from './pages/Profile';
|
|
import CourseView from './pages/CourseView';
|
|
import AddCourse from './pages/AddCourse';
|
|
import NotFound from './pages/Error';
|
|
|
|
function App() {
|
|
|
|
// let user = { token: localStorage.getItem('token') }
|
|
const [user, setUser] = useState({
|
|
id: null,
|
|
isAdmin: null
|
|
})
|
|
|
|
const unsetUser = () => {
|
|
localStorage.clear()
|
|
}
|
|
|
|
useEffect(() => {
|
|
|
|
// console.log(localStorage);
|
|
|
|
fetch(`${process.env.REACT_APP_API_URL}/users/details`, {
|
|
headers: {
|
|
Authorization: `Bearer ${ localStorage.getItem('token') }`
|
|
}
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
|
|
// console.log(data);
|
|
|
|
if(typeof data._id !== "undefined"){
|
|
|
|
setUser({
|
|
id: data._id,
|
|
isAdmin: data.isAdmin
|
|
});
|
|
|
|
} else {
|
|
|
|
setUser({
|
|
id: null,
|
|
isAdmin: null
|
|
});
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}, [])
|
|
|
|
console.log(user);
|
|
|
|
return (
|
|
// JSX - JavaScript XML code
|
|
|
|
// <></> - Fragments
|
|
<UserProvider value={{ user, setUser, unsetUser }}>
|
|
<Router>
|
|
<AppNavBar />
|
|
<Container>
|
|
<Routes>
|
|
<Route path="/" element={<Home />} />
|
|
<Route path="/courses" element={<Courses />} />
|
|
{/*MINI ACTIVITY - continue completing the routes*/}
|
|
<Route path="/register" element={<Register />} />
|
|
<Route path="/login" element={<Login />} />
|
|
<Route path="/logout" element={<Logout />} />
|
|
<Route path="/profile" element={<Profile />} />
|
|
<Route path="/courses/:courseId" element={<CourseView />} />
|
|
<Route path='/add-course' element={<AddCourse/>} />
|
|
|
|
<Route path="*" element={<NotFound />} />
|
|
</Routes>
|
|
</Container>
|
|
</Router>
|
|
</UserProvider>
|
|
);
|
|
}
|
|
|
|
export default App;
|
|
|
|
/**
|
|
* Mini Activity 2
|
|
* Import the Highlights component
|
|
* Add the Highlights component in the JSX inside the Container and after the Banner Component
|
|
* 2 mins
|
|
*/ |