[ENG-204] Move from localStorage to extensionAPI.settings

apps/roam/src/components/Export.tsx

@@ -43,14 +43,13 @@ import { render as renderToast } from "roamjs-components/components/Toast";
 import { getNodeEnv } from "roamjs-components/util/env";
 import apiGet from "roamjs-components/util/apiGet";
 import apiPut from "roamjs-components/util/apiPut";
-import localStorageGet from "roamjs-components/util/localStorageGet";
 import { ExportGithub } from "./ExportGithub";
-import localStorageSet from "roamjs-components/util/localStorageSet";
 import isLiveBlock from "roamjs-components/queries/isLiveBlock";
 import createPage from "roamjs-components/writes/createPage";
 import { createInitialTldrawProps } from "~/utils/createInitialTldrawProps";
 import { isCanvasPage as checkIfCanvasPage } from "~/utils/isCanvasPage";
 import sendErrorEmail from "~/utils/sendErrorEmail";
+import { getSetting, setSetting } from "~/utils/extensionSettings";
 
 const ExportProgress = ({ id }: { id: string }) => {
   const [progress, setProgress] = useState(0);
@@ -115,8 +114,8 @@ const ExportDialog: ExportDialogComponent = ({
   isExportDiscourseGraph = false,
   initialPanel,
 }) => {
-  const [selectedRepo, setSelectedRepo] = useState(
-    localStorageGet("selected-repo"),
+  const [selectedRepo, setSelectedRepo] = useState<string>(
+    getSetting<string>("selected-repo", ""),
   );
   const exportId = useMemo(() => nanoid(), []);
   useEffect(() => {
@@ -169,8 +168,10 @@ const ExportDialog: ExportDialogComponent = ({
     discourseGraphEnabled as boolean,
   );
   const [gitHubAccessToken, setGitHubAccessToken] = useState<string | null>(
-    localStorageGet("oauth-github"),
+    getSetting<string | null>("oauth-github", null),
   );
+
+  console.log("gitHubAccessToken", gitHubAccessToken);
   const [canSendToGitHub, setCanSendToGitHub] = useState(false);
 
   const writeFileToRepo = async ({
@@ -199,7 +200,7 @@ const ExportDialog: ExportDialogComponent = ({
       if (response.status === 401) {
         setGitHubAccessToken(null);
         setError("Authentication failed. Please log in again.");
-        localStorageSet("oauth-github", "");
+        setSetting("oauth-github", "");
         return { status: 401 };
       }
       return { status: response.status };

apps/roam/src/components/ExportGithub.tsx

@@ -3,16 +3,16 @@ import nanoid from "nanoid";
 import React, {
   useCallback,
   useEffect,
+  useMemo,
   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";
+import getExtensionApi from "roamjs-components/util/extensionApiContext";
+import { setSetting } from "~/utils/extensionSettings";
 
 type UserReposResponse = {
   data: [
@@ -58,40 +58,42 @@ export const ExportGithub = ({
   const repoSelectEnabled = isGitHubAppInstalled && gitHubAccessToken;
 
   const isDev = useMemo(() => getNodeEnv() === "development", []);
-
   const setRepo = (repo: string) => {
     setSelectedRepo(repo);
-    localStorageSet("selected-repo", repo);
+    setSetting("selected-repo", repo);
   };
 
   const handleReceivedAccessToken = (token: string) => {
-    localStorageSet("oauth-github", token);
+    setSetting("oauth-github", token);
     setGitHubAccessToken(token);
     setClickedInstall(false);
     authWindow.current?.close();
   };
 
-  const fetchAndSetInstallation = useCallback(async () => {
+  const fetchAndSetInstallation = useCallback(async (token: string) => {
     try {
       const res = await apiGet<{ installations: { app_id: number }[] }>({
         domain: "https://api.github.com",
         path: "user/installations",
         headers: {
-          Authorization: `token ${localStorageGet("oauth-github")}`,
+          Authorization: `token ${token}`,
         },
       });
+
       const installations = res.installations;
       const APP_ID = isDev ? 882491 : 312167; // TODO - pull from process.env.GITHUB_APP_ID
       const isAppInstalled = installations.some(
         (installation) => installation.app_id === APP_ID,
       );
+
       setIsGitHubAppInstalled(isAppInstalled);
       return isAppInstalled;
     } catch (error) {
       const e = error as Error;
+
       if (e.message === "Bad credentials") {
         setGitHubAccessToken(null);
-        localStorageSet("oauth-github", "");
+        setSetting("oauth-github", "");
       }
       return false;
     }
@@ -103,6 +105,7 @@ export const ExportGithub = ({
     const key = nanoid().replace(/_/g, "-");
     const state = `github_${otp}_${key}`;
     setState(state);
+
     const handleGitHubAuthMessage = (event: MessageEvent) => {
       const targetOrigin = isDev
         ? "https://samepage.ngrok.io"
@@ -125,7 +128,7 @@ export const ExportGithub = ({
 
   // check for installation
   useEffect(() => {
-    if (gitHubAccessToken) fetchAndSetInstallation();
+    if (gitHubAccessToken) fetchAndSetInstallation(gitHubAccessToken);
   }, [gitHubAccessToken]);
 
   // get the list of repos

apps/roam/src/components/settings/DiscourseRelationConfigPanel.tsx

@@ -49,6 +49,7 @@ import getDiscourseNodes from "~/utils/getDiscourseNodes";
 import { getConditionLabels } from "~/utils/conditionToDatalog";
 import { formatHexColor } from "./DiscourseNodeCanvasSettings";
 import posthog from "posthog-js";
+import { getSetting, setSetting } from "~/utils/extensionSettings";
 
 const DEFAULT_SELECTED_RELATION = {
   display: "none",
@@ -868,7 +869,7 @@ export const RelationEditPanel = ({
               style={{ marginRight: 8 }}
             />
           </Tooltip>
-          {!!localStorage.getItem("roamjs:discourse-relation-copy") && (
+          {!!getSetting("discourse-relation-copy") && (
             <Tooltip content={"Paste Relation"}>
               <Button
                 minimal
@@ -877,8 +878,7 @@ export const RelationEditPanel = ({
                 style={{ marginRight: 8 }}
                 onClick={() => {
                   elementsRef.current[tab] = JSON.parse(
-                    localStorage.getItem("roamjs:discourse-relation-copy") ||
-                      "{}",
+                    getSetting("discourse-relation-copy", "{}"),
                   ).map((n: { data: { id: string } }) =>
                     n.data.id === "source"
                       ? {
@@ -910,8 +910,8 @@ export const RelationEditPanel = ({
               disabled={loading}
               onClick={() => {
                 saveCyToElementRef(tab);
-                localStorage.setItem(
-                  "roamjs:discourse-relation-copy",
+                setSetting(
+                  "discourse-relation-copy",
                   JSON.stringify(elementsRef.current[tab]),
                 );
                 renderToast({
@@ -922,6 +922,7 @@ export const RelationEditPanel = ({
               }}
             />
           </Tooltip>
+          ;
         </div>
       </div>
 

apps/roam/src/utils/extensionSettings.ts

@@ -0,0 +1,16 @@
+import getExtensionAPI from "roamjs-components/util/extensionApiContext";
+
+export function getSetting<T>(key: string, defaultValue?: T): T {
+  const extensionAPI = getExtensionAPI();
+  const value = extensionAPI.settings.get(key);
+
+  if (value !== undefined && value !== null) {
+    return value as T;
+  }
+  return defaultValue as T;
+}
+
+export function setSetting<T>(key: string, value: T): void {
+  const extensionAPI = getExtensionAPI();
+  extensionAPI.settings.set(key, value);
+}