refactor(relay hooks): lots by artists you follow

artsy · Sep 27, 2023 · 3dc736e · 3dc736e
1 parent 3b01eda
commit 3dc736e
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 63 deletions.
diff --git a/src/app/AppRegistry.tsx b/src/app/AppRegistry.tsx
@@ -80,7 +80,7 @@ import { PurchaseModalQueryRenderer } from "./Scenes/Inbox/Components/Conversati
 import { ConversationNavigator } from "./Scenes/Inbox/ConversationNavigator"
 import { ConversationDetailsQueryRenderer } from "./Scenes/Inbox/Screens/ConversationDetails"
 import {
-  LotsByArtistsYouFollowQueryRenderer,
+  LotsByArtistsYouFollowScreen,
   LotsByArtistsYouFollowScreenQuery,
 } from "./Scenes/LotsByArtistsYouFollow/LotsByArtistsYouFollow"
 import { MapContainer } from "./Scenes/Map/MapContainer"
@@ -475,7 +475,7 @@ export const modules = defineModules({
     modalPresentationStyle: "fullScreen",
   }),
   LocalDiscovery: reactModule(CityGuideView, { fullBleed: true }),
-  LotsByArtistsYouFollow: reactModule(LotsByArtistsYouFollowQueryRenderer, {}, [
+  LotsByArtistsYouFollow: reactModule(LotsByArtistsYouFollowScreen, {}, [
     LotsByArtistsYouFollowScreenQuery,
   ]),
   MakeOfferModal: reactModule(MakeOfferModalQueryRenderer, {

diff --git a/src/app/Scenes/LotsByArtistsYouFollow/LotsByArtistsYouFollow.tsx b/src/app/Scenes/LotsByArtistsYouFollow/LotsByArtistsYouFollow.tsx
@@ -1,30 +1,32 @@
 import { Spacer, SimpleMessage } from "@artsy/palette-mobile"
 import { LotsByArtistsYouFollowQuery } from "__generated__/LotsByArtistsYouFollowQuery.graphql"
-import { LotsByArtistsYouFollow_me$data } from "__generated__/LotsByArtistsYouFollow_me.graphql"
+import { LotsByArtistsYouFollow_me$key } from "__generated__/LotsByArtistsYouFollow_me.graphql"
 import { PlaceholderGrid } from "app/Components/ArtworkGrids/GenericGrid"
 import { MasonryInfiniteScrollArtworkGrid } from "app/Components/ArtworkGrids/MasonryInfiniteScrollArtworkGrid"
 import { PageWithSimpleHeader } from "app/Components/PageWithSimpleHeader"
 import { PAGE_SIZE } from "app/Components/constants"
-import { getRelayEnvironment } from "app/system/relay/defaultEnvironment"
 import { extractNodes } from "app/utils/extractNodes"
 import { ProvidePlaceholderContext } from "app/utils/placeholders"
-import { renderWithPlaceholder } from "app/utils/renderWithPlaceholder"
-import { createPaginationContainer, graphql, QueryRenderer, RelayPaginationProp } from "react-relay"
+import { useRefreshControl } from "app/utils/refreshHelpers"
+import { Suspense } from "react"
+import { graphql, useLazyLoadQuery, usePaginationFragment } from "react-relay"
 
 const SCREEN_TITLE = "Auction Lots for You"
-interface LotsByArtistsYouFollowProps {
-  me: LotsByArtistsYouFollow_me$data
-  relay: RelayPaginationProp
-}
 
-export const LotsByArtistsYouFollow: React.FC<LotsByArtistsYouFollowProps> = ({ me, relay }) => {
-  const { hasMore, isLoading, loadMore } = relay
-  const hasNext = hasMore()
-  const loading = isLoading()
+export const LotsByArtistsYouFollow: React.FC = () => {
+  const queryData = useLazyLoadQuery<LotsByArtistsYouFollowQuery>(
+    LotsByArtistsYouFollowScreenQuery,
+    lotsByArtistsYouFollowDefaultVariables()
+  )
+
+  const { data, loadNext, hasNext, isLoadingNext, refetch } = usePaginationFragment<
+    LotsByArtistsYouFollowQuery,
+    LotsByArtistsYouFollow_me$key
+  >(artworkConnectionFragment, queryData.me)
+
+  const RefreshControl = useRefreshControl(refetch)
+  const artworks = extractNodes(data?.lotsByFollowedArtistsConnection)
 
-  const artworks = extractNodes(me?.lotsByFollowedArtistsConnection)
-  // PAGINATION NOT WORKING FIX IT
-  // NO ANALYTICS
   return (
     <PageWithSimpleHeader title={SCREEN_TITLE}>
       <MasonryInfiniteScrollArtworkGrid
@@ -33,71 +35,51 @@ export const LotsByArtistsYouFollow: React.FC<LotsByArtistsYouFollowProps> = ({
           <SimpleMessage m={2}>Nothing yet. Please check back later.</SimpleMessage>
         }
         hasMore={hasNext}
-        loadMore={() => loadMore(PAGE_SIZE)}
-        isLoading={loading}
+        loadMore={() => loadNext(PAGE_SIZE)}
+        isLoading={isLoadingNext}
+        refreshControl={RefreshControl}
       />
     </PageWithSimpleHeader>
   )
 }
 
 export const lotsByArtistsYouFollowDefaultVariables = () => ({
-  count: 10,
+  count: PAGE_SIZE,
 })
 
 export const LotsByArtistsYouFollowScreenQuery = graphql`
-  query LotsByArtistsYouFollowQuery($count: Int!, $cursor: String) {
+  query LotsByArtistsYouFollowQuery($count: Int!, $after: String) {
     me {
-      ...LotsByArtistsYouFollow_me @arguments(count: $count, cursor: $cursor)
+      ...LotsByArtistsYouFollow_me @arguments(count: $count, after: $after)
     }
   }
 `
 
-export const LotsByArtistsYouFollowFragmentContainer = createPaginationContainer(
-  LotsByArtistsYouFollow,
-  {
-    me: graphql`
-      fragment LotsByArtistsYouFollow_me on Me
-      @argumentDefinitions(count: { type: "Int", defaultValue: 10 }, cursor: { type: "String" }) {
-        lotsByFollowedArtistsConnection(
-          first: $count
-          after: $cursor
-          liveSale: true
-          isAuction: true
-        ) @connection(key: "LotsByArtistsYouFollow_lotsByFollowedArtistsConnection") {
-          edges {
-            cursor
-            node {
-              id
-              slug
-              image(includeAll: false) {
-                aspectRatio
-              }
-              ...ArtworkGridItem_artwork @arguments(includeAllImages: false)
-            }
+const artworkConnectionFragment = graphql`
+  fragment LotsByArtistsYouFollow_me on Me
+  @refetchable(queryName: "LotsByArtistsYouFollow_meRefetch")
+  @argumentDefinitions(count: { type: "Int", defaultValue: 10 }, after: { type: "String" }) {
+    lotsByFollowedArtistsConnection(first: $count, after: $after, liveSale: true, isAuction: true)
+      @connection(key: "LotsByArtistsYouFollow_lotsByFollowedArtistsConnection") {
+      edges {
+        node {
+          id
+          slug
+          image(includeAll: false) {
+            aspectRatio
           }
+          ...ArtworkGridItem_artwork @arguments(includeAllImages: false)
         }
       }
-    `,
-  },
-  {
-    getConnectionFromProps: ({ me }) => me && me.lotsByFollowedArtistsConnection,
-    getVariables: (_props, { count, cursor }) => ({ count, cursor }),
-    query: LotsByArtistsYouFollowScreenQuery,
+    }
   }
-)
+`
 
-export const LotsByArtistsYouFollowQueryRenderer: React.FC = () => {
+export const LotsByArtistsYouFollowScreen: React.FC = () => {
   return (
-    <QueryRenderer<LotsByArtistsYouFollowQuery>
-      environment={getRelayEnvironment()}
-      query={LotsByArtistsYouFollowScreenQuery}
-      variables={lotsByArtistsYouFollowDefaultVariables()}
-      render={renderWithPlaceholder({
-        Container: LotsByArtistsYouFollowFragmentContainer,
-        renderPlaceholder: Placeholder,
-        renderFallback: () => null,
-      })}
-    />
+    <Suspense fallback={<Placeholder />}>
+      <LotsByArtistsYouFollow />
+    </Suspense>
   )
 }
 

diff --git a/src/app/Scenes/SimilarToRecentlyViewed/SimilarToRecentlyViewed.tsx b/src/app/Scenes/SimilarToRecentlyViewed/SimilarToRecentlyViewed.tsx
@@ -71,7 +71,6 @@ const artworkConnectionFragment = graphql`
     similarToRecentlyViewedConnection(first: $count, after: $after)
       @connection(key: "SimilarToRecentlyViewed_similarToRecentlyViewedConnection") {
       edges {
-        cursor
         node {
           id
           slug
-Original file line number
+Diff line change
@@ Expand Up / @@ -71,7 +71,6 @@ const artworkConnectionFragment = graphql` @@
         similarToRecentlyViewedConnection(first: $count, after: $after)
           @connection(key: "SimilarToRecentlyViewed_similarToRecentlyViewedConnection") {
           edges {
-            cursor
             node {
               id
               slug
@@ Expand Down @@