/
index.tsx
93 lines (84 loc) · 2.14 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import { Box, Typography } from "@mui/material";
import React, { useEffect, useState } from "react";
import api from "../../../api/api";
import Cards from "../Cards";
interface BookProps {
id: number;
src: string;
title: string;
subtitle: string;
author: string;
timeTakenToRead: number;
numberOfReads: string;
status: string;
complete: number;
synopsis: string;
whoIsItFor: string;
aboutAuthor: string;
}
interface props {
librarybu?: boolean;
finished?: boolean;
readAgain?: boolean;
checkComplete: number;
}
function CardsList(props: props) {
const [books, setBooks] = useState<BookProps[]>([]);
const getBooks = async () => {
const response = await api.get("http://localhost:3001/books");
const data = response.data;
setBooks(data);
};
useEffect(() => {
getBooks();
});
var operCheck =
props.checkComplete === 0
? { 0: 0, 31: 31, 100: 100 }
: props.checkComplete === 31
? { 31: 31 }
: { 100: 100 };
var emptyBooks =
books.filter((item) => item.complete === props.checkComplete).length ===
0 ? (
<Typography variant="h4" fontWeight={700}>
No Books to Show
</Typography>
) : null;
return (
<Box
display={"flex"}
width="90%"
// padding={"10% 0%"}
// paddingLeft={"5%"}
height="auto"
flexWrap={"wrap"}
justifyContent={"center"}
>
{emptyBooks}
{books
.filter((item) => item.complete in operCheck)
.map((card, key) => {
return (
<Box width={"30%"} paddingTop={"25px"}>
<Cards
id={card.id}
image={card.src}
bookName={card.title}
authorName={card.author}
progress={true}
librarybu={props.librarybu}
finished={props.finished}
readAgain={props.readAgain}
progressValues={card.complete}
key={key}
read={card.numberOfReads}
time={card.timeTakenToRead}
></Cards>
</Box>
);
})}
</Box>
);
}
export default CardsList;