diff --git a/frontend/src/features/deposit/Deposit.tsx b/frontend/src/features/deposit/Deposit.tsx index 220f906..6bac74a 100644 --- a/frontend/src/features/deposit/Deposit.tsx +++ b/frontend/src/features/deposit/Deposit.tsx @@ -11,7 +11,10 @@ export const Deposit: React.FC = () => { const [createDeposit] = useMutation(CreateDepositDocument); const [selectedUser, setSelectedUser] = useState(""); const [amount, setAmount] = useState(""); - const allUsers = data?.allUsers || []; + const [userQuery, setUserQuery] = useState(""); + const filteredUsers = (data?.allUsers || []).filter((user) => + `${user.firstName.toLowerCase()} ${user.lastName.toLowerCase()}`.includes(userQuery.toLowerCase()) + ); const { showToast } = useToast(); const onSubmit = async () => { @@ -48,16 +51,26 @@ export const Deposit: React.FC = () => { const reset = () => { setSelectedUser(""); setAmount(""); + setUserQuery(""); }; return (

Hvem skal sette inn penger?

- {/* TODO: search as you type */} - + ) => setUserQuery(event.currentTarget.value)} + value={userQuery} + placeholder="Filtrér på navn" + /> + {userQuery !== "" && ( + + )}
- {allUsers.map((user: User) => ( + {filteredUsers.map((user: User) => ( {

Hvor mye?

- setAmount(event.target.value)} /> + setAmount(event.target.value)} placeholder="0" />