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

View File

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

View File

@ -1,14 +1,22 @@
import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { AUTH_KEY } from './constants';
import Cookies from 'universal-cookie';
import React from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
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 (
<Route
{...rest}
render={props =>
(new Cookies()).get(AUTH_KEY) ? (
!isLoaded ? (
<PageLayout
sectionBodyContent={
<Loader className="pageLoader" type="rombs" size={40} />
}
/>
) : isAuthenticated ? (
<Component {...props} />
) : (
<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);