web: People: Refactoring of routing

This commit is contained in:
Alexey Safronov 2019-07-19 14:41:54 +03:00
parent 6620911c77
commit 31f253c210
3 changed files with 54 additions and 26 deletions

View File

@ -1,9 +1,9 @@
import React, { Suspense, lazy } from 'react'; import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Switch } from 'react-router-dom'; import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { Loader, ErrorContainer } from 'asc-web-components'; import { Loader, ErrorContainer } from 'asc-web-components';
import PeopleLayout from './components/Layout'; import PeopleLayout from './components/Layout';
import Home from './components/pages/Home'; import Home from './components/pages/Home';
import { PrivateRoute } from './helpers/privateRoute'; import PrivateRoute from './helpers/privateRoute';
var config = require('../package.json'); var config = require('../package.json');
const Profile = lazy(() => import('./components/pages/Profile')); const Profile = lazy(() => import('./components/pages/Profile'));
@ -16,8 +16,9 @@ const App = () => {
<Suspense fallback={<Loader className="pageLoader" type="rombs" size={40} />}> <Suspense fallback={<Loader className="pageLoader" type="rombs" size={40} />}>
<Switch> <Switch>
<PrivateRoute exact path={config.homepage} component={Home} /> <PrivateRoute exact path={config.homepage} component={Home} />
<PrivateRoute exact path={`${config.homepage}/profile`} component={Profile} /> <PrivateRoute path={`${config.homepage}/view`} component={Profile} />
<PrivateRoute exact path={`${config.homepage}/profileaction`} component={ProfileAction} /> <PrivateRoute path={`${config.homepage}/edit`} component={ProfileAction} />
<PrivateRoute path={`${config.homepage}/create`} component={ProfileAction} />
<PrivateRoute component={() => ( <PrivateRoute component={() => (
<ErrorContainer> <ErrorContainer>
Sorry, the resource Sorry, the resource

View File

@ -11,4 +11,10 @@ html, body {
#root { #root {
min-height: 100%; min-height: 100%;
position: relative; position: relative;
.pageLoader {
position: fixed;
left: calc(50% - 32px);
top: 35%;
}
} }

View File

@ -1,14 +1,22 @@
import React from 'react'; import React from "react";
import { Redirect, Route } from 'react-router-dom'; import { connect } from "react-redux";
import { AUTH_KEY } from './constants'; import PropTypes from "prop-types";
import Cookies from 'universal-cookie'; import { Redirect, Route } from "react-router-dom";
import { PageLayout, Loader } from "asc-web-components";
export const PrivateRoute = ({ component: Component, ...rest }) => { const PrivateRoute = ({ component: Component, ...rest }) => {
const { isAuthenticated, isLoaded } = rest;
return ( return (
<Route <Route
{...rest} {...rest}
render={props => render={props =>
(new Cookies()).get(AUTH_KEY) ? ( !isLoaded ? (
<PageLayout
sectionBodyContent={
<Loader className="pageLoader" type="rombs" size={40} />
}
/>
) : isAuthenticated ? (
<Component {...props} /> <Component {...props} />
) : ( ) : (
<Redirect <Redirect
@ -20,5 +28,18 @@ export const PrivateRoute = ({ component: Component, ...rest }) => {
) )
} }
/> />
) );
}; };
PrivateRoute.propTypes = {
isAuthenticated: PropTypes.bool.isRequired
};
function mapStateToProps(state) {
return {
isAuthenticated: state.auth.isAuthenticated,
isLoaded: state.auth.isLoaded
};
}
export default connect(mapStateToProps)(PrivateRoute);