diff --git a/client/routes.jsx b/client/routes.jsx index 987dddb..16f5a1c 100644 --- a/client/routes.jsx +++ b/client/routes.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'; +import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Login from '../imports/ui/components/login.jsx'; import Landing from '../imports/ui/components/landing.jsx'; import Navbar from '../imports/ui/components/navbar.jsx'; @@ -8,48 +8,28 @@ import Woohoo from '../imports/ui/components/woohoo.jsx'; import Apply from '../imports/ui/components/apply.jsx'; import ForgotPassword from '../imports/ui/components/forgot_password.jsx'; import SetPassword from '../imports/ui/components/set_password.jsx'; -import Profile from '../imports/ui/components/dashboard/profile.jsx'; import Moderator from '../imports/ui/components/moderator.jsx'; -import withUser from '../imports/ui/components/hoc/with-user.jsx'; +import Profile from '../imports/ui/components/dashboard/profile'; +import AuthenticatedRoute from '../imports/ui/components/hoc/AuthenticatedRoute'; +import { AuthProvider } from '../imports/ui/components/hoc/AuthProvider'; export const renderRoutes = () => ( - + - - - - - - - - - - + + + + + + + + + + + + - + ); - -// All routes where user supposed to be logged in -// If user is not logged in, redirect them to login page -const RouteWithUser = withUser(({ user, component: Component, ...rest }) => { - const { pathname } = window.location; - - if (user) { - return } />; - } else if (pathname !== '/login' && pathname === rest.path) { - return ; - } - return null; -}); - -const RouteWithOutUser = withUser(({ user, component: Component, ...rest }) => { - const { pathname } = window.location; - if (!user) { - return } />; - } else if (pathname !== '/dashboard' && pathname === rest.path) { - return ; - } - return null; -}); diff --git a/imports/ui/components/forgot_password.jsx b/imports/ui/components/forgot_password.jsx index 83e4f45..945388b 100644 --- a/imports/ui/components/forgot_password.jsx +++ b/imports/ui/components/forgot_password.jsx @@ -3,6 +3,8 @@ import { Link } from 'react-router-dom'; import { Alert, Container, Button, Form, Row, Col } from 'react-bootstrap'; import { Accounts } from 'meteor/accounts-base'; import { EMAIL_REGEX } from '/imports/constants/regex'; +import { AuthContext } from './hoc/AuthProvider'; +import { Redirect } from 'react-router-dom'; class ForgotPassword extends React.Component { constructor(props) { @@ -36,8 +38,11 @@ class ForgotPassword extends React.Component { render() { const { validated, error, success, processing } = this.state; + const { user } = this.context; - return ( + return user ? ( + + ) : ( @@ -76,5 +81,5 @@ class ForgotPassword extends React.Component { ); } } - +ForgotPassword.contextType = AuthContext; export default ForgotPassword; diff --git a/imports/ui/components/hoc/AuthProvider.jsx b/imports/ui/components/hoc/AuthProvider.jsx new file mode 100644 index 0000000..33ca9db --- /dev/null +++ b/imports/ui/components/hoc/AuthProvider.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { Meteor } from 'meteor/meteor'; +import { Accounts } from 'meteor/accounts-base'; +const AuthContext = React.createContext(); + +class AuthProvider extends React.Component { + constructor() { + super(); + } + state = { + user: null, + }; + + componentDidMount() { + Accounts.onLogout(() => this.setState({ user: null })); + Accounts.onLogin(() => this.setState({ user: Meteor.user() })); + } + + render() { + return {this.props.children} ; + } +} + +const AuthConsumer = AuthContext.Consumer; +export { AuthProvider, AuthConsumer, AuthContext }; diff --git a/imports/ui/components/hoc/AuthenticatedRoute.jsx b/imports/ui/components/hoc/AuthenticatedRoute.jsx new file mode 100644 index 0000000..a2a3d35 --- /dev/null +++ b/imports/ui/components/hoc/AuthenticatedRoute.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { Route, Redirect } from 'react-router-dom'; +import { AuthConsumer } from './AuthProvider'; + +const AuthenticatedRoute = ({ component: Component, ...rest }) => ( + + {({ user }) => (user ? : )} {...rest} />} + +); + +export default AuthenticatedRoute; diff --git a/imports/ui/components/landing.jsx b/imports/ui/components/landing.jsx index fd56260..acf1d92 100644 --- a/imports/ui/components/landing.jsx +++ b/imports/ui/components/landing.jsx @@ -1,7 +1,8 @@ import React from 'react'; -import { Link } from 'react-router-dom'; +import { Link, Redirect } from 'react-router-dom'; import { Container, Row, Col } from 'react-bootstrap'; import BoardContainer from '/imports/ui/containers/board.jsx'; +import { AuthContext } from './hoc/AuthProvider'; class Landing extends React.Component { constructor(props) { @@ -9,7 +10,11 @@ class Landing extends React.Component { } render() { - return ( + const { user } = this.context; + + return user ? ( + + ) : ( @@ -65,5 +70,5 @@ class Landing extends React.Component { ); } } - +Landing.contextType = AuthContext; export default Landing; diff --git a/imports/ui/components/login.jsx b/imports/ui/components/login.jsx index 143b54c..e3c998a 100644 --- a/imports/ui/components/login.jsx +++ b/imports/ui/components/login.jsx @@ -1,9 +1,9 @@ import React from 'react'; -import { Link } from 'react-router-dom'; +import { Link, Redirect } from 'react-router-dom'; import { Alert, Container, Button, Form, Row, Col } from 'react-bootstrap'; import { Meteor } from 'meteor/meteor'; import { EMAIL_REGEX } from '/imports/constants/regex'; - +import { AuthContext } from './hoc/AuthProvider'; class Login extends React.Component { constructor(props) { super(props); @@ -33,8 +33,11 @@ class Login extends React.Component { render() { const { validated, error } = this.state; + const { user } = this.context; - return ( + return user ? ( + + ) : ( @@ -77,5 +80,5 @@ class Login extends React.Component { ); } } - +Login.contextType = AuthContext; export default Login; diff --git a/imports/ui/components/moderator.jsx b/imports/ui/components/moderator.jsx index 2e7b954..8e92078 100644 --- a/imports/ui/components/moderator.jsx +++ b/imports/ui/components/moderator.jsx @@ -1,22 +1,31 @@ import React from 'react'; import { Container, Row, Col } from 'react-bootstrap'; +import { AuthContext } from './hoc/AuthProvider'; import BoardContainer from '/imports/ui/containers/board.jsx'; -const Moderator = props => { - const { user } = props; - const { name } = (user && user.profile) || {}; - return ( - - - -
-

Hello {name}! You are logged in!

-
- - -
-
- ); -}; +class Moderator extends React.Component { + constructor(props) { + super(props); + } + render() { + const { user } = this.context; + const { name } = (user && user.profile) || {}; + + return ( + + + +
+

Hello {name}! You are logged in!

+
+ + +
+
+ ); + } +} + +Moderator.contextType = AuthContext; export default Moderator; diff --git a/imports/ui/components/navbar.jsx b/imports/ui/components/navbar.jsx index ad40af6..c00c3c8 100644 --- a/imports/ui/components/navbar.jsx +++ b/imports/ui/components/navbar.jsx @@ -2,9 +2,9 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { Navbar, Nav, Button, Container } from 'react-bootstrap'; import { Meteor } from 'meteor/meteor'; -import withUser from '/imports/ui/components/hoc/with-user.jsx'; +import { AuthContext } from './hoc/AuthProvider'; -class NavbarWrapper extends React.Component { +class NavigationBar extends React.Component { constructor(props) { super(props); } @@ -14,7 +14,7 @@ class NavbarWrapper extends React.Component { } render() { - const { user } = this.props; + const { user } = this.context; return ( @@ -61,4 +61,5 @@ class NavbarWrapper extends React.Component { } } -export default withUser(NavbarWrapper); +NavigationBar.contextType = AuthContext; +export default NavigationBar;