diff --git a/frontend/src/components/UserCard.tsx b/frontend/src/components/UserCard.tsx
index 75cdb52..e4a019f 100644
--- a/frontend/src/components/UserCard.tsx
+++ b/frontend/src/components/UserCard.tsx
@@ -2,11 +2,11 @@ import { ReactComponent as PersonFill } from "bootstrap-icons/icons/person-fill.
import clsx from "clsx";
import React, { MouseEventHandler } from "react";
-import { User } from "../types";
+import { AllUsersQuery } from "../types";
import styles from "./UserCard.module.css";
type UserCardProps = {
- user: User | null;
+ user: AllUsersQuery["allUsers"][0] | null;
onUser: MouseEventHandler;
active: boolean;
};
diff --git a/frontend/src/features/deposit/Deposit.tsx b/frontend/src/features/deposit/Deposit.tsx
index 005a8e8..aeeb786 100644
--- a/frontend/src/features/deposit/Deposit.tsx
+++ b/frontend/src/features/deposit/Deposit.tsx
@@ -1,58 +1,22 @@
-import { useMutation, useQuery } from "@apollo/client";
-import React, { useState } from "react";
+import React from "react";
-import { useToast } from "../../components/ToastProvider";
import { UserCard } from "../../components/UserCard";
-import { AllUsersDocument, CreateDepositDocument, User } from "../../types";
import styles from "./Deposit.module.css";
+import { useDeposit } from "./useDeposit";
export const Deposit: React.FC = () => {
- const { data, loading } = useQuery(AllUsersDocument);
- const [createDeposit] = useMutation(CreateDepositDocument);
- const [selectedUser, setSelectedUser] = useState("");
- const [amount, setAmount] = useState("");
- 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 () => {
- 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("");
- setUserQuery("");
- };
+ const {
+ loading,
+ selectedUser,
+ setSelectedUser,
+ amount,
+ setAmount,
+ userQuery,
+ setUserQuery,
+ filteredUsers,
+ reset,
+ onSubmit,
+ } = useDeposit();
if (loading) {
return
Loading...
;
@@ -74,7 +38,7 @@ export const Deposit: React.FC = () => {
)}
- {filteredUsers.map((user: User) => (
+ {filteredUsers.map((user) => (
{
+ const { data, loading } = useQuery(AllUsersDocument);
+ const [createDeposit] = useMutation(CreateDepositDocument);
+ const [selectedUser, setSelectedUser] = useState("");
+ const [amount, setAmount] = useState("");
+ 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 () => {
+ 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("");
+ setUserQuery("");
+ };
+
+ return {
+ loading,
+ selectedUser,
+ setSelectedUser,
+ amount,
+ setAmount,
+ userQuery,
+ setUserQuery,
+ filteredUsers,
+ reset,
+ onSubmit,
+ };
+};
diff --git a/frontend/src/features/register/Register.tsx b/frontend/src/features/register/Register.tsx
index 4e8bee9..d2a6ea5 100644
--- a/frontend/src/features/register/Register.tsx
+++ b/frontend/src/features/register/Register.tsx
@@ -1,94 +1,33 @@
-import { useMutation } from "@apollo/client";
-import React, { useState } from "react";
+import React from "react";
import { ProductCard } from "../../components/ProductCard";
-import { useToast } from "../../components/ToastProvider";
import { UserCard } from "../../components/UserCard";
-import { CreateOrderDocument, Product, User } from "../../types";
+import { OrderLineInput, Product } from "../../types";
import styles from "./Register.module.css";
import { useRegister } from "./useRegister";
const USER_EXTERNAL = "external";
-type OrderLineInput = {
- productId: string;
- amount: number;
-};
-
-const sumTotal = (products: Omit[], order: OrderLineInput[], isExternal: boolean) => {
- const prices = order.map((orderLine: OrderLineInput) => {
- const product = products.find((product: Omit) => product.id === orderLine.productId);
- if (!product) return 0;
- return orderLine.amount * (isExternal ? product.salePriceExt : product.salePriceInt);
- });
- return prices.reduce((partialSum, a) => partialSum + a, 0);
-};
-
export const Register: React.FC = () => {
- const { users, products, loading, showAll, setShowAll } = useRegister();
- const [selectedUser, setSelectedUser] = useState("");
- const [order, setOrder] = useState([]);
- const [createOrderMutation, { loading: mutateLoading }] = useMutation(CreateOrderDocument, {
- variables: { customerId: selectedUser, isExternal: selectedUser === USER_EXTERNAL, orderLines: order },
- });
- const { showToast } = useToast();
-
- const reset = () => {
- setOrder([]);
- setSelectedUser("");
- };
- const addToOrder = (productId: string) => {
- let added = false;
- const newOrder = order.map((orderLine: OrderLineInput) => {
- if (orderLine.productId === productId) {
- added = true;
- return { ...orderLine, amount: orderLine.amount + 1 };
- }
- return orderLine;
- });
- if (!added) {
- newOrder.push({ productId, amount: 1 });
- }
- setOrder(newOrder);
- };
-
- const total = sumTotal(products, order, selectedUser === USER_EXTERNAL);
+ const {
+ users,
+ products,
+ loading,
+ showAll,
+ setShowAll,
+ setSelectedUser,
+ selectedUser,
+ addToOrder,
+ order,
+ total,
+ onSubmit,
+ reset,
+ } = useRegister();
if (loading) {
return Loading...
;
}
- const onSubmit = async () => {
- let res;
- try {
- res = await createOrderMutation();
- } catch (e) {
- showToast("Whoops");
- console.log("woops");
- return;
- }
- const { data } = res;
- const createOrderResponse = data?.createOrder;
- if (createOrderResponse?.__typename === "CreateOrderSuccess") {
- const { order } = createOrderResponse;
- const orderLines = (order?.orderlines || [])
- .map((orderLine) => `${orderLine.amount} ${orderLine.product.name}`)
- .join(", ");
- const who = !order.customer ? "Ekstern" : `${order.customer?.firstName} ${order.customer?.lastName}`;
- showToast(`${who} kjøpte: ${orderLines}`);
- reset();
- return;
- }
-
- if (createOrderResponse?.__typename === "FormErrors") {
- showToast(createOrderResponse.message, "danger");
- return;
- }
-
- if (createOrderResponse?.__typename === "InsufficientFunds") {
- showToast(`${createOrderResponse.message} Du mangler ${createOrderResponse.amountLacking},-`, "danger");
- }
- };
return (
@@ -100,7 +39,7 @@ export const Register: React.FC = () => {
onUser={() => setSelectedUser(USER_EXTERNAL)}
active={selectedUser == USER_EXTERNAL}
/>
- {users.map((user: User) => (
+ {users.map((user) => (
[];
- loading: boolean;
- showAll: boolean;
- setShowAll: CallableFunction;
+const USER_EXTERNAL = "external";
+
+const sumTotal = (products: Omit[], order: OrderLineInput[], isExternal: boolean) => {
+ const prices = order.map((orderLine: OrderLineInput) => {
+ const product = products.find((product: Omit) => product.id === orderLine.productId);
+ if (!product) return 0;
+ return orderLine.amount * (isExternal ? product.salePriceExt : product.salePriceInt);
+ });
+ return prices.reduce((partialSum, a) => partialSum + a, 0);
};
-export const useRegister = (): useRegisterType => {
+export const useRegister = () => {
const [showAll, setShowAll] = useState(false);
- const { data, loading } = useQuery(AllProductsDocument, { variables: { active: true } });
- const { data: usersData, loading: usersLoading } = useQuery(AllUsersDocument);
+ const [selectedUser, setSelectedUser] = useState("");
+ const [order, setOrder] = useState([]);
+ const { showToast } = useToast();
+ const { data, loading } = useQuery(AllProductsDocument, { variables: { active: true } });
+ const products = data?.allProducts || [];
+
+ const { data: usersData, loading: usersLoading } = useQuery(AllUsersDocument);
const allUsers = usersData?.allUsers || [];
const users = showAll ? allUsers : allUsers.filter(activeUserFilter);
- return { loading: loading || usersLoading, users, products: data?.allProducts || [], showAll, setShowAll };
+ const [createOrderMutation] = useMutation(CreateOrderDocument, {
+ variables: { customerId: selectedUser, isExternal: selectedUser === USER_EXTERNAL, orderLines: order },
+ });
+
+ const reset = () => {
+ setOrder([]);
+ setSelectedUser("");
+ };
+
+ const addToOrder = (productId: string) => {
+ let added = false;
+ const newOrder = order.map((orderLine: OrderLineInput) => {
+ if (orderLine.productId === productId) {
+ added = true;
+ return { ...orderLine, amount: orderLine.amount + 1 };
+ }
+ return orderLine;
+ });
+ if (!added) {
+ newOrder.push({ productId, amount: 1 });
+ }
+ setOrder(newOrder);
+ };
+
+ const total = sumTotal(products, order, selectedUser === USER_EXTERNAL);
+
+ const onSubmit = async () => {
+ let res;
+ try {
+ res = await createOrderMutation();
+ } catch (e) {
+ showToast("Whoops");
+ console.log("woops");
+ return;
+ }
+ const { data } = res;
+ const createOrderResponse = data?.createOrder;
+ if (createOrderResponse?.__typename === "CreateOrderSuccess") {
+ const { order } = createOrderResponse;
+ const orderLines = (order?.orderlines || [])
+ .map((orderLine) => `${orderLine.amount} ${orderLine.product.name}`)
+ .join(", ");
+ const who = !order.customer ? "Ekstern" : `${order.customer?.firstName} ${order.customer?.lastName}`;
+ showToast(`${who} kjøpte: ${orderLines}`);
+ reset();
+ return;
+ }
+
+ if (createOrderResponse?.__typename === "FormErrors") {
+ showToast(createOrderResponse.message, "danger");
+ return;
+ }
+
+ if (createOrderResponse?.__typename === "InsufficientFunds") {
+ showToast(`${createOrderResponse.message} Du mangler ${createOrderResponse.amountLacking},-`, "danger");
+ }
+ };
+ return {
+ loading: loading || usersLoading,
+ users,
+ products,
+ showAll,
+ setShowAll,
+ setSelectedUser,
+ selectedUser,
+ addToOrder,
+ order,
+ total,
+ onSubmit,
+ reset,
+ };
};
diff --git a/frontend/src/features/users/UserList.tsx b/frontend/src/features/users/UserList.tsx
index e8e2d6a..91394b4 100644
--- a/frontend/src/features/users/UserList.tsx
+++ b/frontend/src/features/users/UserList.tsx
@@ -12,7 +12,7 @@ export const UserList = () => {
if (loading) return Loading...
;
const allUsers = data?.allUsers || [];
- const users = showAll ? allUsers : allUsers.filter(activeUserFilter);
+ const users = showAll ? allUsers : allUsers.filter((u) => activeUserFilter(u));
return (