Skip to content

Commit 8ac8a37

Browse files
DaneEverittDaneEveritt
committed
Fix some issues with navigating in the router and bad animations
1 parent 3db7698 commit 8ac8a37

7 files changed

Lines changed: 73 additions & 48 deletions

File tree

‎resources/assets/styles/components/animations.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
.fade-enter-active {
77
@apply .opacity-100;
8-
transition: opacity 150ms;
8+
transition: opacity 250ms;
99
}
1010

1111
.fade-exit {
@@ -14,7 +14,7 @@
1414

1515
.fade-exit-active {
1616
@apply .opacity-0;
17-
transition: opacity 150ms;
17+
transition: opacity 250ms;
1818
}
1919

2020
/** @todo fix this, hides footer stuff */

‎resources/scripts/TransitionRouter.tsx‎

Lines changed: 23 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,32 @@
11
import React from 'react';
22
import { Route, Switch } from 'react-router';
33
import { CSSTransition, TransitionGroup } from 'react-transition-group';
4-
import { BrowserRouter } from 'react-router-dom';
54

65
type Props = Readonly<{
7-
basename: string;
86
children: React.ReactNode;
97
}>;
108

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-
<div className={'mx-auto w-full'} style={{ maxWidth: '1200px' }}>
22-
<p className={'text-right text-neutral-500 text-xs'}>
23-
&copy; 2015 - 2019&nbsp;
24-
<a
25-
href={'https://pterodactyl.io'}
26-
className={'no-underline text-neutral-500 hover:text-neutral-300'}
27-
>
28-
Pterodactyl Software
29-
</a>
30-
</p>
31-
</div>
32-
</section>
33-
</CSSTransition>
34-
</TransitionGroup>
35-
)}
36-
/>
37-
</BrowserRouter>
9+
export default ({ children }: Props) => (
10+
<Route
11+
render={({ location }) => (
12+
<TransitionGroup className={'route-transition-group'}>
13+
<CSSTransition key={location.key} timeout={250} classNames={'fade'}>
14+
<section>
15+
{children}
16+
<div className={'mx-auto w-full'} style={{ maxWidth: '1200px' }}>
17+
<p className={'text-right text-neutral-500 text-xs'}>
18+
&copy; 2015 - 2019&nbsp;
19+
<a
20+
href={'https://pterodactyl.io'}
21+
className={'no-underline text-neutral-500 hover:text-neutral-300'}
22+
>
23+
Pterodactyl Software
24+
</a>
25+
</p>
26+
</div>
27+
</section>
28+
</CSSTransition>
29+
</TransitionGroup>
30+
)}
31+
/>
3832
);

‎resources/scripts/components/App.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import * as React from 'react';
22
import { hot } from 'react-hot-loader/root';
3-
import { BrowserRouter as Router, Route } from 'react-router-dom';
4-
import AuthenticationRouter from '@/routers/AuthenticationRouter';
5-
import ServerOverviewContainer from '@/components/ServerOverviewContainer';
3+
import { BrowserRouter, BrowserRouter as Router, Route, Switch } from 'react-router-dom';
64
import { StoreProvider } from 'easy-peasy';
75
import { store } from '@/state';
8-
import TransitionRouter from '@/TransitionRouter';
96
import DashboardRouter from '@/routers/DashboardRouter';
7+
import ServerRouter from '@/routers/ServerRouter';
8+
import AuthenticationRouter from '@/routers/AuthenticationRouter';
109

1110
interface WindowWithUser extends Window {
1211
PterodactylUser?: {
@@ -40,10 +39,13 @@ const App = () => {
4039
<StoreProvider store={store}>
4140
<Router basename={'/'}>
4241
<div className={'mx-auto w-auto'}>
43-
<TransitionRouter basename={'/'}>
44-
<Route path="/" component={DashboardRouter}/>
45-
<Route path="/auth" component={AuthenticationRouter}/>
46-
</TransitionRouter>
42+
<BrowserRouter basename={'/'}>
43+
<Switch>
44+
<Route path="/" component={DashboardRouter}/>
45+
<Route path="/auth" component={AuthenticationRouter}/>
46+
<Route path="/server/:id/" component={ServerRouter}/>
47+
</Switch>
48+
</BrowserRouter>
4749
</div>
4850
</Router>
4951
</StoreProvider>

‎resources/scripts/components/dashboard/DashboardContainer.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ import { faMicrochip } from '@fortawesome/free-solid-svg-icons/faMicrochip';
55
import { faMemory } from '@fortawesome/free-solid-svg-icons/faMemory';
66
import { faHdd } from '@fortawesome/free-solid-svg-icons/faHdd';
77
import { faEthernet } from '@fortawesome/free-solid-svg-icons/faEthernet';
8+
import { Link } from 'react-router-dom';
89

910
export default () => (
1011
<div className={'my-10'}>
11-
<div className={'flex cursor-pointer items-center bg-neutral-700 p-4 border border-transparent hover:border-neutral-500'}>
12+
<Link to={'/server/123'} className={'flex no-underline text-neutral-200 cursor-pointer items-center bg-neutral-700 p-4 border border-transparent hover:border-neutral-500'}>
1213
<div className={'rounded-full bg-neutral-500 p-3'}>
1314
<FontAwesomeIcon icon={faServer}/>
1415
</div>
@@ -47,7 +48,7 @@ export default () => (
4748
<p className={'text-xs text-neutral-600 text-center mt-1'}>of 16 GB</p>
4849
</div>
4950
</div>
50-
</div>
51+
</Link>
5152
<div className={'flex mt-px cursor-pointer items-center bg-neutral-700 p-4 border border-transparent hover:border-neutral-500'}>
5253
<div className={'rounded-full bg-neutral-500 p-3'}>
5354
<FontAwesomeIcon icon={faServer}/>

‎resources/scripts/components/server/ServerConsole.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react';
2+
3+
export default () => (
4+
null
5+
);

‎resources/scripts/routers/DashboardRouter.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
11
import * as React from 'react';
2-
import { Route, RouteComponentProps } from 'react-router-dom';
2+
import { Route, RouteComponentProps, Switch } from 'react-router-dom';
33
import DesignElementsContainer from '@/components/dashboard/DesignElementsContainer';
44
import AccountOverviewContainer from '@/components/dashboard/AccountOverviewContainer';
55
import NavigationBar from '@/components/NavigationBar';
66
import DashboardContainer from '@/components/dashboard/DashboardContainer';
7+
import TransitionRouter from '@/TransitionRouter';
78

8-
export default ({ match }: RouteComponentProps) => (
9+
export default ({ location }: RouteComponentProps) => (
910
<div>
1011
<NavigationBar/>
11-
<div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
12-
<Route path={'/'} component={DashboardContainer} exact/>
13-
<Route path={'/account'} component={AccountOverviewContainer}/>
14-
<Route path={'/design'} component={DesignElementsContainer}/>
15-
</div>
12+
<TransitionRouter>
13+
<div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
14+
<Switch location={location}>
15+
<Route path={'/'} component={DashboardContainer} exact/>
16+
<Route path={'/account'} component={AccountOverviewContainer}/>
17+
<Route path={'/design'} component={DesignElementsContainer}/>
18+
</Switch>
19+
</div>
20+
</TransitionRouter>
1621
</div>
1722
);

‎resources/scripts/routers/ServerRouter.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import * as React from 'react';
2+
import { Route, RouteComponentProps, Switch } from 'react-router-dom';
3+
import NavigationBar from '@/components/NavigationBar';
4+
import ServerConsole from '@/components/server/ServerConsole';
5+
import TransitionRouter from '@/TransitionRouter';
6+
7+
export default ({ location }: RouteComponentProps) => (
8+
<div>
9+
<NavigationBar/>
10+
<TransitionRouter>
11+
<div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
12+
<Switch location={location}>
13+
<Route path={`/`} component={ServerConsole} exact/>
14+
</Switch>
15+
</div>
16+
</TransitionRouter>
17+
</div>
18+
);

0 commit comments

Comments
 (0)