Implement filtering deployments on search (#13)

packages/frontend/src/components/projects/project/DeploymentsTabPanel.tsx

@@ -1,8 +1,11 @@
-import React from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
-import deploymentDetails from '../../../assets/deployments.json';
+import { Button } from '@material-tailwind/react';
+
+import deploymentData from '../../../assets/deployments.json';
 import DeployDetailsCard from './DeploymentDetailsCard';
 import Dropdown from '../../Dropdown';
+import SearchBar from '../../SearchBar';
 
 const STATUS_OPTIONS = [
   { value: 'building', label: 'Building' },
@@ -11,14 +14,30 @@ const STATUS_OPTIONS = [
 ];
 
 const DeploymentsTabPanel = () => {
+  const [searchedBranch, setSearchedBranch] = useState('');
+
+  const filteredDeployments = useMemo(() => {
+    if (searchedBranch) {
+      return deploymentData.filter((deployment) =>
+        deployment.branch.toLowerCase().includes(searchedBranch.toLowerCase()),
+      );
+    }
+
+    return deploymentData;
+  }, [searchedBranch]);
+
+  const handleResetFilters = useCallback(() => {
+    setSearchedBranch('');
+  }, []);
+
   return (
     <div className="p-4">
       <div className="grid grid-cols-4 gap-2 text-sm text-gray-600">
         <div className="col-span-2">
-          <input
-            type="text"
-            className="border border-gray-300 rounded p-2 w-full focus:border-blue-300 focus:outline-none focus:shadow-outline-blue"
+          <SearchBar
             placeholder="Search branches"
+            value={searchedBranch}
+            onChange={(event) => setSearchedBranch(event.target.value)}
           />
         </div>
         <div className="col-span-1">
@@ -37,9 +56,25 @@ const DeploymentsTabPanel = () => {
         </div>
       </div>
       <div className="mt-2">
-        {deploymentDetails.map((deployment, key) => {
-          return <DeployDetailsCard deployment={deployment} key={key} />;
-        })}
+        {Boolean(filteredDeployments.length) ? (
+          filteredDeployments.map((deployment, key) => {
+            return <DeployDetailsCard deployment={deployment} key={key} />;
+          })
+        ) : (
+          <div className="h-[50vh] bg-gray-100 flex rounded items-center justify-center">
+            <div className="text-center">
+              <h5 className="text-lg font-bold">No deployments found</h5>
+              <p>Please change your search query or filters</p>
+              <Button
+                className="rounded-full mt-5"
+                color="white"
+                onClick={handleResetFilters}
+              >
+                ^ Reset filters
+              </Button>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );