✨ Add button to order from Item page

src/components/OrderForm.tsx

@@ -26,21 +26,19 @@ export const OrderForm = ({
 }: {
   title: string;
   onSubmit(data?: Order): Promise<{ type: "error" | "success"; msg: string }>;
-  data?: Order;
+  data: Partial<Order> & { date: Order["date"] };
   children: React.ReactNode;
 }): JSX.Element => {
-  const defaultValues = data
-    ? { ...data, date: toInputDate(data.date) }
-    : { date: toInputDate(new Date()), nb: 1 };
+  const defaultValues = { ...data, date: toInputDate(data.date) };
   const { register, handleSubmit, reset, setValue } = useForm<InputOrder>({
     defaultValues,
     shouldUseNativeValidation: true,
   });
   const [customer, setCustomer] = React.useState<Customer | null>(
-    data?.customer ?? null,
+    data.customer ?? null,
   );
   const [item, setItem] = React.useState<Item | NewItem | null>(
-    data?.item ?? { _id: null, title: data?.itemTitle ?? "" },
+    data.item ?? { _id: null, title: data.itemTitle ?? "" },
   );
   const utils = trpc.useUtils();
 

src/pages/item/[id].tsx

@@ -1,5 +1,6 @@
 import { faStar as emptyStar } from "@fortawesome/free-regular-svg-icons";
 import {
+  faBook,
   faCartPlus,
   faEdit,
   faSpinner,
@@ -132,11 +133,18 @@ const TitleWithButtons = ({ item }: { item: ItemWithCount }) => {
   return (
     <div className="flex items-center">
       <CardTitle className="mr-auto">{item.title}</CardTitle>
+      <LinkButton
+        href={`/order/new?item=${item._id}`}
+        title="Commander"
+        className="rounded-r-none px-md"
+      >
+        <FontAwesomeIcon icon={faBook} />
+      </LinkButton>
       <Button
         type="button"
         title={item.starred ? "Enlever des favoris" : "Ajouter aux favoris"}
         onClick={handleClick}
-        className="rounded-r-none px-md border-r border-primary-darkest"
+        className="rounded-none px-md border-primary-darkest"
       >
         <FontAwesomeIcon
           icon={

src/pages/order/[orderId].tsx

@@ -138,7 +138,7 @@ const UpdateOrder = () => {
     return null;
   }
   return (
-    <div className="2xl:([margin-left:10%] [margin-right:10%]) flex-1">
+    <div className="flex-1 max-w-6xl mx-auto">
       <Title>Modifier une commande</Title>
       <OrderLoader id={orderId} />
     </div>

src/pages/order/new.tsx

@@ -5,13 +5,17 @@ import { useRouter } from "next/router";
 import { toast } from "react-toastify";
 
 import { Button } from "@/components/Button";
+import { ErrorMessage } from "@/components/ErrorMessage";
 import { OrderForm } from "@/components/OrderForm";
 import { Title } from "@/components/Title";
 import type { Order } from "@/utils/order";
 import { trpc } from "@/utils/trpc";
 
-const NewOrder = (): JSX.Element => {
+const OrderBody = () => {
   const router = useRouter();
+  const rawId = router.query.item;
+  const id = typeof rawId === "string" ? rawId : "";
+  const result = trpc.searchItem.useQuery(id, { enabled: id !== "" });
   const mutation = trpc.newOrder.useMutation({
     onSuccess(data) {
       if (data.type === "success") {
@@ -25,19 +29,37 @@ const NewOrder = (): JSX.Element => {
       toast.error("Impossible d'ajouter la commande");
     },
   });
+
   const submit = async (data: Order) => {
     const order = { ...data, date: data.date.toISOString() };
     return await mutation.mutateAsync(order);
   };
+  if (result.status === "error") {
+    return <ErrorMessage />;
+  }
+  if (result.status === "loading" && id) {
+    return <div>Chargement…</div>;
+  }
+  const data: React.ComponentProps<typeof OrderForm>["data"] = {
+    item: result.data || null,
+    nb: 1,
+    date: new Date(),
+  };
+  return (
+    <OrderForm title="Nouvelle commande" onSubmit={submit} data={data}>
+      <Button type="submit" className="px-md">
+        <FontAwesomeIcon icon={faPlus} className="mr-sm" />
+        Ajouter
+      </Button>
+    </OrderForm>
+  );
+};
+
+const NewOrder = (): JSX.Element => {
   return (
-    <div className="[margin-left:10%] [margin-right:10%] flex-1">
+    <div className="flex-1 max-w-6xl mx-auto">
       <Title>Nouvelle commande</Title>
-      <OrderForm title="Nouvelle commande" onSubmit={submit}>
-        <Button type="submit" className="px-md">
-          <FontAwesomeIcon icon={faPlus} className="mr-sm" />
-          Ajouter
-        </Button>
-      </OrderForm>
+      <OrderBody />
     </div>
   );
 };