Merge pull request #1 from GreenPeece/checkout-system

fix routing by using length and conditional checks
GreenPeece · Jan 20, 2023 · 8b8a256 · 8b8a256
2 parents fe5ad78 + 2fa808d
commit 8b8a256
Showing 1 changed file with 44 additions and 40 deletions.
diff --git a/src/layouts/CheckoutPage/BookCheckoutPage.tsx b/src/layouts/CheckoutPage/BookCheckoutPage.tsx
@@ -16,40 +16,40 @@ export default function BookCheckoutPage({ book_id }: Props) {
   const [book, setBook] = useState<BookModel>();
   const [isLoading, setIsLoading] = useState(true);
   const [httpError, setHttpError] = useState(null);
-
   useEffect(() => {
-    const fetchBooks = async () => {
-      const baseUrl: string = `http://localhost:8080/api/books/${book_id}/hello`;
-
-      const response = await fetch(baseUrl);
+    if (book_id !== undefined && book_id.length > 0) {
+      console.log(`The value of bookid: ${book_id}`);
+      const fetchBooks = async () => {
+        const baseUrl: string = `http://localhost:8080/api/books/${book_id}`;
+        const response = await fetch(baseUrl);
+        if (!response.ok) {
+          throw new Error('Something went wrong!');
+        }
+        const responseJson = await response.json();
 
-      if (!response.ok) {
-        throw new Error('Something went wrong!');
-      }
-      const responseJson = await response.json();
+        const loadedBooks: BookModel = {
+          id: responseJson.id,
+          title: responseJson.title,
+          author: responseJson.author,
+          description: responseJson.description,
+          copies: responseJson.copies,
+          copiesAvailable: responseJson.copiesAvailable,
+          category: responseJson.category,
+          img: responseJson.img,
+        };
 
-      const loadedBooks: BookModel = {
-        id: responseJson.id,
-        title: responseJson.title,
-        author: responseJson.author,
-        description: responseJson.description,
-        copies: responseJson.copies,
-        copiesAvailable: responseJson.copiesAvailable,
-        category: responseJson.category,
-        img: responseJson.img,
+        setBook(loadedBooks);
+        setIsLoading(false);
       };
 
-      setBook(loadedBooks);
-      setIsLoading(false);
-    };
-
-    // catch if there are any errors in async
-    fetchBooks().catch((error: any) => {
-      setIsLoading(false);
-      setHttpError(error.message);
-    });
-    window.scrollTo(0, 0);
-  }, []); // each time the current page changes, we wanted to recall this hook.
+      // catch if there are any errors in async
+      fetchBooks().catch((error: any) => {
+        setIsLoading(false);
+        setHttpError(error.message);
+      });
+      window.scrollTo(0, 0);
+    }
+  }, [book_id, httpError]); // each time the current page changes, we wanted to recall this hook.
 
   if (isLoading) {
     return (
@@ -58,18 +58,15 @@ export default function BookCheckoutPage({ book_id }: Props) {
       </div>
     );
   }
-
-  if (httpError) {
-    return (
-      <div>
-        <p>{httpError}</p>
-      </div>
-    );
-  }
-
+  // if (httpError) {
+  //   return (
+  //     <div>
+  //       <p>{httpError}</p>
+  //     </div>
+  //   );
+  // }
   return (
     <div>
-      <h1> Value of data is {book_id}</h1>
       <Grid gutter={5} gutterXs="md" gutterMd="xl" gutterXl={50}>
         <Grid.Col span={4}>1</Grid.Col>
         <Grid.Col span={4}>2</Grid.Col>
@@ -78,7 +75,14 @@ export default function BookCheckoutPage({ book_id }: Props) {
       <Container size={'xl'} p={20}>
         <Grid>
           <Grid.Col span={3}>
-            <Image src={book?.img} alt="ImageTable" height="300" width="200" />
+            {book?.img !== undefined ? (
+              <Image
+                src={book?.img}
+                alt="ImageTable"
+                height="300"
+                width="200"
+              />
+            ) : null}
           </Grid.Col>
           <Grid.Col span={7} pl={150}>
             <Text fw={700}>{book?.title}</Text>