diff --git a/plugins/google-sheets/package.json b/plugins/google-sheets/package.json index 56c287393..e0b6b5bd1 100644 --- a/plugins/google-sheets/package.json +++ b/plugins/google-sheets/package.json @@ -13,7 +13,7 @@ "dependencies": { "@tanstack/react-query": "^5.81.5", "classnames": "^2.5.1", - "framer-plugin": "^3.3.2", + "framer-plugin": "^3.5.2", "react": "^18.3.1", "react-dom": "^18.3.1", "react-error-boundary": "^6.0.0", diff --git a/plugins/google-sheets/src/App.tsx b/plugins/google-sheets/src/App.tsx index 35fb26a4b..a7f66024d 100644 --- a/plugins/google-sheets/src/App.tsx +++ b/plugins/google-sheets/src/App.tsx @@ -8,7 +8,6 @@ import { MapSheetFieldsPage } from "./pages/MapSheetFields" import { Problem } from "./pages/Problem" import { SelectSheetPage } from "./pages/SelectSheet" import { - getPluginContext, type PluginContext, type PluginContextUpdate, syncSheet, @@ -16,6 +15,7 @@ import { useSheetQuery, useSyncSheetMutation, } from "./sheets" +import { showFieldMappingUI, showLoginUI } from "./ui" import { assert, syncMethods } from "./utils" interface AppProps { @@ -64,6 +64,8 @@ export function AuthenticatedApp({ pluginContext, setContext }: AuthenticatedApp const { data: sheet, isPending: isSheetPending } = useSheetQuery(spreadsheetId ?? "", sheetTitle ?? "") + const hasSheet = Boolean(spreadsheetId && sheetTitle) + const syncMutation = useSyncSheetMutation({ onSuccess: result => { logSyncResult(result) @@ -86,19 +88,45 @@ export function AuthenticatedApp({ pluginContext, setContext }: AuthenticatedApp }, [isUserInfoError, isSelectSheetError, setContext]) useLayoutEffect(() => { - const width = sheetTitle !== null ? 360 : 320 - const height = sheetTitle !== null ? 425 : 345 - - void framer.showUI({ - width, - height, - minWidth: width, - minHeight: height, - // Only allow resizing when mapping fields as the default size could not be enough. - // This will keep the given dimensions in the Select Sheet Screen. - resizable: sheetTitle !== null, - }) - }, [sheetTitle]) + const showUI = async () => { + try { + if (hasSheet) { + await showFieldMappingUI() + } else { + await showLoginUI() + } + } catch (error) { + console.error(error) + framer.notify("Failed to open plugin. Check the logs for more details.", { variant: "error" }) + } + } + + void showUI() + }, [sheetTitle, hasSheet, isSheetPending]) + + useEffect(() => { + framer + .setMenu([ + { + label: `View ${sheetTitle ?? ""} in Google Sheets`, + visible: Boolean(spreadsheetId), + onAction: () => { + if (!spreadsheetId) return + window.open(`https://docs.google.com/spreadsheets/d/${spreadsheetId}/edit`, "_blank") + }, + }, + { type: "separator" }, + { + label: "Log Out", + onAction: () => { + void auth.logout() + }, + }, + ]) + .catch((e: unknown) => { + console.error(e) + }) + }, [sheetTitle, spreadsheetId]) if (!spreadsheetId || sheetTitle === null) { return ( @@ -185,7 +213,7 @@ export function App({ pluginContext }: AppProps) { }), }) - await framer.closePlugin() + void framer.closePlugin() } void task() @@ -199,14 +227,7 @@ export function App({ pluginContext }: AppProps) {

Your Google Account does not have access to the synced spreadsheet. Check your access and try again or{" "} - { - auth.logout() - void getPluginContext().then(setContext) - }} - > + void auth.logout()}> log out {" "} and try a different account. diff --git a/plugins/google-sheets/src/auth.ts b/plugins/google-sheets/src/auth.ts index b2c04b2e6..8400df5aa 100644 --- a/plugins/google-sheets/src/auth.ts +++ b/plugins/google-sheets/src/auth.ts @@ -1,3 +1,6 @@ +import { framer } from "framer-plugin" +import { showLoginUI } from "./ui" + interface Tokens { access_token: string refresh_token?: string @@ -33,8 +36,12 @@ class Auth { : "https://oauth.framer.wtf/google-sheets-plugin" } - logout() { + async logout() { this.tokens.clear() + await framer.setMenu([]) + await showLoginUI() + framer.notify("Logged out of your Google account", { variant: "success" }) + window.location.reload() } async refreshTokens() { diff --git a/plugins/google-sheets/src/main.tsx b/plugins/google-sheets/src/main.tsx index 12d0009f1..228c71302 100644 --- a/plugins/google-sheets/src/main.tsx +++ b/plugins/google-sheets/src/main.tsx @@ -35,5 +35,5 @@ try { ) } catch (e) { const message = e instanceof Error ? e.message : String(e) - await framer.closePlugin(message, { variant: "error" }) + void framer.closePlugin(message, { variant: "error" }) } diff --git a/plugins/google-sheets/src/ui.ts b/plugins/google-sheets/src/ui.ts new file mode 100644 index 000000000..4c86d4a59 --- /dev/null +++ b/plugins/google-sheets/src/ui.ts @@ -0,0 +1,21 @@ +import { framer } from "framer-plugin" + +export async function showFieldMappingUI() { + await framer.showUI({ + width: 425, + height: 425, + minWidth: 360, + minHeight: 425, + resizable: true, + }) +} + +export async function showLoginUI() { + await framer.showUI({ + width: 320, + height: 345, + minWidth: 320, + minHeight: 345, + resizable: false, + }) +} diff --git a/yarn.lock b/yarn.lock index 1b611cf79..3a7431ac7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4811,7 +4811,7 @@ __metadata: "@types/react": "npm:^18.3.23" "@types/react-dom": "npm:^18.3.7" classnames: "npm:^2.5.1" - framer-plugin: "npm:^3.3.2" + framer-plugin: "npm:^3.5.2" react: "npm:^18.3.1" react-dom: "npm:^18.3.1" react-error-boundary: "npm:^6.0.0"