New Feature: GitHub Sync

src/components/Export.tsx

@@ -45,7 +45,7 @@ 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 { ExportGithub, GitHubDestination } from "./ExportGithub";
 import localStorageSet from "roamjs-components/util/localStorageSet";
 
 const ExportProgress = ({ id }: { id: string }) => {
@@ -79,24 +79,28 @@ const ExportProgress = ({ id }: { id: string }) => {
   );
 };
 
+const EXPORT_DESTINATIONS = [
+  { id: "local", label: "Download Locally", active: true },
+  { id: "app", label: "Store in Roam", active: false },
+  { id: "samepage", label: "Store with SamePage", active: false },
+  { id: "github", label: "Send to GitHub", active: true },
+];
+
 export type ExportDialogProps = {
   results?: Result[] | ((isSamePageEnabled: boolean) => Promise<Result[]>);
   title?: string;
   columns?: Column[];
   isExportDiscourseGraph?: boolean;
   initialPanel?: "sendTo" | "export";
+  initialExportDestination?: (typeof EXPORT_DESTINATIONS)[number]["id"];
+  initialGitHubDestination?: GitHubDestination;
+  onClose?: () => void;
 };
 
 type ExportDialogComponent = (
   props: RoamOverlayProps<ExportDialogProps>
 ) => JSX.Element;
 
-const EXPORT_DESTINATIONS = [
-  { id: "local", label: "Download Locally", active: true },
-  { id: "app", label: "Store in Roam", active: false },
-  { id: "samepage", label: "Store with SamePage", active: false },
-  { id: "github", label: "Send to GitHub", active: true },
-];
 const exportDestinationById = Object.fromEntries(
   EXPORT_DESTINATIONS.map((ed) => [ed.id, ed])
 );
@@ -109,6 +113,8 @@ const ExportDialog: ExportDialogComponent = ({
   title = "Share Data",
   isExportDiscourseGraph = false,
   initialPanel,
+  initialExportDestination,
+  initialGitHubDestination,
 }) => {
   const [selectedRepo, setSelectedRepo] = useState(
     localStorageGet("selected-repo")
@@ -139,7 +145,11 @@ const ExportDialog: ExportDialogComponent = ({
     exportTypes[0].name
   );
   const [activeExportDestination, setActiveExportDestination] =
-    useState<string>(EXPORT_DESTINATIONS[0].id);
+    useState<string>(
+      initialExportDestination
+        ? exportDestinationById[initialExportDestination].id
+        : EXPORT_DESTINATIONS[0].id
+    );
   const [isSamePageEnabled, setIsSamePageEnabled] = useState(false);
 
   const checkForCanvasPage = (title: string) => {
@@ -170,6 +180,9 @@ const ExportDialog: ExportDialogComponent = ({
     localStorageGet("oauth-github")
   );
   const [canSendToGitHub, setCanSendToGitHub] = useState(false);
+  const [githubDestination, setGithubDestination] = useState<GitHubDestination>(
+    initialGitHubDestination || "File"
+  );
 
   const writeFileToRepo = async ({
     filename,
@@ -180,7 +193,9 @@ const ExportDialog: ExportDialogComponent = ({
     content: string;
     setError: (error: string) => void;
   }): Promise<{ status: number }> => {
-    const base64Content = btoa(content);
+    const encoder = new TextEncoder();
+    const uint8Array = encoder.encode(content);
+    const base64Content = btoa(String.fromCharCode(...uint8Array));
 
     try {
       const response = await apiPut({
@@ -211,6 +226,68 @@ const ExportDialog: ExportDialogComponent = ({
       return { status: 500 };
     }
   };
+  const writeFileToIssue = async ({
+    title,
+    body,
+    setError,
+  }: {
+    title: string;
+    body: string;
+    setError: (error: string) => void;
+  }): Promise<{ status: number }> => {
+    try {
+      const response = await apiPost({
+        domain: "https://api.github.com",
+        path: `repos/${selectedRepo}/issues`,
+        headers: {
+          Authorization: `token ${gitHubAccessToken}`,
+        },
+        data: {
+          title,
+          body,
+          // milestone,
+          // labels,
+          // assignees
+        },
+      });
+      if (response.status === 401) {
+        setGitHubAccessToken(null);
+        setError("Authentication failed. Please log in again.");
+        localStorageSet("oauth-github", "");
+        return { status: 401 };
+      }
+
+      if (response.status === 201) {
+        const props = getBlockProps(currentPageUid);
+        const newProps = {
+          ...props,
+          ["github-sync"]: {
+            issue: {
+              id: response.id,
+              number: response.number,
+              html_url: response.html_url,
+              state: response.state,
+              labels: response.labels,
+              createdAt: response.created_at,
+              updatedAt: response.updated_at,
+            },
+          },
+        };
+        window.roamAlphaAPI.updateBlock({
+          block: {
+            uid: currentPageUid,
+            props: newProps,
+          },
+        });
+      }
+
+      return { status: response.status };
+    } catch (error) {
+      const e = error as Error;
+      setError("Failed to create issue");
+      return { status: 500 };
+    }
+  };
 
   const handleSetSelectedPage = (title: string) => {
     setSelectedPageTitle(title);
@@ -501,6 +578,8 @@ const ExportDialog: ExportDialogComponent = ({
               gitHubAccessToken={gitHubAccessToken}
               setGitHubAccessToken={setGitHubAccessToken}
               setCanSendToGitHub={setCanSendToGitHub}
+              githubDestination={githubDestination}
+              setGithubDestination={setGithubDestination}
             />
           </div>
         </div>
@@ -623,11 +702,26 @@ const ExportDialog: ExportDialogComponent = ({
                     if (activeExportDestination === "github") {
                       const { title, content } = files[0];
                       try {
-                        const { status } = await writeFileToRepo({
-                          filename: title,
-                          content,
-                          setError,
-                        });
+                        let status;
+                        if (githubDestination === "File") {
+                          status = (
+                            await writeFileToRepo({
+                              filename: title,
+                              content,
+                              setError,
+                            })
+                          ).status;
+                        }
+                        if (githubDestination === "Issue") {
+                          status = (
+                            await writeFileToIssue({
+                              title: title.replace(/\.[^/.]+$/, ""), // remove extension
+                              body: content,
+                              setError,
+                            })
+                          ).status;
+                        }
+
                         if (status === 201) {
                           // TODO: remove toast by prolonging ExportProgress
                           renderToast({