✨ Start on error handling

♻ Use TypedDocumentNode's instead of apollo-react-typescript codegen
💄 Add toast

frontend/src/features/register/Register.tsx

@@ -1,21 +1,23 @@
+import { useMutation } from "@apollo/client";
 import React, { useState } from "react";
 
 import { ProductCard } from "../../components/ProductCard";
+import { useToast } from "../../components/ToastProvider";
 import { UserCard } from "../../components/UserCard";
-import { Product, User } from "../../types";
+import { CreateOrderDocument, Product, User } from "../../types";
 import styles from "./Register.module.css";
 import { useRegister } from "./useRegister";
 
 const USER_EXTERNAL = "external";
 
 type OrderLine = {
-  id: string;
+  productId: string;
   amount: number;
 };
 
 const sumTotal = (products: Product[], order: OrderLine[], isExternal: boolean) => {
   const prices = order.map((orderLine: OrderLine) => {
-    const product = products.find((product: Product) => product.id === orderLine.id);
+    const product = products.find((product: Product) => product.id === orderLine.productId);
     if (!product) return 0;
     return orderLine.amount * (isExternal ? product.salePriceExt : product.salePriceInt);
   });
@@ -26,22 +28,26 @@ export const Register: React.FC = () => {
   const { users, products, loading, showAll, setShowAll } = useRegister();
   const [selectedUser, setSelectedUser] = useState("");
   const [order, setOrder] = useState<OrderLine[]>([]);
+  const [createOrderMutation, { loading: mutateLoading }] = useMutation(CreateOrderDocument, {
+    variables: { customerId: selectedUser, orderLines: order },
+  });
+  const { showToast } = useToast();
 
   const reset = () => {
     setOrder([]);
     setSelectedUser("");
   };
-  const addToOrder = (id: string) => {
+  const addToOrder = (productId: string) => {
     let added = false;
     const newOrder = order.map((orderLine: OrderLine) => {
-      if (orderLine.id === id) {
+      if (orderLine.productId === productId) {
         added = true;
         return { ...orderLine, amount: orderLine.amount + 1 };
       }
       return orderLine;
     });
     if (!added) {
-      newOrder.push({ id, amount: 1 });
+      newOrder.push({ productId, amount: 1 });
     }
     setOrder(newOrder);
   };
@@ -54,6 +60,22 @@ export const Register: React.FC = () => {
     return <div>Loading...</div>;
   }
 
+  const onSubmit = async () => {
+    let res;
+    try {
+      res = await createOrderMutation();
+    } catch (e) {
+      showToast("Whoops");
+      console.log("woops");
+      return;
+    }
+    const { data } = res;
+    if (data?.createOrder?.__typename === "CreateOrderSuccess") {
+      showToast("Woop");
+      return;
+    }
+    showToast("booo");
+  };
   return (
     <div>
       <section>
@@ -86,8 +108,8 @@ export const Register: React.FC = () => {
               key={product.id}
               product={product}
               onProduct={() => addToOrder(product.id)}
-              amount={order.find((orderLine: OrderLine) => orderLine.id === product.id)?.amount || 0}
-              active={order.some((orderLine: OrderLine) => orderLine.id === product.id)}
+              amount={order.find((orderLine: OrderLine) => orderLine.productId === product.id)?.amount || 0}
+              active={order.some((orderLine: OrderLine) => orderLine.productId === product.id)}
             />
           ))}
         </div>
@@ -96,7 +118,7 @@ export const Register: React.FC = () => {
         <span className={styles.total}>
           Totalt: <span>{total}</span>
         </span>
-        <button type="button" className="btn btn-primary btn-lg" onClick={() => console.log("kjøp", order)}>
+        <button type="button" className="btn btn-primary btn-lg" onClick={onSubmit}>
           Kjøp
         </button>{" "}
         <button type="button" className="btn btn-outline-secondary" onClick={reset}>

frontend/src/features/register/createOrder.graphql

@@ -0,0 +1,26 @@
+mutation CreateOrder($customerId: ID!, $orderLines:[OrderLineInput!]!) {
+  createOrder(customerId: $customerId, orderLines: $orderLines) {
+    ... on CreateOrderSuccess {
+      order {
+        id
+        customer {
+          id
+        }
+        orderSum
+      }
+    }
+    ... on InsufficientFunds {
+      error
+      message
+      amountLacking
+    }
+    ... on FormErrors {
+      error
+      message
+      fields {
+        field
+        message
+      }
+    }
+  }
+}

frontend/src/features/register/useRegister.ts

@@ -1,7 +1,8 @@
+import { useQuery } from "@apollo/client";
 import { parseISO, subDays } from "date-fns";
 import { useState } from "react";
 
-import { useAllProductsQuery, useAllUsersQuery, User, Product } from "../../types";
+import { User, Product, AllProductsDocument, AllUsersDocument } from "../../types";
 
 const activeLimitDays = 365 / 2;
 
@@ -15,8 +16,8 @@ type useRegisterType = {
 
 export const useRegister = (): useRegisterType => {
   const [showAll, setShowAll] = useState(false);
-  const { data, loading } = useAllProductsQuery({ variables: { active: true } });
-  const { data: usersData, loading: usersLoading } = useAllUsersQuery();
+  const { data, loading } = useQuery(AllProductsDocument, { variables: { active: true } });
+  const { data: usersData, loading: usersLoading } = useQuery(AllUsersDocument);
 
   const allUsers = usersData?.allUsers || [];
   const users = showAll