BookCard component and BookList page has been updated.

day-15/bs-store/src/components/book/BookCard.js

@@ -36,31 +36,30 @@ export default function BookCard({book}) {
   return (
     <Card sx={{ maxWidth: 345 }}>
       <CardHeader
-        avatar={
-          <Avatar sx={{ bgcolor: red[500] }} aria-label="recipe">
-            {book.title.substring(0,1)}
-          </Avatar>
-        }
         action={
           <IconButton aria-label="settings">
             <MoreVertIcon />
           </IconButton>
         }
         title={book.title}
-        subheader="September 14, 2016"
+        subheader={book.publisher}
+        sx={{minHeight: 80}}
       />
       <CardMedia
         component="img"
         height="194"
         image={`/books/${book.id%120}.jpg`}
         alt="Paella dish"
+        sx={{ objectFit: "contain" }}
       />
-      <CardContent>
-        <Typography variant="body2" color="text.secondary">
-          This impressive paella is a perfect party dish and a fun meal to cook
-          together with your guests. Add 1 cup of frozen peas along with the mussels,
-          if you like.
-        </Typography>
+      <CardContent sx={{minHeight: 80}}>
+      {book.bookAuthors.map((authors) => {
+          return (
+            <Typography variant="body2" color="text.secondary" align="center" justifySelf={"center"}>
+              {authors.firstName} {authors.lastName}
+            </Typography>
+          );
+        })}
       </CardContent>
       <CardActions disableSpacing>
         <IconButton aria-label="add to favorites">
@@ -80,31 +79,8 @@ export default function BookCard({book}) {
       </CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
-          <Typography paragraph>Method:</Typography>
-          <Typography paragraph>
-            Heat 1/2 cup of the broth in a pot until simmering, add saffron and set
-            aside for 10 minutes.
-          </Typography>
-          <Typography paragraph>
-            Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over
-            medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring
-            occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a
-            large plate and set aside, leaving chicken and chorizo in the pan. Add
-            pimentón, bay leaves, garlic, tomatoes, onion, salt and pepper, and cook,
-            stirring often until thickened and fragrant, about 10 minutes. Add
-            saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
-          </Typography>
-          <Typography paragraph>
-            Add rice and stir very gently to distribute. Top with artichokes and
-            peppers, and cook without stirring, until most of the liquid is absorbed,
-            15 to 18 minutes. Reduce heat to medium-low, add reserved shrimp and
-            mussels, tucking them down into the rice, and cook again without
-            stirring, until mussels have opened and rice is just tender, 5 to 7
-            minutes more. (Discard any mussels that don&apos;t open.)
-          </Typography>
-          <Typography>
-            Set aside off of the heat to let rest for 10 minutes, and then serve.
-          </Typography>
+        <Typography paragraph>{book.category.categoryName}</Typography>
+          <Typography paragraph>{book.category.description}</Typography>
         </CardContent>
       </Collapse>
     </Card>

day-15/bs-store/src/components/book/BookCardList.js

@@ -1,15 +1,22 @@
 import Grid from "@mui/material/Grid";
-import React from "react";
-import { useSelector } from "react-redux";
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getAllBooks } from "../../store/actions/bookActions";
 import BookCard from "./BookCard";
 
 export default function BookCardList() {
   const { books } = useSelector((state) => state.book);
+  const bookDispatch = useDispatch();
+
+  useEffect(() => {
+    bookDispatch(getAllBooks());
+  }, []);
+
   return (
     <div>
-      <Grid sx={{mt:3}} container spacing={3}>
+      <Grid sx={{ mt: 3, padding: 2 }} container spacing={3}>
         {books?.map((book) => (
-          <Grid spacing={3} item xs={6} md={4} lg={3}>
+          <Grid spacing={3} item xs={8} md={5} lg={4}>
             <BookCard key={book.id} book={book} />
           </Grid>
         ))}