3 |
4 | {numReviews ?? 0} Reviews
22 | )} 23 | 24 | ); 25 | }; 26 | 27 | export default Review; 28 | -------------------------------------------------------------------------------- /Client/src/components/Reviews.jsx: -------------------------------------------------------------------------------- 1 | import Alert from 'react-bootstrap/Alert'; 2 | import ListGroup from 'react-bootstrap/ListGroup'; 3 | import Form from 'react-bootstrap/Form'; 4 | import Button from 'react-bootstrap/Button'; 5 | import Review from '../components/Review.jsx'; 6 | import { Link } from 'react-router-dom'; 7 | import { useEffect, useRef, useState } from 'react'; 8 | import { useSelector } from 'react-redux'; 9 | import API from '../api/api.js'; 10 | import { toast } from 'react-toastify'; 11 | 12 | const Reviews = ({ productId }) => { 13 | const { currentUser } = useSelector((state) => state.user); 14 | const [reviews, setReviews] = useState([]); 15 | const [errorMessage, setErrorMessage] = useState([]); 16 | const formRef = useRef(null); 17 | 18 | const handleSubmitReview = async (e) => { 19 | e.preventDefault(); 20 | let ratingOption = formRef.current.ratingOption.value, 21 | comment = formRef.current.comment.value.trim(); 22 | 23 | let err = []; 24 | setErrorMessage([]); 25 | 26 | if (!comment) err.push('please enter valid comment'); 27 | if (ratingOption === '0') err.push('please choose valid rating'); 28 | if (err.length !== 0) { 29 | setErrorMessage(err); 30 | console.log(err); 31 | return; 32 | } 33 | 34 | try { 35 | const { data: res } = await API.post(`/reviews/${productId}`, { 36 | comment, 37 | rating: ratingOption, 38 | name: currentUser.name, 39 | }); 40 | setReviews((prev) => [...prev, res.review]); 41 | formRef.current.reset(); 42 | console.log(res.review); 43 | } catch (error) { 44 | toast.dismiss(); 45 | toast.error('error while fetching Reviews'); 46 | console.log(error.message); 47 | } 48 | }; 49 | 50 | useEffect(() => { 51 | const fecthProduct = async () => { 52 | try { 53 | const { data: res } = await API.get(`/reviews/${productId}`); 54 | setReviews(res.reviews); 55 | } catch (error) { 56 | toast.dismiss(); 57 | toast.error('Error While Fetching products'); 58 | console.log(error.message); 59 | } 60 | }; 61 | fecthProduct(); 62 | }, [productId]); 63 | 64 | return ( 65 | <> 66 |2022-06-22
74 |{r.comment}
75 || ID | 79 |User | 80 |DATE | 81 |TOTAL | 82 |PAID | 83 |DELIVERED | 84 |ACTIONS | 85 |
|---|---|---|---|---|---|---|
| {p._id} | 91 |{p.userId.name} | 92 |{moment(p.createdAt).format('MM/DD/YYYY')} | 93 |94 | 95 | $ 96 | {p.totalPrice + 97 | 0.05 * p.totalPrice + 98 | Math.floor(0.14 * p.totalPrice)} 99 | 100 | | 101 |
102 | {p.isPaid ? (
103 | |
108 |
109 | {p.isDelivered ? (
110 | |
115 | 116 | 125 | 132 | | 133 |
{product._id}
75 | 76 | 145 | 146 || ID | 93 |Name | 94 |PRICE | 95 |CATEGORY | 96 |BRAND | 97 |ACTIONS | 98 |
|---|---|---|---|---|---|
| {p._id} | 104 |{p.name} | 105 |106 | ${p.price} 107 | | 108 |{p.category[0]} | 109 |{p.brand} | 110 |111 | 120 | 127 | | 128 |
{user._id}
58 | 59 | 93 | 94 || ID | 76 |Name | 77 |IS ADMIN | 79 |ACTIONS | 80 ||
|---|---|---|---|---|
| {p._id} | 86 |{p.name} | 87 |{p.email} | 88 |
89 | {p.isAdmin ? (
90 | |
95 | 96 | 105 | 112 | | 113 |
90 | Name : {currentUser.name} 91 |
92 |93 | Address : {orderDetails.address} 94 |
95 | {orderDetails.isDelivered ? ( 96 |110 | Method : {orderDetails.paymentMethod} 111 |
112 | {orderDetails.isPaid ? ( 113 || ID | 60 |DATE | 61 |TOTAL | 62 |PAID | 63 |DELIVERED | 64 |ACTIONS | 65 |
|---|---|---|---|---|---|
| {p._id} | 71 |{moment(p.createdAt).format('MM/DD/YYYY')} | 72 |73 | ${p.totalPrice} 74 | | 75 |
76 | {p.isPaid ? (
77 | |
82 |
83 | {p.isDelivered ? (
84 | |
89 | 90 | 93 | {/* Details */} 94 | | 95 |
78 | Name : {currentUser.name} 79 |
80 |81 | Address : 82 | {address.country + 83 | ' , ' + 84 | address.city + 85 | ', ' + 86 | address.address} 87 |
88 |102 | Method : {paymentMethod} 103 |
104 |77 | ${proudct.price} 78 |
79 |{proudct.description}
89 | 90 |
3 |
4 |