Start porting over the admin area to react

resources/scripts/components/App.tsx

@@ -1,19 +1,19 @@
 import React, { useEffect } from 'react';
 import ReactGA from 'react-ga';
 import { hot } from 'react-hot-loader/root';
-import { Route, Router, Switch, useLocation } from 'react-router-dom';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { StoreProvider } from 'easy-peasy';
 import { store } from '@/state';
 import DashboardRouter from '@/routers/DashboardRouter';
 import ServerRouter from '@/routers/ServerRouter';
 import AuthenticationRouter from '@/routers/AuthenticationRouter';
+import { Provider } from 'react-redux';
 import { SiteSettings } from '@/state/settings';
 import ProgressBar from '@/components/elements/ProgressBar';
 import NotFound from '@/components/screens/NotFound';
-import tw, { GlobalStyles as TailwindGlobalStyles } from 'twin.macro';
+import tw from 'twin.macro';
 import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
-import { createBrowserHistory } from 'history';
-import { setupInterceptors } from '@/api/interceptors';
+import AdminRouter from '@/routers/AdminRouter';
 
 interface ExtendedWindow extends Window {
     SiteConfiguration?: SiteSettings;
@@ -31,20 +31,6 @@ interface ExtendedWindow extends Window {
     };
 }
 
-const history = createBrowserHistory({ basename: '/' });
-
-setupInterceptors(history);
-
-const Pageview = () => {
-    const { pathname } = useLocation();
-
-    useEffect(() => {
-        ReactGA.pageview(pathname);
-    }, [ pathname ]);
-
-    return null;
-};
-
 const App = () => {
     const { PterodactylUser, SiteConfiguration } = (window as ExtendedWindow);
     if (PterodactylUser && !store.getState().user.data) {
@@ -65,28 +51,28 @@ const App = () => {
     }
 
     useEffect(() => {
-        if (SiteConfiguration?.analytics) {
-            ReactGA.initialize(SiteConfiguration!.analytics);
-        }
+        ReactGA.initialize(SiteConfiguration!.analytics);
+        ReactGA.pageview(location.pathname);
     }, []);
 
     return (
         <>
             <GlobalStylesheet/>
-            <TailwindGlobalStyles/>
             <StoreProvider store={store}>
-                <ProgressBar/>
-                <div css={tw`mx-auto w-auto`}>
-                    <Router history={history}>
-                        {SiteConfiguration?.analytics && <Pageview/>}
-                        <Switch>
-                            <Route path="/server/:id" component={ServerRouter}/>
-                            <Route path="/auth" component={AuthenticationRouter}/>
-                            <Route path="/" component={DashboardRouter}/>
-                            <Route path={'*'} component={NotFound}/>
-                        </Switch>
-                    </Router>
-                </div>
+                <Provider store={store}>
+                    <ProgressBar/>
+                    <div css={tw`mx-auto w-auto`}>
+                        <BrowserRouter basename={'/'} key={'root-router'}>
+                            <Switch>
+                                <Route path="/server/:id" component={ServerRouter}/>
+                                <Route path="/auth" component={AuthenticationRouter}/>
+                                <Route path="/admin" component={AdminRouter}/>
+                                <Route path="/" component={DashboardRouter}/>
+                                <Route path={'*'} component={NotFound}/>
+                            </Switch>
+                        </BrowserRouter>
+                    </div>
+                </Provider>
             </StoreProvider>
         </>
     );