Initial commit

src/App.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react';
+import { Helmet } from 'react-helmet';
+import { useMatch, Router, navigate, RouteComponentProps, Redirect } from '@reach/router';
+import { Toaster } from 'react-hot-toast';
+
+import { isValid } from 'src/services/api';
+import { useAuth } from 'src/services/auth';
+import { Apps, Dashboard, Users, Login, AppSingle } from './modules';
+import { Layout } from './components';
+
+type AppProps = RouteComponentProps;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function App(_: AppProps) {
+  const { auth } = useAuth();
+  const isLoginPage = useMatch('/login');
+
+  const [initialized, setInitialized] = useState(false);
+  const [initializedToken, setInitializedToken] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!isValid(auth) && !isLoginPage) {
+      navigate('/login');
+    }
+  }, [auth, isLoginPage]);
+
+  useEffect(() => {
+    if (isValid(auth) && (!initialized || initializedToken !== auth.token)) {
+      setInitialized(true);
+      setInitializedToken(auth.token);
+    }
+  }, [auth, initialized, initializedToken]);
+
+  return (
+    <>
+      <Helmet>
+        <title>Stackspin</title>
+        <meta name="description" content="Stackspin" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+        <link rel="manifest" href="/site.webmanifest" />
+        <meta name="msapplication-TileColor" content="#da532c" />
+        <meta name="theme-color" content="#ffffff" />
+      </Helmet>
+
+      <div className="app bg-gray-50 min-h-screen flex flex-col">
+        {!isValid(auth) ? (
+          <Router>
+            <Login path="/login" />
+          </Router>
+        ) : (
+          <Layout>
+            <Router>
+              <Dashboard path="/dashboard" />
+              <Users path="/users" />
+              <Apps path="/apps" />
+              <AppSingle path="/apps/:id" />
+            </Router>
+          </Layout>
+        )}
+
+        {isValid(auth) ? <Redirect from="/" to="/dashboard" noThrow /> : <Redirect from="/" to="/login" noThrow />}
+
+        {/* Place to load notifications */}
+        <div
+          aria-live="assertive"
+          className="fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start"
+        >
+          <div className="w-full flex flex-col items-center space-y-4 sm:items-end" />
+        </div>
+      </div>
+      <Toaster />
+    </>
+  );
+}
+
+export default App;