diff --git a/frontend/src/features/deposit/Deposit.module.css b/frontend/src/features/deposit/Deposit.module.css
new file mode 100644
index 0000000..07db7dc
--- /dev/null
+++ b/frontend/src/features/deposit/Deposit.module.css
@@ -0,0 +1,13 @@
+.userList {
+ display: grid;
+ grid-template-columns: repeat(12, 100px);
+ row-gap: 16px;
+ height: 400px;
+ overflow-y: auto;
+}
+.amountSection {
+ margin-top: 32px;
+}
+.checkout {
+ margin-top: 32px;
+}
\ No newline at end of file
diff --git a/frontend/src/features/deposit/Deposit.tsx b/frontend/src/features/deposit/Deposit.tsx
index ea78e6c..220f906 100644
--- a/frontend/src/features/deposit/Deposit.tsx
+++ b/frontend/src/features/deposit/Deposit.tsx
@@ -1,5 +1,86 @@
-import React from "react";
+import { useMutation, useQuery } from "@apollo/client";
+import React, { useState } from "react";
+
+import { useToast } from "../../components/ToastProvider";
+import { UserCard } from "../../components/UserCard";
+import { AllUsersDocument, CreateDepositDocument, User } from "../../types";
+import styles from "./Deposit.module.css";
export const Deposit: React.FC = () => {
- return
Hi from deposit
;
+ const { data, loading } = useQuery(AllUsersDocument);
+ const [createDeposit] = useMutation(CreateDepositDocument);
+ const [selectedUser, setSelectedUser] = useState("");
+ const [amount, setAmount] = useState("");
+ const allUsers = data?.allUsers || [];
+ const { showToast } = useToast();
+
+ const onSubmit = async () => {
+ const amountInt = parseInt(amount, 10) || 0;
+ const variables = { userId: selectedUser, amount: amountInt };
+ let res;
+ try {
+ res = await createDeposit({ variables });
+ } catch (e) {
+ console.log("woops", e);
+ showToast("Kunne ikke sette inn penger", "danger");
+ return;
+ }
+
+ if (res.data?.createDeposit?.__typename === "CreateDepositSuccess") {
+ const { transaction } = res.data?.createDeposit;
+ showToast(
+ `${transaction.user.firstName} har satt inn${transaction.amount}. Ny saldo er ${transaction.user.profile?.balance}.`
+ );
+ reset();
+ return;
+ }
+ if (res.data?.createDeposit?.__typename === "FormErrors") {
+ showToast(res.data?.createDeposit.message, "danger");
+ return;
+ }
+ if (res.data?.createDeposit?.__typename === "AboveMaxSaldo") {
+ showToast(
+ `${res.data.createDeposit.message}. Ny saldo ville vært ${res.data.createDeposit.above} mer enn maksimalt ${res.data.createDeposit.maxSaldo}.`,
+ "danger"
+ );
+ }
+ };
+ const reset = () => {
+ setSelectedUser("");
+ setAmount("");
+ };
+
+ return (
+
+
+
+
+ {" "}
+
+
+
+ );
};
diff --git a/frontend/src/features/deposit/createDeposit.graphql b/frontend/src/features/deposit/createDeposit.graphql
new file mode 100644
index 0000000..aea6bf4
--- /dev/null
+++ b/frontend/src/features/deposit/createDeposit.graphql
@@ -0,0 +1,32 @@
+mutation CreateDeposit($userId: ID!, $amount: Int!) {
+ createDeposit(userId: $userId, amount:$amount) {
+ ... on CreateDepositSuccess {
+ transaction {
+ id
+ amount
+ user {
+ id
+ firstName
+ lastName
+ profile {
+ balance
+ }
+ }
+ }
+ }
+ ... on AboveMaxSaldo {
+ error
+ message
+ maxSaldo
+ above
+ }
+ ... on FormErrors {
+ error
+ message
+ fields {
+ field
+ message
+ }
+ }
+ }
+}
diff --git a/frontend/src/features/register/Register.tsx b/frontend/src/features/register/Register.tsx
index 5c95b1e..af913c3 100644
--- a/frontend/src/features/register/Register.tsx
+++ b/frontend/src/features/register/Register.tsx
@@ -131,7 +131,7 @@ export const Register: React.FC = () => {
{" "}
-