add comments (#434)

src/components/EditorNav.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@/components/ui/button"
+import { GitFork } from "lucide-react"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -33,7 +34,7 @@ import {
   Trash2,
 } from "lucide-react"
 import { useEffect, useState } from "react"
-import { useQueryClient } from "react-query"
+import { useMutation, useQueryClient } from "react-query"
 import { Link, useLocation } from "wouter"
 import { useAxios } from "../hooks/use-axios"
 import { useToast } from "../hooks/use-toast"
@@ -46,6 +47,7 @@ import { DownloadButtonAndMenu } from "./DownloadButtonAndMenu"
 import { SnippetLink } from "./SnippetLink"
 import { TypeBadge } from "./TypeBadge"
 import { useUpdateDescriptionDialog } from "./dialogs/edit-description-dialog"
+import { useForkSnippetMutation } from "@/hooks/useForkSnippetMutation"
 
 export default function EditorNav({
   circuitJson,
@@ -72,6 +74,7 @@ export default function EditorNav({
 }) {
   const [, navigate] = useLocation()
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
+  const session = useGlobalStore((s) => s.session)
   const { Dialog: RenameDialog, openDialog: openRenameDialog } =
     useRenameSnippetDialog()
   const {
@@ -94,6 +97,16 @@ export default function EditorNav({
   const { toast } = useToast()
   const qc = useQueryClient()
 
+  const { mutate: forkSnippet, isLoading: isForking } = useForkSnippetMutation({
+    snippet: snippet!,
+    onSuccess: (forkedSnippet) => {
+      navigate("/editor?snippet_id=" + forkedSnippet.snippet_id)
+      setTimeout(() => {
+        window.location.reload() //reload the page
+      }, 2000)
+    },
+  })
+
   // Update currentType when snippet or snippetType changes
   useEffect(() => {
     setCurrentType(snippetType ?? snippet?.snippet_type)
@@ -178,10 +191,23 @@ export default function EditorNav({
             size="sm"
             className={"h-6 px-2 text-xs save-button"}
             disabled={!isLoggedIn || !canSave}
-            onClick={onSave}
+            onClick={
+              snippet?.owner_name === session?.github_username
+                ? onSave
+                : () => forkSnippet()
+            }
           >
-            <Save className="mr-1 h-3 w-3" />
-            Save
+            {snippet?.owner_name === session?.github_username ? (
+              <>
+                <Save className="mr-1 h-3 w-3" />
+                Save
+              </>
+            ) : (
+              <>
+                <GitFork className="mr-1 h-3 w-3" />
+                Fork
+              </>
+            )}
           </Button>
           {isSaving && (
             <div className="animate-fadeIn bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">

src/components/ViewSnippetHeader.tsx

@@ -15,6 +15,7 @@ export default function ViewSnippetHeader() {
   const { snippet } = useCurrentSnippet()
   const axios = useAxios()
   const qc = useQueryClient()
+  const session = useGlobalStore((s) => s.session)
 
   const useForkSnippetMutation = ({
     snippet,
@@ -124,7 +125,9 @@ export default function ViewSnippetHeader() {
             }}
           >
             <Star
-              className={`w-4 h-4 mr-2 ${snippet!.is_starred ? "fill-yellow-500 text-yellow-500" : ""}`}
+              className={`w-4 h-4 mr-2 ${
+                snippet!.is_starred ? "fill-yellow-500 text-yellow-500" : ""
+              }`}
             />
             {snippet!.is_starred ? "Starred" : "Star"}
             {snippet!.star_count > 0 && (
@@ -140,7 +143,7 @@ export default function ViewSnippetHeader() {
 
           <Button variant="outline" size="sm" onClick={() => forkSnippet()}>
             <GitFork className="w-4 h-4 mr-2" />
-            Fork
+            {snippet?.owner_name === session?.github_username ? "Save" : "Fork"}
           </Button>
         </div>
       </div>

src/hooks/useForkSnippetMutation.ts

@@ -0,0 +1,45 @@
+import { useMutation } from "react-query"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { useAxios } from "@/hooks/use-axios"
+import { useToast } from "@/hooks/use-toast"
+import { Snippet } from "fake-snippets-api/lib/db/schema"
+
+export const useForkSnippetMutation = ({
+  snippet,
+  onSuccess,
+}: {
+  snippet: Snippet
+  onSuccess?: (forkedSnippet: Snippet) => void
+}) => {
+  const axios = useAxios()
+  const session = useGlobalStore((s) => s.session)
+  const { toast } = useToast()
+
+  return useMutation(
+    ["createForkSnippet"],
+    async () => {
+      if (!session) throw new Error("No session")
+      if (!snippet) throw new Error("No snippet to fork")
+
+      const { data } = await axios.post("/snippets/create", {
+        unscoped_name: snippet.unscoped_name,
+        snippet_type: snippet.snippet_type,
+        owner_name: session.github_username,
+        code: snippet.code,
+      })
+      return data.snippet
+    },
+    {
+      onSuccess: (forkedSnippet: Snippet) => {
+        toast({
+          title: `Forked snippet`,
+          description: `You have successfully forked the snippet. Redirecting...`,
+        })
+        onSuccess?.(forkedSnippet)
+      },
+      onError: (error: any) => {
+        console.error("Error forking snippet:", error)
+      },
+    },
+  )
+}