add the fork functionality (#789)

* add the fork functionality

* format

Author: imrishabh18

fake-snippets-api/routes/api/package_files/list.ts

@@ -41,7 +41,7 @@ export default withRouteSpec(routeSpec)(async (req, ctx) => {
     .filter((file) => file.package_release_id === packageReleaseId)
     .map((file) => ({
       ...file,
-      content_text: undefined,
+      content_text: file.content_text ?? undefined,
     }))
 
   return ctx.json({

src/components/ViewPackagePage/components/package-header.tsx

@@ -1,12 +1,14 @@
 import { TypeBadge } from "@/components/TypeBadge"
 import { Button } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"
+import { useForkPackageMutation } from "@/hooks/use-fork-package-mutation"
 import {
   usePackageStarMutationByName,
   usePackageStarsByName,
 } from "@/hooks/use-package-stars"
 import { LockClosedIcon } from "@radix-ui/react-icons"
 import { GitFork, Star } from "lucide-react"
+import { useToast } from "@/hooks/use-toast"
 import { Link } from "wouter"
 
 interface PackageInfo {
@@ -18,42 +20,53 @@ interface PackageInfo {
   ai_description: string
   creator_account_id?: string
   owner_org_id?: string
+  package_id: string
 }
 
 interface PackageHeaderProps {
   packageInfo?: PackageInfo
   isPrivate?: boolean
-  onForkClick?: () => void
   isCurrentUserAuthor?: boolean
 }
 
 export default function PackageHeader({
   packageInfo,
   isPrivate = false,
-  onForkClick,
   isCurrentUserAuthor = false,
 }: PackageHeaderProps) {
   const author = packageInfo?.owner_github_username
   const packageName = packageInfo?.unscoped_name
 
-  // Use the star hooks
+  const { toast } = useToast()
+
   const { data: starData, isLoading: isStarDataLoading } =
     usePackageStarsByName(packageInfo?.name ?? null)
   const { addStar, removeStar } = usePackageStarMutationByName(
     packageInfo?.name ?? "",
   )
 
+  const { mutateAsync: forkPackage, isLoading: isForkLoading } =
+    useForkPackageMutation()
+
   const handleStarClick = async () => {
     if (!packageInfo?.name) return
 
-    console.log("starData", starData)
     if (starData?.is_starred) {
       await removeStar.mutateAsync()
     } else {
       await addStar.mutateAsync()
     }
   }
 
+  const handleForkClick = async () => {
+    if (!packageInfo?.package_id) return
+    await forkPackage(packageInfo.package_id)
+    toast({
+      title: "Forked package",
+      description: "Package forked successfully",
+    })
+  }
+
   const isStarLoading =
     isStarDataLoading || addStar.isLoading || removeStar.isLoading
 
@@ -111,11 +124,13 @@ export default function PackageHeader({
             <Button
               variant="outline"
               size="sm"
-              onClick={onForkClick}
-              disabled={!onForkClick}
+              onClick={handleForkClick}
+              disabled={
+                isCurrentUserAuthor || isForkLoading || !packageInfo?.package_id
+              }
             >
               <GitFork className="w-4 h-4 mr-2" />
-              {isCurrentUserAuthor ? "Save" : "Fork"}
+              Fork
             </Button>
           </div>
         </div>

src/components/ViewPackagePage/components/repo-page-content.tsx

@@ -18,6 +18,7 @@ import Header from "@/components/Header"
 import Footer from "@/components/Footer"
 import ViewSnippetHeader from "@/components/ViewSnippetHeader"
 import PackageHeader from "./package-header"
+import { useGlobalStore } from "@/hooks/use-global-store"
 
 interface PackageFile {
   package_file_id: string
@@ -59,6 +60,7 @@ export default function RepoPageContent({
   onEditClicked,
 }: RepoPageContentProps) {
   const [activeView, setActiveView] = useState("files")
+  const session = useGlobalStore((s) => s.session)
 
   const importantFilePaths = packageFiles
     ?.filter((pf) => isPackageFileImportant(pf.file_path))
@@ -163,7 +165,12 @@ export default function RepoPageContent({
   return (
     <div className="min-h-screen bg-white dark:bg-[#0d1117] text-gray-900 dark:text-[#c9d1d9] font-sans">
       <Header />
-      <PackageHeader packageInfo={packageInfo} />
+      <PackageHeader
+        packageInfo={packageInfo}
+        isCurrentUserAuthor={
+          packageInfo?.creator_account_id === session?.github_username
+        }
+      />
 
       {/* Mobile Sidebar */}
       <div className="max-w-[1200px] mx-auto">

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

@@ -36,7 +36,6 @@ export const useForkPackageMutation = ({
       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,
@@ -53,10 +52,8 @@ export const useForkPackageMutation = ({
 
       // Step 4: Create new package
       const newPackage = await createPackage({
-        name: `@${session.github_username}/${sourcePackage.unscoped_name}`,
+        name: sourcePackage.unscoped_name,
         description: `Fork of ${sourcePackage.name}`,
-        is_private: false,
-        is_unlisted: false,
       })
 
       // Step 5: Create new release