Skip to content

Commit f34593e

Browse files
DaneEverittDaneEveritt
committed
Make the transition based router be grouped more cleanly.
1 parent d22747b commit f34593e

File tree

5 files changed

+65
-79
lines changed

5 files changed

+65
-79
lines changed

‎resources/scripts/TransitionRouter.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from 'react';
2+
import { Route, Switch } from 'react-router';
3+
import { CSSTransition, TransitionGroup } from 'react-transition-group';
4+
import { BrowserRouter } from 'react-router-dom';
5+
6+
type Props = Readonly<{
7+
basename: string;
8+
children: React.ReactNode;
9+
}>;
10+
11+
export default ({ basename, children }: Props) => (
12+
<BrowserRouter basename={basename}>
13+
<Route
14+
render={({ location }) => (
15+
<TransitionGroup className={'route-transition-group'}>
16+
<CSSTransition key={location.key} timeout={150} classNames={'fade'}>
17+
<section>
18+
<Switch location={location}>
19+
{children}
20+
</Switch>
21+
<p className={'text-right text-neutral-500 text-xs'}>
22+
&copy; 2015 - 2019&nbsp;
23+
<a
24+
href={'https://pterodactyl.io'}
25+
className={'no-underline text-neutral-500 hover:text-neutral-300'}
26+
>
27+
Pterodactyl Software
28+
</a>
29+
</p>
30+
</section>
31+
</CSSTransition>
32+
</TransitionGroup>
33+
)}
34+
/>
35+
</BrowserRouter>
36+
);

‎resources/scripts/components/auth/LoginCheckpointContainer.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
import React, { useState } from 'react';
2-
import { Link } from 'react-router-dom';
2+
import { Link, RouteComponentProps } from 'react-router-dom';
33
import loginCheckpoint from '@/api/auth/loginCheckpoint';
44
import { httpErrorToHuman } from '@/api/http';
55
import LoginFormContainer from '@/components/auth/LoginFormContainer';
66
import { Actions, useStoreActions } from 'easy-peasy';
77
import { ApplicationState } from '@/state/types';
8-
import useRouter from 'use-react-router';
98
import { StaticContext } from 'react-router';
109
import FlashMessageRender from '@/components/FlashMessageRender';
1110

12-
export default () => {
11+
export default ({ history, location: { state } }: RouteComponentProps<{}, StaticContext, { token?: string }>) => {
1312
const [ code, setCode ] = useState('');
1413
const [ isLoading, setIsLoading ] = useState(false);
1514

1615
const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
17-
const { history, location: { state } } = useRouter<{}, StaticContext, { token?: string }>();
1816

1917
if (!state || !state.token) {
20-
return history.replace('/login');
18+
history.replace('/login');
19+
20+
return null;
2121
}
2222

2323
const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {

‎resources/scripts/components/auth/LoginContainer.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
import React, { useState } from 'react';
2-
import { Link } from 'react-router-dom';
2+
import { Link, RouteComponentProps } from 'react-router-dom';
33
import login from '@/api/auth/login';
44
import { httpErrorToHuman } from '@/api/http';
55
import LoginFormContainer from '@/components/auth/LoginFormContainer';
66
import FlashMessageRender from '@/components/FlashMessageRender';
77
import { Actions, useStoreActions } from 'easy-peasy';
88
import { ApplicationState } from '@/state/types';
9-
import useRouter from 'use-react-router';
109

11-
export default () => {
10+
export default ({ history }: RouteComponentProps) => {
1211
const [ username, setUsername ] = useState('');
1312
const [ password, setPassword ] = useState('');
1413
const [ isLoading, setLoading ] = useState(false);
15-
const { history } = useRouter();
1614

1715
const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
1816

‎resources/scripts/routers/AccountRouter.tsx‎

Lines changed: 8 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,11 @@
11
import * as React from 'react';
2-
import { BrowserRouter, Route, Switch } from 'react-router-dom';
3-
import { CSSTransition, TransitionGroup } from 'react-transition-group';
2+
import { Route } from 'react-router-dom';
43
import DesignElements from '@/components/account/DesignElements';
4+
import TransitionRouter from '@/TransitionRouter';
55

6-
export default class AccountRouter extends React.PureComponent {
7-
render () {
8-
return (
9-
<BrowserRouter basename={'/account'}>
10-
<Route
11-
render={({ location }) => (
12-
<TransitionGroup className={'route-transition-group'}>
13-
<CSSTransition key={location.key} timeout={150} classNames={'fade'}>
14-
<section>
15-
<Switch location={location}>
16-
<Route path={'/'} component={DesignElements} exact/>
17-
<Route path={'/design'} component={DesignElements} exact/>
18-
</Switch>
19-
<p className={'text-right text-neutral-500 text-xs'}>
20-
&copy; 2015 - 2019&nbsp;
21-
<a
22-
href={'https://pterodactyl.io'}
23-
className={'no-underline text-neutral-500 hover:text-neutral-300'}
24-
>
25-
Pterodactyl Software
26-
</a>
27-
</p>
28-
</section>
29-
</CSSTransition>
30-
</TransitionGroup>
31-
)}
32-
/>
33-
</BrowserRouter>
34-
);
35-
}
36-
}
6+
export default () => (
7+
<TransitionRouter basename={'/account'}>
8+
<Route path={'/'} component={DesignElements} exact/>
9+
<Route path={'/design'} component={DesignElements} exact/>
10+
</TransitionRouter>
11+
);

‎resources/scripts/routers/AuthenticationRouter.tsx‎

Lines changed: 14 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,19 @@
1-
import * as React from 'react';
2-
import { BrowserRouter, Route, Switch } from 'react-router-dom';
1+
import React from 'react';
2+
import { Route } from 'react-router-dom';
33
import LoginContainer from '@/components/auth/LoginContainer';
4-
import { CSSTransition, TransitionGroup } from 'react-transition-group';
54
import ForgotPasswordContainer from '@/components/auth/ForgotPasswordContainer';
65
import ResetPasswordContainer from '@/components/auth/ResetPasswordContainer';
6+
import TransitionRouter from '@/TransitionRouter';
77
import LoginCheckpointContainer from '@/components/auth/LoginCheckpointContainer';
88

9-
export default class AuthenticationRouter extends React.PureComponent {
10-
render () {
11-
return (
12-
<BrowserRouter basename={'/auth'}>
13-
<Route
14-
render={({ location }) => (
15-
<TransitionGroup className={'route-transition-group mt-32'}>
16-
<CSSTransition key={location.key} timeout={150} classNames={'fade'}>
17-
<section>
18-
<Switch location={location}>
19-
<Route path={'/login'} component={LoginContainer} exact/>
20-
<Route path={'/login/checkpoint'} component={LoginCheckpointContainer}/>
21-
<Route path={'/password'} component={ForgotPasswordContainer} exact/>
22-
<Route path={'/password/reset/:token'} component={ResetPasswordContainer}/>
23-
<Route path={'/checkpoint'}/>
24-
</Switch>
25-
<p className={'text-center text-neutral-500 text-xs'}>
26-
&copy; 2015 - 2019&nbsp;
27-
<a
28-
href={'https://pterodactyl.io'}
29-
className={'no-underline text-neutral-500 hover:text-neutral-300'}
30-
>
31-
Pterodactyl Software
32-
</a>
33-
</p>
34-
</section>
35-
</CSSTransition>
36-
</TransitionGroup>
37-
)}
38-
/>
39-
</BrowserRouter>
40-
);
41-
}
42-
}
9+
export default () => (
10+
<TransitionRouter basename={'/auth'}>
11+
<div className={'mt-32'}>
12+
<Route path={'/login'} component={LoginContainer} exact/>
13+
<Route path={'/login/checkpoint'} component={LoginCheckpointContainer}/>
14+
<Route path={'/password'} component={ForgotPasswordContainer} exact/>
15+
<Route path={'/password/reset/:token'} component={ResetPasswordContainer}/>
16+
<Route path={'/checkpoint'}/>
17+
</div>
18+
</TransitionRouter>
19+
);

0 commit comments

Comments
 (0)