92 lines
2.5 KiB
TypeScript
92 lines
2.5 KiB
TypeScript
import React from "react";
|
|
|
|
import styles from "./Deposit.module.css";
|
|
import { useDeposit } from "./useDeposit";
|
|
import { UserCard } from "../users/UserCard";
|
|
|
|
const Deposit = (): React.JSX.Element => {
|
|
const {
|
|
loading,
|
|
selectedUser,
|
|
toggleSelectedUser,
|
|
amount,
|
|
setAmount,
|
|
userQuery,
|
|
setUserQuery,
|
|
filteredUsers,
|
|
selectedUserDetails,
|
|
reset,
|
|
onSubmit,
|
|
} = useDeposit();
|
|
|
|
if (loading) {
|
|
return <div>Loading...</div>;
|
|
}
|
|
|
|
return (
|
|
<div className={styles.deposit}>
|
|
<h2 className={styles.heading}>Hvem skal sette inn penger?</h2>
|
|
<div className={styles.search}>
|
|
<input
|
|
name="userQuery"
|
|
onChange={(event: React.FormEvent<HTMLInputElement>) => setUserQuery(event.currentTarget.value)}
|
|
value={userQuery}
|
|
placeholder="Filtrér på navn"
|
|
aria-label="Filtrér personer på navn"
|
|
/>
|
|
{userQuery !== "" && (
|
|
<button type="button" onClick={() => setUserQuery("")}>
|
|
Vis alle
|
|
</button>
|
|
)}
|
|
</div>
|
|
<section className={styles.amountSection} aria-label="Innskudd">
|
|
<h2>Hvor mye?</h2>
|
|
{selectedUserDetails ? (
|
|
<p className={styles.selectedUser}>
|
|
Innskudd til{" "}
|
|
<strong>
|
|
{selectedUserDetails.firstName} {selectedUserDetails.lastName}
|
|
</strong>
|
|
</p>
|
|
) : (
|
|
<p className={styles.selectedUser}>Velg en person fra listen</p>
|
|
)}
|
|
<label className={styles.amountLabel} htmlFor="deposit-amount">
|
|
Beløp
|
|
</label>
|
|
<div className={styles.amountInput}>
|
|
<input
|
|
id="deposit-amount"
|
|
name="amount"
|
|
inputMode="decimal"
|
|
value={amount}
|
|
onChange={(event) => setAmount(event.target.value)}
|
|
placeholder="0"
|
|
/>
|
|
<span>kr</span>
|
|
</div>
|
|
<div className={styles.checkout}>
|
|
<button type="button" onClick={onSubmit} className="primary">
|
|
Sett inn
|
|
</button>
|
|
<button type="button" onClick={reset}>
|
|
Start på nytt
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<div className={styles.userList}>
|
|
{filteredUsers.map((user) => (
|
|
<UserCard
|
|
key={user.id}
|
|
active={selectedUser === user.id}
|
|
onUser={() => toggleSelectedUser(user.id)}
|
|
user={user}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
export default Deposit;
|