Fix some issues with navigating in the router and bad animations

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,23 +1,18 @@
 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) => (
+export default ({ children }: Props) => (
-    <BrowserRouter basename={basename}>
     <Route
         render={({ location }) => (
             <TransitionGroup className={'route-transition-group'}>
-                    <CSSTransition key={location.key} timeout={150} classNames={'fade'}>
+                <CSSTransition key={location.key} timeout={250} 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;
@@ -34,5 +29,4 @@ export default ({ basename, children }: Props) => (
             </TransitionGroup>
         )}
     />
-    </BrowserRouter>
 );

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 { BrowserRouter, BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import AuthenticationRouter from '@/routers/AuthenticationRouter';
-import ServerOverviewContainer from '@/components/ServerOverviewContainer';
 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={'/'}>
+                    <BrowserRouter basename={'/'}>
+                        <Switch>
                             <Route path="/" component={DashboardRouter}/>
                             <Route path="/auth" component={AuthenticationRouter}/>
-                    </TransitionRouter>
+                            <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/>
+        <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>
+);