commit passing props as id to fetch book details on backend

src/layouts/CheckoutPage/BookCheckoutPage.tsx

@@ -0,0 +1,93 @@
+/* eslint-disable no-console */
+/* eslint-disable no-underscore-dangle */
+
+import { Container, Grid, Text } from '@mantine/core';
+import Image from 'next/image';
+import React, { useEffect, useState } from 'react';
+
+import type BookModel from '@/models/BookModel';
+import SpinnerLoading from '@/utils/SpinnerLoading';
+
+type Props = {
+  book_id: string;
+};
+
+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 (!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,
+      };
+
+      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.
+
+  if (isLoading) {
+    return (
+      <div>
+        <SpinnerLoading />
+      </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>
+        <Grid.Col span={4}>3</Grid.Col>
+      </Grid>
+      <Container size={'xl'} p={20}>
+        <Grid>
+          <Grid.Col span={3}>
+            <Image src={book?.img} alt="ImageTable" height="300" width="200" />
+          </Grid.Col>
+          <Grid.Col span={7} pl={150}>
+            <Text fw={700}>{book?.title}</Text>
+            <Text c="blue">{book?.author}</Text>
+            {book?.description}
+          </Grid.Col>
+          <Grid.Col span={2}>____</Grid.Col>
+        </Grid>
+      </Container>
+    </div>
+  );
+}

src/pages/_app.tsx

@@ -3,6 +3,7 @@ import '../styles/global.css';
 import { MantineProvider } from '@mantine/core';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
+import Script from 'next/script';
 
 export default function App(props: AppProps) {
   const { Component, pageProps } = props;
@@ -21,13 +22,12 @@ export default function App(props: AppProps) {
           integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
           crossorigin="anonymous"
         ></link>
-        <script
-          src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
-          integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
-          crossorigin="anonymous"
-        ></script>
       </Head>
-
+      <Script
+        src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
+        crossorigin="anonymous"
+      />
       <MantineProvider
         withGlobalStyles
         withNormalizeCSS

src/pages/checkout/[id].tsx

@@ -0,0 +1,17 @@
+import { useRouter } from 'next/router';
+
+import BookCheckoutPage from '@/layouts/CheckoutPage/BookCheckoutPage';
+import Footer from '@/layouts/NavbarAndFooter/Footer';
+import Navbar from '@/layouts/NavbarAndFooter/Navbar';
+
+export default function BookCheckoutDetails() {
+  const router = useRouter();
+  const { id } = router.query;
+  return (
+    <div>
+      <Navbar />
+      <BookCheckoutPage book_id={typeof id === 'string' ? id : ''} />
+      <Footer />
+    </div>
+  );
+}

src/pages/search.tsx → src/pages/search/index.tsx

@@ -1,8 +1,11 @@
+/* eslint-disable no-empty-pattern */
+import React from 'react';
+
 import Footer from '@/layouts/NavbarAndFooter/Footer';
 import Navbar from '@/layouts/NavbarAndFooter/Navbar';
 import SearchBooksPage from '@/layouts/SearchBooksPage/SearchBooksPage';
 
-export default function search({}: props) {
+export default function index() {
   return (
     <div>
       <Navbar />