feat(nfts): implement refresh on collection, address, and firehose pages

blockchain · May 4, 2022 · 8d0329d · 8d0329d
1 parent 7f132b7
commit 8d0329d
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 33 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Address/Address.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Address/Address.tsx
@@ -21,6 +21,7 @@ const NftAddress: React.FC<Props> = ({ formActions, formValues, pathname }) => {
   const params = new URLSearchParams(window.location.hash.split('?')[1])
   const tab = params.get('tab') === 'EVENTS' ? 'EVENTS' : 'ITEMS'
 
+  const [refreshTrigger, setRefreshTrigger] = useState<number>(0)
   const [activeTab, setActiveTab] = useState<'ITEMS' | 'EVENTS'>(tab)
   const [collections, setCollections] = useState([] as OwnerQuery['assets'][0]['collection'][])
 
@@ -86,11 +87,13 @@ const NftAddress: React.FC<Props> = ({ formActions, formValues, pathname }) => {
             formActions={formActions}
             formValues={formValues}
             collections={collections}
+            setRefreshTrigger={setRefreshTrigger}
             setActiveTab={setActiveTab}
           />
           {activeTab === 'ITEMS' ? (
             <AddressItems
               collections={collections}
+              refreshTrigger={refreshTrigger}
               setCollections={setCollections}
               formValues={formValues}
               address={address}

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Address/AddressItems/AddressItems.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Address/AddressItems/AddressItems.tsx
@@ -11,21 +11,32 @@ import NftPageLazyLoadWrapper from '../../components/NftPageLazyLoadWrapper'
 import { NftFilterFormValuesType } from '../../NftFilter'
 import ResultsPage from './AddressItems.results'
 
-const AddressItems: React.FC<Props> = ({ address, collections, formValues, setCollections }) => {
+const AddressItems: React.FC<Props> = ({
+  address,
+  collections,
+  formValues,
+  refreshTrigger,
+  setCollections
+}) => {
   const [pageVariables, setPageVariables] = useState([{ page: 0 }])
   const [maxItemsFetched, setMaxItemsFetched] = useState(false)
   const [isFetchingNextPage, setIsFetchingNextPage] = useState(true)
   const [errorFetchingNextPage, setNextPageFetchError] = useState<CombinedError | undefined>(
     undefined
   )
 
-  useEffect(() => {
+  const refresh = () => {
     setIsFetchingNextPage(true)
     setPageVariables([])
+    setMaxItemsFetched(false)
     setTimeout(() => {
       setPageVariables([{ page: 0 }])
     }, 100)
-  }, [address])
+  }
+
+  useEffect(() => {
+    refresh()
+  }, [address, refreshTrigger])
 
   const isFetching = isFetchingNextPage
 
@@ -67,6 +78,7 @@ type Props = {
   address: string
   collections: OwnerQuery['assets'][0]['collection'][]
   formValues: NftFilterFormValuesType
+  refreshTrigger: number
   setCollections: React.Dispatch<React.SetStateAction<OwnerQuery['assets'][0]['collection'][]>>
 }
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Collection/Collection.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Collection/Collection.tsx
@@ -61,6 +61,7 @@ const NftsCollection: React.FC<Props> = ({ formActions, formValues, ...rest }) =
   const tab = params.get('tab') === 'EVENTS' ? 'EVENTS' : 'ITEMS'
 
   const [activeTab, setActiveTab] = useState<'ITEMS' | 'EVENTS'>(tab)
+  const [refreshTrigger, setRefreshTrigger] = useState<number>(0)
 
   const [collectionsQuery] = useCollectionsQuery({
     variables: { filter: [{ field: CollectionFilterFields.Slug, value: slug }] }
@@ -149,6 +150,7 @@ const NftsCollection: React.FC<Props> = ({ formActions, formValues, ...rest }) =
             formValues={formValues}
             showSortBy
             formActions={formActions}
+            setRefreshTrigger={setRefreshTrigger}
             activeTab={activeTab}
             setActiveTab={setActiveTab}
             collections={[]}
@@ -157,6 +159,7 @@ const NftsCollection: React.FC<Props> = ({ formActions, formValues, ...rest }) =
             <CollectionItems
               collectionsQuery={collectionsQuery}
               formValues={formValues}
+              refreshTrigger={refreshTrigger}
               slug={slug}
             />
           ) : (

diff --git a/...ckchain-wallet-v4-frontend/src/scenes/Nfts/Collection/CollectionItems/CollectionItems.tsx b/...ckchain-wallet-v4-frontend/src/scenes/Nfts/Collection/CollectionItems/CollectionItems.tsx
@@ -11,23 +11,36 @@ import NftPageLazyLoadWrapper from '../../components/NftPageLazyLoadWrapper'
 import { NftFilterFormValuesType } from '../../NftFilter'
 import CollectionItemsResults from './CollectionItems.results'
 
-const CollectionItems: React.FC<Props> = ({ collectionsQuery, formValues, slug }) => {
+const CollectionItems: React.FC<Props> = ({
+  collectionsQuery,
+  formValues,
+  refreshTrigger,
+  slug
+}) => {
   const [pageVariables, setPageVariables] = useState([{ page: 0 }])
   const [maxItemsFetched, setMaxItemsFetched] = useState(false)
   const [isFetchingNextPage, setIsFetchingNextPage] = useState(true)
   const [errorFetchingNextPage, setNextPageFetchError] = useState<CombinedError | undefined>(
     undefined
   )
 
-  useEffect(() => {
+  const refresh = () => {
     setIsFetchingNextPage(true)
     setPageVariables([])
     setMaxItemsFetched(false)
     setTimeout(() => {
       setPageVariables([{ page: 0 }])
     }, 100)
+  }
+
+  useEffect(() => {
+    refresh()
   }, [slug, formValues])
 
+  useEffect(() => {
+    refresh()
+  }, [refreshTrigger])
+
   const isFetching = isFetchingNextPage || collectionsQuery.fetching
 
   return (
@@ -66,6 +79,7 @@ const CollectionItems: React.FC<Props> = ({ collectionsQuery, formValues, slug }
 type Props = {
   collectionsQuery: UseQueryState<CollectionsQuery, object>
   formValues: NftFilterFormValuesType
+  refreshTrigger: number
   slug: string
 }
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Firehose/Firehose.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/Firehose/Firehose.tsx
@@ -17,21 +17,27 @@ import NftFilter, { NftFilterFormValuesType } from '../NftFilter'
 import NftFirehoseResults from './Firehose.results'
 
 const NftFirehose: React.FC<Props> = ({ formActions, formValues }) => {
+  const [refreshTrigger, setRefreshTrigger] = useState<number>(0)
+
   const [pageVariables, setPageVariables] = useState([{ page: 0 }])
   const [maxItemsFetched, setMaxItemsFetched] = useState(false)
   const [isFetchingNextPage, setIsFetchingNextPage] = useState(true)
   const [errorFetchingNextPage, setNextPageFetchError] = useState<CombinedError | undefined>(
     undefined
   )
 
-  useEffect(() => {
+  const refresh = () => {
     setIsFetchingNextPage(true)
     setPageVariables([])
     setMaxItemsFetched(false)
     setTimeout(() => {
       setPageVariables([{ page: 0 }])
     }, 100)
-  }, [formValues])
+  }
+
+  useEffect(() => {
+    refresh()
+  }, [formValues, refreshTrigger])
 
   const isFetching = isFetchingNextPage
 
@@ -53,6 +59,7 @@ const NftFirehose: React.FC<Props> = ({ formActions, formValues }) => {
           showSortBy
           formValues={formValues}
           formActions={formActions}
+          setRefreshTrigger={setRefreshTrigger}
           collections={[]}
           setActiveTab={() => null}
         />

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/components/TraitGridFilters.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Nfts/components/TraitGridFilters.tsx
@@ -2,12 +2,12 @@ import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import { connect, ConnectedProps } from 'react-redux'
 import { colors, Icon } from '@blockchain-com/constellation'
-import { IconCloseCircle } from '@blockchain-com/icons'
+import { IconCloseCircle, IconRefresh } from '@blockchain-com/icons'
 import { bindActionCreators } from '@reduxjs/toolkit'
 import { Field } from 'redux-form'
 import styled from 'styled-components'
 
-import { TabMenu, TabMenuItem, Text } from 'blockchain-info-components'
+import { Button, TabMenu, TabMenuItem, Text } from 'blockchain-info-components'
 import SelectBox from 'components/Form/SelectBox'
 import { actions } from 'data'
 import { Analytics } from 'data/types'
@@ -55,6 +55,7 @@ const TraitGridFilters: React.FC<Props> = ({
   formActions,
   formValues,
   routerActions,
+  setRefreshTrigger,
   showSortBy,
   tabs
 }) => {
@@ -92,30 +93,42 @@ const TraitGridFilters: React.FC<Props> = ({
           </TabMenu>
         ) : null}
 
-        {showSortBy ? (
-          <div style={{ height: '56px', width: '300px', zIndex: 20 }}>
-            <Field
-              name='sortBy'
-              component={SelectBox}
-              onChange={(e) => {
-                if (e.includes('price')) {
-                  formActions.change('nftFilter', 'forSale', true)
-                }
-              }}
-              // @ts-ignore
-              elements={[
-                {
-                  group: '',
-                  items: [
-                    { text: 'Price: Low to High', value: `${AssetSortFields.Price}-ASC` },
-                    { text: 'Price: High to Low', value: `${AssetSortFields.Price}-DESC` },
-                    { text: 'Recently Listed', value: `${AssetSortFields.ListingDate}-DESC` }
-                  ]
-                }
-              ]}
-            />
-          </div>
-        ) : null}
+        <div>
+          <Button
+            onClick={() => setRefreshTrigger((r) => r + 1)}
+            data-e2e='nftRefresh'
+            nature='empty-blue'
+            size='small'
+          >
+            <Icon label='refresh' size='sm'>
+              <IconRefresh />
+            </Icon>
+          </Button>
+          {showSortBy ? (
+            <div style={{ height: '56px', width: '300px', zIndex: 20 }}>
+              <Field
+                name='sortBy'
+                component={SelectBox}
+                onChange={(e) => {
+                  if (e.includes('price')) {
+                    formActions.change('nftFilter', 'forSale', true)
+                  }
+                }}
+                // @ts-ignore
+                elements={[
+                  {
+                    group: '',
+                    items: [
+                      { text: 'Price: Low to High', value: `${AssetSortFields.Price}-ASC` },
+                      { text: 'Price: High to Low', value: `${AssetSortFields.Price}-DESC` },
+                      { text: 'Recently Listed', value: `${AssetSortFields.ListingDate}-DESC` }
+                    ]
+                  }
+                ]}
+              />
+            </div>
+          ) : null}
+        </div>
       </div>
       <TraitGrid hasSomeFilters={hasSomeFilters}>
         {collectionFilter ? (
@@ -275,6 +288,7 @@ type OwnProps = {
   formActions: typeof actions.form
   formValues: NftFilterFormValuesType
   setActiveTab: React.Dispatch<React.SetStateAction<'ITEMS' | 'EVENTS'>>
+  setRefreshTrigger: React.Dispatch<React.SetStateAction<number>>
   showSortBy?: boolean
   tabs: Array<'ITEMS' | 'EVENTS' | 'EXPLORE'>
 }