Add user menu sidebar (#195)

src/Auth.tsx

@@ -1,74 +1,32 @@
 import useSWR from 'swr'
 import fetcher from './lib/fetcher'
 import withBaseUrl from './lib/withBaseURL'
-import { App } from './App'
-import { SetToken } from './components/TokenInput'
-import { useStore } from './useStore'
-import { createBrowserRouter, redirect, RouterProvider } from 'react-router-dom'
-import { ErrorPage } from './components/ErrorPage'
-import { Settings } from './routes/Settings'
-import Onboarding, { onboardingRoutes } from './routes/Onboarding'
+import { User, useStore } from './useStore'
+import { useNavigate } from 'react-router-dom'
+import { useEffect } from 'react'
+import { isTauri } from './lib/isTauri'
 
-const router = createBrowserRouter([
-  {
-    path: '/',
-    element: <App />,
-    errorElement: <ErrorPage />,
-    loader: () => {
-      const store = localStorage.getItem('store')
-      if (store === null) {
-        return redirect('/onboarding')
-      } else {
-        const status = JSON.parse(store).state.onboardingStatus
-        if (status !== 'done' && status !== 'dismissed') {
-          return redirect('/onboarding/' + status)
-        }
-      }
-      return null
-    },
-  },
-  {
-    path: '/settings',
-    element: <Settings />,
-  },
-  {
-    path: '/onboarding',
-    element: <Onboarding />,
-    children: onboardingRoutes,
-  },
-])
-
-export const Auth = () => {
-  const { data: user } = useSWR(withBaseUrl('/user'), fetcher) as any
-  const { token } = useStore((s) => ({
+// Wrapper around protected routes, used in src/Router.tsx
+export const Auth = ({ children }: React.PropsWithChildren) => {
+  const { data: user, isLoading } = useSWR<
+    User | Partial<{ error_code: string }>
+  >(withBaseUrl('/user'), fetcher)
+  const { token, setUser } = useStore((s) => ({
     token: s.token,
+    setUser: s.setUser,
   }))
+  const navigate = useNavigate()
 
-  const isLocalHost =
-    typeof window !== 'undefined' && window.location.hostname === 'localhost'
+  useEffect(() => {
+    if (user && 'id' in user) setUser(user)
+  }, [user, setUser])
 
-  if ((window as any).__TAURI__ && !token) {
-    return <SetToken />
+  if (
+    (isTauri() && !token) ||
+    (!isTauri() && !isLoading && !(user && 'id' in user))
+  ) {
+    navigate('/signin')
   }
 
-  if (!user && !isLocalHost) {
-    return (
-      <>
-        <div className=" bg-gray-800 p-1 px-4 rounded-r-lg pointer-events-auto flex items-center">
-          <a
-            className="font-bold mr-2 text-purple-400"
-            rel="noopener noreferrer"
-            target={'_self'}
-            href={`https://dev.kittycad.io/signin?callbackUrl=${encodeURIComponent(
-              typeof window !== 'undefined' && window.location.href
-            )}`}
-          >
-            Sign in
-          </a>
-        </div>
-      </>
-    )
-  }
-
-  return <RouterProvider router={router} />
+  return isLoading ? <>Loading...</> : <>{children}</>
 }