refactor bookstore-client

Author: mtanzim

bookstore-client/src/api.ts

@@ -18,3 +18,23 @@ export async function fetchBooks(): Promise<Book[]> {
   const books = await res.json();
   return books || [];
 }
+
+export interface CheckoutFormValues {
+  address: string;
+  cardNum: string;
+  code: string;
+  email: string;
+  phone: string;
+}
+
+export interface CheckoutDTO {
+  items: CartItem[];
+  cartUserInformation: CheckoutFormValues;
+}
+
+export async function postCart(body: CheckoutDTO) {
+  return fetch(`${BASE_API}/api/checkout`, {
+    method: "POST",
+    body: JSON.stringify(body),
+  });
+}

bookstore-client/src/components/Checkout.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useForm } from "react-hook-form";
-import { CheckoutFormValues } from "./interfaces";
+import { CheckoutFormValues } from "../api";
 
 interface Props {
   onSubmit: (data: CheckoutFormValues) => Promise<void>;

bookstore-client/src/components/Store.tsx

@@ -2,8 +2,14 @@ import React, { useEffect, useState } from "react";
 import { BookComponent } from "./Book";
 import { Cart } from "./CartItem";
 import { Checkout } from "./Checkout";
-import { CheckoutFormValues, CheckoutDTO } from "./interfaces";
-import { fetchBooks, Book, CartItem } from "../api";
+import {
+  fetchBooks,
+  Book,
+  CartItem,
+  postCart,
+  CheckoutFormValues,
+  CheckoutDTO,
+} from "../api";
 
 export function Store() {
   const [books, setBooks] = useState(new Map<string, Book>());
@@ -25,11 +31,7 @@ export function Store() {
         items: cart,
         cartUserInformation: values,
       };
-      console.log(body);
-      const res = await fetch("http://localhost:8080/api/checkout", {
-        method: "POST",
-        body: JSON.stringify(body),
-      });
+      const res = await postCart(body);
       if (res.status == 200) {
         alert("Order requested!");
         getBooks();