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 (