diff --git a/src/pages/update-user/index.tsx b/src/pages/update-user/index.tsx index 90b0a7f..72987ce 100644 --- a/src/pages/update-user/index.tsx +++ b/src/pages/update-user/index.tsx @@ -1,4 +1,10 @@ -import { ReactElement, useState, useContext, ChangeEvent } from 'react' +import { + ReactElement, + useState, + useContext, + ChangeEvent, + useEffect +} from 'react' import api from '../../utils/api' import cn from 'classnames' import { v4 as uuid } from 'uuid' @@ -15,6 +21,10 @@ interface Values { userType: UserType } +interface SearchValues { + searchTerm: string +} + type UserTypeMap = { [name in UserType]: string } @@ -26,7 +36,7 @@ const userTypeButtonCopies: UserTypeMap = { Renter: 'Renter' } -const userTypes: readonly UserType[] = [ +const userTypes: UserType[] = [ UserType.FIRST_TIME_BUYER, UserType.HOME_OWNER, UserType.LANDLORD, @@ -35,6 +45,8 @@ const userTypes: readonly UserType[] = [ const UpdateUserPage = (): ReactElement => { const [showDropdown, setShowDropdown] = useState(false) + const [userTypesDropdownList, setUserTypesDropdownList] = + useState(userTypes) const { dispatch, state } = useContext(Store) const navigate = useNavigate() const [formValues, setFormValues] = useState({ @@ -42,11 +54,18 @@ const UpdateUserPage = (): ReactElement => { password: '', userType: UserType.RENTER }) + const [searchValue, setSearchValue] = useState({ + searchTerm: '' + }) const onChange = (e: ChangeEvent) => { setFormValues({ ...formValues, [e.target.name]: e.target.value }) } + const handleSearchInputOnChange = (e: ChangeEvent) => { + setSearchValue({ ...searchValue, [e.target.name]: e.target.value }) + } + const dropdownItemOnClickHandler = (n: UserType) => { setFormValues((prevState) => ({ ...prevState, @@ -55,6 +74,16 @@ const UpdateUserPage = (): ReactElement => { setShowDropdown(!showDropdown) } + useEffect(() => { + setUserTypesDropdownList( + userTypes.filter((n) => + userTypeButtonCopies[n] + .toLowerCase() + .includes(searchValue.searchTerm.toLocaleLowerCase()) + ) + ) + }, [searchValue.searchTerm]) + const submitHandler = async (e: React.SyntheticEvent) => { e.preventDefault() try { @@ -130,13 +159,16 @@ const UpdateUserPage = (): ReactElement => { id="dropdown-menu" className="absolute w-full right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 p-1 space-y-1" > - {/* */} - {userTypes.map((n) => ( + name="searchTerm" + value={searchValue.searchTerm} + onChange={(e) => handleSearchInputOnChange(e)} + /> + {userTypesDropdownList.map((n) => (