feature: add first time install process

frontend/src/App/Routes.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Router, Switch, Route } from 'react-router-dom';
+import {Router, Switch, Route} from 'react-router-dom';
 import * as H from 'history';
 
 import Dashboard from 'Dashboard';
@@ -8,6 +8,7 @@ import Projects from 'Projects';
 import Project from 'Projects/Project';
 import Teams from 'Teams';
 import Login from 'Auth';
+import Install from 'Install';
 import Profile from 'Profile';
 import styled from 'styled-components';
 
@@ -23,9 +24,10 @@ type RoutesProps = {
   history: H.History;
 };
 
-const Routes = ({ history }: RoutesProps) => (
+const Routes = ({history}: RoutesProps) => (
   <Switch>
     <Route exact path="/login" component={Login} />
+    <Route exact path="/install" component={Install} />
     <MainContent>
       <Route exact path="/" component={Dashboard} />
       <Route exact path="/projects" component={Projects} />

frontend/src/App/TopNavbar.tsx

@@ -196,7 +196,7 @@ export const ProjectPopup: React.FC<ProjectPopupProps> = ({history, name, projec
       <Popup title={null} tab={0}>
         <ProjectSettings
           onDeleteProject={() => {
-            setTab(1);
+            setTab(1, 300);
           }}
         />
       </Popup>

frontend/src/App/index.tsx

@@ -1,18 +1,22 @@
-import React, {useState, useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
 import jwtDecode from 'jwt-decode';
-import {createBrowserHistory} from 'history';
-import {setAccessToken} from 'shared/utils/accessToken';
-import styled, {ThemeProvider} from 'styled-components';
+import { createBrowserHistory } from 'history';
+import { Router } from 'react-router';
+import { PopupProvider } from 'shared/components/PopupMenu';
+import { setAccessToken } from 'shared/utils/accessToken';
+import styled, { ThemeProvider } from 'styled-components';
 import NormalizeStyles from './NormalizeStyles';
 import BaseStyles from './BaseStyles';
-import {theme} from './ThemeStyles';
+import { theme } from './ThemeStyles';
 import Routes from './Routes';
-import {UserIDContext} from './context';
+import { UserIDContext } from './context';
 import Navbar from './Navbar';
-import {Router} from 'react-router';
-import {PopupProvider} from 'shared/components/PopupMenu';
 
 const history = createBrowserHistory();
+type RefreshTokenResponse = {
+  accessToken: string;
+  isInstalled: boolean;
+};
 
 const App = () => {
   const [loading, setLoading] = useState(true);
@@ -23,15 +27,18 @@ const App = () => {
       method: 'POST',
       credentials: 'include',
     }).then(async x => {
-      const {status} = x;
+      const { status } = x;
       if (status === 400) {
         history.replace('/login');
       } else {
         const response: RefreshTokenResponse = await x.json();
-        const {accessToken} = response;
+        const { accessToken, isInstalled } = response;
         const claims: JWTToken = jwtDecode(accessToken);
         setUserID(claims.userId);
         setAccessToken(accessToken);
+        if (!isInstalled) {
+          history.replace('/install');
+        }
       }
       setLoading(false);
     });
@@ -39,7 +46,7 @@ const App = () => {
 
   return (
     <>
-      <UserIDContext.Provider value={{userID, setUserID}}>
+      <UserIDContext.Provider value={{ userID, setUserID }}>
         <ThemeProvider theme={theme}>
           <NormalizeStyles />
           <BaseStyles />
@@ -48,10 +55,10 @@ const App = () => {
               {loading ? (
                 <div>loading</div>
               ) : (
-                  <>
-                    <Routes history={history} />
-                  </>
-                )}
+                <>
+                  <Routes history={history} />
+                </>
+              )}
             </PopupProvider>
           </Router>
         </ThemeProvider>