Refactor: BookList and include a utility function to get category name

ClaytonSiby · Oct 11, 2023 · 4af58ab · 4af58ab
1 parent 00ef9b2
commit 4af58ab
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 10 deletions.
diff --git a/src/components/BookCard/index.tsx b/src/components/BookCard/index.tsx
@@ -1,25 +1,29 @@
 import React from 'react'
-import { useAppDispatch } from '../../app/hooks'
+import { useAppDispatch, useAppSelector } from '../../app/hooks'
 import { deleteBook } from '../../features/book/bookSlice'
-import formatDateString from '../../utils/formatDateString'
+import {
+  formatDateString,
+  getFirstBookCategoryName,
+} from '../../utils/formatDateString'
 import UpdateBookModal from '../UpdateBookModal'
 
 interface BookProps {
   bookId: string
   bookTitle: string
   bookAuthor: string
-  bookCategory: string[]
+  bookCategories: string[]
   bookUpdatedAt: string
 }
 
 const BookCard: React.FC<BookProps> = ({
   bookId,
   bookTitle,
   bookAuthor,
-  bookCategory,
+  bookCategories,
   bookUpdatedAt,
 }) => {
   const dispatch = useAppDispatch()
+  const categories = useAppSelector((state) => state.categories.categoriesData)
 
   const handleDeleteBook = async () => {
     try {
@@ -39,15 +43,19 @@ const BookCard: React.FC<BookProps> = ({
               <h5 className="card-title text-secondary">{bookTitle}</h5>
               <p className="card-text">
                 <small className="text-body-secondary">
-                  Author: {bookAuthor}
+                  <span className="text-info">Author: </span> {bookAuthor}
                 </small>
               </p>
               <p className="text-secondary-emphasis">
-                Category: {bookCategory}
+                <small>
+                  <span className="text-info">Category:</span>
+                  {getFirstBookCategoryName(bookCategories, categories)}
+                </small>
               </p>
               <p className="card-text">
                 <small className="text-secondary-emphasis">
-                  Last updated: {formatDateString(bookUpdatedAt)}
+                  <span className="text-info">Last updated: </span>
+                  {formatDateString(bookUpdatedAt)}
                 </small>
               </p>
               <div className="row">

diff --git a/src/components/BookList/index.tsx b/src/components/BookList/index.tsx
@@ -35,7 +35,7 @@ const BookList: React.FC = () => {
                 key={book.id}
                 bookAuthor={book.author}
                 bookTitle={book.title}
-                bookCategory={book.categories}
+                bookCategories={book.categories}
                 bookUpdatedAt={book.updated_at}
                 bookId={book.id}
               />

diff --git a/src/utils/formatDateString.ts b/src/utils/formatDateString.ts
@@ -1,4 +1,6 @@
-const formatDateString = (dateString: string) => {
+import { Category } from '../features/category/categorySlice'
+
+export const formatDateString = (dateString: string) => {
   const date = new Date(dateString)
   const options: Intl.DateTimeFormatOptions = {
     year: 'numeric',
@@ -11,4 +13,12 @@ const formatDateString = (dateString: string) => {
   return date.toLocaleString('en-US', options)
 }
 
-export default formatDateString
+export const getFirstBookCategoryName = (
+  bookCategories: string[],
+  availableCategories: Category[]
+) => {
+  const firstCategory = availableCategories.filter(
+    (category: Category) => bookCategories[0] === category.id
+  )[0]
+  return firstCategory.name ? firstCategory.name : 'Uncategorized'
+}