Fix wrong url being generated for shared diagrams

Author: 1ilit

src/components/EditorHeader/Modal/Share.jsx

@@ -1,7 +1,6 @@
 import { Button, Input, Spin, Toast } from "@douyinfe/semi-ui";
-import { useCallback, useContext, useEffect, useState, useMemo } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Octokit } from "octokit";
 import { IdContext } from "../../Workspace";
 import { IconLink } from "@douyinfe/semi-icons";
 import {
@@ -13,6 +12,7 @@ import {
   useTypes,
 } from "../../../hooks";
 import { databases } from "../../../data/databases";
+import { octokit } from "../../../data/octokit";
 
 export default function Share({ title }) {
   const { t } = useTranslation();
@@ -24,17 +24,8 @@ export default function Share({ title }) {
   const { types } = useTypes();
   const { enums } = useEnums();
   const { transform } = useTransform();
-
-  const userToken = localStorage.getItem("github_token");
-  const octokit = useMemo(() => {
-    return new Octokit({
-      auth: userToken ?? import.meta.env.VITE_GITHUB_ACCESS_TOKEN,
-    });
-  }, [userToken]);
-  const url = useMemo(
-    () => window.location.href + "?shareId=" + gistId,
-    [gistId],
-  );
+  const url =
+    window.location.origin + window.location.pathname + "?shareId=" + gistId;
 
   const diagramToString = useCallback(() => {
     return JSON.stringify({
@@ -80,7 +71,7 @@ export default function Share({ title }) {
     } finally {
       setLoading(false);
     }
-  }, [gistId, octokit, diagramToString]);
+  }, [gistId, diagramToString]);
 
   const generateLink = useCallback(async () => {
     setLoading(true);
@@ -103,7 +94,7 @@ export default function Share({ title }) {
     } finally {
       setLoading(false);
     }
-  }, [octokit, setGistId, diagramToString]);
+  }, [setGistId, diagramToString]);
 
   useEffect(() => {
     const updateOrGenerateLink = async () => {

src/components/Workspace.jsx

@@ -1,10 +1,4 @@
-import {
-  useState,
-  useEffect,
-  useCallback,
-  createContext,
-  useMemo,
-} from "react";
+import { useState, useEffect, useCallback, createContext } from "react";
 import ControlPanel from "./EditorHeader/ControlPanel";
 import Canvas from "./EditorCanvas/Canvas";
 import { CanvasContextProvider } from "../context/CanvasContext";
@@ -30,7 +24,7 @@ import { useTranslation } from "react-i18next";
 import { databases } from "../data/databases";
 import { isRtl } from "../i18n/utils/rtl";
 import { useSearchParams } from "react-router-dom";
-import { Octokit } from "octokit";
+import { octokit } from "../data/octokit";
 
 export const IdContext = createContext({ gistId: "" });
 
@@ -64,12 +58,6 @@ export default function WorkSpace() {
   const { undoStack, redoStack, setUndoStack, setRedoStack } = useUndoRedo();
   const { t, i18n } = useTranslation();
   let [searchParams] = useSearchParams();
-  const userToken = localStorage.getItem("github_token");
-  const octokit = useMemo(() => {
-    return new Octokit({
-      auth: userToken ?? import.meta.env.VITE_GITHUB_ACCESS_TOKEN,
-    });
-  }, [userToken]);
   const handleResize = (e) => {
     if (!resize) return;
     const w = isRtl(i18n.language) ? window.innerWidth - e.clientX : e.clientX;
@@ -335,7 +323,6 @@ export default function WorkSpace() {
       } else {
         window.name = "";
       }
-
       try {
         const res = await octokit.request(`GET /gists/${shareId}`, {
           gist_id: shareId,
@@ -345,6 +332,7 @@ export default function WorkSpace() {
         });
         const diagramSrc = res.data.files["share.json"].content;
         const d = JSON.parse(diagramSrc);
+        setGistId("")
         setUndoStack([]);
         setRedoStack([]);
         setLoadedFromGistId(shareId);
@@ -366,7 +354,6 @@ export default function WorkSpace() {
       }
     },
     [
-      octokit,
       setAreas,
       setDatabase,
       setEnums,

src/data/db.js

@@ -4,7 +4,7 @@ import { templateSeeds } from "./seeds";
 export const db = new Dexie("drawDB");
 
 db.version(6).stores({
-  diagrams: "++id, lastModified, &loadedFromGistId",
+  diagrams: "++id, lastModified, loadedFromGistId",
   templates: "++id, custom",
 });
 

src/data/octokit.js

@@ -0,0 +1,5 @@
+import { Octokit } from "octokit";
+
+export const octokit = new Octokit({
+  auth: import.meta.env.VITE_GITHUB_ACCESS_TOKEN,
+});