add private route

This commit is contained in:
Ruidy Nemausat 2020-05-14 14:08:44 +02:00
parent 2cfd0a1a22
commit 745c20feed
2 changed files with 59 additions and 7 deletions

View file

@ -0,0 +1,48 @@
import React, {FC} from 'react';
// Routing
import {Route, Redirect} from 'react-router-dom';
import * as ROUTES from '../constants/routes';
// Redux
import {isLoaded, isEmpty} from 'react-redux-firebase';
import {useSelector} from 'react-redux';
import {RootState} from '../store';
interface IProps {
exact?: boolean;
path: string;
component: React.FC<any>;
}
/**
* Redirects to the login screen if you're not authenticated yet or
* if auth is not loaded yet
*/
const PrivateRoute: FC<IProps> = ({
component: Component,
exact,
path,
...rest
}) => {
const auth = useSelector((state: RootState) => state.firebase.auth);
return (
<Route
exact={exact}
path={path}
{...rest}
render={({location, ...rest}) =>
isLoaded(auth) && !isEmpty(auth) ? (
<Component {...rest} />
) : (
<Redirect
to={{
pathname: ROUTES.SIGN_IN,
state: {from: location},
}}
/>
)
}
/>
);
};
/** subscribe to store and firebase */
export default PrivateRoute;

View file

@ -13,6 +13,7 @@ import PostPage from '../pages/Post';
import Posts from '../pages/Posts';
import NotFound from '../pages/NotFound';
import * as ROUTES from '../constants/routes';
import PrivateRoute from './PrivateRoute';
/** Register navigation paths accessible */
const Router: FC = () => (
@ -22,13 +23,16 @@ const Router: FC = () => (
<Route exact path={ROUTES.SIGN_IN} component={SignIn} />
<Route exact path={ROUTES.DEVELOPERS} component={Developers} />
<Route exact path={ROUTES.PROFILE} component={Profile} />
<Route exact path={ROUTES.EDIT_PROFILE} component={EditProfile} />
<Route exact path={ROUTES.DASHBOARD} component={Dashboard} />
<Route exact path={ROUTES.ADD_EXPERIENCE} component={AddExperience} />
<Route exact path={ROUTES.ADD_EDUCATION} component={AddEducation} />
<Route exact path={ROUTES.POST} component={PostPage} />
<Route exact path={ROUTES.POSTS} component={Posts} />
<Route exact path={ROUTES.POSTS} component={Posts} />
<PrivateRoute exact path={ROUTES.EDIT_PROFILE} component={EditProfile} />
<PrivateRoute exact path={ROUTES.DASHBOARD} component={Dashboard} />
<PrivateRoute
exact
path={ROUTES.ADD_EXPERIENCE}
component={AddExperience}
/>
<PrivateRoute exact path={ROUTES.ADD_EDUCATION} component={AddEducation} />
<PrivateRoute exact path={ROUTES.POST} component={PostPage} />
<PrivateRoute exact path={ROUTES.POSTS} component={Posts} />
<Route component={NotFound} />
</Switch>
);