From 237bd01159f1dfd49698cee89de308a6e875d5d6 Mon Sep 17 00:00:00 2001 From: Nabarun Gogoi Date: Wed, 20 Dec 2023 14:08:34 +0530 Subject: [PATCH] Implement filtering deployments on search (#13) --- .../frontend/src/components/SearchBar.tsx | 5 +- .../projects/project/DeploymentsTabPanel.tsx | 51 ++++++++++++++++--- 2 files changed, 45 insertions(+), 11 deletions(-) diff --git a/packages/frontend/src/components/SearchBar.tsx b/packages/frontend/src/components/SearchBar.tsx index 6587825..473da86 100644 --- a/packages/frontend/src/components/SearchBar.tsx +++ b/packages/frontend/src/components/SearchBar.tsx @@ -3,7 +3,7 @@ import React, { ChangeEventHandler, forwardRef } from 'react'; import { Input } from '@material-tailwind/react'; interface SearchBarProps { - onChange: ChangeEventHandler; + onChange?: ChangeEventHandler; value?: string; placeholder?: string; } @@ -15,7 +15,6 @@ const SearchBar: React.ForwardRefRenderFunction< return (
{ + 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 (
- setSearchedBranch(event.target.value)} />
@@ -37,9 +56,25 @@ const DeploymentsTabPanel = () => {
- {deploymentDetails.map((deployment, key) => { - return ; - })} + {Boolean(filteredDeployments.length) ? ( + filteredDeployments.map((deployment, key) => { + return ; + }) + ) : ( +
+
+
No deployments found
+

Please change your search query or filters

+ +
+
+ )}
);