-
Notifications
You must be signed in to change notification settings - Fork 581
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add preloaded query to collections by category screen
- Loading branch information
1 parent
714f5df
commit 6334ce2
Showing
7 changed files
with
180 additions
and
133 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 3 additions & 0 deletions
3
src/app/Scenes/CollectionsByCategory/CollectionsByCategory.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
121 changes: 121 additions & 0 deletions
121
src/app/Scenes/HomeView/Components/HomeViewSectionCardsCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| import { ContextModule, OwnerType, ScreenOwnerType } from "@artsy/cohesion" | ||
| import { Flex, Image, SkeletonBox, Text, Touchable, useSpace } from "@artsy/palette-mobile" | ||
| import { HomeViewSectionCardsCardQuery } from "__generated__/HomeViewSectionCardsCardQuery.graphql" | ||
| import { HomeViewSectionCardsCard_card$key } from "__generated__/HomeViewSectionCardsCard_card.graphql" | ||
| import { HomeViewSectionCardsCard_section$key } from "__generated__/HomeViewSectionCardsCard_section.graphql" | ||
| import { useHomeViewTracking } from "app/Scenes/HomeView/hooks/useHomeViewTracking" | ||
| import { navigate } from "app/system/navigation/navigate" | ||
| import { FC, useEffect } from "react" | ||
| import { graphql, useFragment, useQueryLoader } from "react-relay" | ||
|
|
||
| const IMAGE_RATIO = 0.85 | ||
|
|
||
| interface HomeViewSectionCardsCardProps { | ||
| card: HomeViewSectionCardsCard_card$key | ||
| section: HomeViewSectionCardsCard_section$key | ||
| index: number | ||
| imageWidth: number | ||
| } | ||
|
|
||
| export const HomeViewSectionCardsCard: FC<HomeViewSectionCardsCardProps> = ({ | ||
| card: _card, | ||
| section: _section, | ||
| index, | ||
| imageWidth, | ||
| }) => { | ||
| const space = useSpace() | ||
| const card = useFragment(cardFragment, _card) | ||
| const section = useFragment(sectionFragment, _section) | ||
| const [queryRef, loadQuery] = | ||
| useQueryLoader<HomeViewSectionCardsCardQuery>(marketingCollectionsQuery) | ||
| const tracking = useHomeViewTracking() | ||
|
|
||
| useEffect(() => { | ||
| if (!queryRef && card?.entityID) { | ||
| loadQuery({ category: card.entityID }, { fetchPolicy: "store-or-network" }) | ||
| } | ||
| }, [queryRef, card?.entityID]) | ||
|
|
||
| if (!card || !section) { | ||
| return null | ||
| } | ||
|
|
||
| if (!queryRef) { | ||
| return <HomeViewSectionCardsCardPlaceholder imageWidth={imageWidth} index={index} /> | ||
| } | ||
|
|
||
| const handleCardPress = () => { | ||
| const href = | ||
| card?.entityType === OwnerType.collectionsCategory | ||
| ? `/collections-by-category/${card.title}?homeViewSectionId=${section.internalID}&entityID=${card.entityID}` | ||
| : card?.href | ||
|
|
||
| if (href) { | ||
| tracking.tappedCardGroup( | ||
| card.entityID, | ||
| card.entityType as ScreenOwnerType, | ||
| href, | ||
| section.contextModule as ContextModule, | ||
| index | ||
| ) | ||
| navigate(href, { passProps: { queryRef } }) | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <Touchable onPress={handleCardPress}> | ||
| <Flex borderRadius={5} overflow="hidden"> | ||
| <Image src={card.image?.url as string} width={imageWidth} aspectRatio={IMAGE_RATIO} /> | ||
|
|
||
| <Flex | ||
| position="absolute" | ||
| top={space(1)} | ||
| left={space(1)} | ||
| backgroundColor="white100" | ||
| px={0.5} | ||
| > | ||
| <Text variant="md">{card.title}</Text> | ||
| </Flex> | ||
| </Flex> | ||
| </Touchable> | ||
| ) | ||
| } | ||
|
|
||
| const cardFragment = graphql` | ||
| fragment HomeViewSectionCardsCard_card on HomeViewCard { | ||
| entityID @required(action: NONE) | ||
| title @required(action: NONE) | ||
| entityType | ||
| href | ||
| image { | ||
| url | ||
| } | ||
| } | ||
| ` | ||
| const sectionFragment = graphql` | ||
| fragment HomeViewSectionCardsCard_section on HomeViewSectionCards { | ||
| internalID | ||
| contextModule | ||
| } | ||
| ` | ||
|
|
||
| export const marketingCollectionsQuery = graphql` | ||
| query HomeViewSectionCardsCardQuery($category: String!) @cacheable { | ||
| viewer { | ||
| marketingCollections(category: $category, sort: CURATED, first: 20) { | ||
| ...BodyCollectionsByCategory_marketingCollections | ||
| ...CollectionsChips_marketingCollections | ||
| } | ||
| } | ||
| } | ||
| ` | ||
|
|
||
| export const HomeViewSectionCardsCardPlaceholder: FC< | ||
| Pick<HomeViewSectionCardsCardProps, "imageWidth" | "index"> | ||
| > = ({ imageWidth, index }) => { | ||
| return ( | ||
| <Flex key={index} borderRadius={5}> | ||
| <SkeletonBox width={imageWidth} height={imageWidth / IMAGE_RATIO} /> | ||
| </Flex> | ||
| ) | ||
| } |
Oops, something went wrong.