optimized post review process

Author: AlexTechNoir

src/components/productPage/Reviews.js

@@ -15,18 +15,22 @@ export default function Reviews({ id, reviewList }) {
 
   const [ isEditorReadOnly, setIsEditorReadOnly ] = useState(false)
   const [ sameEmailError, setSameEmailError ] = useState(false)
+  const [ reviews, setReviews ] = useState(reviewList)
 
   const formik = useFormik({
     initialValues: { name: '', email: '', message: '' },
     onSubmit: async (values, { resetForm }) => {
 
       setIsEditorReadOnly(true)
 
+      // fetch api route with attached data
       await fetch(`/api/postReview?productId=${id}&name=${values.name}&email=${values.email}&reviewText=${encodeURIComponent(values.message)}`)
         .then(res => {
+
           if (res.status >= 400) {
             if (res.status === 400) {
 
+              // api will send status 400 if email is already present, then we trigger error
               setSameEmailError(res.statusText)
               const err = new Error(res.statustext)
               setIsEditorReadOnly(false)
@@ -36,7 +40,7 @@ export default function Reviews({ id, reviewList }) {
             } else if (res.status > 400) {
 
               setSameEmailError(false)
-              const err = new Error('Error')  
+              const err = new Error('Error in components/productPage/Reviews.js, formik onSubmit, fetch, .then statement, if (res.status > 400) condition')  
               setIsEditorReadOnly(false)
 
               throw err
@@ -45,13 +49,16 @@ export default function Reviews({ id, reviewList }) {
           return res.json()
         })
         .then(data => {
+
           resetForm()
           setEditorState(EditorState.push(editorState, ContentState.createFromText('')))
 
           setSameEmailError(false)
 
-          const publishedReview = data.data.createReview.data    
+          const publishedReview = data.data.createReview.data 
+          // for now we're pushing review obj into array with others, after page reload they will be fetched altogether
           reviewList.push(publishedReview)
+          setReviews(reviewList)
 
           setIsEditorReadOnly(false)
 
@@ -65,13 +72,12 @@ export default function Reviews({ id, reviewList }) {
       email: Yup.string().min(6).max(50),
       message: Yup.string().min(1).max(100).required('Required')
     })
-  })
-
-  const [ reviews, setReviews ] = useState(reviewList)
+  })  
 
   const value = formik.values.message
 
   const prepareDraft = value => {
+
     const draft = htmlToDraft(value)
     const contentState = ContentState.createFromBlockArray(draft.contentBlocks)
     const editorState = EditorState.createWithContent(contentState)
@@ -84,6 +90,7 @@ export default function Reviews({ id, reviewList }) {
   const [ editorState, setEditorState ] = useState(value ? prepareDraft(value) : EditorState.createEmpty())
 
   const onEditorStateChange = editorState => {
+
     const forFormik = draftToHtml(
       convertToRaw(editorState.getCurrentContent())
     )

src/pages/api/postReview.js

@@ -19,87 +19,48 @@ export default async (req, res) => {
     },
     body: JSON.stringify({
       query: `
-        query Review($productId: String, $email: String) {
-          reviews(filters: { and: [{ productId: { eq: $productId }}, { email: { eq: $email }}]}) {
+        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,
-        email: email
+        name: name,
+        email: email,
+        reviewText: reviewText
       }
     })
   })
     .then(r => {
       if (r.status >= 400) {
         return r.json().then(errResData => {
-          const err = new Error('Error')
+          const err = new Error('Error in api/postReview.js, when mutating query to post review, if (r.status >= 400) condition')
           err.data = errResData
           throw err
         })
       }
       return r.json()
     })
-    .then(async data => {
-      const isEmailAlreadyPersent = data.data.reviews.data.length !== 0
+    .then(data => {
 
-      if (isEmailAlreadyPersent) {
+      // Strapi will attach errors obj to data in case such email is already present
+      if (data.errors) {
         res.statusMessage = 'The review with such email has already been published. Please, choose another email.'
         res.status(400).end()
       } else {
-        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
-            }
-          })
-        })
-          .then(r => {
-            if (r.status >= 400) {
-              return r.json().then(errResData => {
-                const err = new Error('Error')
-                err.data = errResData
-                throw err
-              })
-            }
-            return r.json()
-          })
-          .then(data => res.status(200).json(data))
-          .catch(err => res.status(404).json({ message: `Error: ${err}` }))
+        res.status(200).json(data)
       }
     })
-    .catch(err => res.status(404).json({ message: `Error: ${err}` }))
+    .catch(err => res.status(404).json({ message: `Error in api/postReview.js, nested .catch statement, err object: ${err}` }))
 }