Display search api results

Mansive · Dec 21, 2023 · f187929 · f187929
1 parent 6dc9a74
commit f187929
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 9 deletions.
diff --git a/src/app/api/search/route.tsx b/src/app/api/search/route.tsx
@@ -15,5 +15,5 @@ export async function GET(request: NextRequest) {
     fuzziness: 0,
   });
 
-  return NextResponse.json({ results });
+  return NextResponse.json(results);
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -6,7 +6,7 @@ import SearchBar from "@/components/SearchBar";
 import SearchResultList from "@/components/SearchResultList";
 import Spinner from "@/components/Spinner";
 
-import { Book, BOOKS } from "@/data/book-data";
+import { Book } from "@/data/book-data";
 
 import styles from "./page.module.css";
 
@@ -22,11 +22,13 @@ export default function Home() {
 
     setStatus("loading");
 
-    setTimeout(() => {
-      const nextSearchResults = BOOKS.filter(({ title }) =>
-        title.includes(searchTerm)
-      );
-      setSearchResults(nextSearchResults);
+    setTimeout(async () => {
+      // const nextSearchResults = BOOKS.filter(({ title }) =>
+      //   title.includes(searchTerm)
+      // );
+      const response = await fetch("/api/search?query=" + searchTerm);
+      const data = await response.json();
+      setSearchResults(data["records"]);
       setStatus("success");
     }, 1500);
   };

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -6,7 +6,7 @@ type CardInterface = {
   id: string;
   title: string;
   sources: string[];
-  size: number;
+  size: string;
   extension: string;
 };
 

diff --git a/src/components/SearchResultList/SearchResultList.tsx b/src/components/SearchResultList/SearchResultList.tsx
@@ -31,6 +31,13 @@ function SearchResultList({ searchResults }: SearchResultListInterface) {
     };
   }, []);
 
+  // https://stackoverflow.com/a/48764436
+  function round(num: number, decimalPlaces = 0) {
+    var p = Math.pow(10, decimalPlaces);
+    var n = num * p * (1 + Number.EPSILON);
+    return Math.round(n) / p;
+  }
+
   return (
     <div ref={listRef} className={styles.searchResultList}>
       {searchResults?.map((book) => (
@@ -39,7 +46,7 @@ function SearchResultList({ searchResults }: SearchResultListInterface) {
           id={book.id}
           title={book.title}
           sources={book.sources}
-          size={book.size}
+          size={round(book.size / 1048576, 2).toFixed(1)} // to mebibytes
           extension={book.extension}
         />
       ))}