- setEditorState(editorState)}
- toolbar={{
- options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'link', 'embedded', 'emoji', 'image', 'remove', 'history'],
- colorPicker: { popupClassName: 'colorPickerPopup' },
- link: { popupClassName: 'linkPopup' },
- emoji: { popupClassName: 'emojiPopup' },
- embedded: { popupClassName: 'embeddedPopup' },
- image: { popupClassName: 'imagePopup' }
- }}
- />
-
-
- No reviews so far. Be the first!
+ return ( +
+ {
+ reviews.length === 0
+ ? 'No reviews so far. Be the first!'
+ : 'Reviews'
+ }
+
+
+ {
+ reviews
+ .sort((a, b) => (
+ // sort by date, newest first ↓
+ new Date(b.attributes.createdAt).getTime() - new Date(a.attributes.createdAt).getTime()
+ ))
+ .map(review => (
+
+
+
+
+ ))
+ }
+
+ Reviewed at {review.attributes.createdAt.slice(0, 10)} by {review.attributes.name}:
+
+
+
- {
- reviews.map(review =>
-
- )
-}
diff --git a/src/pages/_document.js b/src/pages/_document.js
index dcc160f..cbe1e8a 100644
--- a/src/pages/_document.js
+++ b/src/pages/_document.js
@@ -42,17 +42,10 @@ class MyDocument extends Document {
- {/* Facebook Comments moderation tool */}
-
-
- {/* Facebook Comments Plugin */}
-
-
-
{/* PayPal Checkout */}
diff --git a/src/pages/api/data.js b/src/pages/api/data.js
index b19b396..754f271 100644
--- a/src/pages/api/data.js
+++ b/src/pages/api/data.js
@@ -1,10 +1,12 @@
-// import { data } from '../../data'
+import DOMPurify from 'isomorphic-dompurify'
export default async (req, res) => {
- const id = parseInt(req.query.id)
- const value = req.query.value.toLowerCase().trim()
+ const query = req.query
+
+ if (query.type === 'search') {
+
+ const value = query.value.toLowerCase().trim()
- if (req.query.category === 'search') {
await fetch(`${
process.env.NODE_ENV === "production"
? process.env.PROD_CMS_URL
@@ -16,8 +18,8 @@ export default async (req, res) => {
},
body: JSON.stringify({
query: `
- query {
- products(filters: { title: { containsi: "${value}" }}) {
+ query SearchProduct($value: String) {
+ products(filters: { title: { containsi: $value }}) {
data {
id
attributes {
@@ -43,32 +45,96 @@ export default async (req, res) => {
}
}
}
- `
+ `,
+ variables: {
+ value: value
+ }
})
})
- .then(r => r.json())
- .then(data => {
- res.status(200).json(data)
+ .then(response => response.json())
+ .then(data => res.status(200).json(data))
+ .catch(err => res.status(404).json({ message: `Error: ${err}` }))
+
+ } else if (query.type === 'postReview') {
+
+ const productId = query.productId
+ const name = DOMPurify.sanitize(query.name.trim())
+ const email = DOMPurify.sanitize(query.email.trim().toLowerCase())
+ const reviewText = DOMPurify.sanitize(query.reviewText.trim())
+
+ await fetch(`${
+ process.env.NODE_ENV === "production"
+ ? process.env.PROD_CMS_URL
+ : process.env.DEV_CMS_URL
+ }/graphql`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ query: `
+ mutation postReview($productId: String, $name: String, $email: String, $reviewText: String) {
+ createReview(data: { productId: $productId, name: $name, email: $email, reviewText: $reviewText }) {
+ data {
+ id
+ attributes {
+ productId
+ name
+ email
+ reviewText
+ createdAt
+ }
+ }
+ }
+ }
+ `,
+ variables: {
+ productId: productId,
+ name: name,
+ email: email,
+ reviewText: reviewText
+ }
})
- .catch(err => res.status(404).json({ message: `Error: ${err}`}))
+ })
+ .then(response => response.json())
+ .then(data => res.status(200).json(data))
+ .catch(err => res.status(404).json({ message: `Error: ${err}` }))
- } else if (req.query.category === 'object') {
- const result = data.find(dataItem => dataItem.id === id)
- res.status(200).json(result)
- } else if (req.method === 'PATCH') {
- let reviewedItem = data[id].reviews.find(i => i.id === id)
- if (reviewedItem !== undefined) {
- reviewedItem = req.body
- }
- data[id].reviews.push(req.body)
- const itemReview = {
- user: req.body.user,
- review: req.body.review
- }
- res.status(200).json(itemReview)
- } else if (req.method === 'DELETE') {
- const reviewedItem = data[id].reviews.find(i => i.id === id)
- reviewedItem.filter(i => i.user !== req.query.user)
+ } else if (query.type === 'getReviews') {
+ const productId = query.productId.trim()
+
+ await fetch(`${
+ process.env.NODE_ENV === "production"
+ ? process.env.PROD_CMS_URL
+ : process.env.DEV_CMS_URL
+ }/graphql`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ query: `
+ query GetReviewsOfproduct($productId: String) {
+ reviews(filters: { productId: { eq: $productId }}) {
+ data {
+ id
+ attributes {
+ name
+ reviewText
+ }
+ }
+ }
+ }
+ `,
+ variables: {
+ productId: productId
+ }
+ })
+ })
+ .then(response => response.json())
+ .then(data => res.status(200).json(data))
+ .catch(err => res.status(404).json({ message: `Error: ${err}` }))
+
} else {
res.status(200).json({ name: 'John Doe' })
}
diff --git a/src/pages/product-page/[id].js b/src/pages/product-page/[id].js
index d345aa1..09c0472 100644
--- a/src/pages/product-page/[id].js
+++ b/src/pages/product-page/[id].js
@@ -1,15 +1,11 @@
-import { useState } from 'react'
import Head from 'next/head'
import Link from 'next/link'
import styled from 'styled-components'
-import dynamic from 'next/dynamic'
import ProductInfo from '../../components/productPage/ProductInfo'
import AddToCart from '../../components/productPage/AddToCart'
-import ToggleButtons from '../../components/productPage/ToggleButtons'
import Reviews from '../../components/productPage/Reviews'
import ProductSlider from '../../components/productPage/ProductSlider'
-const Comments = dynamic(() => import('../../components/productPage/Comments'))
export async function getServerSideProps(ctx) {
const data = await fetch(`${
@@ -33,7 +29,6 @@ export async function getServerSideProps(ctx) {
description
price
available
- reviews
image {
data {
id
@@ -59,17 +54,60 @@ export async function getServerSideProps(ctx) {
`
})
})
- .then(r => r.json())
+ .then(r => {
+ if (r.status >= 400) {
+ const err = new Error('Error')
+ throw err
+ }
+ return r.json()
+ })
.catch(err => console.error(err.message))
const dataItem = data.data.product.data
+ const reviewsData = await fetch(`${
+ process.env.NODE_ENV === "production"
+ ? process.env.PROD_CMS_URL
+ : process.env.DEV_CMS_URL
+ }/graphql`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ query: `
+ query {
+ reviews(filters: { productId: { eq: "${ctx.params.id}" }}) {
+ data {
+ id
+ attributes {
+ name
+ reviewText
+ createdAt
+ }
+ }
+ }
+ }
+ `
+ })
+ })
+ .then(r => {
+ if (r.status >= 400) {
+ const err = new Error('Error')
+ throw err
+ }
+ return r.json()
+ })
+ .catch(err => console.error(err.message))
+
+ const reviewList = reviewsData.data.reviews.data
+
return {
- props: { dataItem }
+ props: { dataItem, reviewList }
}
}
-export default function ProductPage({ dataItem }) {
+export default function ProductPage({ dataItem, reviewList }) {
const id = dataItem.id
const attributes = dataItem.attributes
@@ -82,16 +120,6 @@ export default function ProductPage({ dataItem }) {
const categoryPath = category.trim().toLowerCase().replace(' ', '-')
const images = attributes.image.data
- const [ isReviewsTabVisible, setIsReviewsTabVisible ] = useState(true)
-
- const toggleTabs = e => {
- if (e.target.name === 'reviews') {
- setIsReviewsTabVisible(true)
- } else if (e.target.name === 'comments') {
- setIsReviewsTabVisible(false)
- }
- }
-
return (
<>
@@ -114,12 +142,7 @@ export default function ProductPage({ dataItem }) {
- setEditorState(editorState)}
- />
-
- )
- }
-
-
-
- 
- {review.user} {date}
- editReview()}>
-
-
-
- {review.user} {date}
- editReview()}>
-
- {
- isPublishedEditorReadOnly
- ? (
- <>
-
-
-
- ) : (
-
- )
- }
-
-