add the hook for fork mutation of packages (#782)

* add the hook for the fork mutation of package

* format

* remove the hardcoded value to test it on prod

Author: imrishabh18

fake-snippets-api/routes/api/package_releases/create.ts

@@ -76,6 +76,14 @@ export default withRouteSpec({
     commit_sha: commit_sha ?? null,
   })
 
+  // Update the package's latest_package_release_id if this is the latest release
+  if (is_latest) {
+    ctx.db.updatePackage(package_id, {
+      latest_package_release_id: newPackageRelease.package_release_id,
+      latest_version: version,
+    })
+  }
+
   return ctx.json({
     ok: true,
     package_release: publicMapPackageRelease(newPackageRelease),

src/hooks/use-fork-package-mutation.ts

@@ -0,0 +1,103 @@
+import {
+  Package,
+  PackageFile,
+  PackageRelease,
+} from "fake-snippets-api/lib/db/schema"
+import { useMutation } from "react-query"
+import { useAxios } from "./use-axios"
+import { useGlobalStore } from "./use-global-store"
+import { useToast } from "./use-toast"
+import { useCreatePackageMutation } from "./use-create-package-mutation"
+import { useCreatePackageReleaseMutation } from "./use-create-package-release-mutation"
+import { useCreatePackageFilesMutation } from "./use-create-package-files-mutation"
+
+export const useForkPackageMutation = ({
+  onSuccess,
+}: {
+  onSuccess?: (forkedPackage: Package) => void
+} = {}) => {
+  const axios = useAxios()
+  const session = useGlobalStore((s) => s.session)
+  const { toast } = useToast()
+
+  const { mutateAsync: createPackage } = useCreatePackageMutation()
+  const { mutateAsync: createRelease } = useCreatePackageReleaseMutation()
+  const { mutateAsync: createFile } = useCreatePackageFilesMutation()
+
+  return useMutation(
+    ["forkPackage"],
+    async (packageId: string) => {
+      if (!session) throw new Error("No session")
+
+      // Step 1: Fetch source package data
+      const { data: packageData } = await axios.get("/packages/get", {
+        params: { package_id: packageId },
+      })
+      const sourcePackage: Package = packageData.package
+      if (!sourcePackage) throw new Error("Source package not found")
+
+      console.log("sourcePackage", sourcePackage)
+      // Step 2: Fetch latest release
+      const { data: releaseData } = await axios.post("/package_releases/get", {
+        package_release_id: sourcePackage.latest_package_release_id,
+      })
+      const sourceRelease: PackageRelease = releaseData.package_release
+      if (!sourceRelease) throw new Error("Source release not found")
+
+      // Step 3: Fetch all files for the release
+      const { data: filesData } = await axios.post("/package_files/list", {
+        package_release_id: sourceRelease.package_release_id,
+      })
+      const sourceFiles: PackageFile[] = filesData.package_files
+      if (!sourceFiles?.length) throw new Error("No source files found")
+
+      // Step 4: Create new package
+      const newPackage = await createPackage({
+        name: `@${session.github_username}/${sourcePackage.unscoped_name}`,
+        description: `Fork of ${sourcePackage.name}`,
+        is_private: false,
+        is_unlisted: false,
+      })
+
+      // Step 5: Create new release
+      const newRelease = await createRelease({
+        package_id: newPackage.package_id,
+        version: sourceRelease.version ?? undefined,
+        is_latest: true,
+      })
+
+      // Step 6: Create all files
+      const newFiles = await Promise.all(
+        sourceFiles.map((file: PackageFile) =>
+          createFile({
+            package_release_id: newRelease.package_release_id,
+            file_path: file.file_path,
+            content_text: file.content_text ?? undefined,
+          }),
+        ),
+      )
+
+      return {
+        package: newPackage,
+        release: newRelease,
+        files: newFiles,
+      }
+    },
+    {
+      onSuccess: (result) => {
+        toast({
+          title: "Package Forked",
+          description: `Successfully forked package to @${session?.github_username}/${result.package.unscoped_name}`,
+        })
+        onSuccess?.(result.package)
+      },
+      onError: (error: any) => {
+        toast({
+          title: "Error",
+          description: "Failed to fork package. Please try again.",
+          variant: "destructive",
+        })
+      },
+    },
+  )
+}

src/pages/beta.tsx

@@ -1,6 +1,7 @@
 import { useCreatePackageFilesMutation } from "@/hooks/use-create-package-files-mutation"
 import { useCreatePackageMutation } from "@/hooks/use-create-package-mutation"
 import { useCreatePackageReleaseMutation } from "@/hooks/use-create-package-release-mutation"
+import { useForkPackageMutation } from "@/hooks/use-fork-package-mutation"
 import { usePackageById } from "@/hooks/use-package-by-package-id"
 import { usePackageFile } from "@/hooks/use-package-files"
 import { usePackageRelease } from "@/hooks/use-package-release"
@@ -10,23 +11,34 @@ export const BetaPage = () => {
   const [createdPackageId, setCreatedPackageId] = useState<string | null>(null)
   const [createdReleaseId, setCreatedReleaseId] = useState<string | null>(null)
   const [createdFileId, setCreatedFileId] = useState<string | null>(null)
+  const [forkedPackageId, setForkedPackageId] = useState<string | null>(null)
+  const [packageName, setPackageName] = useState("")
 
   // Demo data
   const demoData = {
     package: {
-      name: "@testuser/test-package",
+      name: packageName,
       description: "Test package",
       is_private: false,
     },
     release: {
       version: "1.0.0",
       is_latest: true,
     },
-    file: {
-      file_path: "src/index.ts",
-      content_text: 'export const hello = () => console.log("Hello!");',
-      content_mimetype: "text/typescript",
-    },
+    files: [
+      {
+        file_path: "src/index.ts",
+        content_text: 'export const hello = () => console.log("Hello!");',
+      },
+      {
+        file_path: "src/utils.ts",
+        content_text: "export const add = (a: number, b: number) => a + b;",
+      },
+      {
+        file_path: "README.md",
+        content_text: "# Test Package\n\nA test package with multiple files.",
+      },
+    ],
   }
 
   // Mutations and queries
@@ -42,6 +54,9 @@ export const BetaPage = () => {
     useCreatePackageFilesMutation({
       onSuccess: (file) => setCreatedFileId(file.package_file_id),
     })
+  const { mutate: forkPackage, isLoading: isForking } = useForkPackageMutation({
+    onSuccess: (forkedPackage) => setForkedPackageId(forkedPackage.package_id),
+  })
 
   const { data: packageData } = usePackageById(createdPackageId)
   const { data: releaseData } = usePackageRelease(
@@ -50,18 +65,33 @@ export const BetaPage = () => {
   const { data: fileData } = usePackageFile(
     createdFileId ? { package_file_id: createdFileId } : null,
   )
+  const { data: forkedPackageData } = usePackageById(forkedPackageId)
 
   return (
     <div className="p-4">
       <h1 className="text-xl font-bold mb-4">Package Management Demo</h1>
-      <div className="grid grid-cols-3 gap-4">
+      <div className="mb-4">
+        <div className="flex items-center gap-2">
+          <input
+            type="text"
+            value={packageName}
+            onChange={(e) => setPackageName(e.target.value)}
+            placeholder="test-package"
+            className="flex-1 px-3 py-2 border rounded text-sm"
+            disabled={Boolean(createdPackageId)}
+          />
+        </div>
+      </div>
+      <div className="grid grid-cols-4 gap-4">
         {/* Package Creation */}
         <div className="bg-white p-4 rounded-lg shadow">
           <div className="flex items-center justify-between mb-2">
             <h2 className="font-semibold">1. Create Package</h2>
             <button
               onClick={() => createPackage(demoData.package)}
-              disabled={isCreatingPackage || Boolean(createdPackageId)}
+              disabled={
+                isCreatingPackage || Boolean(createdPackageId) || !packageName
+              }
               className="bg-blue-500 text-white px-3 py-1 text-sm rounded hover:bg-blue-600 disabled:bg-blue-300"
             >
               {createdPackageId ? "✓" : "Create"}
@@ -102,14 +132,18 @@ export const BetaPage = () => {
         {/* File Creation */}
         <div className="bg-white p-4 rounded-lg shadow">
           <div className="flex items-center justify-between mb-2">
-            <h2 className="font-semibold">3. Create File</h2>
+            <h2 className="font-semibold">3. Create Files</h2>
             <button
               onClick={() =>
                 createdReleaseId &&
-                createFile({
-                  package_release_id: createdReleaseId,
-                  ...demoData.file,
-                })
+                Promise.all(
+                  demoData.files.map((file) =>
+                    createFile({
+                      package_release_id: createdReleaseId,
+                      ...file,
+                    }),
+                  ),
+                )
               }
               disabled={!createdReleaseId || Boolean(createdFileId)}
               className="bg-blue-500 text-white px-3 py-1 text-sm rounded hover:bg-blue-600 disabled:bg-blue-300"
@@ -123,6 +157,25 @@ export const BetaPage = () => {
             </pre>
           )}
         </div>
+
+        {/* Fork Package */}
+        <div className="bg-white p-4 rounded-lg shadow">
+          <div className="flex items-center justify-between mb-2">
+            <h2 className="font-semibold">4. Fork Package</h2>
+            <button
+              onClick={() => createdPackageId && forkPackage(createdPackageId)}
+              disabled={!createdPackageId || isForking}
+              className="bg-green-500 text-white px-3 py-1 text-sm rounded hover:bg-green-600 disabled:bg-green-300"
+            >
+              {forkedPackageId ? "✓" : "Fork"}
+            </button>
+          </div>
+          {forkedPackageData && (
+            <pre className="text-xs bg-gray-50 p-2 rounded overflow-auto max-h-40">
+              {JSON.stringify(forkedPackageData, null, 2)}
+            </pre>
+          )}
+        </div>
       </div>
     </div>
   )