save project as gist

gui/src/app/Project/ProjectQueryLoading.ts

@@ -6,7 +6,7 @@ import {
   persistStateToEphemera,
 } from "./ProjectDataModel";
 import { loadFromProjectFiles } from "./ProjectSerialization";
-import loadFilesFromGist from "./loadFilesFromGist";
+import loadFilesFromGist from "../gists/loadFilesFromGist";
 
 enum QueryParamKeys {
   Project = "project",

gui/src/app/gists/saveAsGitHubGist.ts

@@ -0,0 +1,79 @@
+import { Octokit } from "@octokit/core";
+
+type SaveAsGitHubGistOpts = {
+  defaultDescription: string;
+  personalAccessToken: string;
+};
+
+const saveAsGitHubGist = async (
+  files: { [key: string]: string },
+  o: SaveAsGitHubGistOpts,
+) => {
+  const { defaultDescription, personalAccessToken } = o;
+  const description = prompt(
+    "SAVING AS PUBLIC GIST: Enter a description:",
+    defaultDescription,
+  );
+  if (!description) {
+    throw Error("No description provided");
+  }
+  const octokit = new Octokit({
+    auth: personalAccessToken,
+  });
+  const filesForGistExport: { [key: string]: { content: string } } = {};
+  for (const key in files) {
+    // gists do not support empty files or whitespace-only files
+    if (files[key].trim() === "") {
+      console.warn(`File ${key} is empty or whitespace-only. Not saving.`);
+    } else {
+      filesForGistExport[key] = { content: files[key] };
+    }
+  }
+  const r = await octokit.request("POST /gists", {
+    description,
+    public: true,
+    files: filesForGistExport,
+    headers: {
+      "X-GitHub-Api-Version": "2022-11-28",
+    },
+  });
+  // const gistId = r.data.id;
+  const gistUrl = r.data.html_url;
+  if (!gistUrl) {
+    throw new Error("Problem creating gist. r.data.html_url is null.");
+  }
+  return gistUrl;
+};
+
+export const updateGitHubGist = async (
+  gistUri: string,
+  patch: { [path: string]: string | null },
+  o: { personalAccessToken: string },
+) => {
+  const octokit = new Octokit({
+    auth: o.personalAccessToken,
+  });
+  const gistId = gistUri.split("/").pop();
+  if (!gistId) {
+    throw new Error("Invalid gist URI");
+  }
+  // patch
+  const files: { [key: string]: { content?: string } } = {};
+  for (const path in patch) {
+    const content = patch[path];
+    if (content === null || content.trim() === "") {
+      files[path] = {};
+    } else {
+      files[path] = { content };
+    }
+  }
+  await octokit.request(`PATCH /gists/${gistId}`, {
+    gist_id: gistId,
+    files,
+    headers: {
+      "X-GitHub-Api-Version": "2022-11-28",
+    },
+  });
+};
+
+export default saveAsGitHubGist;

gui/src/app/pages/HomePage/LeftPanel.tsx

@@ -3,8 +3,8 @@ import ModalWindow, { useModalWindow } from "@fi-sci/modal-window";
 import { FunctionComponent, useCallback, useContext } from "react";
 import examplesStanies, { Stanie } from "../../exampleStanies/exampleStanies";
 import { ProjectContext } from "../../Project/ProjectContextProvider";
-import ExportWindow from "./ExportWindow";
-import ImportWindow from "./ImportWindow";
+import SaveProjectWindow from "./SaveProjectWindow";
+import LoadProjectWindow from "./LoadProjectWindow";
 import { ChevronLeft, ChevronRight } from "@mui/icons-material";
 
 type LeftPanelProps = {
@@ -33,14 +33,14 @@ const LeftPanel: FunctionComponent<LeftPanelProps> = ({
   );
 
   const {
-    visible: exportVisible,
-    handleOpen: exportOpen,
-    handleClose: exportClose,
+    visible: saveProjectVisible,
+    handleOpen: saveProjectOpen,
+    handleClose: saveProjectClose,
   } = useModalWindow();
   const {
-    visible: importVisible,
-    handleOpen: importOpen,
-    handleClose: importClose,
+    visible: loadProjectVisible,
+    handleOpen: loadProjectOpen,
+    handleClose: loadProjectClose,
   } = useModalWindow();
 
   if (collapsed) {
@@ -82,6 +82,16 @@ const LeftPanel: FunctionComponent<LeftPanelProps> = ({
           </div>
         ))}
         <hr />
+        <div>
+          <button onClick={loadProjectOpen} disabled={hasUnsavedChanges}>
+            Load project
+          </button>
+          &nbsp;
+          <button onClick={saveProjectOpen} disabled={hasUnsavedChanges}>
+            Save project
+          </button>
+        </div>
+        <div>&nbsp;</div>
         <div>
           {/* This will probably be removed or replaced in the future. It's just for convenience during development. */}
           <button
@@ -96,22 +106,12 @@ const LeftPanel: FunctionComponent<LeftPanelProps> = ({
             Clear all
           </button>
         </div>
-        <div>&nbsp;</div>
-        <div>
-          <button onClick={importOpen} disabled={hasUnsavedChanges}>
-            Import
-          </button>
-          &nbsp;
-          <button onClick={exportOpen} disabled={hasUnsavedChanges}>
-            Export
-          </button>
-        </div>
       </div>
-      <ModalWindow visible={importVisible} onClose={importClose}>
-        <ImportWindow onClose={importClose} />
+      <ModalWindow visible={loadProjectVisible} onClose={loadProjectClose}>
+        <LoadProjectWindow onClose={loadProjectClose} />
       </ModalWindow>
-      <ModalWindow visible={exportVisible} onClose={exportClose}>
-        <ExportWindow onClose={exportClose} />
+      <ModalWindow visible={saveProjectVisible} onClose={saveProjectClose}>
+        <SaveProjectWindow onClose={saveProjectClose} />
       </ModalWindow>
     </div>
   );

gui/src/app/pages/HomePage/ImportWindow.tsx → gui/src/app/pages/HomePage/LoadProjectWindow.tsx

@@ -18,11 +18,13 @@ import {
 } from "../../Project/ProjectSerialization";
 import UploadFilesArea from "./UploadFilesArea";
 
-type ImportWindowProps = {
+type LoadProjectWindowProps = {
   onClose: () => void;
 };
 
-const ImportWindow: FunctionComponent<ImportWindowProps> = ({ onClose }) => {
+const LoadProjectWindow: FunctionComponent<LoadProjectWindowProps> = ({
+  onClose,
+}) => {
   const { update } = useContext(ProjectContext);
   const [errorText, setErrorText] = useState<string | null>(null);
   const [filesUploaded, setFilesUploaded] = useState<
@@ -105,7 +107,7 @@ const ImportWindow: FunctionComponent<ImportWindowProps> = ({ onClose }) => {
 
   return (
     <div>
-      <h3>Import project</h3>
+      <h3>Load project</h3>
       <div>
         You can upload:
         <ul>
@@ -132,18 +134,18 @@ const ImportWindow: FunctionComponent<ImportWindowProps> = ({ onClose }) => {
       {showReplaceProjectOptions && (
         <div>
           <button onClick={() => importUploadedFiles({ replaceProject: true })}>
-            Import into a NEW project
+            Load into a NEW project
           </button>
           &nbsp;
           <button
             onClick={() => importUploadedFiles({ replaceProject: false })}
           >
-            Import into EXISTING project
+            Load into EXISTING project
           </button>
         </div>
       )}
     </div>
   );
 };
 
-export default ImportWindow;
+export default LoadProjectWindow;