Video 24 rate review products (#59)

* update readme

* Video-24-Rate-Review-Products

Author: basir

README.md

@@ -114,6 +114,75 @@ Admin should be able to define products and update the count in stock whenever t
 In this part, we implement the checkout wizard including sign in, shipping info, payment method, and place order.
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l8w3g9mc3ccijt70wpf3.png)
 
+## Only On Udemy
+
+Following parts are on my udemy course. [Get it by 90% discount](https://www.udemy.com/course/build-ecommerce-website-like-amazon-react-node-mongodb/?couponCode=BASIR1)
+
+### Part 18- Order Details Screen
+
+It shows all details about an order includeing shipping, payments and order items. Also it is possible for admin to manage orders like set them as delivered.
+
+### Part 19- Connect to PayPal
+
+This parts create PaypalButton component to show paypal payment button on the screen.
+when users click on it, they will be redirected to paypal website to make the payment.
+after payment users will be redirected to details page of the order.
+
+### Part 20- Manage Order Screen
+
+This is an admin page to manage list of orders. Admin can delete an order or set it as delivered.
+
+### Part 21- User Profile Screen
+
+When user click on thier name on the header menu, this page appears. It consists of two sections. First an profile update form and second order history.
+
+### Part 22- Filter and Sort Products
+
+In the home page, right after header, there is a filter bar to filter products based on their name and description. also it is possible to sort product based on prices and arrivals.
+
+### Part 23- Deploy Website on Heroku
+
+This section explains all steps to publish the ecommerce website on heroku. first you need to create a cloud mongodb and the make an account on heroku.
+
+### Part 24- Rate and Review Products
+
+This part shows list of reviews by users for each products. also it provides a form to enter rating and review for every single product. also it update the avg rating of each product by user ratings.
+
+1. index.html
+2. link fontawesome
+3. Rating.js
+4. create stars based on props.value
+5. show text based on props.text
+6. index.css
+7. style rating, span color gold and last span to gray, link text to blue
+8. HomeScreen.js
+9. use Rating component
+10. ProductScreen.js
+11. use Rating component, wrap it in anchor#reviews
+12. list reviews after product details
+13. create new review form to get rating and reviews
+14. index.css
+15. style reviews
+16. ProductScreen.js
+17. implement submitHandler
+18. productActions.js
+19. create saveProductReview(productId, review)
+20. productConstants.js
+21. create product review constants
+22. productReducers.js
+23. create productReviewSaveReducer
+24. store.js
+25. add productReviewSaveReducer
+26. backend
+27. productRoute.js
+28. router.post('/:id/reviews')
+29. save review in product.reviews
+30. update avg rating
+
+### Part 25- Upload images
+
+Admin shoud be able to uploads photos from their computer. This section teaches this feature.
+
 ## Summary
 
 In this tutorial, we have made an eCommerce website like Amazon. Feel free to change this project based on your needs and add it to your portfolio.

backend/models/productModel.js

@@ -1,5 +1,15 @@
 import mongoose from 'mongoose';
 
+const reviewSchema = new mongoose.Schema(
+  {
+    name: { type: String, required: true },
+    rating: { type: Number, default: 0 },
+    comment: { type: String, required: true },
+  },
+  {
+    timestamps: true,
+  }
+);
 const prodctSchema = new mongoose.Schema({
   name: { type: String, required: true },
   image: { type: String, required: true },
@@ -10,8 +20,9 @@ const prodctSchema = new mongoose.Schema({
   description: { type: String, required: true },
   rating: { type: Number, default: 0, required: true },
   numReviews: { type: Number, default: 0, required: true },
+  reviews: [reviewSchema],
 });
 
-const productModel = mongoose.model("Product", prodctSchema);
+const productModel = mongoose.model('Product', prodctSchema);
 
-export default productModel;
+export default productModel;

backend/routes/productRoute.js

@@ -4,32 +4,58 @@ import { isAuth, isAdmin } from '../util';
 
 const router = express.Router();
 
-router.get("/", async (req, res) => {
+router.get('/', async (req, res) => {
   const category = req.query.category ? { category: req.query.category } : {};
-  const searchKeyword = req.query.searchKeyword ? {
-    name: {
-      $regex: req.query.searchKeyword,
-      $options: 'i'
-    }
-  } : {};
-  const sortOrder = req.query.sortOrder ?
-    (req.query.sortOrder === 'lowest' ? { price: 1 } : { price: -1 })
-    :
-    { _id: -1 };
-  const products = await Product.find({ ...category, ...searchKeyword }).sort(sortOrder);
+  const searchKeyword = req.query.searchKeyword
+    ? {
+        name: {
+          $regex: req.query.searchKeyword,
+          $options: 'i',
+        },
+      }
+    : {};
+  const sortOrder = req.query.sortOrder
+    ? req.query.sortOrder === 'lowest'
+      ? { price: 1 }
+      : { price: -1 }
+    : { _id: -1 };
+  const products = await Product.find({ ...category, ...searchKeyword }).sort(
+    sortOrder
+  );
   res.send(products);
 });
 
-router.get("/:id", async (req, res) => {
+router.get('/:id', async (req, res) => {
   const product = await Product.findOne({ _id: req.params.id });
   if (product) {
     res.send(product);
   } else {
-    res.status(404).send({ message: "Product Not Found." });
+    res.status(404).send({ message: 'Product Not Found.' });
   }
 });
-
-router.put("/:id", isAuth, isAdmin, async (req, res) => {
+router.post('/:id/reviews', isAuth, async (req, res) => {
+  const product = await Product.findById(req.params.id);
+  if (product) {
+    const review = {
+      name: req.body.name,
+      rating: Number(req.body.rating),
+      comment: req.body.comment,
+    };
+    product.reviews.push(review);
+    product.numReviews = product.reviews.length;
+    product.rating =
+      product.reviews.reduce((a, c) => c.rating + a, 0) /
+      product.reviews.length;
+    const updatedProduct = await product.save();
+    res.status(201).send({
+      data: updatedProduct.reviews[updatedProduct.reviews.length - 1],
+      message: 'Review saved successfully.',
+    });
+  } else {
+    res.status(404).send({ message: 'Product Not Found' });
+  }
+});
+router.put('/:id', isAuth, isAdmin, async (req, res) => {
   const productId = req.params.id;
   const product = await Product.findById(productId);
   if (product) {
@@ -42,25 +68,25 @@ router.put("/:id", isAuth, isAdmin, async (req, res) => {
     product.description = req.body.description;
     const updatedProduct = await product.save();
     if (updatedProduct) {
-      return res.status(200).send({ message: 'Product Updated', data: updatedProduct });
+      return res
+        .status(200)
+        .send({ message: 'Product Updated', data: updatedProduct });
     }
   }
   return res.status(500).send({ message: ' Error in Updating Product.' });
-
 });
 
-router.delete("/:id", isAuth, isAdmin, async (req, res) => {
+router.delete('/:id', isAuth, isAdmin, async (req, res) => {
   const deletedProduct = await Product.findById(req.params.id);
   if (deletedProduct) {
     await deletedProduct.remove();
-    res.send({ message: "Product Deleted" });
+    res.send({ message: 'Product Deleted' });
   } else {
-    res.send("Error in Deletion.");
+    res.send('Error in Deletion.');
   }
 });
 
-
-router.post("/", isAuth, isAdmin, async (req, res) => {
+router.post('/', isAuth, isAdmin, async (req, res) => {
   const product = new Product({
     name: req.body.name,
     price: req.body.price,
@@ -74,10 +100,11 @@ router.post("/", isAuth, isAdmin, async (req, res) => {
   });
   const newProduct = await product.save();
   if (newProduct) {
-    return res.status(201).send({ message: 'New Product Created', data: newProduct });
+    return res
+      .status(201)
+      .send({ message: 'New Product Created', data: newProduct });
   }
   return res.status(500).send({ message: ' Error in Creating Product.' });
-})
-
+});
 
-export default router;
+export default router;

backend/routes/userRoute.js

@@ -17,40 +17,36 @@ router.put('/:id', isAuth, async (req, res) => {
       name: updatedUser.name,
       email: updatedUser.email,
       isAdmin: updatedUser.isAdmin,
-      token: getToken(updatedUser)
+      token: getToken(updatedUser),
     });
   } else {
-    res.status(404).send({ msg: 'User Not Found' });
+    res.status(404).send({ message: 'User Not Found' });
   }
-
 });
 
 router.post('/signin', async (req, res) => {
-
   const signinUser = await User.findOne({
     email: req.body.email,
-    password: req.body.password
+    password: req.body.password,
   });
   if (signinUser) {
     res.send({
       _id: signinUser.id,
       name: signinUser.name,
       email: signinUser.email,
       isAdmin: signinUser.isAdmin,
-      token: getToken(signinUser)
+      token: getToken(signinUser),
     });
-
   } else {
-    res.status(401).send({ msg: 'Invalid Email or Password.' });
+    res.status(401).send({ message: 'Invalid Email or Password.' });
   }
-
 });
 
 router.post('/register', async (req, res) => {
   const user = new User({
     name: req.body.name,
     email: req.body.email,
-    password: req.body.password
+    password: req.body.password,
   });
   const newUser = await user.save();
   if (newUser) {
@@ -59,27 +55,26 @@ router.post('/register', async (req, res) => {
       name: newUser.name,
       email: newUser.email,
       isAdmin: newUser.isAdmin,
-      token: getToken(newUser)
-    })
+      token: getToken(newUser),
+    });
   } else {
-    res.status(401).send({ msg: 'Invalid User Data.' });
+    res.status(401).send({ message: 'Invalid User Data.' });
   }
+});
 
-})
-
-router.get("/createadmin", async (req, res) => {
+router.get('/createadmin', async (req, res) => {
   try {
     const user = new User({
       name: 'Basir',
       email: 'basir.jafarzadeh@gmail.com',
       password: '1234',
-      isAdmin: true
+      isAdmin: true,
     });
     const newUser = await user.save();
     res.send(newUser);
   } catch (error) {
-    res.send({ msg: error.message });
+    res.send({ message: error.message });
   }
 });
 
-export default router;
+export default router;

backend/util.js

@@ -1,16 +1,19 @@
 import jwt from 'jsonwebtoken';
 import config from './config';
 const getToken = (user) => {
-  return jwt.sign({
-    _id: user._id,
-    name: user.name,
-    email: user.email,
-    isAdmin: user.isAdmin,
-
-  }, config.JWT_SECRET, {
-    expiresIn: '48h'
-  })
-}
+  return jwt.sign(
+    {
+      _id: user._id,
+      name: user.name,
+      email: user.email,
+      isAdmin: user.isAdmin,
+    },
+    config.JWT_SECRET,
+    {
+      expiresIn: '48h',
+    }
+  );
+};
 
 const isAuth = (req, res, next) => {
   const token = req.headers.authorization;
@@ -19,25 +22,23 @@ const isAuth = (req, res, next) => {
     const onlyToken = token.slice(7, token.length);
     jwt.verify(onlyToken, config.JWT_SECRET, (err, decode) => {
       if (err) {
-        return res.status(401).send({ msg: 'Invalid Token' });
+        return res.status(401).send({ message: 'Invalid Token' });
       }
       req.user = decode;
       next();
-      return
+      return;
     });
   } else {
-    return res.status(401).send({ msg: "Token is not supplied." });
+    return res.status(401).send({ message: 'Token is not supplied.' });
   }
-}
+};
 
 const isAdmin = (req, res, next) => {
-  console.log(req.user)
+  console.log(req.user);
   if (req.user && req.user.isAdmin) {
     return next();
   }
-  return res.status(401).send({ msg: 'Admin Token is not valid.' })
-}
+  return res.status(401).send({ message: 'Admin Token is not valid.' });
+};
 
-export {
-  getToken, isAuth, isAdmin
-}
+export { getToken, isAuth, isAdmin };

frontend/public/index.html

@@ -24,6 +24,10 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
     <title>React App</title>
   </head>
   <body>