Cutover the Google extension to use SamePage's backend

.github/workflows/main.yaml

@@ -5,6 +5,7 @@ on:
     branches: main
     paths:
       - "src/**"
+      - "README.md"
       - ".github/workflows/main.yaml"
       - "package.json"
 

README.md

@@ -14,9 +14,9 @@ In any page, activate the Roam Command Palette by hitting CTRL+P on windows or C
 
 You can create google calendar event right from Roam! To create an event, focus on a block and then activate the Roam native command palette, and click `Create Google Calendar Event`. The dialog will prefill with the data that is in the block and its children. Use native Roam Attributes with a double colon (`::`) to specify a field and its value as children of the focused block.Click create to generate the event on your primary Google Calendar. Once successfully created, the link to the event will be added to the block. This is an example of a block and the values that will prefill the modal:
 
-![](https://firebasestorage.googleapis.com/v0/b/firescript-577a2.appspot.com/o/imgs%2Fapp%2Froamjs%2FQZXgJzHZB6.png?alt=media&token=b17c99f1-5b4d-4d8e-82d3-2c27dfc50d09)
+![image](https://github.com/RoamJS/google/assets/3792666/3dcc4c5a-d3f0-425a-a1f5-a24376f8ea45)
 
-![](https://firebasestorage.googleapis.com/v0/b/firescript-577a2.appspot.com/o/imgs%2Fapp%2Froamjs%2FIseiuxYOTq.png?alt=media&token=49c2ca42-8bb7-49da-95d5-dad0aaad9cc5)
+![image](https://github.com/RoamJS/google/assets/3792666/263d0901-ee2c-47b9-832f-bf6e49c5b7f9)
 
 ### Updating Events
 
@@ -135,7 +135,7 @@ All of these options are configurable from the Roam Depot page. If you used this
 
 #### `Linked Calendars`
 
-Specifies which calendars you would like Roam to read before importing. If you specify more than one, it will read from all of those calendars. You must use the calendar ID provided by Google which you could find in the calendar settings. This will usually be your Gmail address, such as `dvargas92495@gmail.com`. If you are logged in with multiple accounts on the `roam/js/google` page, you could specify which one each calendar is mapped to.
+Specifies which calendars you would like Roam to read before importing. If you specify more than one, it will read from all of those calendars. You must use the calendar ID provided by Google which you could find in the calendar settings. This will usually be your Gmail address, such as `support@samepage.network`. If you are logged in with multiple accounts on the `roam/js/google` page, you could specify which one each calendar is mapped to.
 
 #### `Calendar Event Format`
 
@@ -167,7 +167,7 @@ Filters out the events from your calendar that you've set to 'Free'
 
 ### DEMO
 
-<video src="https://roamjs.com/loom/47aded52527343929e6be51cbee85052.mp4" controls="controls"></video>
+https://github.com/RoamJS/google/assets/3792666/02fb910e-1ca2-48d3-bb6e-69fd52ac4ed3
 
 [View on Loom](https://www.loom.com/share/47aded52527343929e6be51cbee85052)
 
@@ -185,6 +185,6 @@ By default, files are uploaded to the `RoamJS` folder in your drive. You could c
 
 ### DEMO
 
-<video src="https://roamjs.com/loom/ce086b114ad6453194b5074c4d4f7c13.mp4" controls="controls"></video>
+https://github.com/RoamJS/google/assets/3792666/fd011c45-77aa-4e11-85b0-3ab245c7d38f
 
 [View on Loom](https://www.loom.com/share/ce086b114ad6453194b5074c4d4f7c13)

package.json

@@ -6,15 +6,16 @@
   "scripts": {
     "start": "samepage dev",
     "prebuild:roam": "npm install",
-    "build:roam": "samepage build --dry"
+    "build:roam": "samepage build --dry",
+    "postinstall": "npx patch-package"
   },
   "license": "MIT",
   "devDependencies": {
     "@types/react-resizable": "^3.0.3"
   },
   "dependencies": {
     "react-resizable": "^3.0.4",
-    "roamjs-components": "^0.82.0"
+    "roamjs-components": "^0.82.14"
   },
   "samepage": {
     "extends": "./node_modules/roamjs-components/package.json"

patches/roamjs-components+0.82.14.patch

@@ -0,0 +1,109 @@
+diff --git a/node_modules/roamjs-components/components/ExternalLogin.js b/node_modules/roamjs-components/components/ExternalLogin.js
+index 68d96d2..c7da828 100644
+--- a/node_modules/roamjs-components/components/ExternalLogin.js
++++ b/node_modules/roamjs-components/components/ExternalLogin.js
+@@ -20,7 +20,7 @@ const getTargetOrigin = () => {
+         return "https://roamjs.com";
+     }
+ };
+-const ExternalLogin = ({ onSuccess, useLocal, parentUid, service, getPopoutUrl, getAuthData, ServiceIcon, loggedIn = false, }) => {
++const ExternalLogin = ({ onSuccess, useLocal, parentUid, service, getPopoutUrl, getAuthData, ServiceIcon, loggedIn = false, isLegacy = false }) => {
+     const targetOrigin = getTargetOrigin();
+     const [loading, setLoading] = (0, react_1.useState)(false);
+     const [error, setError] = (0, react_1.useState)("");
+@@ -94,7 +94,7 @@ const ExternalLogin = ({ onSuccess, useLocal, parentUid, service, getPopoutUrl,
+                     processAuthData(e.data);
+                 }
+             };
+-            const authInterval = () => {
++            const legacyAuthInterval = () => {
+                 (0, apiPost_1.default)({
+                     path: "auth",
+                     data: {
+@@ -109,24 +109,55 @@ const ExternalLogin = ({ onSuccess, useLocal, parentUid, service, getPopoutUrl,
+                         processAuthData(auth);
+                     }
+                     else {
+-                        intervalListener = window.setTimeout(authInterval, 1000);
++                        intervalListener = window.setTimeout(legacyAuthInterval, 1000);
+                     }
+                 })
+                     .catch((e) => {
+                     var _a;
+                     if (((_a = e.response) === null || _a === void 0 ? void 0 : _a.status) !== 400) {
+-                        intervalListener = window.setTimeout(authInterval, 1000);
++                        intervalListener = window.setTimeout(legacyAuthInterval, 1000);
+                     }
+                 });
+             };
+-            authInterval();
++            let attemptCount = 0;
++            const samepageAuthInterval = () => {
++                if (attemptCount < 30) {
++                    (0, apiPost_1.default)({
++                        path: "access-token",
++                        domain: "https://api.samepage.network",
++                        data: { state },
++                    }).then((r) => {
++                        if (r.accessToken) {
++                            const key = `oauth-${service}`;
++                            (0, localStorageSet_1.default)(key, r.accessToken);
++                        } else {
++                            attemptCount++;
++                            setTimeout(samepageAuthInterval, 1000);
++                        }
++                    }).catch((e) => {
++                        if (e.status === 401) {
++                            attemptCount++;
++                            setTimeout(samepageAuthInterval, 1000);
++                        } else {
++                            setError("Something went wrong.  Please contact support.");
++                        }
++                    });
++                } else {
++                    setError("Something went wrong.  Please contact support.");
++                }
++            };
++            if (isLegacy) {
++                legacyAuthInterval();
++            } else {
++                samepageAuthInterval();
++            }
+             window.addEventListener("message", messageEventListener);
+         })
+             .catch((e) => {
+             setError(e.message);
+             setLoading(false);
+         });
+-    }, [onSuccess, parentUid, setLoading, setError]);
++    }, [onSuccess, parentUid, setLoading, setError, isLegacy]);
+     return (react_1.default.createElement("div", { style: { display: "flex" } },
+         react_1.default.createElement(core_1.Button, { icon: react_1.default.createElement(core_1.Icon, { icon: react_1.default.createElement(ServiceIcon, { style: {
+                         width: 15,
+diff --git a/node_modules/roamjs-components/util/handleFetch.js b/node_modules/roamjs-components/util/handleFetch.js
+index 04cbfbb..0affa50 100644
+--- a/node_modules/roamjs-components/util/handleFetch.js
++++ b/node_modules/roamjs-components/util/handleFetch.js
+@@ -3,6 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
+ const tslib_1 = require("tslib");
+ const env_1 = require("./env");
+ const getAuthorizationHeader_1 = tslib_1.__importDefault(require("./getAuthorizationHeader"));
++class FetchError extends Error {
++    constructor(message, status) {
++        super(message);
++        this.status = status;
++    }
++}
++
+ const handleFetch = (transformArgs, { method, anonymous, authorization, path, href, domain, headers = {}, buffer }) => {
+     const url = new URL(href || `${domain || (0, env_1.getApiUrlEnv)()}/${path}`);
+     const defaultHeaders = !anonymous
+@@ -18,7 +25,7 @@ const handleFetch = (transformArgs, { method, anonymous, authorization, path, hr
+                     return Promise.reject(JSON.parse(e));
+                 }
+                 catch (_a) {
+-                    return Promise.reject(new Error(e));
++                    return Promise.reject(new FetchError(e, r.status));
+                 }
+             });
+         }