@tscircuit/fake-snippets 0.0.70 → 0.0.72

package/src/hooks/useFileManagement.ts

@@ -1,59 +1,278 @@
-import { Dispatch, SetStateAction } from "react"
+import { useEffect, useMemo, useState, useCallback } from "react"
 import { isValidFileName } from "@/lib/utils/isValidFileName"
 import {
-  CodeAndPreviewState,
-  CreateFileProps,
+  DEFAULT_CODE,
+  generateRandomPackageName,
+  PackageFile,
 } from "../components/package-port/CodeAndPreview"
+import { Package } from "fake-snippets-api/lib/db/schema"
+import {
+  usePackageFile,
+  usePackageFileById,
+  usePackageFiles,
+} from "./use-package-files"
+import { decodeUrlHashToText } from "@/lib/decodeUrlHashToText"
+import { usePackageFilesLoader } from "./usePackageFilesLoader"
+import { useGlobalStore } from "./use-global-store"
+import { useToast } from "@/components/ViewPackagePage/hooks/use-toast"
+import { useUpdatePackageFilesMutation } from "./useUpdatePackageFilesMutation"
+import { useCreatePackageReleaseMutation } from "./use-create-package-release-mutation"
+import { useCreatePackageMutation } from "./use-create-package-mutation"
+import { findTargetFile } from "@/lib/utils/findTargetFile"
+
+export interface ICreateFileProps {
+  newFileName: string
+  onError: (error: Error) => void
+}
+export interface ICreateFileResult {
+  newFileCreated: boolean
+}
+
+export interface IDeleteFileResult {
+  fileDeleted: boolean
+}
+export interface IDeleteFileProps {
+  filename: string
+  onError: (error: Error) => void
+}
+
+export function useFileManagement({
+  templateCode,
+  currentPackage,
+  fileChoosen,
+  openNewPackageSaveDialog,
+  updateLastUpdated,
+}: {
+  templateCode?: string
+  currentPackage?: Package
+  fileChoosen: string | null
+  openNewPackageSaveDialog: () => void
+  updateLastUpdated: () => void
+}) {
+  const [localFiles, setLocalFiles] = useState<PackageFile[]>([])
+  const [initialFiles, setInitialFiles] = useState<PackageFile[]>([])
+  const [currentFile, setCurrentFile] = useState<string | null>(null)
+  const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
+  const loggedInUser = useGlobalStore((s) => s.session)
+  const { toast } = useToast()
+  const {
+    data: packageFilesWithContent,
+    isLoading: isLoadingPackageFilesWithContent,
+  } = usePackageFilesLoader(currentPackage)
+  const { data: packageFilesMeta, isLoading: isLoadingPackageFiles } =
+    usePackageFiles(currentPackage?.latest_package_release_id)
 
-export function useFileManagement(
-  state: CodeAndPreviewState,
-  setState: Dispatch<SetStateAction<CodeAndPreviewState>>,
-) {
-  const handleCreateFile = async ({
+  const initialCodeContent = useMemo(() => {
+    return (
+      templateCode ??
+      decodeUrlHashToText(window.location.toString()) ??
+      DEFAULT_CODE
+    )
+  }, [templateCode, currentPackage])
+  const manualEditsFileContent = useMemo(() => {
+    return (
+      localFiles?.find((file) => file.path === "manual-edits.json")?.content ||
+      "{}"
+    )
+  }, [localFiles])
+
+  const updatePackageFilesMutation = useUpdatePackageFilesMutation({
+    currentPackage,
+    localFiles,
+    initialFiles,
+    packageFilesMeta: packageFilesMeta || [],
+  })
+  const { mutate: createRelease, isLoading: isCreatingRelease } =
+    useCreatePackageReleaseMutation({
+      onSuccess: () => {
+        toast({
+          title: "Package released",
+          description: "Your package has been released successfully.",
+        })
+      },
+    })
+  const createPackageMutation = useCreatePackageMutation()
+
+  useEffect(() => {
+    if (!currentPackage || isLoadingPackageFilesWithContent) {
+      setLocalFiles([
+        {
+          path: "index.tsx",
+          content: initialCodeContent || "",
+        },
+      ])
+      setInitialFiles([])
+      setCurrentFile("index.tsx")
+      return
+    } else {
+      const targetFile = findTargetFile(
+        packageFilesWithContent || [],
+        fileChoosen,
+      )
+      setLocalFiles(packageFilesWithContent || [])
+      setInitialFiles(packageFilesWithContent || [])
+      setCurrentFile(targetFile?.path || null)
+    }
+  }, [currentPackage, isLoadingPackageFilesWithContent])
+
+  const isLoading = useMemo(() => {
+    return (
+      isLoadingPackageFilesWithContent || isLoadingPackageFiles || !localFiles
+    )
+  }, [isLoadingPackageFilesWithContent, localFiles, isLoadingPackageFiles])
+
+  const fsMap = useMemo(() => {
+    const map = localFiles.reduce(
+      (acc, file) => {
+        acc[file.path] = file.content || ""
+        return acc
+      },
+      {} as Record<string, string>,
+    )
+    return map
+  }, [localFiles, manualEditsFileContent])
+
+  const onFileSelect = (fileName: string) => {
+    if (localFiles.some((file) => file.path === fileName)) {
+      setCurrentFile(fileName)
+    } else {
+      setCurrentFile(null)
+    }
+  }
+
+  const createFile = ({
     newFileName,
-    setErrorMessage,
-    onFileSelect,
-    setNewFileName,
-    setIsCreatingFile,
-  }: CreateFileProps) => {
+    onError,
+  }: ICreateFileProps): ICreateFileResult => {
     newFileName = newFileName.trim()
     if (!newFileName) {
-      setErrorMessage("File name cannot be empty")
-      return
+      onError(new Error("File name cannot be empty"))
+      return {
+        newFileCreated: false,
+      }
     }
     if (!isValidFileName(newFileName)) {
-      setErrorMessage(
-        'Invalid file name. Avoid using special characters like <>:"/\\|?*',
-      )
-      return
+      onError(new Error("Invalid file name"))
+      return {
+        newFileCreated: false,
+      }
     }
-    setErrorMessage("")
-
-    const fileExists = state.pkgFilesWithContent.some(
-      (file) => file.path === newFileName,
-    )
 
+    const fileExists = localFiles?.some((file) => file.path === newFileName)
     if (fileExists) {
-      setErrorMessage("A file with this name already exists")
-      return
+      onError(new Error("File already exists"))
+      return {
+        newFileCreated: false,
+      }
+    }
+    const updatedFiles = [
+      ...(localFiles || []),
+      { path: newFileName, content: "" },
+    ]
+    setLocalFiles(updatedFiles)
+    onFileSelect(newFileName)
+    return {
+      newFileCreated: true,
     }
+  }
 
-    setState((prev) => {
-      const updatedFiles = [
-        ...prev.pkgFilesWithContent,
-        { path: newFileName, content: "" },
-      ]
+  const deleteFile = ({
+    filename,
+    onError,
+  }: IDeleteFileProps): IDeleteFileResult => {
+    const fileExists = localFiles?.some((file) => file.path === filename)
+    if (!fileExists) {
+      onError(new Error("File does not exist"))
       return {
-        ...prev,
-        pkgFilesWithContent: updatedFiles,
-      } as CodeAndPreviewState
+        fileDeleted: false,
+      }
+    }
+    const updatedFiles = localFiles.filter((file) => file.path !== filename)
+    setLocalFiles(updatedFiles)
+    onFileSelect(updatedFiles[0]?.path || "")
+    return {
+      fileDeleted: true,
+    }
+  }
+
+  const savePackage = async (isPrivate: boolean) => {
+    if (!isLoggedIn) {
+      toast({
+        title: "Not Logged In",
+        description: "You must be logged in to save your package.",
+      })
+      return
+    }
+
+    const newPackage = await createPackageMutation.mutateAsync({
+      name: `${loggedInUser?.github_username}/${generateRandomPackageName()}`,
+      is_private: isPrivate,
     })
-    onFileSelect(newFileName)
-    setIsCreatingFile(false)
-    setNewFileName("")
+
+    if (newPackage) {
+      createRelease(
+        {
+          package_name_with_version: `${newPackage.name}@latest`,
+        },
+        {
+          onSuccess: () => {
+            updatePackageFilesMutation.mutate({
+              package_name_with_version: `${newPackage.name}@latest`,
+              ...newPackage,
+            })
+            updateLastUpdated()
+            setInitialFiles([...localFiles])
+          },
+        },
+      )
+    }
+    updateLastUpdated()
+  }
+
+  const saveFiles = () => {
+    if (!isLoggedIn) {
+      toast({
+        title: "Not Logged In",
+        description: "You must be logged in to save your package.",
+      })
+      return
+    }
+    if (!currentPackage) {
+      openNewPackageSaveDialog()
+      return
+    }
+    updatePackageFilesMutation.mutate({
+      package_name_with_version: `${currentPackage.name}@latest`,
+      ...currentPackage,
+    })
+    updateLastUpdated()
+    setInitialFiles([...localFiles])
   }
 
+  const isSaving = useMemo(() => {
+    return (
+      updatePackageFilesMutation.isLoading ||
+      createPackageMutation.isLoading ||
+      isCreatingRelease
+    )
+  }, [
+    updatePackageFilesMutation.isLoading,
+    createPackageMutation.isLoading,
+    isCreatingRelease,
+  ])
+
   return {
-    handleCreateFile,
+    fsMap,
+    createFile,
+    deleteFile,
+    saveFiles,
+    localFiles,
+    initialFiles,
+    currentFile,
+    setLocalFiles,
+    onFileSelect,
+    isLoading,
+    isSaving,
+    savePackage,
   }
 }

package/src/hooks/usePackageFilesLoader.ts

@@ -33,8 +33,8 @@ export function usePackageFilesLoader(pkg?: Package) {
         const response = await axios.post(`/package_files/get`, {
           package_file_id: file.package_file_id,
         })
-        const content = response.data.package_file?.content_text ?? ""
-        return content ? { path: file.file_path, content } : null
+        const content = response.data.package_file?.content_text
+        return { path: file.file_path, content: content ?? "" }
       },
       staleTime: 2,
     })) ?? [],

package/src/hooks/useUpdatePackageFilesMutation.ts

@@ -1,5 +1,7 @@
 import { useMutation } from "react-query"
 import type { Package } from "fake-snippets-api/lib/db/schema"
+import { useAxios } from "./use-axios"
+import { useToast } from "@/components/ViewPackagePage/hooks/use-toast"
 
 interface PackageFile {
   path: string
@@ -7,47 +9,49 @@ interface PackageFile {
 }
 
 interface UseUpdatePackageFilesMutationProps {
-  pkg: Package | undefined
-  pkgFilesWithContent: PackageFile[]
-  initialFilesLoad: PackageFile[]
-  pkgFiles: any
-  axios: any
-  toast: any
+  currentPackage: Package | undefined
+  localFiles: PackageFile[]
+  initialFiles: PackageFile[]
+  packageFilesMeta: {
+    created_at: string
+    file_path: string
+    package_file_id: string
+    package_release_id: string
+  }[]
 }
 
 export function useUpdatePackageFilesMutation({
-  pkg,
-  pkgFilesWithContent,
-  initialFilesLoad,
-  pkgFiles,
-  axios,
-  toast,
+  currentPackage,
+  localFiles,
+  initialFiles,
+  packageFilesMeta,
 }: UseUpdatePackageFilesMutationProps) {
+  const axios = useAxios()
+  const { toast } = useToast()
   return useMutation({
     mutationFn: async (
-      newpackage: Pick<Package, "package_id" | "name"> & {
+      newPackage: Pick<Package, "package_id" | "name"> & {
         package_name_with_version: string
       },
     ) => {
-      if (pkg) {
-        newpackage = { ...pkg, ...newpackage }
+      if (currentPackage) {
+        newPackage = { ...currentPackage, ...newPackage }
       }
-      if (!newpackage) throw new Error("No package to update")
+      if (!newPackage) throw new Error("No package to update")
 
       let updatedFilesCount = 0
 
-      for (const file of pkgFilesWithContent) {
-        const initialFile = initialFilesLoad.find((x) => x.path === file.path)
-        if (file.content && file.content !== initialFile?.content) {
+      for (const file of localFiles) {
+        const initialFile = initialFiles.find((x) => x.path === file.path)
+        if (file.content !== initialFile?.content) {
           const updatePkgFilePayload = {
             package_file_id:
-              pkgFiles.data?.find((x: any) => x.file_path === file.path)
+              packageFilesMeta.find((x) => x.file_path === file.path)
                 ?.package_file_id ?? null,
             content_text: file.content,
             file_path: file.path,
-            package_name_with_version: `${newpackage.name}`,
+            package_name_with_version: `${newPackage.name}`,
           }
-
           const response = await axios.post(
             "/package_files/create_or_update",
             updatePkgFilePayload,
@@ -58,10 +62,33 @@ export function useUpdatePackageFilesMutation({
           }
         }
       }
+
+      for (const initialFile of initialFiles) {
+        const fileStillExists = localFiles.some(
+          (x) => x.path === initialFile.path,
+        )
+
+        if (!fileStillExists) {
+          const fileToDelete = packageFilesMeta.find(
+            (x) => x.file_path === initialFile.path,
+          )
+
+          if (fileToDelete?.package_file_id) {
+            const response = await axios.post("/package_files/delete", {
+              package_name_with_version: `${newPackage.name}`,
+              file_path: initialFile.path,
+            })
+
+            if (response.status === 200) {
+              updatedFilesCount++
+            }
+          }
+        }
+      }
       return updatedFilesCount
     },
     onSuccess: (updatedFilesCount) => {
-      if (updatedFilesCount) {
+      if (updatedFilesCount > 0) {
         toast({
           title: `Package's ${updatedFilesCount} files saved`,
           description: "Your changes have been saved successfully.",
@@ -69,7 +96,6 @@ export function useUpdatePackageFilesMutation({
       }
     },
     onError: (error: any) => {
-      console.error("Error updating pkg files:", error)
       toast({
         title: "Error",
         description:

package/src/lib/populate-query-cache-with-ssr-data.ts

@@ -0,0 +1,52 @@
+import type { QueryClient } from "react-query"
+
+/**
+ * Populates React Query cache with SSR data to prevent unnecessary API calls
+ * on initial page load. Should be called after QueryClient creation.
+ */
+export function populateQueryCacheWithSSRData(queryClient: QueryClient) {
+  if (typeof window === "undefined") return
+
+  const ssrPackage = (window as any).SSR_PACKAGE
+  const ssrPackageRelease = (window as any).SSR_PACKAGE_RELEASE
+  const ssrPackageFiles = (window as any).SSR_PACKAGE_FILES
+
+  if (ssrPackage) {
+    // Cache package data with all possible query keys
+    queryClient.setQueryData(["package", ssrPackage.package_id], ssrPackage)
+    queryClient.setQueryData(["package", ssrPackage.name], ssrPackage)
+    queryClient.setQueryData(["packages", ssrPackage.package_id], ssrPackage)
+  }
+
+  if (ssrPackageRelease && ssrPackage) {
+    // Cache package release with various query patterns
+    queryClient.setQueryData(
+      [
+        "packageRelease",
+        { package_id: ssrPackage.package_id, is_latest: true },
+      ],
+      ssrPackageRelease,
+    )
+    queryClient.setQueryData(
+      ["packageRelease", { package_name: ssrPackage.name, is_latest: true }],
+      ssrPackageRelease,
+    )
+    if (ssrPackageRelease.package_release_id) {
+      queryClient.setQueryData(
+        [
+          "packageRelease",
+          { package_release_id: ssrPackageRelease.package_release_id },
+        ],
+        ssrPackageRelease,
+      )
+    }
+
+    // Cache package files if available
+    if (ssrPackageFiles && ssrPackageRelease.package_release_id) {
+      queryClient.setQueryData(
+        ["packageFiles", ssrPackageRelease.package_release_id],
+        ssrPackageFiles,
+      )
+    }
+  }
+}

package/src/pages/dashboard.tsx

@@ -94,10 +94,10 @@ export const DashboardPage = () => {
                 </h2>
 
                 <p className="text-gray-600 mb-6 text-center max-w-md text-sm sm:text-base">
-                  Log in to access your dashboard and manage your snippets.
+                  Log in to access your dashboard and manage your packages.
                 </p>
                 <Button onClick={() => signIn()} variant="outline">
-                  Log in
+                  Log In
                 </Button>
               </div>
             ) : (

package/src/pages/landing.tsx

@@ -60,16 +60,27 @@ export function LandingPage() {
                     </p>
                   </div>
                   <div className="flex flex-col items-center gap-2 min-[500px]:flex-row">
-                    <a href="https://docs.tscircuit.com">
-                      <Button size="lg" aria-label="Get started with TSCircuit">
+                    <a
+                      href="https://docs.tscircuit.com"
+                      className="w-[70vw] min-[500px]:w-auto"
+                    >
+                      <Button
+                        size="lg"
+                        aria-label="Get started with TSCircuit"
+                        className="w-full min-[500px]:w-auto"
+                      >
                         Get Started
                       </Button>
                     </a>
-                    <PrefetchPageLink href="/quickstart">
+                    <PrefetchPageLink
+                      href="/seveibar/usb-c-flashlight#3d"
+                      className="w-[70vw] min-[500px]:w-auto"
+                    >
                       <Button
                         size="lg"
                         variant="outline"
                         aria-label="Open online example of TSCircuit"
+                        className="w-full min-[500px]:w-auto"
                       >
                         Open Online Example
                       </Button>