From e6e5247a3de6c87c35eb8d9913032f51dc4dbdce Mon Sep 17 00:00:00 2001
From: Ishaan Dey <ishaan1013@gmail.com>
Date: Wed, 1 May 2024 08:53:37 -0400
Subject: [PATCH] add search projects functionality

---
 frontend/components/dashboard/index.tsx    |  27 +++--
 frontend/components/dashboard/projects.tsx | 109 ++++++++++++---------
 2 files changed, 77 insertions(+), 59 deletions(-)

diff --git a/frontend/components/dashboard/index.tsx b/frontend/components/dashboard/index.tsx
index 25ff64e..8c36712 100644
--- a/frontend/components/dashboard/index.tsx
+++ b/frontend/components/dashboard/index.tsx
@@ -15,6 +15,8 @@ import { Sandbox } from "@/lib/types"
 import DashboardProjects from "./projects"
 import DashboardSharedWithMe from "./shared"
 import NewProjectModal from "./newProject"
+import Link from "next/link"
+import { useSearchParams } from "next/navigation"
 
 type TScreen = "projects" | "shared" | "settings" | "search"
 
@@ -40,6 +42,9 @@ export default function Dashboard({
     else return "justify-start font-normal text-muted-foreground"
   }
 
+  const searchParams = useSearchParams()
+  const q = searchParams.get("q")
+
   return (
     <>
       <NewProjectModal
@@ -72,23 +77,25 @@ export default function Dashboard({
               <Users className="w-4 h-4 mr-2" />
               Shared With Me
             </Button>
-            <Button
+            {/* <Button
               variant="ghost"
               onClick={() => setScreen("settings")}
               className={activeScreen("settings")}
             >
               <Settings className="w-4 h-4 mr-2" />
               Settings
-            </Button>
+            </Button> */}
           </div>
           <div className="flex flex-col">
-            <Button
-              variant="ghost"
-              className="justify-start font-normal text-muted-foreground"
-            >
-              <Code2 className="w-4 h-4 mr-2" />
-              GitHub Repository
-            </Button>
+            <Link href="https://github.com/ishaan1013/sandbox">
+              <Button
+                variant="ghost"
+                className="justify-start font-normal text-muted-foreground"
+              >
+                <Code2 className="w-4 h-4 mr-2" />
+                GitHub Repository
+              </Button>
+            </Link>
             <Button
               variant="ghost"
               className="justify-start font-normal text-muted-foreground"
@@ -99,7 +106,7 @@ export default function Dashboard({
           </div>
         </div>
         {screen === "projects" ? (
-          <DashboardProjects sandboxes={sandboxes} />
+          <DashboardProjects sandboxes={sandboxes} q={q} />
         ) : screen === "shared" ? (
           <DashboardSharedWithMe shared={shared} />
         ) : screen === "settings" ? null : null}
diff --git a/frontend/components/dashboard/projects.tsx b/frontend/components/dashboard/projects.tsx
index aae9cfa..80dd558 100644
--- a/frontend/components/dashboard/projects.tsx
+++ b/frontend/components/dashboard/projects.tsx
@@ -12,18 +12,20 @@ import { toast } from "sonner"
 
 export default function DashboardProjects({
   sandboxes,
+  q,
 }: {
   sandboxes: Sandbox[]
+  q: string | null
 }) {
   const onDelete = async (sandbox: Sandbox) => {
     toast(`Project ${sandbox.name} deleted.`)
-    const res = await deleteSandbox(sandbox.id)
+    await deleteSandbox(sandbox.id)
   }
 
   const onVisibilityChange = async (sandbox: Sandbox) => {
     const newVisibility = sandbox.visibility === "public" ? "private" : "public"
     toast(`Project ${sandbox.name} is now ${newVisibility}.`)
-    const res = await updateSandbox({
+    await updateSandbox({
       id: sandbox.id,
       visibility: newVisibility,
     })
@@ -31,57 +33,66 @@ 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="text-xl font-medium mb-8">
+        {q && q.length > 0 ? `Showing search results for: ${q}` : "My Projects"}
+      </div>
       <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}
+          {sandboxes.map((sandbox) => {
+            if (q && q.length > 0) {
+              if (!sandbox.name.toLowerCase().includes(q.toLowerCase())) {
+                return null
+              }
+            }
+            return (
+              <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}
+                      onVisibilityChange={onVisibilityChange}
+                      onDelete={onDelete}
+                    />
                   </div>
-                  <ProjectCardDropdown
-                    sandbox={sandbox}
-                    onVisibilityChange={onVisibilityChange}
-                    onDelete={onDelete}
-                  />
-                </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 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>
-                  <div className="flex items-center">
-                    <Clock className="w-3 h-3 mr-2" /> 3d ago
-                  </div>
-                </div>
-                {/* </ProjectCard> */}
-              </Card>
-            </Link>
-          ))}
+                  {/* </ProjectCard> */}
+                </Card>
+              </Link>
+            )
+          })}
         </div>
       </div>
     </div>