adds search

apps/hub-app/src/components/HomeDashboard.tsx

@@ -1,11 +1,12 @@
+import { MouseEvent, useState, ChangeEvent } from 'react';
 import { ITransformedMembership } from '@daohaus/dao-data';
 import { ParMd, Spinner, useBreakpoint, widthQuery } from '@daohaus/ui';
-import { MouseEvent, useState } from 'react';
 import styled from 'styled-components';
-import { ListType } from '../utils/appSpecificTypes';
+
 import { DaoCards } from './DaoCards';
 import { DaoTable } from './DaoTable';
 import TableControl from './TableControl';
+import { ListType } from '../utils/appSpecificTypes';
 
 // Refactored this to be a component that we might be able to reuse
 // for explore view and other similar views.
@@ -22,6 +23,8 @@ type DashProps = {
   toggleDelegateFilter: (event: MouseEvent<HTMLButtonElement>) => void;
   sortBy: string;
   toggleSortBy: (event: MouseEvent<HTMLButtonElement>) => void;
+  searchTerm: string;
+  setSearchTerm: (event: ChangeEvent<HTMLInputElement>) => void;
   loading: boolean;
 };
 
@@ -33,6 +36,8 @@ export const HomeDashboard = ({
   toggleDelegateFilter,
   sortBy,
   toggleSortBy,
+  searchTerm,
+  setSearchTerm,
   loading,
 }: DashProps) => {
   const [listType, setListType] = useState<ListType>('cards');
@@ -76,6 +81,8 @@ export const HomeDashboard = ({
           toggleDelegateFilter={toggleDelegateFilter}
           sortBy={sortBy}
           toggleSortBy={toggleSortBy}
+          searchTerm={searchTerm}
+          setSearchTerm={setSearchTerm}
         />
         <NoDaosFound />
       </Body>
@@ -93,6 +100,8 @@ export const HomeDashboard = ({
         toggleDelegateFilter={toggleDelegateFilter}
         sortBy={sortBy}
         toggleSortBy={toggleSortBy}
+        searchTerm={searchTerm}
+        setSearchTerm={setSearchTerm}
       />
       {isMobile ? (
         <Mobile daoData={daoData} />

apps/hub-app/src/components/SearchInput.tsx

@@ -0,0 +1,43 @@
+import { ChangeEvent } from 'react';
+import styled from 'styled-components';
+import { indigoDark } from '@radix-ui/colors';
+import { BiSearch } from 'react-icons/bi';
+import { Input } from '@daohaus/ui';
+
+const StyledInput = styled(Input)`
+  background: ${indigoDark.indigo3};
+  color: ${indigoDark.indigo11};
+  ::placeholder {
+    color: ${indigoDark.indigo11};
+  }
+  :focus {
+    background: ${indigoDark.indigo3};
+    color: ${indigoDark.indigo11};
+  }
+`;
+
+const IconSearch = styled(BiSearch)`
+  fill: ${indigoDark.indigo11};
+  :hover {
+    fill: ${indigoDark.indigo11};
+  }
+`;
+
+type SearchInputProps = {
+  searchTerm: string;
+  setSearchTerm: (event: ChangeEvent<HTMLInputElement>) => void;
+};
+
+const SearchInput = ({ searchTerm, setSearchTerm }: SearchInputProps) => {
+  return (
+    <StyledInput
+      icon={IconSearch}
+      id="table-search"
+      placeholder="Search Daos"
+      onChange={setSearchTerm}
+      defaultValue={searchTerm}
+    />
+  );
+};
+
+export default SearchInput;

apps/hub-app/src/components/SortDropdown.tsx

@@ -20,12 +20,12 @@ const DropdownButton = styled(Button)`
   }
 `;
 
-type FilterDropdownProps = {
+type SortDropdownProps = {
   sortBy: string;
   toggleSortBy: (event: MouseEvent<HTMLButtonElement>) => void;
 };
 
-const SortDropdown = ({ sortBy, toggleSortBy }: FilterDropdownProps) => {
+const SortDropdown = ({ sortBy, toggleSortBy }: SortDropdownProps) => {
   const theme = useTheme();
 
   return (

apps/hub-app/src/components/TableControl.tsx

@@ -1,13 +1,13 @@
-import { Button, Input, useBreakpoint, widthQuery } from '@daohaus/ui';
+import { MouseEvent, ChangeEvent } from 'react';
+import { Button, useBreakpoint, widthQuery } from '@daohaus/ui';
 import styled from 'styled-components';
-import { BiSearch } from 'react-icons/bi';
 import { BsFillGrid3X3GapFill } from 'react-icons/bs';
-
 import { indigoDark } from '@radix-ui/colors';
-import { ListType } from '../utils/appSpecificTypes';
-import { MouseEvent } from 'react';
+
 import FilterDropdown from './FilterDropdown';
 import SortDropdown from './SortDropdown';
+import { ListType } from '../utils/appSpecificTypes';
+import SearchInput from './SearchInput';
 
 const IconGrid = styled(BsFillGrid3X3GapFill)`
   height: 1.8rem;
@@ -19,13 +19,6 @@ const IconGrid = styled(BsFillGrid3X3GapFill)`
   }
 `;
 
-const IconSearch = styled(BiSearch)`
-  fill: ${indigoDark.indigo11};
-  :hover {
-    fill: ${indigoDark.indigo11};
-  }
-`;
-
 const Layout = styled.div`
   display: flex;
   align-items: center;
@@ -38,18 +31,6 @@ const Layout = styled.div`
   }
 `;
 
-const StyledInput = styled(Input)`
-  background: ${indigoDark.indigo3};
-  color: ${indigoDark.indigo11};
-  ::placeholder {
-    color: ${indigoDark.indigo11};
-  }
-  :focus {
-    background: ${indigoDark.indigo3};
-    color: ${indigoDark.indigo11};
-  }
-`;
-
 type TableControlProps = {
   listType: ListType;
   toggleListType: () => void;
@@ -59,6 +40,8 @@ type TableControlProps = {
   toggleDelegateFilter: (event: MouseEvent<HTMLButtonElement>) => void;
   sortBy: string;
   toggleSortBy: (event: MouseEvent<HTMLButtonElement>) => void;
+  searchTerm: string;
+  setSearchTerm: (event: ChangeEvent<HTMLInputElement>) => void;
 };
 
 const TableControl = ({
@@ -70,16 +53,14 @@ const TableControl = ({
   toggleDelegateFilter,
   sortBy,
   toggleSortBy,
+  searchTerm,
+  setSearchTerm,
 }: TableControlProps) => {
   const isMobile = useBreakpoint(widthQuery.sm);
 
   return (
     <Layout>
-      <StyledInput
-        icon={IconSearch}
-        id="table-search"
-        placeholder="Search 3 Daos"
-      />
+      <SearchInput searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
       <FilterDropdown
         filterNetworks={filterNetworks}
         toggleNetworkFilter={toggleNetworkFilter}

apps/hub-app/src/pages/HomePage.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent, useEffect, useState } from 'react';
+import { MouseEvent, ChangeEvent, useEffect, useState } from 'react';
 import { indigoDark } from '@radix-ui/colors';
 import styled from 'styled-components';
 
@@ -19,6 +19,7 @@ import {
 
 import { getDelegateFilter } from '../utils/queryHelpers';
 import { DEFAULT_SORT_KEY, SORT_FIELDS } from '../utils/constants';
+import useDebounce from '../utils/debounceHook';
 
 const Layout = styled.div`
   width: 100%;
@@ -78,8 +79,11 @@ const HomePage = () => {
   );
   const [filterDelegate, setFilterDelegate] = useState<string | ''>('');
   const [sortBy, setSortBy] = useState<string>(DEFAULT_SORT_KEY);
+  const [searchTerm, setSearchTerm] = useState<string | ''>('');
   const [loading, setLoading] = useState<boolean>(true);
 
+  const debouncedSearchTerm = useDebounce<string>(searchTerm, 1000);
+
   useEffect(() => {
     const getDaos = async (address: string) => {
       setLoading(true);
@@ -90,8 +94,7 @@ const HomePage = () => {
           memberAddress: address,
           networkIds: Object.keys(filterNetworks) as ValidNetwork[],
           includeTokens: true,
-          // TODO: search filter will go here:
-          // daoFilter: { name_contains_nocase: 'carl' },
+          daoFilter: { name_contains_nocase: debouncedSearchTerm },
           memberFilter: getDelegateFilter(filterDelegate, address),
           ordering: SORT_FIELDS[sortBy].ordering,
         });
@@ -110,7 +113,7 @@ const HomePage = () => {
 
     if (!address) return;
     getDaos(address);
-  }, [address, filterNetworks, filterDelegate, sortBy]);
+  }, [address, filterNetworks, filterDelegate, sortBy, debouncedSearchTerm]);
 
   const toggleNetworkFilter = (event: MouseEvent<HTMLButtonElement>) => {
     const network = event.currentTarget.value;
@@ -141,6 +144,12 @@ const HomePage = () => {
     );
   };
 
+  const handleSearchTermChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm((prevState) =>
+      prevState === event.target.value ? '' : event.target.value
+    );
+  };
+
   return (
     <Layout>
       <SideTopLeft />
@@ -159,6 +168,8 @@ const HomePage = () => {
           toggleDelegateFilter={toggleDelegateFilter}
           sortBy={sortBy}
           toggleSortBy={toggleSortBy}
+          searchTerm={searchTerm}
+          setSearchTerm={handleSearchTermChange}
           loading={loading}
         />
       ) : (

apps/hub-app/src/utils/debounceHook.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export default useDebounce;

libs/ui/src/components/atoms/Input/Input.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 
 export type InputProps = Field & {
   icon?: IconType;
+  onChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
   className?: string;
 };
 type Ref =