refactor: decrease the number of call fetching the subgraph data (#947)

* refactor: avoid calling useDisputes at exchange level. Instead call useDisputes for a list of exchanges * do not fetch subgraph when there is nothing to fetch (wrt filtering criteria) * pass the lensProfile property through components to avoid calling useCurrentSellers() too many times * reset changes in useExchanges * feat: ensure the seller name is shown on the exchange cards (from lens if available, otherwise from metadata) * apply suggestions from code review Co-authored-by: albertfolch-redeemeum <[email protected]> * complete review remarks * use a map instead of both Set and array --------- Co-authored-by: albertfolch-redeemeum <[email protected]>
bosonprotocol · Dec 1, 2023 · 169df7b · 169df7b
1 parent 3984388
commit 169df7b
Show file tree

Hide file tree

Showing 32 changed files with 469 additions and 175 deletions.
diff --git a/src/components/disputeResolver/DisputeHistory/DisputeHistory.tsx b/src/components/disputeResolver/DisputeHistory/DisputeHistory.tsx
@@ -1,3 +1,4 @@
+import { subgraph } from "@bosonprotocol/react-kit";
 import styled from "styled-components";
 
 import { Exchange } from "../../../lib/utils/hooks/useExchanges";
@@ -15,17 +16,22 @@ const OfferHistoryStatuses = styled.div`
 
 interface Props {
   exchange: Exchange;
+  dispute: subgraph.DisputeFieldsFragment | undefined;
 }
 
-export const DisputeHistory = ({ exchange }: Props) => {
+export const DisputeHistory = ({ exchange, dispute }: Props) => {
   if (!exchange) {
     return null;
   }
 
   return (
     <OfferHistoryStatuses>
       {exchange ? (
-        <ExchangeTimeline exchange={exchange} showDispute={true}>
+        <ExchangeTimeline
+          exchange={exchange}
+          dispute={dispute}
+          showDispute={true}
+        >
           <h4>History</h4>
         </ExchangeTimeline>
       ) : (

diff --git a/src/components/disputeResolver/ManageDisputes/DisputesTable.tsx b/src/components/disputeResolver/ManageDisputes/DisputesTable.tsx
@@ -127,7 +127,9 @@ export default function DisputesTable({ disputes }: Props) {
           status: dispute && (
             <Tooltip
               interactive
-              content={<DisputeHistory exchange={dispute.exchange} />}
+              content={
+                <DisputeHistory exchange={dispute.exchange} dispute={dispute} />
+              }
             >
               <DisputeStateWrapper state={dispute.state}>
                 {dispute.state}

diff --git a/src/components/disputeResolver/ManageDisputes/DisputesTablePast.tsx b/src/components/disputeResolver/ManageDisputes/DisputesTablePast.tsx
@@ -117,7 +117,9 @@ export default function DisputesTablePast({ disputes }: Props) {
           status: dispute && (
             <Tooltip
               interactive
-              content={<DisputeHistory exchange={dispute.exchange} />}
+              content={
+                <DisputeHistory exchange={dispute.exchange} dispute={dispute} />
+              }
             >
               <DisputeStateWrapper state={dispute.state}>
                 {dispute.state}

diff --git a/src/components/exchange/Exchange.tsx b/src/components/exchange/Exchange.tsx
@@ -1,4 +1,5 @@
 import {
+  AuthTokenType,
   Currencies,
   ExchangeCard,
   ExchangeCardStatus,
@@ -19,7 +20,7 @@ import { BosonRoutes } from "../../lib/routing/routes";
 import { colors } from "../../lib/styles/colors";
 import { Offer } from "../../lib/types/offer";
 import { calcPrice } from "../../lib/utils/calcPrice";
-import { useCurrentSellers } from "../../lib/utils/hooks/useCurrentSellers";
+import { Profile } from "../../lib/utils/hooks/lens/graphql/generated";
 import { Exchange as IExchange } from "../../lib/utils/hooks/useExchanges";
 import { useHandleText } from "../../lib/utils/hooks/useHandleText";
 import { useKeepQueryParamsNavigate } from "../../lib/utils/hooks/useKeepQueryParamsNavigate";
@@ -36,6 +37,7 @@ interface Props {
   offer: Offer;
   exchange: IExchange;
   isPrivateProfile?: boolean;
+  sellerLensProfile?: Profile;
 }
 
 const ExchangeCardWrapper = styled.div<{ $isCustomStoreFront: boolean }>`
@@ -65,15 +67,27 @@ const ExchangeCardWrapper = styled.div<{ $isCustomStoreFront: boolean }>`
   }};
 `;
 
-export default function Exchange({ offer, exchange }: Props) {
+export default function Exchange({
+  offer,
+  exchange,
+  sellerLensProfile
+}: Props) {
   const { config } = useConfigContext();
-  const { lens: lensProfiles } = useCurrentSellers({
-    sellerId: offer?.seller?.id
-  });
-  const [lens] = lensProfiles;
-  const avatar = config.lens.ipfsGateway
-    ? getLensImageUrl(getLensProfilePictureUrl(lens), config.lens.ipfsGateway)
-    : null;
+  const seller = exchange?.seller;
+  const metadata = seller?.metadata;
+  const useLens = seller?.authTokenType === AuthTokenType.LENS;
+  const regularProfilePicture =
+    metadata?.images?.find((img) => img.tag === "profile")?.url ?? "";
+  const avatar =
+    (useLens && config.lens.ipfsGateway
+      ? getLensImageUrl(
+          getLensProfilePictureUrl(sellerLensProfile),
+          config.lens.ipfsGateway
+        )
+      : regularProfilePicture) ?? regularProfilePicture;
+  const sellerName =
+    (useLens ? sellerLensProfile?.name : metadata?.name) ??
+    (metadata?.name || `Seller ID: ${seller?.id}`);
 
   const { showModal, modalTypes } = useModal();
   const navigate = useKeepQueryParamsNavigate();
@@ -204,7 +218,7 @@ export default function Exchange({ offer, exchange }: Props) {
         dataCard="exchange-card"
         id={offer.id}
         title={offer.metadata.name}
-        avatarName={lens?.name ? lens?.name : `Seller ID: ${offer.seller.id}`}
+        avatarName={sellerName}
         avatar={avatar || mockedAvatar}
         imageProps={{
           src: imageSrc,

diff --git a/src/components/modal/components/Explore/Collections/CollectionsCard.tsx b/src/components/modal/components/Explore/Collections/CollectionsCard.tsx
@@ -1,4 +1,4 @@
-import { AuthTokenType } from "@bosonprotocol/react-kit";
+import { AuthTokenType, subgraph } from "@bosonprotocol/react-kit";
 import { Fragment, useMemo, useState } from "react";
 import { generatePath } from "react-router-dom";
 import styled, { css } from "styled-components";
@@ -7,7 +7,7 @@ import { UrlParameters } from "../../../../../lib/routing/parameters";
 import { BosonRoutes } from "../../../../../lib/routing/routes";
 import { colors } from "../../../../../lib/styles/colors";
 import { zIndex } from "../../../../../lib/styles/zIndex";
-import { useCurrentSellers } from "../../../../../lib/utils/hooks/useCurrentSellers";
+import { Profile } from "../../../../../lib/utils/hooks/lens/graphql/generated";
 import { useKeepQueryParamsNavigate } from "../../../../../lib/utils/hooks/useKeepQueryParamsNavigate";
 import useSellerNumbers from "../../../../../lib/utils/hooks/useSellerNumbers";
 import { useCustomStoreQueryParameter } from "../../../../../pages/custom-store/useCustomStoreQueryParameter";
@@ -84,26 +84,23 @@ const StyledGrid = styled(Grid)`
 
 interface Props {
   collection: ExtendedSeller;
+  lensProfile?: Profile;
 }
 const imagesNumber = 4;
-export default function CollectionsCard({ collection }: Props) {
+export default function CollectionsCard({ collection, lensProfile }: Props) {
   const [sellerId] = useState<string>(collection.id);
 
   const {
     numbers: { products: numProducts }
   } = useSellerNumbers(sellerId);
 
-  const { lens: lensProfiles, sellers: sellersData } = useCurrentSellers({
-    sellerId
-  });
-  const seller = sellersData[0];
+  const seller = collection as unknown as subgraph.Seller;
   const metadata = seller?.metadata;
-  const [lens] = lensProfiles;
 
   const useLens = seller?.authTokenType === AuthTokenType.LENS;
 
   const name =
-    (useLens ? lens?.name : metadata?.name) ??
+    (useLens ? lensProfile?.name : metadata?.name) ??
     metadata?.name ??
     `Seller ID: ${collection.id}`;
   const navigate = useKeepQueryParamsNavigate();

diff --git a/src/components/productCard/ProductCard.tsx b/src/components/productCard/ProductCard.tsx
@@ -16,7 +16,7 @@ import { colors } from "../../lib/styles/colors";
 import { isTruthy } from "../../lib/types/helpers";
 import { Offer } from "../../lib/types/offer";
 import { displayFloat } from "../../lib/utils/calcPrice";
-import { useCurrentSellers } from "../../lib/utils/hooks/useCurrentSellers";
+import { Profile } from "../../lib/utils/hooks/lens/graphql/generated";
 import { useHandleText } from "../../lib/utils/hooks/useHandleText";
 import { useKeepQueryParamsNavigate } from "../../lib/utils/hooks/useKeepQueryParamsNavigate";
 import {
@@ -38,6 +38,7 @@ interface Props {
   exchange?: NonNullable<Offer["exchanges"]>[number];
   dataTestId: string;
   isHoverDisabled?: boolean;
+  lensProfile?: Profile;
 }
 
 const ProductCardWrapper = styled.div<{
@@ -96,23 +97,23 @@ export default function ProductCard({
   offer,
   dataTestId,
   isHoverDisabled = false,
-  filterOptions
+  filterOptions,
+  lensProfile
 }: Props) {
   const { config } = useConfigContext();
   const isTokenGated = !!offer.condition?.id;
 
-  const { lens: lensProfiles } = useCurrentSellers({
-    sellerId: offer?.seller?.id
-  });
   const seller = offer?.seller;
   const metadata = seller?.metadata;
   const useLens = seller?.authTokenType === AuthTokenType.LENS;
   const regularProfilePicture =
     metadata?.images?.find((img) => img.tag === "profile")?.url ?? "";
-  const [lens] = lensProfiles;
   const avatar =
     (useLens && config.lens.ipfsGateway
-      ? getLensImageUrl(getLensProfilePictureUrl(lens), config.lens.ipfsGateway)
+      ? getLensImageUrl(
+          getLensProfilePictureUrl(lensProfile),
+          config.lens.ipfsGateway
+        )
       : regularProfilePicture) ?? regularProfilePicture;
   const [avatarObj, setAvatarObj] = useState<{
     avatarUrl: string | null | undefined;
@@ -199,7 +200,8 @@ export default function ProductCard({
     offer?.additional?.variants?.length > 1 &&
     !allVariantsHaveSamePrice;
 
-  const name = (useLens ? lens?.name : metadata?.name) ?? metadata?.name ?? "";
+  const name =
+    (useLens ? lensProfile?.name : metadata?.name) ?? metadata?.name ?? "";
   const lowerCardBgColor = useCustomStoreQueryParameter("lowerCardBgColor");
   const isLowerCardBgColorDefined = !!lowerCardBgColor;
   return (

diff --git a/src/components/seller/dashboard/SellerDashboard.tsx b/src/components/seller/dashboard/SellerDashboard.tsx
@@ -10,6 +10,7 @@ import { colors } from "../../../lib/styles/colors";
 import { Offer } from "../../../lib/types/offer";
 import { IPricePassedAsAProp } from "../../../lib/utils/convertPrice";
 import { getDateTimestamp } from "../../../lib/utils/getDateTimestamp";
+import { useLensProfilesPerSellerIds } from "../../../lib/utils/hooks/lens/profile/useGetLensProfiles";
 import { Exchange } from "../../../lib/utils/hooks/useExchanges";
 import { useKeepQueryParamsNavigate } from "../../../lib/utils/hooks/useKeepQueryParamsNavigate";
 import { useConvertedPriceFunction } from "../../price/useConvertedPriceFunction";
@@ -109,6 +110,16 @@ export default function SellerDashboard({
   const { data: offers, isLoading: isLoadingOffers } = offersData;
   const { data: exchanges, isLoading: isLoadingExchanges } = exchangesData;
 
+  // fetch lensProfile for current SellerId
+  const seller = exchanges?.[0]?.seller;
+  const sellerLensProfilePerSellerId = useLensProfilesPerSellerIds(
+    { sellers: seller ? [seller] : [] },
+    { enabled: !!seller }
+  );
+  const sellerLensProfile = seller
+    ? sellerLensProfilePerSellerId?.get(seller.id)
+    : undefined;
+
   const commits = useMemo(() => filterItems(exchanges, "Commits"), [exchanges]);
   const redemptions = useMemo(
     () => filterItems(exchanges, "Redemptions"),
@@ -202,6 +213,7 @@ export default function SellerDashboard({
             <SellerDashboardItems
               name="Commits"
               items={commits.slice(0, 3)}
+              sellerLensProfile={sellerLensProfile}
               onClick={() => {
                 const pathname = getSellerCenterPath("Exchanges");
                 navigate({ pathname }, { state: { currentTag: "live-rnfts" } });
@@ -212,6 +224,7 @@ export default function SellerDashboard({
             <SellerDashboardItems
               name="Redemptions"
               items={redemptions.slice(0, 3)}
+              sellerLensProfile={sellerLensProfile}
               onClick={() => {
                 const pathname = generatePath(SellerCenterRoutes.SellerCenter, {
                   [UrlParameters.sellerPage]: "exchanges"
@@ -227,6 +240,7 @@ export default function SellerDashboard({
             <SellerDashboardItems
               name="Disputes"
               items={disputes.slice(0, 3)}
+              sellerLensProfile={sellerLensProfile}
               onClick={() => {
                 const pathname = generatePath(SellerCenterRoutes.SellerCenter, {
                   [UrlParameters.sellerPage]: "exchanges"

diff --git a/src/components/seller/dashboard/SellerDashboardItems.tsx b/src/components/seller/dashboard/SellerDashboardItems.tsx
@@ -6,6 +6,7 @@ import { ArrowRight } from "phosphor-react";
 
 import { CONFIG } from "../../../lib/config";
 import { getDateTimestamp } from "../../../lib/utils/getDateTimestamp";
+import { Profile } from "../../../lib/utils/hooks/lens/graphql/generated";
 import { Exchange } from "../../../lib/utils/hooks/useExchanges";
 import Image from "../../ui/Image";
 import SellerID from "../../ui/SellerID";
@@ -23,6 +24,7 @@ import {
 interface Props {
   name: string;
   items: Exchange[];
+  sellerLensProfile?: Profile;
   onClick?: () => void;
 }
 
@@ -99,7 +101,12 @@ const ItemDates = (item: Exchange, type: string) => {
 
   return component();
 };
-export default function SellerDashboardItems({ items, name, onClick }: Props) {
+export default function SellerDashboardItems({
+  items,
+  name,
+  sellerLensProfile,
+  onClick
+}: Props) {
   return (
     <>
       <ItemsName onClick={onClick}>
@@ -124,10 +131,11 @@ export default function SellerDashboardItems({ items, name, onClick }: Props) {
                 <ExchangeName>{item?.offer?.metadata?.name}</ExchangeName>
                 <SellerID
                   offer={item?.offer}
-                  buyerOrSeller={item?.offer?.seller}
+                  buyerOrSeller={item?.seller}
                   withProfileImage
                   onClick={() => null}
                   withBosonStyles
+                  lensProfile={sellerLensProfile}
                 />
                 <div>
                   {itemDate?.first?.value && (

diff --git a/src/components/seller/exchanges/SellerExchangeTable.tsx b/src/components/seller/exchanges/SellerExchangeTable.tsx
@@ -244,6 +244,10 @@ export default function SellerExchangeTable({
     () =>
       data?.map((element) => {
         const status = element ? ExchangesKit.getExchangeState(element) : "";
+        const dispute = element?.dispute as
+          | subgraph.DisputeFieldsFragment
+          | null
+          | undefined;
         return {
           exchangeId: element?.id,
           isSelectable: element && isExchangeCompletableBySeller(element),
@@ -270,7 +274,7 @@ export default function SellerExchangeTable({
               interactive
               content={
                 <OfferHistoryStatuses>
-                  <ExchangeTimeline exchange={element}>
+                  <ExchangeTimeline exchange={element} dispute={dispute}>
                     <h4>History</h4>
                   </ExchangeTimeline>
                 </OfferHistoryStatuses>
@@ -341,7 +345,11 @@ export default function SellerExchangeTable({
       initialState: {
         pageIndex: 0,
         hiddenColumns: ["exchangeId", "isSelectable"]
-      }
+      },
+      // https://stackoverflow.com/questions/71998920/why-are-react-table-pagination-filter-and-sort-reset-automatically-when-its-t
+      autoResetPage: false,
+      autoResetFilters: false,
+      autoResetSortBy: false
     },
     useSortBy,
     usePagination,