diff --git a/package-lock.json b/package-lock.json index a3784666..10a26a8c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "query-builder", - "version": "1.29.0", + "version": "1.29.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "query-builder", - "version": "1.29.0", + "version": "1.29.1", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 08727988..ddd98316 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "query-builder", - "version": "1.29.0", + "version": "1.29.1", "description": "Introduces new user interfaces for building queries in Roam", "main": "./build/main.js", "author": { diff --git a/src/components/ExportGithub.tsx b/src/components/ExportGithub.tsx index be6ecb2e..b9aca04f 100644 --- a/src/components/ExportGithub.tsx +++ b/src/components/ExportGithub.tsx @@ -1,7 +1,16 @@ import { Button } from "@blueprintjs/core"; -import React, { useCallback, useEffect, useRef, useState } from "react"; +import nanoid from "nanoid"; +import React, { + useCallback, + useEffect, + useRef, + useState, + useMemo, +} from "react"; import MenuItemSelect from "roamjs-components/components/MenuItemSelect"; import apiGet from "roamjs-components/util/apiGet"; +import apiPost from "roamjs-components/util/apiPost"; +import { getNodeEnv } from "roamjs-components/util/env"; import localStorageGet from "roamjs-components/util/localStorageGet"; import localStorageSet from "roamjs-components/util/localStorageSet"; @@ -44,14 +53,24 @@ export const ExportGithub = ({ const [isGitHubAppInstalled, setIsGitHubAppInstalled] = useState(false); const [clickedInstall, setClickedInstall] = useState(false); const [repos, setRepos] = useState(initialRepos); + const [state, setState] = useState(""); const showGitHubLogin = isGitHubAppInstalled && !gitHubAccessToken; const repoSelectEnabled = isGitHubAppInstalled && gitHubAccessToken; + const isDev = useMemo(() => getNodeEnv() === "development", []); + const setRepo = (repo: string) => { setSelectedRepo(repo); localStorageSet("selected-repo", repo); }; + const handleReceivedAccessToken = (token: string) => { + localStorageSet("oauth-github", token); + setGitHubAccessToken(token); + setClickedInstall(false); + authWindow.current?.close(); + }; + const fetchAndSetInstallation = useCallback(async () => { try { const res = await apiGet<{ installations: { app_id: number }[] }>({ @@ -62,7 +81,7 @@ export const ExportGithub = ({ }, }); const installations = res.installations; - const APP_ID = 312167; // TODO - pull from process.env.GITHUB_APP_ID + const APP_ID = isDev ? 882491 : 312167; // TODO - pull from process.env.GITHUB_APP_ID const isAppInstalled = installations.some( (installation) => installation.app_id === APP_ID ); @@ -80,16 +99,16 @@ export const ExportGithub = ({ // listen for messages from the auth window useEffect(() => { + const otp = nanoid().replace(/_/g, "-"); + const key = nanoid().replace(/_/g, "-"); + const state = `github_${otp}_${key}`; + setState(state); const handleGitHubAuthMessage = (event: MessageEvent) => { - const targetOrigin = - process.env.NODE_ENV !== "production" - ? "https://samepage.ngrok.io" - : "https://samepage.network"; + const targetOrigin = isDev + ? "https://samepage.ngrok.io" + : "https://samepage.network"; if (event.data && event.origin === targetOrigin) { - localStorageSet("oauth-github", event.data); - setGitHubAccessToken(event.data); - setClickedInstall(false); - authWindow.current?.close(); + handleReceivedAccessToken(event.data); } }; @@ -150,7 +169,9 @@ export const ExportGithub = ({ intent={clickedInstall ? "none" : "primary"} onClick={async () => { authWindow.current = window.open( - "https://github.com/apps/samepage-network", + isDev + ? "https://github.com/apps/samepage-network-dev" + : "https://github.com/apps/samepage-network", "_blank", `width=${WINDOW_WIDTH}, height=${WINDOW_HEIGHT}, top=${WINDOW_TOP}, left=${WINDOW_LEFT}` ); @@ -177,11 +198,37 @@ export const ExportGithub = ({ icon="key" intent="primary" onClick={async () => { + const params = isDev + ? `client_id=Iv1.4bf062a6c6636672&state=${state}` + : `client_id=Iv1.e7e282a385b7b2da&state=${state}`; authWindow.current = window.open( - "https://github.com/login/oauth/authorize?client_id=Iv1.e7e282a385b7b2da", + `https://github.com/login/oauth/authorize?${params}`, "_blank", `width=${WINDOW_WIDTH}, height=${WINDOW_HEIGHT}, top=${WINDOW_TOP}, left=${WINDOW_LEFT}` ); + + let attemptCount = 0; + const check = () => { + if (attemptCount < 30) { + apiPost({ + path: "access-token", + domain: isDev + ? "https://api.samepage.ngrok.io" + : "https://api.samepage.network", + data: { state }, + }).then((r) => { + if (r.accessToken) { + handleReceivedAccessToken(r.accessToken); + } else { + attemptCount++; + setTimeout(check, 1000); + } + }); + } else { + setError("Something went wrong. Please contact support."); + } + }; + setTimeout(check, 1500); }} /> )}