From 762ef422cab294d0b785ace11dce5ba78c30dd1b Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 11 Aug 2023 15:57:11 +0530
Subject: [PATCH] chore: project search added in project list page (#1837)

---
 .../pages/[workspaceSlug]/projects/index.tsx  | 51 ++++++++++++++-----
 1 file changed, 37 insertions(+), 14 deletions(-)

diff --git a/apps/app/pages/[workspaceSlug]/projects/index.tsx b/apps/app/pages/[workspaceSlug]/projects/index.tsx
index 6c60d4abd..4dd6a234e 100644
--- a/apps/app/pages/[workspaceSlug]/projects/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/index.tsx
@@ -16,7 +16,7 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 import { JoinProjectModal } from "components/project/join-project-modal";
 import { DeleteProjectModal, SingleProjectCard } from "components/project";
 // ui
-import { EmptyState, Loader, PrimaryButton } from "components/ui";
+import { EmptyState, Icon, Loader, PrimaryButton } from "components/ui";
 import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -34,6 +34,8 @@ const ProjectsPage: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const [query, setQuery] = useState("");
+
   const { user } = useUserAuth();
   // context data
   const { activeWorkspace } = useWorkspaces();
@@ -42,6 +44,15 @@ const ProjectsPage: NextPage = () => {
   const [deleteProject, setDeleteProject] = useState<string | null>(null);
   const [selectedProjectToJoin, setSelectedProjectToJoin] = useState<string | null>(null);
 
+  const filteredProjectList =
+    query === ""
+      ? projects
+      : projects?.filter(
+          (project) =>
+            project.name.toLowerCase().includes(query.toLowerCase()) ||
+            project.identifier.toLowerCase().includes(query.toLowerCase())
+        );
+
   return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
@@ -53,16 +64,28 @@ const ProjectsPage: NextPage = () => {
         </Breadcrumbs>
       }
       right={
-        <PrimaryButton
-          className="flex items-center gap-2"
-          onClick={() => {
-            const e = new KeyboardEvent("keydown", { key: "p" });
-            document.dispatchEvent(e);
-          }}
-        >
-          <PlusIcon className="h-4 w-4" />
-          Add Project
-        </PrimaryButton>
+        <div className="flex items-center gap-3">
+          <div className="flex w-full gap-1 items-center justify-start rounded-md px-2 py-1.5 border border-custom-border-300 bg-custom-background-90">
+            <Icon iconName="search" className="!text-xl !leading-5 !text-custom-sidebar-text-400" />
+            <input
+              className="w-full  border-none bg-transparent text-xs text-custom-text-200 focus:outline-none"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search"
+            />
+          </div>
+
+          <PrimaryButton
+            className="flex items-center gap-2 flex-shrink-0"
+            onClick={() => {
+              const e = new KeyboardEvent("keydown", { key: "p" });
+              document.dispatchEvent(e);
+            }}
+          >
+            <PlusIcon className="h-4 w-4" />
+            Add Project
+          </PrimaryButton>
+        </div>
       }
     >
       <JoinProjectModal
@@ -91,12 +114,12 @@ const ProjectsPage: NextPage = () => {
         data={projects?.find((item) => item.id === deleteProject) ?? null}
         user={user}
       />
-      {projects ? (
+      {filteredProjectList ? (
         <div className="h-full w-full overflow-hidden">
-          {projects.length > 0 ? (
+          {filteredProjectList.length > 0 ? (
             <div className="h-full p-8 overflow-y-auto">
               <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
-                {projects.map((project) => (
+                {filteredProjectList.map((project) => (
                   <SingleProjectCard
                     key={project.id}
                     project={project}