Customer Review (+ Pagination)

[msnmz]

User story

Template: As a < type of user >, I want < some goal > so that < some reason >.
Example user story: As a user, I want to add a comment on a product and list all the previous comments so that I can share my experience and learn what other users experienced with that product.

Plan for technical implementation
Frontend

1. Create a comment form which includes
   a. A content input
   b. A submit button
2. Create a component to list existing comments which includes
   a. A header area for the user name and subheader for the time
   b. A content area for the content of the comment
3. Add a pagination component below comments
4. Create a state for the new comment
5. Create a state for the total comments to calculate pagination needs
6. Create a function to handle comment submit
7. Create a function to handle paginated comment requests

Backend

1. Update the Product Schema for comments:
   a. Add comments array that will have objects which include:
   • userId (The user who made the comment)
   • content (The content of the comment)
2. Update the product detail API endpoint
   a. Update GET API that also sends total comments and accepts page number as a query parameter
   b. Add a PUT API endpoint to handle new comment submits
3. Update product detail page initial props to be able pass page query parameter

[msnmz]

Backend updates:

• Created a child schema for the product schema.
• Added a comments array to the Product schema
• Added a Put Request handler to the product API endpoint to handle the creation of a comment
• Updated products page initial props to pass the page query to the API endpoint for the pagination purposes

Now, all get requests to the /api/product will return a product document with the latest 10 comments if there is.
To get the other comments just need to add a new query parameter to product API; page

Sample GET request:
http://localhost:3000/product?_id=5e18a1e67b1ca583dc3a5796
Output: The product detail page with the product which has the last 10 comments and the total comments count.

Sample GET request:
http://localhost:3000/product?_id=5e18a1e67b1ca583dc3a5796&page=2
Output: The product detail page with the product which has the 10 comments after skipping the last 10 and the total comments count.

[msnmz]

To create a product, now /api/product has a PUT request handler.
The authorization token is required in the headers.
The body must have these properties as shown with sample values:
{ "header": "Twelweth comment", "content": "This is a comment content", "productId": "5e18a1e67b1ca583dc3a5796" }

The backend will respond with a response that is a JSON object:

{
    "totalComments": 4,
    "product": {
        "sku": "797-94-5844",
        "_id": "5e18a1e67b1ca583dc3a5796",
        "name": "Addy Alldre",
        "price": 1999.23,
        "description": "Vestibulum quam sapien, varius ut, blandit non, interdum in, ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis faucibus accumsan odio. Curabitur convallis. Duis consequat dui nec nisi volutpat eleifend. Donec ut dolor.",
        "mediaUrl": "https://res-3.cloudinary.com/dwpujv6in/image/upload/c_pad,dpr_2.0,f_auto,h_930,q_auto,w_930/v1/media/catalog/product/c/l/cl1_secktc_cl_view1-cleon-small-sectional-tait-charcoal.jpg",
        "comments": [
            {
                "_id": "5e30e70ff872f6e0cb7baf49",
                "user": {
                    "role": "user",
                    "_id": "5e2f8141aa5fe7ffa77cd9ad",
                    "name": "asd",
                    "email": "asd@students.asd.ngo",
                    "createdAt": "2020-01-28T00:33:05.399Z",
                    "updatedAt": "2020-01-28T00:33:05.399Z",
                    "__v": 0
                },
                "header": "Sixth comment",
                "content": "This is a comment content",
                "updated_at": "2020-01-29T01:59:43.052Z"
            },
            {
                "_id": "5e30e70af872f6e0cb7baf48",
                "user": {
                    "role": "user",
                    "_id": "5e2f8141aa5fe7ffa77cd9ad",
                    "name": "asd",
                    "email": "a@students.asd.ngo",
                    "createdAt": "2020-01-28T00:33:05.399Z",
                    "updatedAt": "2020-01-28T00:33:05.399Z",
                    "__v": 0
                },
                "header": "Fifth comment",
                "content": "This is a comment content",
                "updated_at": "2020-01-29T01:59:38.710Z"
            },
            {
                "_id": "5e30e706f872f6e0cb7baf47",
                "user": {
                    "role": "user",
                    "_id": "5e2f8141aa5fe7ffa77cd9ad",
                    "name": "asdas",
                    "email": "asdasd@students.asdasd.ngo",
                    "createdAt": "2020-01-28T00:33:05.399Z",
                    "updatedAt": "2020-01-28T00:33:05.399Z",
                    "__v": 0
                },
                "header": "Fourth comment",
                "content": "This is a comment content",
                "updated_at": "2020-01-29T01:59:34.320Z"
            },
            {
                "_id": "5e30e6fff872f6e0cb7baf46",
                "user": {
                    "role": "user",
                    "_id": "5e2f8141aa5fe7ffa77cd9ad",
                    "name": "asdasd",
                    "email": "asd@students.asdasd.ngo",
                    "createdAt": "2020-01-28T00:33:05.399Z",
                    "updatedAt": "2020-01-28T00:33:05.399Z",
                    "__v": 0
                },
                "header": "Third comment",
                "content": "This is a comment content",
                "updated_at": "2020-01-29T01:59:27.070Z"
            }
        ]
    }
}

[msnmz]

the header is removed from the comment.