Skip to content

Commit

Permalink
Merge pull request #6 from dylants/list_books
Browse files Browse the repository at this point in the history
feat: list books
  • Loading branch information
dylants authored Jan 19, 2024
2 parents 774a680 + 6f717ac commit 15dc1fe
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 8 deletions.
6 changes: 4 additions & 2 deletions src/app/add/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,10 @@ export default function AddBookPage() {
...book,
publishedDate: new Date(book.publishedDate),
});
// reset();
// setLookupBook(null);
reset();
setLookupBook(null);

// TODO add success
};

const onLookup = async () => {
Expand Down
31 changes: 31 additions & 0 deletions src/app/list/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
"use client";

import { useCallback, useEffect, useState } from "react";
import { Book as BookType } from "@/types/Book";
import { getBooks } from "@/lib/actions";
import Book from "@/components/Book";

export default function ListPage() {
const [books, setBooks] = useState<Array<BookType>>([]);

const loadBooks = useCallback(async () => {
const loadedBooks = await getBooks();
setBooks(loadedBooks);
}, [setBooks]);

useEffect(() => {
loadBooks();
}, [loadBooks]);

return (
<>
<h1 className="text-2xl text-customPalette-500 my-4">Books</h1>
<hr className="mt-4 mb-8 border-customPalette-300" />
<div className="flex flex-col gap-8">
{books.map((book) => (
<Book key={book.isbn} book={book} />
))}
</div>
</>
);
}
47 changes: 42 additions & 5 deletions src/components/Book.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,52 @@
import { Book as BookType } from "@/types/Book";
import Image from "next/image";

export default function Book({ book }: { book: BookType }) {
function BookKey({
book,
fieldName,
}: {
book: BookType;
fieldName: keyof BookType;
}) {
let fieldNameToDisplay: string = fieldName;
let fieldToDisplay = book[fieldName]?.toString();
if (fieldName === "publishedDate") {
fieldNameToDisplay = "Published Date";
fieldToDisplay = book[fieldName]?.toLocaleDateString?.();
} else if (fieldName === "isbn") {
fieldNameToDisplay = "ISBN";
}

return (
<div>
<div>ISBN: {book.isbn}</div>
<div>Title: {book.title}</div>
<div>Author: {book.author}</div>
{book.imageUrl && (
<span className="font-bold mr-1 capitalize">{fieldNameToDisplay}:</span>
{fieldToDisplay}
</div>
);
}

export default function Book({ book }: { book: BookType }) {
return (
<div className="flex gap-4">
{book.imageUrl ? (
<Image alt={book.title} src={book.imageUrl} width={128} height={192} />
) : (
<div className="border rounded-sm border-customPalette-300 w-[128px] h-[192px] flex justify-center items-center text-slate-900">
No Image
</div>
)}
<div className="flex flex-col justify-between text-customPalette-500">
<div>
<div className="text-xl font-bold mb-2">{book.title}</div>
</div>
<div>
<BookKey book={book} fieldName="isbn" />
<BookKey book={book} fieldName="author" />
<BookKey book={book} fieldName="genre" />
<BookKey book={book} fieldName="publisher" />
<BookKey book={book} fieldName="publishedDate" />
</div>
</div>
</div>
);
}
1 change: 1 addition & 0 deletions src/components/SideNav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export default function SideNav() {
<nav className="flex flex-col w-[140px] bg-customPalette-200 text-customPalette-500">
<NavElement path="/search" text="Search" />
<NavElement path="/add" text="Add" />
<NavElement path="/list" text="List" />
</nav>
);
}
3 changes: 2 additions & 1 deletion src/components/useIsbnSearch.ts
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,8 @@ export default function useIsbnSearch() {
? imageLinks.thumbnail.replaceAll("http://", "https://")
: undefined,
isbn,
publishedDate: publishedDate ?? new Date(),
// TODO what to do when there's no published date?
publishedDate: publishedDate ? new Date(publishedDate) : new Date(),
publisher,
title,
};
Expand Down

0 comments on commit 15dc1fe

Please sign in to comment.