Make the transition based router be grouped more cleanly.

This commit is contained in:
Dane Everitt 2019-06-22 17:45:32 -07:00
parent d22747b0b1
commit f34593e777
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
5 changed files with 65 additions and 79 deletions

View file

@ -1,36 +1,11 @@
import * as React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { Route } from 'react-router-dom';
import DesignElements from '@/components/account/DesignElements';
import TransitionRouter from '@/TransitionRouter';
export default class AccountRouter extends React.PureComponent {
render () {
return (
<BrowserRouter basename={'/account'}>
<Route
render={({ location }) => (
<TransitionGroup className={'route-transition-group'}>
<CSSTransition key={location.key} timeout={150} classNames={'fade'}>
<section>
<Switch location={location}>
<Route path={'/'} component={DesignElements} exact/>
<Route path={'/design'} component={DesignElements} exact/>
</Switch>
<p className={'text-right text-neutral-500 text-xs'}>
&copy; 2015 - 2019&nbsp;
<a
href={'https://pterodactyl.io'}
className={'no-underline text-neutral-500 hover:text-neutral-300'}
>
Pterodactyl Software
</a>
</p>
</section>
</CSSTransition>
</TransitionGroup>
)}
/>
</BrowserRouter>
);
}
}
export default () => (
<TransitionRouter basename={'/account'}>
<Route path={'/'} component={DesignElements} exact/>
<Route path={'/design'} component={DesignElements} exact/>
</TransitionRouter>
);

View file

@ -1,42 +1,19 @@
import * as React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import React from 'react';
import { Route } from 'react-router-dom';
import LoginContainer from '@/components/auth/LoginContainer';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import ForgotPasswordContainer from '@/components/auth/ForgotPasswordContainer';
import ResetPasswordContainer from '@/components/auth/ResetPasswordContainer';
import TransitionRouter from '@/TransitionRouter';
import LoginCheckpointContainer from '@/components/auth/LoginCheckpointContainer';
export default class AuthenticationRouter extends React.PureComponent {
render () {
return (
<BrowserRouter basename={'/auth'}>
<Route
render={({ location }) => (
<TransitionGroup className={'route-transition-group mt-32'}>
<CSSTransition key={location.key} timeout={150} classNames={'fade'}>
<section>
<Switch location={location}>
<Route path={'/login'} component={LoginContainer} exact/>
<Route path={'/login/checkpoint'} component={LoginCheckpointContainer}/>
<Route path={'/password'} component={ForgotPasswordContainer} exact/>
<Route path={'/password/reset/:token'} component={ResetPasswordContainer}/>
<Route path={'/checkpoint'}/>
</Switch>
<p className={'text-center text-neutral-500 text-xs'}>
&copy; 2015 - 2019&nbsp;
<a
href={'https://pterodactyl.io'}
className={'no-underline text-neutral-500 hover:text-neutral-300'}
>
Pterodactyl Software
</a>
</p>
</section>
</CSSTransition>
</TransitionGroup>
)}
/>
</BrowserRouter>
);
}
}
export default () => (
<TransitionRouter basename={'/auth'}>
<div className={'mt-32'}>
<Route path={'/login'} component={LoginContainer} exact/>
<Route path={'/login/checkpoint'} component={LoginCheckpointContainer}/>
<Route path={'/password'} component={ForgotPasswordContainer} exact/>
<Route path={'/password/reset/:token'} component={ResetPasswordContainer}/>
<Route path={'/checkpoint'}/>
</div>
</TransitionRouter>
);