fix: new Item page re-renders fixed (#1667)

decentraland · May 8, 2023 · 99fe21b · 99fe21b
1 parent a5814ab
commit 99fe21b
Show file tree

Hide file tree

Showing 12 changed files with 60 additions and 57 deletions.
diff --git a/webapp/src/components/AssetCard/AssetCard.css b/webapp/src/components/AssetCard/AssetCard.css
@@ -188,6 +188,12 @@ a.ui.card.link:hover .meta {
   height: 223px;
 }
 
+.AssetCard .NotForSale {
+  font-weight: bold;
+  margin-top: 12px;
+  margin-bottom: 4px;
+}
+
 .AssetCard .AssetImage.catalog {
   height: 161px;
 }

diff --git a/webapp/src/components/AssetCard/AssetCard.tsx b/webapp/src/components/AssetCard/AssetCard.tsx
@@ -123,7 +123,8 @@ const AssetCard = (props: Props) => {
     if (!isNFT(asset) && isCatalogItem(asset)) {
       const isAvailableForMint = asset.isOnSale && asset.available > 0
 
-      if (!isAvailableForMint && !asset.minListingPrice) {
+      const notForSale = !isAvailableForMint && !asset.minListingPrice
+      if (notForSale) {
         information = {
           action: t('asset_card.not_for_sale'),
           actionIcon: null,
@@ -149,6 +150,20 @@ const AssetCard = (props: Props) => {
           ((sortBy === SortBy.MOST_EXPENSIVE && mostExpensive === LISTING) ||
             (sortBy === SortBy.CHEAPEST && cheapest === LISTING))
 
+        let price
+        switch (sortBy) {
+          case SortBy.MOST_EXPENSIVE:
+            price = mostExpensive === MINT ? asset.price : asset.maxListingPrice
+            break
+          case SortBy.CHEAPEST:
+            price = asset.minPrice
+            break
+
+          default:
+            price = isAvailableForMint ? asset.price : asset.minListingPrice
+            break
+        }
+
         information = {
           action:
             sortBy === SortBy.CHEAPEST
@@ -164,18 +179,7 @@ const AssetCard = (props: Props) => {
             sortBy !== SortBy.CHEAPEST
               ? mintingIcon
               : null,
-          price:
-            sortBy === SortBy.MOST_EXPENSIVE
-              ? mostExpensive === MINT
-                ? asset.price
-                : asset.maxListingPrice ?? null
-              : sortBy === SortBy.CHEAPEST
-              ? cheapest === MINT
-                ? asset.price
-                : asset.minPrice ?? null
-              : isAvailableForMint
-              ? asset.price
-              : asset.minListingPrice ?? null,
+          price: price ?? null,
           extraInformation:
             asset.maxListingPrice && asset.minListingPrice && asset.listings ? (
               <span>
@@ -204,9 +208,12 @@ const AssetCard = (props: Props) => {
   }, [asset, sortBy])
 
   const renderCatalogItemInformation = useCallback(() => {
+    const isAvailableForMint = !isNFT(asset) && asset.isOnSale && asset.available > 0
+    const notForSale = !isAvailableForMint && !isNFT(asset) && !asset.minListingPrice
+
     return catalogItemInformation ? (
       <div className="CatalogItemInformation">
-        <span>
+        <span className={notForSale ? 'NotForSale' : ''}>
           {catalogItemInformation.action} &nbsp;
           {catalogItemInformation.actionIcon && (
             <img

diff --git a/webapp/src/components/AssetFilters/StatusFilter/StatusFilter.tsx b/webapp/src/components/AssetFilters/StatusFilter/StatusFilter.tsx
@@ -28,7 +28,13 @@ export const StatusFilter = ({
   )
 
   const handleChange = useCallback(
-    (_evt, { value }) => onChange({ status: value }),
+    (_evt, { value }) => {
+      let options: BrowseOptions = { status: value }
+      if (value === AssetStatusFilter.NOT_FOR_SALE) {
+        options = { ...options, minPrice: undefined, maxPrice: undefined }
+      }
+      return onChange(options)
+    },
     [onChange]
   )
 

diff --git a/webapp/src/components/AssetPage/AssetPage.container.tsx b/webapp/src/components/AssetPage/AssetPage.container.tsx
diff --git a/webapp/src/components/AssetPage/AssetPage.tsx b/webapp/src/components/AssetPage/AssetPage.tsx
@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { useCallback } from 'react'
+import { Item } from '@dcl/schemas'
 import { mapAsset } from '../../modules/asset/utils'
 import { Page, Section, Column } from 'decentraland-ui'
 import { AssetProviderPage } from '../AssetProviderPage'
@@ -16,6 +17,10 @@ import { EmoteDetail } from './EmoteDetail'
 import './AssetPage.css'
 
 const AssetPage = ({ type }: Props) => {
+  const renderItemDetail = useCallback(
+    (item: Item) => <ItemDetail item={item} />,
+    []
+  )
   return (
     <>
       <Navbar isFullscreen />
@@ -30,8 +35,8 @@ const AssetPage = ({ type }: Props) => {
                     {mapAsset<React.ReactNode>(
                       asset,
                       {
-                        wearable: item => <ItemDetail item={item} />,
-                        emote: item => <ItemDetail item={item} />
+                        wearable: renderItemDetail,
+                        emote: renderItemDetail
                       },
                       {
                         ens: nft => <ENSDetail nft={nft} />,

diff --git a/webapp/src/components/AssetPage/AssetPage.types.ts b/webapp/src/components/AssetPage/AssetPage.types.ts
@@ -1,12 +1,5 @@
-import { getLocation } from 'connected-react-router'
 import { AssetType } from '../../modules/asset/types'
 
 export type Props = {
   type: AssetType
-  onBack: (location?: string) => void
-  location: ReturnType<typeof getLocation>
 }
-
-export type MapStateProps = Pick<Props, 'location'>
-
-export type MapDispatchProps = Pick<Props, 'onBack'>
diff --git a/webapp/src/components/AssetPage/OnBack/OnBack.tsx b/webapp/src/components/AssetPage/OnBack/OnBack.tsx
@@ -18,7 +18,6 @@ const OnBack = ({ asset, isFavoritesEnabled, onBack }: Props) => {
     <div className="top-header">
       <Button
         className="back"
-        absolute
         onClick={() =>
           onBack(
             mapAsset(
@@ -71,7 +70,6 @@ const OnBack = ({ asset, isFavoritesEnabled, onBack }: Props) => {
           )
         }
         basic
-        white
       >
         <img src={onBackIcon} alt={t('global.back')} />
         {t('global.back')}

diff --git a/webapp/src/components/AssetPage/index.ts b/webapp/src/components/AssetPage/index.ts
@@ -1,3 +1,3 @@
-import AssetPage from './AssetPage.container'
+import AssetPage from './AssetPage'
 
 export { AssetPage }
diff --git a/webapp/src/components/AssetProvider/AssetProvider.container.ts b/webapp/src/components/AssetProvider/AssetProvider.container.ts
@@ -36,7 +36,6 @@ import {
 } from './AssetProvider.types'
 import AssetProvider from './AssetProvider'
 
-
 const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
   let contractAddress = ownProps.contractAddress
   let tokenId = ownProps.tokenId

diff --git a/webapp/src/components/Routes/Routes.tsx b/webapp/src/components/Routes/Routes.tsx
@@ -1,3 +1,4 @@
+import { useCallback } from 'react'
 import { Switch, Route, Redirect, RouteComponentProps } from 'react-router-dom'
 import { Center, Page } from 'decentraland-ui'
 import Intercom from 'decentraland-dapps/dist/components/Intercom'
@@ -31,6 +32,15 @@ import { Props } from './Routes.types'
 
 const Routes = ({ inMaintenance, isFavoritesEnabled }: Props) => {
   const APP_ID = config.get('INTERCOM_APP_ID')
+  const renderItemAssetPage = useCallback(
+    () => <AssetPage type={AssetType.ITEM} />,
+    []
+  )
+
+  const renderNFTAssetPage = useCallback(
+    () => <AssetPage type={AssetType.NFT} />,
+    []
+  )
 
   if (inMaintenance) {
     return (
@@ -92,16 +102,8 @@ const Routes = ({ inMaintenance, isFavoritesEnabled }: Props) => {
             <StatusPage {...props} type={AssetType.ITEM} />
           )}
         />
-        <Route
-          exact
-          path={locations.nft()}
-          component={() => <AssetPage type={AssetType.NFT} />}
-        />
-        <Route
-          exact
-          path={locations.item()}
-          component={() => <AssetPage type={AssetType.ITEM} />}
-        />
+        <Route exact path={locations.nft()} component={renderNFTAssetPage} />
+        <Route exact path={locations.item()} component={renderItemAssetPage} />
         <Route exact path={locations.settings()} component={SettingsPage} />
         <Route exact path={locations.activity()} component={ActivityPage} />
         <Route exact path={locations.root()} component={HomePage} />

diff --git a/webapp/src/components/Table/TableContainer/TableContainer.tsx b/webapp/src/components/Table/TableContainer/TableContainer.tsx
@@ -21,6 +21,7 @@ const TableContainer = forwardRef<HTMLDivElement, Props>((props, ref) => {
           <Tabs isFullscreen>
             {tabsList.map(tab => (
               <Tabs.Tab
+                key={tab.value}
                 active={activeTab === tab.value}
                 onClick={() => {
                   handleTabChange && handleTabChange(tab.value)

diff --git a/webapp/src/modules/item/reducer.ts b/webapp/src/modules/item/reducer.ts
@@ -1,3 +1,4 @@
+import isEqual from 'lodash/isEqual'
 import { Item } from '@dcl/schemas'
 import {
   loadingReducer,
@@ -97,7 +98,9 @@ export function itemReducer(
         data: {
           ...state.data,
           ...items.reduce((obj, item) => {
-            obj[item.id] = item
+            if (!state.data[item.id] || !isEqual(state.data[item.id], item)) {
+              obj[item.id] = item
+            }
             return obj
           }, {} as Record<string, Item>)
         },