From bc4414473c65f91d47070c279a0a9bd1a282bd2a Mon Sep 17 00:00:00 2001
From: Nikolai R Kristiansen <nikolaik@gmail.com>
Date: Sat, 4 Dec 2021 23:48:03 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Search=20as=20you=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 Fix regression in register mutation
---
 frontend/src/features/deposit/Deposit.tsx | 23 ++++++++++++++++++-----
 main/api/mutations.py                     |  2 +-
 2 files changed, 19 insertions(+), 6 deletions(-)

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 (
     <div>
       <section>
         <h2>Hvem skal sette inn penger?</h2>
-        {/* TODO: search as you type */}
-        <input name="userQuery" />
+        <input
+          name="userQuery"
+          onChange={(event: React.FormEvent<HTMLInputElement>) => setUserQuery(event.currentTarget.value)}
+          value={userQuery}
+          placeholder="Filtrér på navn"
+        />
+        {userQuery !== "" && (
+          <button className="btn btn-link" type="button" onClick={() => setUserQuery("")}>
+            Vis alle
+          </button>
+        )}
         <div className={styles.userList}>
-          {allUsers.map((user: User) => (
+          {filteredUsers.map((user: User) => (
             <UserCard
               key={user.id}
               active={selectedUser === user.id}
@@ -71,7 +84,7 @@ export const Deposit: React.FC = () => {
       </section>
       <section className={styles.amountSection}>
         <h2>Hvor mye?</h2>
-        <input name="amount" value={amount} onChange={(event) => setAmount(event.target.value)} />
+        <input name="amount" value={amount} onChange={(event) => setAmount(event.target.value)} placeholder="0" />
       </section>
       <section className={styles.checkout}>
         <button type="button" className="btn btn-primary btn-lg" onClick={onSubmit}>
diff --git a/main/api/mutations.py b/main/api/mutations.py
index 0d2971d..d84408b 100644
--- a/main/api/mutations.py
+++ b/main/api/mutations.py
@@ -65,7 +65,7 @@ def create_order(customer_id: ID, order_lines: list[OrderLineInput], is_external
 
     if not is_external and user.profile.balance <= order_sum:
         return InsufficientFunds(
-            message="Du har ikke nok penger på bok.", amount_lacking=abs(order_sum - profile.balance)
+            message="Du har ikke nok penger på bok.", amount_lacking=abs(order_sum - user.profile.balance)
         )
 
     # create