diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..9cee18c --- /dev/null +++ b/src/App.js @@ -0,0 +1,32 @@ +import React from 'react'; +import 'rsuite/lib/styles/index.less'; +import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; + +import PrivateRoute from './components/routes/PrivateRoute'; +import PublicRoute from './components/routes/PublicRoute'; + +import Dashboard from './screens/Dashboard'; +import Schedule from './screens/Schedule/Schedule'; +import Availability from './screens/Availability/Availability'; +import Invite from './screens/Invite/Invite'; +import Login from './screens/Login'; +import Register from './screens/Register'; + +export default function App() { + return ( + + + + + + + + + + + + + + + ); +} diff --git a/src/components/General/Title.js b/src/components/General/Title.js index dc6b261..2eff52b 100644 --- a/src/components/General/Title.js +++ b/src/components/General/Title.js @@ -2,10 +2,9 @@ import React from 'react'; import { Helmet } from 'react-helmet'; export default function TitleComponent({ title }) { - var defaultTitle = 'Meeting Planner'; return ( - {title ? `${title} | Meeting Planner` : defaultTitle} + {title ? `${title} | Meeting Planner` : 'Meeting Planner'} ); } diff --git a/src/components/Navbar/NavBar.js b/src/components/Navbar/NavBar.js index 23b70e0..b39b792 100644 --- a/src/components/Navbar/NavBar.js +++ b/src/components/Navbar/NavBar.js @@ -16,13 +16,11 @@ export default function NavBar({ title }) { alignItems: 'center', }} > + {/* This hidden nav is a hack to have the title perfectly centered. */} -

{title}

-
diff --git a/src/components/routes/PrivateRoute.js b/src/components/routes/PrivateRoute.js new file mode 100644 index 0000000..6a840ba --- /dev/null +++ b/src/components/routes/PrivateRoute.js @@ -0,0 +1,29 @@ +import React from 'react'; +import { Route, Redirect } from 'react-router-dom'; +import { getToken } from '../../utils/common'; + +const isLoggedIn = getToken(); + +const PrivateRoute = ({ component: Component, user, ...rest }) => { + return ( + + isLoggedIn ? ( + + ) : ( + + ) + } + /> + ); +}; + +export default PrivateRoute; diff --git a/src/components/routes/PublicRoute.js b/src/components/routes/PublicRoute.js new file mode 100644 index 0000000..8a3ab72 --- /dev/null +++ b/src/components/routes/PublicRoute.js @@ -0,0 +1,22 @@ +import React from 'react'; +import { Route, Redirect } from 'react-router-dom'; +import { getToken } from '../../utils/common'; + +const isLoggedIn = getToken(); + +function PublicRoute({ component: Component, ...rest }) { + return ( + + !isLoggedIn ? ( + + ) : ( + + ) + } + /> + ); +} + +export default PublicRoute; diff --git a/src/index.js b/src/index.js index fd76d9e..0c4762a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,6 @@ import React from 'react'; import { render } from 'react-dom'; -import App from './screens/App'; +import App from './App'; import 'rsuite/lib/styles/index.less'; diff --git a/src/screens/App.js b/src/screens/App.js deleted file mode 100644 index a821f8e..0000000 --- a/src/screens/App.js +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import 'rsuite/lib/styles/index.less'; -import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; - -import Dashboard from './Dashboard'; -import Schedule from './Schedule/Schedule'; -import Availability from './Availability/Availability'; -import Invite from './Invite/Invite'; -import Login from './Login'; -import Register from './Register'; - -const titles = { - schedule: 'Schedule a meeting', - invite: 'Invite participants', - availability: 'Add your availability', - confirm: 'Confirm meeting date', - dashboard: 'Dashboard', - login: 'Login', - register: 'Register', - settings: 'Settings', -}; - -export default function App() { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/src/screens/Availability/Availability.js b/src/screens/Availability/Availability.js index d8d4c9c..aa0a3fd 100644 --- a/src/screens/Availability/Availability.js +++ b/src/screens/Availability/Availability.js @@ -17,7 +17,7 @@ import IntervalSelector from '../../components/Interval/IntervalSelector'; import './Availability.less'; -export default function Availability({ title }) { +export default function Availability() { const [availability, setAvailability] = useState([...availabilityList]); const handleClear = () => { @@ -36,7 +36,7 @@ export default function Availability({ title }) { return ( <> - +
diff --git a/src/screens/Invite/Invite.js b/src/screens/Invite/Invite.js index 45407cd..2790228 100644 --- a/src/screens/Invite/Invite.js +++ b/src/screens/Invite/Invite.js @@ -6,7 +6,7 @@ import { Panel, Form, Button, ButtonGroup, Message, TagPicker } from 'rsuite'; import NavBar from '../../components/Navbar/NavBar'; import './Invite.less'; -export default function Invite({ title }) { +export default function Invite() { const [participants, setParticipants] = useState([]); const [contactDropdown, setContactDropdown] = useState([]); @@ -63,7 +63,7 @@ export default function Invite({ title }) { return ( <> - +
diff --git a/src/screens/Login.js b/src/screens/Login.js index a92f7b2..b46bd72 100644 --- a/src/screens/Login.js +++ b/src/screens/Login.js @@ -14,7 +14,7 @@ import { import { setUserSession } from '../utils/common'; import NavBar from './../components/Navbar/NavBar'; -export default function Login({ title }) { +export default function Login() { const history = useHistory(); const [error, setError] = useState(false); @@ -46,7 +46,7 @@ export default function Login({ title }) { return ( <> - + {error && } diff --git a/src/screens/Register.js b/src/screens/Register.js index 820fa85..244dcdb 100644 --- a/src/screens/Register.js +++ b/src/screens/Register.js @@ -16,10 +16,10 @@ const boxStyle = { padding: '1rem', }; -export default function Register({ title }) { +export default function Register() { return ( <> - + diff --git a/src/screens/Schedule/Schedule.js b/src/screens/Schedule/Schedule.js index dd26355..31ea981 100644 --- a/src/screens/Schedule/Schedule.js +++ b/src/screens/Schedule/Schedule.js @@ -21,7 +21,7 @@ import SelectedDates from '../../components/Schedule/SelectedDates'; import './Schedule.less'; -export default function Schedule({ title }) { +export default function Schedule() { const [eventsList, setEventsList] = useState([]); const [datesList, setDatesList] = useState(eventsToDates(eventsList)); @@ -117,7 +117,7 @@ export default function Schedule({ title }) { return ( <> - +
diff --git a/src/utils/common.js b/src/utils/common.js index 2b4e980..c24569e 100644 --- a/src/utils/common.js +++ b/src/utils/common.js @@ -1,27 +1,26 @@ -// return the user data from the local storage -export const getUser = () => { - const user = JSON.parse(localStorage.getItem('user')); - - if (user) return user; - else return null; +// Set/Remove user and token to local storage +export const setUserSession = (token, user) => { + localStorage.setItem('token', token); + localStorage.setItem('user', JSON.stringify(user)); +}; + +export const getUser = () => { + const userJSON = localStorage.getItem('user'); + + if (userJSON) { + const user = JSON.parse(userJSON); + return user; + } else return null; }; -// return the token from the local storage export const getToken = () => { - const token = JSON.parse(localStorage.getItem('token')); + const token = localStorage.getItem('token'); if (token) return token; else return null; }; -// remove the token and user from the local storage export const removeUserSession = () => { localStorage.removeItem('token'); localStorage.removeItem('user'); }; - -// set the token and user from the local storage -export const setUserSession = (token, user) => { - localStorage.setItem('token', token); - localStorage.setItem('user', JSON.stringify(user)); -};