[REVIEWS-91] Create a custom eevnt to update RatingsSummary component

CHANGELOG.md

@@ -6,6 +6,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+- Create a review saved custom event to update the RatingSummary component.
+- Use useQuery graphQL hook to destructure refetch in RatingSummary component.
+
 ## [3.8.12] - 2022-05-10
 
 ### Fixed

react/RatingSummary.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment, useEffect, useReducer } from 'react'
 import { Helmet } from 'react-helmet'
 import type { ApolloQueryResult } from 'apollo-client'
-import { useApolloClient } from 'react-apollo'
+import { useApolloClient, useQuery } from 'react-apollo'
 import { useProduct } from 'vtex.product-context'
 import { useCssHandles } from 'vtex.css-handles'
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl'
@@ -13,6 +13,7 @@ import Stars from './components/Stars'
 import TotalReviewsByProductId from '../graphql/totalReviewsByProductId.graphql'
 import AverageRatingByProductId from '../graphql/averageRatingByProductId.graphql'
 import { getBaseUrl } from './utils/baseUrl'
+import { eventBus } from './utils/eventBus'
 
 interface TotalData {
   totalReviewsByProductId: number
@@ -147,43 +148,33 @@ function RatingSummary() {
 
   const { url } = getLocation()
 
-  useEffect(() => {
-    if (!productId) {
-      return
-    }
-
-    client
-      .query({
-        query: TotalReviewsByProductId,
-        variables: {
-          productId,
-        },
-      })
-      .then((response: ApolloQueryResult<TotalData>) => {
-        const total = response.data.totalReviewsByProductId
-
-        dispatch({
-          type: 'SET_TOTAL',
-          args: { total },
-        })
-      })
-
-    client
-      .query({
-        query: AverageRatingByProductId,
-        variables: {
-          productId,
-        },
-      })
-      .then((response: ApolloQueryResult<AverageData>) => {
-        const average = response.data.averageRatingByProductId
-
-        dispatch({
-          type: 'SET_AVERAGE',
-          args: { average },
-        })
-      })
+  const {
+    data: totalReviewsByProductId,
+    loading: loadingTotalReviewsByProductId,
+    refetch: refetchTotalReviewsByProductId,
+  } = useQuery<TotalData>(TotalReviewsByProductId, {
+    variables: {
+      productId,
+    },
+    skip: !productId,
+    fetchPolicy: 'network-only',
+    ssr: false,
+  })
+
+  const {
+    data: averageRatingByProductId,
+    loading: loadingAverageRatingByProductId,
+    refetch: refetchAverageRatingByProductId,
+  } = useQuery<AverageData>(AverageRatingByProductId, {
+    variables: {
+      productId,
+    },
+    skip: !productId,
+    fetchPolicy: 'network-only',
+    ssr: false,
+  })
 
+  useEffect(() => {
     client
       .query({
         query: AppSettings,
@@ -196,9 +187,44 @@ function RatingSummary() {
           args: { settings },
         })
       })
-  }, [client, productId])
+  }, [client])
+
+  useEffect(() => {
+    if (loadingTotalReviewsByProductId || !totalReviewsByProductId) return
+    const { totalReviewsByProductId: total } = totalReviewsByProductId
+
+    dispatch({
+      type: 'SET_TOTAL',
+      args: { total },
+    })
+  }, [
+    totalReviewsByProductId,
+    loadingTotalReviewsByProductId,
+    refetchTotalReviewsByProductId,
+  ])
 
   useEffect(() => {
+    if (loadingAverageRatingByProductId || !averageRatingByProductId) return
+    const { averageRatingByProductId: average } = averageRatingByProductId
+
+    dispatch({
+      type: 'SET_AVERAGE',
+      args: { average },
+    })
+  }, [
+    averageRatingByProductId,
+    loadingAverageRatingByProductId,
+    refetchAverageRatingByProductId,
+  ])
+
+  useEffect(() => {
+    const onReviewSaved = () => {
+      refetchTotalReviewsByProductId()
+      refetchAverageRatingByProductId()
+    }
+
+    eventBus.on('reviewSaved', onReviewSaved)
+
     window.__RENDER_8_SESSION__.sessionPromise.then((data: any) => {
       const sessionRespose = data.response
 
@@ -218,7 +244,9 @@ function RatingSummary() {
         args: { authenticated: true },
       })
     })
-  }, [])
+
+    return () => eventBus.remove('reviewSaved', onReviewSaved)
+  }, [refetchTotalReviewsByProductId, refetchAverageRatingByProductId])
 
   const scrollToForm = () => {
     const reviewsContainer = document.getElementById('reviews-main-container')

react/ReviewForm.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import React, { Fragment, useEffect, useReducer } from 'react'
 import { useProduct } from 'vtex.product-context'
 import type { ApolloQueryResult } from 'apollo-client'
@@ -11,6 +10,7 @@ import getOrders from './queries/orders.graphql'
 import NewReview from '../graphql/newReview.graphql'
 import HasShopperReviewed from '../graphql/hasShopperReviewed.graphql'
 import StarPicker from './components/StarPicker'
+import { eventBus } from './utils/eventBus'
 
 interface AppSettings {
   allowAnonymousReviews: boolean
@@ -258,6 +258,8 @@ export function ReviewForm({
 
   const [state, dispatch] = useReducer(reducer, initialState)
 
+  const reviewSavedEvent = () => eventBus.dispatch('reviewSaved')
+
   useEffect(() => {
     if (!productId) {
       return
@@ -392,7 +394,14 @@ export function ReviewForm({
         .then(res => {
           if (res.data.newReview.id) {
             setTimeout(() => {
-              refetchReviews()
+              if (
+                !settings?.requireApproval &&
+                settings?.allowAnonymousReviews
+              ) {
+                refetchReviews()
+                reviewSavedEvent()
+              }
+
               dispatch({
                 type: 'SET_SUBMITTED',
               })

react/admin/index.tsx

@@ -4,7 +4,6 @@ import type { FC } from 'react'
 import React, { useState, useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { useApolloClient } from 'react-apollo'
-import type { RenderContext } from 'vtex.render-runtime'
 import { useRuntime } from 'vtex.render-runtime'
 import {
   Layout,
@@ -36,7 +35,7 @@ const IconArrowForward: FC = () => (
 )
 
 const ReviewIndex: FC = props => {
-  const { navigate, route } = useRuntime() as RenderContext.RenderContext
+  const { navigate, route } = useRuntime()
   const [activeTab, setActiveTab] = useState(route.id)
   const [needsMigrate, setNeedsMigrate] = useState(false)
   const [isMigrationloading, setIsMigrationloading] = useState(false)

react/package.json

@@ -35,7 +35,7 @@
     "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.product-context",
     "vtex.product-review-interfaces": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/_types/react",
     "vtex.product-summary": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.product-summary",
-    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.126.4/public/@types/vtex.render-runtime",
+    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.99.0/public/@types/vtex.render-runtime",
     "vtex.search-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.search-graphql",
     "vtex.store": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.store",
     "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.store-graphql",

react/utils/eventBus.ts

@@ -0,0 +1,11 @@
+export const eventBus = {
+  on(event: any, callback: any) {
+    document.addEventListener(event, e => callback(e.detail))
+  },
+  dispatch(event: any, data: any = null) {
+    document.dispatchEvent(new CustomEvent(event, { detail: data }))
+  },
+  remove(event: any, callback: any = null) {
+    document.removeEventListener(event, callback)
+  },
+}