add sonner + project creation working

2024-04-27 16:22:35 -04:00
parent 676f88a7ce
commit d941e2c056
18 changed files with 427 additions and 75 deletions
--- a/frontend/components/dashboard/newProject.tsx
+++ b/frontend/components/dashboard/newProject.tsx
@ -10,7 +10,7 @@ import {
 } from "@/components/ui/dialog"
 import Image from "next/image"
 import { useState } from "react"
-import { z } from "zod"
+import { set, z } from "zod"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"

@ -32,6 +32,10 @@ import {
  SelectTrigger,
  SelectValue,
 } from "@/components/ui/select"
+import { useUser } from "@clerk/nextjs"
+import { createSandbox } from "@/lib/actions"
+import { useRouter } from "next/navigation"
+import { Loader2 } from "lucide-react"

 type TOptions = "react" | "node"

@ -68,6 +72,10 @@ export default function NewProjectModal({
  setOpen: (open: boolean) => void
 }) {
  const [selected, setSelected] = useState<TOptions>("react")
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+
+  const user = useUser()

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
@ -77,8 +85,14 @@ export default function NewProjectModal({
    },
  })

-  function onSubmit(values: z.infer<typeof formSchema>) {
-    const sandboxData = { type: selected, ...values }
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    if (!user.isSignedIn) return
+
+    const sandboxData = { type: selected, userId: user.user.id, ...values }
+    setLoading(true)
+
+    const id = await createSandbox(sandboxData)
+    router.push(`/code/${id}`)
  }

  return (
@ -146,8 +160,14 @@ export default function NewProjectModal({
                </FormItem>
              )}
            />
-            <CustomButton type="submit" className="w-full">
-              Submit
+            <CustomButton disabled={loading} type="submit" className="w-full">
+              {loading ? (
+                <>
+                  <Loader2 className="animate-spin mr-2 h-4 w-4" /> Loading...
+                </>
+              ) : (
+                "Submit"
+              )}
            </CustomButton>
          </form>
        </Form>
--- a/frontend/components/dashboard/projectCard/dropdown.tsx
+++ b/frontend/components/dashboard/projectCard/dropdown.tsx
@ -20,7 +20,7 @@ export default function ProjectCardDropdown({ sandbox }: { sandbox: Sandbox }) {
          e.preventDefault()
          e.stopPropagation()
        }}
-        className="h-6 w-6 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm"
+        className="h-6 w-6 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 rounded-sm outline-foreground"
      >
        <Ellipsis className="w-4 h-4" />
      </DropdownMenuTrigger>
--- a/frontend/components/dashboard/projects.tsx
+++ b/frontend/components/dashboard/projects.tsx
@ -2,7 +2,9 @@ import { Sandbox } from "@/lib/types"
 import ProjectCard from "./projectCard"
 import Image from "next/image"
 import ProjectCardDropdown from "./projectCard/dropdown"
-import { Clock, Globe } from "lucide-react"
+import { Clock, Globe, Lock } from "lucide-react"
+import Link from "next/link"
+import { Card } from "../ui/card"

 export default function DashboardProjects({
  sandboxes,
@ -12,35 +14,53 @@ export default function DashboardProjects({
  return (
    <div className="grow p-4 flex flex-col">
      <div className="text-xl font-medium mb-8">My Projects</div>
-      <div className="grow w-full grid lg:grid-cols-3 2xl:grid-cols-4 md:grid-cols-2 gap-4">
-        {sandboxes.map((sandbox) => (
-          <ProjectCard key={sandbox.id} id={sandbox.id}>
-            <div className="space-x-2 flex items-center justify-start w-full">
-              <Image
-                alt=""
-                src={
-                  sandbox.type === "react"
-                    ? "/project-icons/react.svg"
-                    : "/project-icons/node.svg"
-                }
-                width={20}
-                height={20}
-              />
-              <div className="font-medium static whitespace-nowrap w-full text-ellipsis overflow-hidden">
-                {sandbox.name}
-              </div>
-              <ProjectCardDropdown sandbox={sandbox} />
-            </div>
-            <div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
-              <div className="flex items-center">
-                <Globe className="w-3 h-3 mr-2" /> Public
-              </div>
-              <div className="flex items-center">
-                <Clock className="w-3 h-3 mr-2" /> 3d ago
-              </div>
-            </div>
-          </ProjectCard>
-        ))}
+      <div className="grow w-full ">
+        <div className="w-full grid lg:grid-cols-3 2xl:grid-cols-4 md:grid-cols-2 gap-4">
+          {sandboxes.map((sandbox) => (
+            <Link
+              key={sandbox.id}
+              href={`/code/${sandbox.id}`}
+              className="cursor-pointer transition-all focus-visible:outline-none focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-ring rounded-lg"
+            >
+              <Card className="p-4 h-48 flex flex-col justify-between items-start hover:border-foreground transition-all">
+                {/* <ProjectCard key={sandbox.id} id={sandbox.id}> */}
+                <div className="space-x-2 flex items-center justify-start w-full">
+                  <Image
+                    alt=""
+                    src={
+                      sandbox.type === "react"
+                        ? "/project-icons/react.svg"
+                        : "/project-icons/node.svg"
+                    }
+                    width={20}
+                    height={20}
+                  />
+                  <div className="font-medium static whitespace-nowrap w-full text-ellipsis overflow-hidden">
+                    {sandbox.name}
+                  </div>
+                  <ProjectCardDropdown sandbox={sandbox} />
+                </div>
+                <div className="flex flex-col text-muted-foreground space-y-0.5 text-sm">
+                  <div className="flex items-center">
+                    {sandbox.visibility === "private" ? (
+                      <>
+                        <Lock className="w-3 h-3 mr-2" /> Private
+                      </>
+                    ) : (
+                      <>
+                        <Globe className="w-3 h-3 mr-2" /> Public
+                      </>
+                    )}
+                  </div>
+                  <div className="flex items-center">
+                    <Clock className="w-3 h-3 mr-2" /> 3d ago
+                  </div>
+                </div>
+                {/* </ProjectCard> */}
+              </Card>
+            </Link>
+          ))}
+        </div>
      </div>
    </div>
  )
--- a/frontend/components/editor/index.tsx
+++ b/frontend/components/editor/index.tsx
@ -23,8 +23,8 @@ import { useClerk } from "@clerk/nextjs"
 import { TFile, TFileData, TFolder, TTab } from "./sidebar/types"

 import { io } from "socket.io-client"
-import { set } from "zod"
 import { processFileType } from "@/lib/utils"
+import { toast } from "sonner"

 export default function CodeEditor({
  userId,
@ -117,11 +117,6 @@ export default function CodeEditor({
    setTabs((prev) => prev.filter((t) => t.id !== tab.id))
  }

-  // Note: add renaming validation:
-  // In general: must not contain / or \ or whitespace, not empty, no duplicates
-  // Files: must contain dot
-  // Folders: must not contain dot
-
  const handleRename = (
    id: string,
    newName: string,
@ -129,14 +124,18 @@ export default function CodeEditor({
    type: "file" | "folder"
  ) => {
    // Validation
+    if (newName === oldName) {
+      return false
+    }
+
    if (
-      newName === oldName ||
      newName.includes("/") ||
      newName.includes("\\") ||
      newName.includes(" ") ||
      (type === "file" && !newName.includes(".")) ||
      (type === "folder" && newName.includes("."))
    ) {
+      toast.error("Invalid file name.")
      return false
    }

--- a/frontend/components/ui/customButton.tsx
+++ b/frontend/components/ui/customButton.tsx
@ -7,19 +7,22 @@ const Button = ({
  className,
  onClick,
  type,
+  disabled = false,
 }: {
  children: React.ReactNode
  className?: string
  onClick?: () => void
  type?: "button" | "submit" | "reset"
+  disabled?: boolean
 }) => {
  return (
    <button
      onClick={onClick}
+      disabled={disabled}
      type={type ?? "button"}
      className={cn(
        className,
-        "gradient-button-bg p-[1px] inline-flex group rounded-md text-sm font-medium focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+        `gradient-button-bg p-[1px] inline-flex group rounded-md text-sm font-medium focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50`
      )}
    >
      <div className="rounded-[6px] w-full gradient-button flex items-center justify-center whitespace-nowrap px-4 py-2 h-9">
--- a/frontend/components/ui/sonner.tsx
+++ b/frontend/components/ui/sonner.tsx
@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }