diff --git a/package.json b/package.json
index 2186e81..98e1025 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
"react-router": "^6.10.0",
"react-router-dom": "^6.10.0",
"react-scripts": "5.0.1",
+ "react-simple-star-rating": "^5.1.7",
"styled-components": "^5.3.9",
"web-vitals": "^2.1.4"
},
diff --git a/src/components/Library/Library.jsx b/src/components/Library/Library.jsx
index 9e4089b..8a33933 100644
--- a/src/components/Library/Library.jsx
+++ b/src/components/Library/Library.jsx
@@ -1,45 +1,46 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import { alpha } from "@mui/material/styles";
-import { useTheme } from "@mui/material/styles";
-import Box from "@mui/material/Box";
-import Collapse from "@mui/material/Collapse";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell, { tableCellClasses } from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableFooter from "@mui/material/TableFooter";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import TablePagination from "@mui/material/TablePagination";
-import Paper from "@mui/material/Paper";
-import IconButton from "@mui/material/IconButton";
-import FirstPageIcon from "@mui/icons-material/FirstPage";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
-import LastPageIcon from "@mui/icons-material/LastPage";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
-import TableSortLabel from "@mui/material/TableSortLabel";
-import Toolbar from "@mui/material/Toolbar";
-import Typography from "@mui/material/Typography";
-import Checkbox from "@mui/material/Checkbox";
-import Tooltip from "@mui/material/Tooltip";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Switch from "@mui/material/Switch";
-import DeleteIcon from "@mui/icons-material/Delete";
-import FilterListIcon from "@mui/icons-material/FilterList";
-import { visuallyHidden } from "@mui/utils";
-import AddIcon from "@mui/icons-material/Add";
-import RemoveIcon from "@mui/icons-material/Remove";
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { alpha } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Collapse from '@mui/material/Collapse';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell, { tableCellClasses } from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableFooter from '@mui/material/TableFooter';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import TablePagination from '@mui/material/TablePagination';
+import Paper from '@mui/material/Paper';
+import IconButton from '@mui/material/IconButton';
+import FirstPageIcon from '@mui/icons-material/FirstPage';
+import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
+import LastPageIcon from '@mui/icons-material/LastPage';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Checkbox from '@mui/material/Checkbox';
+import Tooltip from '@mui/material/Tooltip';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import DeleteIcon from '@mui/icons-material/Delete';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import { visuallyHidden } from '@mui/utils';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
/* import { TableVirtuoso } from 'react-virtuoso'; */
-import "./Library.css";
-import Classes from "./Library.module.css";
-import rows from "./data.json";
-import { Button, Modal, TextField } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
-import Snackbar, { SnackbarOrigin } from "@mui/material/Snackbar";
-import ISBN from "isbn-validate";
+import './Library.css';
+import Classes from './Library.module.css';
+import rows from './data.json';
+import { Button, Modal, TextField } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import Snackbar, { SnackbarOrigin } from '@mui/material/Snackbar';
+import ISBN from 'isbn-validate';
+import { Rating } from 'react-simple-star-rating';
// function createData(name, calories, fat, carbs, protein) {
// return { name, calories, fat, carbs, protein };
// }
@@ -54,261 +55,378 @@ import ISBN from "isbn-validate";
// ];
export default function Library() {
- const [myRows, setMyRows] = useState(rows);
- const [showSnackBar, handleSnackBar] = useState(false);
- const [removedItemName, setRemovedItemName] = useState("");
+ const [myRows, setMyRows] = useState(rows);
+ const [showSnackBar, handleSnackBar] = useState(false);
+ const [removedItemName, setRemovedItemName] = useState('');
- //Modal states
- const [showModal, handleModalBox] = useState(false);
- const [name, setName] = useState("");
- const [author, setAuthor] = useState("");
- const [publisher, setPublisher] = useState("");
- const [isbn, setIsbn] = useState("");
- const [year, setYear] = useState("");
- const [edition, setEdition] = useState("");
- const [error, setError] = useState(false);
+ //Modal states
+ const [showModal, handleModalBox] = useState(false);
+ const [name, setName] = useState('');
+ const [author, setAuthor] = useState('');
+ const [publisher, setPublisher] = useState('');
+ const [isbn, setIsbn] = useState('');
+ const [year, setYear] = useState('');
+ const [edition, setEdition] = useState('');
+ const [error, setError] = useState(false);
- //This state helps us for two way in input filed
- const[isAdded,handleIsAdded] = useState(false);
- const removeBookByName = (row) => {
- setRemovedItemName("removed " + row.name + " successfully");
- myRows.splice(myRows.indexOf(row), 1);
+ //Book review modal states
+ const [showReviewModal, handleReviewModal] = useState(false);
+ const [isReviewAdded, handleReviewAdded] = useState(false);
+ const [bookName, setBookName] = useState('');
+ const [bookReview, setBookReview] = useState('');
+ const [rating, setRating] = useState(0);
- setMyRows([...myRows]);
- handleSnackBar(true);
- };
- const addItemToTable = (e) => {
- e.preventDefault();
-
- console.log(name,author,publisher,isbn,year,edition);
- let bookObj = {name,author,publisher,isbn,year,edition};
- myRows.push(bookObj);
- setMyRows([...myRows]);
- handleIsAdded(true);
-
-};
+ //This state helps us for two way in input filed
+ const [isAdded, handleIsAdded] = useState(false);
+ const removeBookByName = (row) => {
+ setRemovedItemName('removed ' + row.name + ' successfully');
+ myRows.splice(myRows.indexOf(row), 1);
- const closeSnackBar = () => {
- handleSnackBar(false);
- handleIsAdded(false);
- };
- const action = (
-
-
-
-
-
- );
+ setMyRows([...myRows]);
+ handleSnackBar(true);
+ };
+ const addItemToTable = (e) => {
+ e.preventDefault();
- const style = {
- position: "absolute",
- top: "50%",
- left: "50%",
- transform: "translate(-50%, -50%)",
- width: 400,
- bgcolor: "background.paper",
- border: "2px solid #000",
- boxShadow: 24,
- p: 4,
- };
- //Check if publishing year is a four digit number
- const handleYearChange = (event) => {
- const value = event.target.value;
- setYear(value);
+ console.log(name, author, publisher, isbn, year, edition);
+ let bookObj = { name, author, publisher, isbn, year, edition, reviews: [] };
+ setMyRows([...myRows, bookObj]);
+ handleIsAdded(true);
+ };
- if (value.length === 4 && !isNaN(value)) {
- setError(false);
- } else {
- setError(true);
- }
- };
+ const closeSnackBar = () => {
+ handleSnackBar(false);
+ handleIsAdded(false);
+ handleReviewAdded(false);
+ };
+ const action = (
+
+
+
+
+
+ );
- //Check if ISBN is valid
- const handleISBNChange = (event) => {
- const value = event.target.value;
- setIsbn(value);
+ const style = {
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ transform: 'translate(-50%, -50%)',
+ width: 400,
+ bgcolor: 'background.paper',
+ border: '2px solid #000',
+ boxShadow: 24,
+ p: 4,
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ };
- if (ISBN.Validate(value)) {
- setError(false);
- } else {
- setError(true);
- }
- };
+ //Check if publishing year is a four digit number
+ const handleYearChange = (event) => {
+ const value = event.target.value;
+ setYear(value);
+ if (value.length === 4 && !isNaN(value)) {
+ setError(false);
+ } else {
+ setError(true);
+ }
+ };
- return (
- <>
-
+ //Check if ISBN is valid
+ const handleISBNChange = (event) => {
+ const value = event.target.value;
+ setIsbn(value);
-
- {
- handleModalBox(false);
- }}
- >
-
-
- Add Item to table
-
-
-
-
-
-
-
-
- Action
- Title
- Author
- Category
- Publisher
- ISBN
- Year
- Edition
-
-
-
- {myRows.map((row) => (
-
-
- {myRows.indexOf(row) === myRows.length - 1 ? (
- {
- handleModalBox(true);
-
- }}
- />
- ) : (
- <>
- )}
+ //adds the review for each book
+ const handleBookReview = () => {
+ const updatedRows = myRows.map((book) => {
+ if (book.name === bookName) {
+ return {
+ ...book,
+ reviews: [
+ ...book.reviews,
+ { starRating: rating, textReview: bookReview },
+ ],
+ };
+ } else if (book.name !== bookName) {
+ return { ...book };
+ }
+ });
+ setMyRows([...updatedRows]);
+ handleReviewAdded(true);
+ setBookReview('');
+ setRating(0);
+ };
- {
- removeBookByName(row);
- }}
- />
-
-
- {row.name}
-
- {row.author}
- {row.category}
- {row.publisher}
- {row.isbn}
- {row.year}
- {row.edition}
-
- ))}
-
-
-
-
- );
+ const onPointerMove = (value, index) => {
+ setRating(value);
+ };
+
+ return (
+ <>
+
+
+
+ //book review modal start//
+ {
+ handleReviewModal(false);
+ }}>
+
+
+ Review for {bookName}
+
+
+
+
+ {
+ setBookReview(e.target.value);
+ }}
+ />
+
+ {isReviewAdded ? (
+ <>
+
+
+ ) : (
+ <>
+
+
+ )}
+
+
+ //book review modal end//
+ {
+ handleModalBox(false);
+ }}>
+
+
+ Add Item to table
+
+
+
+
+
+
+
+
+ Action
+ Title
+ Author
+ Category
+ Publisher
+ ISBN
+ Year
+ Edition
+ Review
+
+
+
+ {myRows.map((row) => (
+
+
+ {myRows.indexOf(row) === myRows.length - 1 ? (
+ {
+ handleModalBox(true);
+ }}
+ />
+ ) : (
+ <>
+ )}
+
+ {
+ removeBookByName(row);
+ }}
+ />
+
+
+ {row.name}
+
+ {row.author}
+ {row.category}
+ {row.publisher}
+ {row.isbn}
+ {row.year}
+ {row.edition}
+
+
+
+
+
+ ))}
+
+
+
+
+ );
}
diff --git a/src/components/Library/data.json b/src/components/Library/data.json
index 6e0fbd9..d0082fe 100644
--- a/src/components/Library/data.json
+++ b/src/components/Library/data.json
@@ -1,45 +1,47 @@
[
- {"name":"Frozen yoghurt",
- "author":159,
- "publisher":6.0,
- "isbn":24,
- "year":4.0,
- "edition":"first Edition"
-},
- {
- "name":"Ice cream sandwich",
- "author":237,
- "publisher":9.0,
- "isbn":37,
- "year":4.3,
- "edition":"Fourth Edition"
-
- },
- {
- "name":"Eclair",
- "author":262,
- "publisher":16.0,
- "isbn":24,
- "year":6.0,
- "edition":"Second Edition"
-
- },
- {
- "name":"Cupcake",
- "author":305,
- "publisher":6.7,
- "isbn":24,
- "year":6.0,
- "edition":"first Edition"
-
- },
- {
- "name":"Gingerbread",
- "author":260,
- "publisher":16.0,
- "isbn":24,
- "year":6.0,
- "edition":"first Edition"
-
- }
-]
\ No newline at end of file
+ {
+ "name": "Frozen yoghurt",
+ "author": 159,
+ "publisher": 6.0,
+ "isbn": 24,
+ "year": 4.0,
+ "edition": "first Edition",
+ "reviews": []
+ },
+ {
+ "name": "Ice cream sandwich",
+ "author": 237,
+ "publisher": 9.0,
+ "isbn": 37,
+ "year": 4.3,
+ "edition": "Fourth Edition",
+ "reviews": []
+ },
+ {
+ "name": "Eclair",
+ "author": 262,
+ "publisher": 16.0,
+ "isbn": 24,
+ "year": 6.0,
+ "edition": "Second Edition",
+ "reviews": []
+ },
+ {
+ "name": "Cupcake",
+ "author": 305,
+ "publisher": 6.7,
+ "isbn": 24,
+ "year": 6.0,
+ "edition": "first Edition",
+ "reviews": []
+ },
+ {
+ "name": "Gingerbread",
+ "author": 260,
+ "publisher": 16.0,
+ "isbn": 24,
+ "year": 6.0,
+ "edition": "first Edition",
+ "reviews": []
+ }
+]