clients/web: make sure a GitHub account is connected before installin…

…g app

clients/apps/web/src/hooks/github.ts

@@ -1,17 +1,43 @@
 import { useStore } from '@/store'
+import { getGitHubAuthorizeURL } from '@/utils/auth'
 import { CONFIG } from '@/utils/config'
 import { Organization } from '@polar-sh/sdk'
-import { useCallback } from 'react'
+import { usePathname } from 'next/navigation'
+import { useCallback, useEffect } from 'react'
+import { useGitHubAccount } from './oauth-accounts'
 
 export const useRedirectToGitHubInstallation = (
   organization: Organization,
 ): (() => void) => {
   const store = useStore()
+  const pathname = usePathname()
+  const gitHubAccount = useGitHubAccount()
+  const authorizeURL = getGitHubAuthorizeURL({ returnTo: pathname })
 
   const redirect = useCallback(() => {
-    store.setGitHubInstallation({ organizationId: organization.id })
+    if (!gitHubAccount) {
+      store.setGitHubInstallation({
+        installAfterGitHubAuthentication: true,
+        organizationId: organization.id,
+      })
+      window.location.href = authorizeURL
+      return
+    }
+    store.setGitHubInstallation({
+      installAfterGitHubAuthentication: false,
+      organizationId: organization.id,
+    })
     window.location.href = CONFIG.GITHUB_INSTALLATION_URL
-  }, [store, organization])
+  }, [store, authorizeURL, organization, gitHubAccount])
+
+  useEffect(() => {
+    if (
+      gitHubAccount &&
+      store.gitHubInstallation?.installAfterGitHubAuthentication === true
+    ) {
+      redirect()
+    }
+  }, [gitHubAccount, store.gitHubInstallation, redirect])
 
   return redirect
 }

clients/apps/web/src/store/githubInstallation.ts

@@ -1,6 +1,7 @@
 import { StateCreator } from 'zustand'
 
 interface GitHubInstallation {
+  installAfterGitHubAuthentication: boolean | undefined
   organizationId: string | undefined
 }
 
@@ -14,6 +15,7 @@ export const createGitHubInstallationSlice: StateCreator<
   GitHubInstallationSlice
 > = (set) => ({
   gitHubInstallation: {
+    installAfterGitHubAuthentication: undefined,
     organizationId: undefined,
   },
   setGitHubInstallation: (gitHubInstallation) => {
@@ -23,7 +25,10 @@ export const createGitHubInstallationSlice: StateCreator<
   },
   clearGitHubInstallation: () => {
     set({
-      gitHubInstallation: { organizationId: undefined },
+      gitHubInstallation: {
+        installAfterGitHubAuthentication: undefined,
+        organizationId: undefined,
+      },
     })
   },
 })