Fix some issues with navigating in the router and bad animations

Author: DaneEveritt

resources/assets/styles/components/animations.css

@@ -5,7 +5,7 @@
 
 .fade-enter-active {
   @apply .opacity-100;
-  transition: opacity 150ms;
+  transition: opacity 250ms;
 }
 
 .fade-exit {
@@ -14,7 +14,7 @@
 
 .fade-exit-active {
   @apply .opacity-0;
-  transition: opacity 150ms;
+  transition: opacity 250ms;
 }
 
 /** @todo fix this, hides footer stuff */

resources/scripts/TransitionRouter.tsx

@@ -1,38 +1,32 @@
 import React from 'react';
 import { Route, Switch } from 'react-router';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
-import { BrowserRouter } from 'react-router-dom';
 
 type Props = Readonly<{
-    basename: string;
     children: React.ReactNode;
 }>;
 
-export default ({ basename, children }: Props) => (
-    <BrowserRouter basename={basename}>
-        <Route
-            render={({ location }) => (
-                <TransitionGroup className={'route-transition-group'}>
-                    <CSSTransition key={location.key} timeout={150} classNames={'fade'}>
-                        <section>
-                            <Switch location={location}>
-                                {children}
-                            </Switch>
-                            <div className={'mx-auto w-full'} style={{ maxWidth: '1200px' }}>
-                                <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>
-                            </div>
-                        </section>
-                    </CSSTransition>
-                </TransitionGroup>
-            )}
-        />
-    </BrowserRouter>
+export default ({ children }: Props) => (
+    <Route
+        render={({ location }) => (
+            <TransitionGroup className={'route-transition-group'}>
+                <CSSTransition key={location.key} timeout={250} classNames={'fade'}>
+                    <section>
+                        {children}
+                        <div className={'mx-auto w-full'} style={{ maxWidth: '1200px' }}>
+                            <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>
+                        </div>
+                    </section>
+                </CSSTransition>
+            </TransitionGroup>
+        )}
+    />
 );

resources/scripts/components/App.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { hot } from 'react-hot-loader/root';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
-import AuthenticationRouter from '@/routers/AuthenticationRouter';
-import ServerOverviewContainer from '@/components/ServerOverviewContainer';
+import { BrowserRouter, BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import { StoreProvider } from 'easy-peasy';
 import { store } from '@/state';
-import TransitionRouter from '@/TransitionRouter';
 import DashboardRouter from '@/routers/DashboardRouter';
+import ServerRouter from '@/routers/ServerRouter';
+import AuthenticationRouter from '@/routers/AuthenticationRouter';
 
 interface WindowWithUser extends Window {
     PterodactylUser?: {
@@ -40,10 +39,13 @@ const App = () => {
         <StoreProvider store={store}>
             <Router basename={'/'}>
                 <div className={'mx-auto w-auto'}>
-                    <TransitionRouter basename={'/'}>
-                        <Route path="/" component={DashboardRouter}/>
-                        <Route path="/auth" component={AuthenticationRouter}/>
-                    </TransitionRouter>
+                    <BrowserRouter basename={'/'}>
+                        <Switch>
+                            <Route path="/" component={DashboardRouter}/>
+                            <Route path="/auth" component={AuthenticationRouter}/>
+                            <Route path="/server/:id/" component={ServerRouter}/>
+                        </Switch>
+                    </BrowserRouter>
                 </div>
             </Router>
         </StoreProvider>

resources/scripts/components/dashboard/DashboardContainer.tsx

@@ -5,10 +5,11 @@ import { faMicrochip } from '@fortawesome/free-solid-svg-icons/faMicrochip';
 import { faMemory } from '@fortawesome/free-solid-svg-icons/faMemory';
 import { faHdd } from '@fortawesome/free-solid-svg-icons/faHdd';
 import { faEthernet } from '@fortawesome/free-solid-svg-icons/faEthernet';
+import { Link } from 'react-router-dom';
 
 export default () => (
     <div className={'my-10'}>
-        <div className={'flex cursor-pointer items-center bg-neutral-700 p-4 border border-transparent hover:border-neutral-500'}>
+        <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'}>
             <div className={'rounded-full bg-neutral-500 p-3'}>
                 <FontAwesomeIcon icon={faServer}/>
             </div>
@@ -47,7 +48,7 @@ export default () => (
                     <p className={'text-xs text-neutral-600 text-center mt-1'}>of 16 GB</p>
                 </div>
             </div>
-        </div>
+        </Link>
         <div className={'flex mt-px cursor-pointer items-center bg-neutral-700 p-4 border border-transparent hover:border-neutral-500'}>
             <div className={'rounded-full bg-neutral-500 p-3'}>
                 <FontAwesomeIcon icon={faServer}/>

resources/scripts/components/server/ServerConsole.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default () => (
+    null
+);

resources/scripts/routers/DashboardRouter.tsx

@@ -1,17 +1,22 @@
 import * as React from 'react';
-import { Route, RouteComponentProps } from 'react-router-dom';
+import { Route, RouteComponentProps, Switch } from 'react-router-dom';
 import DesignElementsContainer from '@/components/dashboard/DesignElementsContainer';
 import AccountOverviewContainer from '@/components/dashboard/AccountOverviewContainer';
 import NavigationBar from '@/components/NavigationBar';
 import DashboardContainer from '@/components/dashboard/DashboardContainer';
+import TransitionRouter from '@/TransitionRouter';
 
-export default ({ match }: RouteComponentProps) => (
+export default ({ location }: RouteComponentProps) => (
     <div>
         <NavigationBar/>
-        <div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
-            <Route path={'/'} component={DashboardContainer} exact/>
-            <Route path={'/account'} component={AccountOverviewContainer}/>
-            <Route path={'/design'} component={DesignElementsContainer}/>
-        </div>
+        <TransitionRouter>
+            <div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
+                <Switch location={location}>
+                    <Route path={'/'} component={DashboardContainer} exact/>
+                    <Route path={'/account'} component={AccountOverviewContainer}/>
+                    <Route path={'/design'} component={DesignElementsContainer}/>
+                </Switch>
+            </div>
+        </TransitionRouter>
     </div>
 );

resources/scripts/routers/ServerRouter.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Route, RouteComponentProps, Switch } from 'react-router-dom';
+import NavigationBar from '@/components/NavigationBar';
+import ServerConsole from '@/components/server/ServerConsole';
+import TransitionRouter from '@/TransitionRouter';
+
+export default ({ location }: RouteComponentProps) => (
+    <div>
+        <NavigationBar/>
+        <TransitionRouter>
+            <div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
+                <Switch location={location}>
+                    <Route path={`/`} component={ServerConsole} exact/>
+                </Switch>
+            </div>
+        </TransitionRouter>
+    </div>
+);