Merge pull request #38 from vtex-apps/fix/empty-list

Update tooling, lint, adjust GraphQL cache

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+- Update tooling, lint code
+- Adjust GraphQL caching
+
 ## [1.5.0] - 2021-01-22
 
 ### Fixed
@@ -15,39 +20,51 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - First `/account/#/wishlist` page load with empty list
 
 ### Added
+
 - Message when the Wishlist is empty
 - CSS handle `emptyMessage`
+
 ## [1.4.2] - 2021-01-22
 
 ### Fixed
+
 - Null object check
 
 ## [1.4.1] - 2021-01-21
 
 ### Fixed
+
 - UrlEncode shopperId
 
 ## [1.4.0] - 2021-01-14
 
 ### Updated
+
 - Docs
 - Plugins dependency to the My Account page
 
 ### Added
+
 - Change menu label under My Account page
 
 ### Removed
+
 - `plugins.json` from the app
 
 ### Fixed
+
 - Blocks configuration not being overwritten by the theme's block
 
 ## [1.3.3] - 2020-12-22
+
 ### Fixed
+
 - Docs.
 
 ## [1.3.2] - 2020-12-22
+
 ### Added
+
 - Romanian translation
 
 ## [1.3.1] - 2020-12-22
@@ -59,68 +76,88 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## [1.3.0] - 2020-12-21
 
 ### Updated
+
 - Message after adding to the wishlist now has a link to the `/account/#wishlist` page
 
 ### Fixed
+
 - Missing seller's additional information from GraphQL search
 
 ## [1.2.1] - 2020-12-11
+
 ### Fixed
 
 - My Account page rendering.
 
 ## [1.2.0] - 2020-12-07
 
 ### Added
+
 - Added Wishlist menu under My Account
 
 ## [1.1.1] - 2020-11-25
 
 ### Fixed
+
 - SSR loading old data at the listing page
 - Error removing recent added item on the listing page
 - Duplicated lists on the same email
 - Retry checking existent list
 
 ### Added
+
 - Default title on the listing page route
 
 ## [1.1.0] - 2020-11-11
 
 ### Fixed
+
 - Performance improvements
 
 ## [1.0.10] - 2020-11-06
 
 ### Fixed
+
 - New terms of use
 
 ## [1.0.9] - 2020-11-06
+
 ### Updated
+
 - Doc update
 
 ## [1.0.8] - 2020-11-06
+
 ### Fixed
+
 - `/wishlist` products link not working
 
 ## [1.0.7] - 2020-10-14
+
 ### Fixed
+
 - Doc review and update
 
 ## [1.0.6] - 2020-09-25
 
 ### Added
+
 - App Store Assets - new format.
 
 ## [1.0.5] - 2020-09-21
+
 - Doc update `peerDependencies`
 
 ## [1.0.4] - 2020-09-21
+
 ### Added
+
 - `crowdin.yml` config file
 
 ## [1.0.3] - 2020-09-16
+
 ### Fixed
+
 - App documentation update (`readme.md` file)
 
 ## [1.0.2] - 2020-09-04

graphql/schema.graphql

@@ -33,37 +33,21 @@ input ListItemInputType {
 }
 
 type Query {
-  viewList(
-    shopperId: String!
-	name: String!
-    from: Int
-    to: Int
-    ): WishList @cacheControl(scope: PRIVATE)
-  viewLists(
-    shopperId: String!
-    from: Int
-    to: Int
-    ): [WishList] @cacheControl(scope: PRIVATE)
-  checkList(
-    shopperId: String!
-    productId: String!
-    sku: String
-    ) : CheckListType @cacheControl(scope: PRIVATE)
-  listNames(
-    shopperId: String!
-	): [String]
+  viewList(shopperId: String!, name: String!, from: Int, to: Int): WishList
+    @cacheControl(scope: PRIVATE, maxAge: ZERO)
+  viewLists(shopperId: String!, from: Int, to: Int): [WishList]
+    @cacheControl(scope: PRIVATE, maxAge: ZERO)
+  checkList(shopperId: String!, productId: String!, sku: String): CheckListType
+    @cacheControl(scope: PRIVATE)
+  listNames(shopperId: String!): [String]
 }
 
 type Mutation {
   addToList(
     listItem: ListItemInputType!
-	shopperId: String!
-	name: String!
-	public: Boolean
-	): ID
-  removeFromList(
-    id: ID!
-	shopperId: String!
-	name: String
-	): Boolean
-}
+    shopperId: String!
+    name: String!
+    public: Boolean
+  ): ID
+  removeFromList(id: ID!, shopperId: String!, name: String): Boolean
+}

react/AddProductBtn.tsx

@@ -1,7 +1,13 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
-import React, { FC, useState, useContext, useEffect } from 'react'
+import React, {
+  FC,
+  useState,
+  useContext,
+  useEffect,
+  SyntheticEvent,
+} from 'react'
 import { useMutation, useLazyQuery } from 'react-apollo'
-import { WrappedComponentProps, defineMessages, injectIntl } from 'react-intl'
+import { defineMessages, useIntl } from 'react-intl'
 import { ProductContext } from 'vtex.product-context'
 import { Button, ToastContext } from 'vtex.styleguide'
 import { useRuntime } from 'vtex.render-runtime'
@@ -21,12 +27,16 @@ let isAuthenticated =
   JSON.parse(String(localStore.getItem('wishlist_isAuthenticated'))) ?? false
 let shopperId = localStore.getItem('wishlist_shopperId') ?? null
 
-const productCheck = {}
+const productCheck: {
+  [key: string]: { isWishlisted: boolean; wishListId: string }
+} = {}
 const defaultValues = {
   LIST_NAME: 'Wishlist',
 }
 
-const messages = defineMessages({
+const messages: {
+  [key: string]: { defaultMessage: string; id: string }
+} = defineMessages({
   addButton: {
     defaultMessage: '',
     id: 'store/wishlist.addButton',
@@ -76,7 +86,8 @@ const useSessionResponse = () => {
   return session
 }
 
-const AddBtn: FC<WrappedComponentProps> = ({ intl }) => {
+const AddBtn: FC = () => {
+  const intl = useIntl()
   const [state, setState] = useState<any>({
     isLoading: true,
     isWishlisted: false,
@@ -196,7 +207,7 @@ const AddBtn: FC<WrappedComponentProps> = ({ intl }) => {
     })
   }
 
-  const handleAddProductClick = e => {
+  const handleAddProductClick = (e: SyntheticEvent) => {
     e.preventDefault()
     e.stopPropagation()
     if (isAuthenticated) {
@@ -271,4 +282,4 @@ const AddBtn: FC<WrappedComponentProps> = ({ intl }) => {
   )
 }
 
-export default injectIntl(AddBtn)
+export default AddBtn

react/MyAcccountWishlistPage.tsx

@@ -1,10 +1,8 @@
-import React from 'react'
+import React, { FC } from 'react'
 import { Route } from 'vtex.my-account-commons/Router'
 
-function MyAccountWishlistPage({ children }) {
-  return (
-    <Route exact path="/wishlist" render={() => <>{children}</>}/>
-  )
+const MyAccountWishlistPage: FC = ({ children }) => {
+  return <Route exact path="/wishlist" render={() => <>{children}</>} />
 }
 
-export default MyAccountWishlistPage
+export default MyAccountWishlistPage

react/MyAccountWishlistLink.tsx

@@ -1,7 +1,14 @@
 import PropTypes from 'prop-types'
-import { injectIntl } from 'react-intl'
+import { useIntl } from 'react-intl'
 
-const MyAccountWishlistLink = ({ render, intl, label }) => {
+const MyAccountWishlistLink = ({
+  render,
+  label,
+}: {
+  render: ([{ name, path }]: Array<{ name: string; path: string }>) => any
+  label: string
+}) => {
+  const intl = useIntl()
   return render([
     {
       name: label ?? intl.formatMessage({ id: 'store/myaccount-menu' }),
@@ -12,8 +19,7 @@ const MyAccountWishlistLink = ({ render, intl, label }) => {
 
 MyAccountWishlistLink.propTypes = {
   render: PropTypes.func.isRequired,
-  intl: PropTypes.any,
   label: PropTypes.string,
 }
 
-export default injectIntl(MyAccountWishlistLink)
+export default MyAccountWishlistLink

react/ProductSummaryWishlist.tsx

@@ -1,7 +1,8 @@
 import React, { useMemo, useState, useEffect, FC } from 'react'
 import { useLazyQuery } from 'react-apollo'
-import { FormattedMessage, injectIntl, WrappedComponentProps } from 'react-intl'
-import { ExtensionPoint, useTreePath, useRuntime } from 'vtex.render-runtime'
+import { FormattedMessage } from 'react-intl'
+// @ts-expect-error - useTreePath is a private API
+import { ExtensionPoint, useRuntime, useTreePath } from 'vtex.render-runtime'
 import { useListContext, ListContextProvider } from 'vtex.list-context'
 import { ProductListContext } from 'vtex.product-list-context'
 import { Spinner } from 'vtex.styleguide'
@@ -40,7 +41,7 @@ const useSessionResponse = () => {
   return session
 }
 
-const ProductSummaryList = ({ children }) => {
+const ProductSummaryList: FC = ({ children }) => {
   const { list } = useListContext() || []
   const { treePath } = useTreePath()
   const { navigate, history } = useRuntime()
@@ -53,15 +54,15 @@ const ProductSummaryList = ({ children }) => {
     { data: dataLists, loading: listLoading, called: listCalled },
   ] = useLazyQuery(ViewLists, {
     ssr: false,
-    fetchPolicy: 'no-cache',
+    fetchPolicy: 'network-only',
   })
 
   const [loadProducts, { data, loading, error, called }] = useLazyQuery(
     productsQuery,
     {
       ssr: false,
       variables: {
-        ids: dataLists?.viewLists[0].data.map(item => {
+        ids: dataLists?.viewLists[0]?.data.map((item: any) => {
           return item.productId
         }),
       },
@@ -95,11 +96,11 @@ const ProductSummaryList = ({ children }) => {
 
   const newListContextValue = useMemo(() => {
     const getWishlistId = (productId: string) => {
-      return dataLists?.viewLists[0].data.find(item => {
+      return dataLists?.viewLists[0]?.data.find((item: any) => {
         return item.productId === productId
       })?.id
     }
-    const componentList = products?.map(product => {
+    const componentList = products?.map((product: any) => {
       const normalizedProduct = mapCatalogProductToProductSummary(
         product,
         getWishlistId(product.productId)
@@ -131,7 +132,7 @@ const ProductSummaryList = ({ children }) => {
     return null
   }
 
-  if (listCalled && !listLoading && !dataLists?.viewLists[0].data.length) {
+  if (listCalled && !listLoading && !dataLists?.viewLists[0]?.data?.length) {
     return (
       <div className={`ml5 ${handles.emptyMessage}`}>
         <FormattedMessage id="store/myaccount-empty-list" />
@@ -146,7 +147,7 @@ const ProductSummaryList = ({ children }) => {
   )
 }
 
-const EnhancedProductList: FC<WrappedComponentProps> = ({ children }) => {
+const EnhancedProductList: FC = ({ children }) => {
   const { ProductListProvider } = ProductListContext
   return (
     <ProductListProvider listName="wishlist">
@@ -156,4 +157,4 @@ const EnhancedProductList: FC<WrappedComponentProps> = ({ children }) => {
   )
 }
 
-export default injectIntl(EnhancedProductList)
+export default EnhancedProductList

react/components/ProductListEventCaller.js → react/components/ProductListEventCaller.ts

@@ -5,4 +5,4 @@ const ProductListEventCaller = () => {
   return null
 }
 
-export default ProductListEventCaller
+export default ProductListEventCaller