Skip to content

Commit 60f32f0

Browse files
DaneEverittDaneEveritt
committed
Fix router to make it easier to actually navigate around the app
1 parent f34593e commit 60f32f0

File tree

9 files changed

+42
-34
lines changed

9 files changed

+42
-34
lines changed

‎resources/scripts/components/App.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import AccountRouter from '@/routers/AccountRouter';
66
import ServerOverviewContainer from '@/components/ServerOverviewContainer';
77
import { StoreProvider } from 'easy-peasy';
88
import { store } from '@/state';
9-
import { UserData } from '@/state/types';
9+
import TransitionRouter from '@/TransitionRouter';
1010

1111
interface WindowWithUser extends Window {
1212
PterodactylUser?: {
@@ -39,11 +39,13 @@ const App = () => {
3939
return (
4040
<StoreProvider store={store}>
4141
<Router basename={'/'}>
42-
<div className={'mx-auto px-10 w-auto'} style={{ maxWidth: '1000px' }}>
43-
<Route exact path="/" component={ServerOverviewContainer}/>
44-
<Route path="/auth" component={AuthenticationRouter}/>
45-
<Route path="/account" component={AccountRouter}/>
46-
</div>
42+
<TransitionRouter basename={'/'}>
43+
<div className={'mx-auto w-auto'} style={{ maxWidth: '1000px' }}>
44+
<Route exact path="/" component={ServerOverviewContainer}/>
45+
<Route path="/auth" component={AuthenticationRouter}/>
46+
<Route path="/account" component={AccountRouter}/>
47+
</div>
48+
</TransitionRouter>
4749
</Router>
4850
</StoreProvider>
4951
);

‎resources/scripts/components/ServerOverviewContainer.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
import * as React from 'react';
2+
import { NavLink } from 'react-router-dom';
23

34
export default class ServerOverviewContainer extends React.PureComponent {
45
render () {
5-
return <p>Test</p>;
6+
return (
7+
<div className={'mt-10'}>
8+
<NavLink className={'text-neutral-100 text-sm block mb-2 no-underline hover:underline'} to={'/account'}>Account</NavLink>
9+
<NavLink className={'text-neutral-100 text-sm block mb-2 no-underline hover:underline'} to={'/account/design'}>Design</NavLink>
10+
</div>
11+
);
612
}
713
}

‎resources/scripts/components/account/DesignElements.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as React from 'react';
2+
import { Link } from 'react-router-dom';
23

34
export default class DesignElements extends React.PureComponent {
45
render () {
@@ -8,7 +9,10 @@ export default class DesignElements extends React.PureComponent {
89
<div className={'flex-1 mr-4'}>
910
<h2 className={'text-neutral-300 mb-2 px-4'}>A Special Announcement</h2>
1011
<div className={'bg-neutral-700 p-4 rounded shadow-lg border-t-4 border-primary-400'}>
11-
<p className={'text-neutral-200 text-sm'}>Your demands have been received: Dark Mode will be default in Pterodactyl 0.8!</p>
12+
<p className={'text-neutral-200 text-sm'}>
13+
Your demands have been received: Dark Mode will be default in Pterodactyl 0.8!
14+
</p>
15+
<p><Link to={'/'}>Back</Link></p>
1216
</div>
1317
</div>
1418
<div className={'ml-4 flex-1'}>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export default () => {
6666
</div>
6767
<div className={'mt-6 text-center'}>
6868
<Link
69-
to={'/login'}
69+
to={'/auth/login'}
7070
className={'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
7171
>
7272
Return to Login

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default ({ history, location: { state } }: RouteComponentProps<{}, Static
1515
const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationState>) => actions.flashes);
1616

1717
if (!state || !state.token) {
18-
history.replace('/login');
18+
history.replace('/auth/login');
1919

2020
return null;
2121
}
@@ -79,7 +79,7 @@ export default ({ history, location: { state } }: RouteComponentProps<{}, Static
7979
</div>
8080
<div className={'mt-6 text-center'}>
8181
<Link
82-
to={'/login'}
82+
to={'/auth/login'}
8383
className={'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
8484
>
8585
Return to Login

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export default ({ history }: RouteComponentProps) => {
2828
return;
2929
}
3030

31-
history.replace('/login/checkpoint', { token: response.confirmationToken });
31+
history.replace('/auth/login/checkpoint', { token: response.confirmationToken });
3232
})
3333
.catch(error => {
3434
console.error(error);
@@ -82,7 +82,7 @@ export default ({ history }: RouteComponentProps) => {
8282
</div>
8383
<div className={'mt-6 text-center'}>
8484
<Link
85-
to={'/password'}
85+
to={'/auth/password'}
8686
className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
8787
>
8888
Forgot password?

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export default (props: Props) => {
4141
})
4242
.then(() => {
4343
addFlash({ type: 'success', message: 'Your password has been reset, please login to continue.' });
44-
props.history.push('/login');
44+
props.history.push('/auth/login');
4545
})
4646
.catch(error => {
4747
console.error(error);
@@ -97,7 +97,7 @@ export default (props: Props) => {
9797
</div>
9898
<div className={'mt-6 text-center'}>
9999
<Link
100-
to={'/login'}
100+
to={'/auth/login'}
101101
className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
102102
>
103103
Return to Login

‎resources/scripts/routers/AccountRouter.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import * as React from 'react';
2-
import { Route } from 'react-router-dom';
2+
import { Route, RouteComponentProps } from 'react-router-dom';
33
import DesignElements from '@/components/account/DesignElements';
4-
import TransitionRouter from '@/TransitionRouter';
54

6-
export default () => (
7-
<TransitionRouter basename={'/account'}>
8-
<Route path={'/'} component={DesignElements} exact/>
9-
<Route path={'/design'} component={DesignElements} exact/>
10-
</TransitionRouter>
5+
export default ({ match }: RouteComponentProps) => (
6+
<div>
7+
<Route path={`${match.path}/`} component={DesignElements} exact/>
8+
<Route path={`${match.path}/design`} component={DesignElements} exact/>
9+
</div>
1110
);

‎resources/scripts/routers/AuthenticationRouter.tsx‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
import React from 'react';
2-
import { Route } from 'react-router-dom';
2+
import { Route, RouteComponentProps } from 'react-router-dom';
33
import LoginContainer from '@/components/auth/LoginContainer';
44
import ForgotPasswordContainer from '@/components/auth/ForgotPasswordContainer';
55
import ResetPasswordContainer from '@/components/auth/ResetPasswordContainer';
6-
import TransitionRouter from '@/TransitionRouter';
76
import LoginCheckpointContainer from '@/components/auth/LoginCheckpointContainer';
87

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>
8+
export default ({ match }: RouteComponentProps) => (
9+
<div className={'mt-32'}>
10+
<Route path={`${match.path}/login`} component={LoginContainer} exact/>
11+
<Route path={`${match.path}/login/checkpoint`} component={LoginCheckpointContainer}/>
12+
<Route path={`${match.path}/password`} component={ForgotPasswordContainer} exact/>
13+
<Route path={`${match.path}/password/reset/:token`} component={ResetPasswordContainer}/>
14+
<Route path={`${match.path}/checkpoint`}/>
15+
</div>
1916
);

0 commit comments

Comments
 (0)