Skip to content

Commit

Permalink
refactored a bit
Browse files Browse the repository at this point in the history
  • Loading branch information
@iskounen
iskounen committed Dec 20, 2024
1 parent 8c0dcd3 commit 1d1327d
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 106 deletions.
4 changes: 2 additions & 2 deletions ios/Podfile.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2703,7 +2703,7 @@ SPEC CHECKSUMS:
GTMAppAuth: 99fb010047ba3973b7026e45393f51f27ab965ae
GTMSessionFetcher: 0e876eea9782ec6462e91ab872711c357322c94f
hermes-engine: ea92f60f37dba025e293cbe4b4a548fd26b610a0
Interstellar: cd0c3290e249b5f156113a4c6c9c09dd0f418aaa
Interstellar: ab67502af03105f92100a043e178d188a1a437c9
INTUAnimationEngine: 3a7d63738cd51af573d16848a771feedea7cc9f2
iOSSnapshotTestCase: a670511f9ee3829c2b9c23e6e68f315fd7b6790f
ISO8601DateFormatter: 8311a2d4e265b269b2fed7ab4db685dcb0a7ccb2
Expand All @@ -2729,7 +2729,7 @@ SPEC CHECKSUMS:
PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47
Pulley: edc993fb57f7eb20541c8453d0fce10559f21dac
Quick: ce1276c7c27ba2da3cb2fd0cde053c3648b3b22d
RCT-Folly: 34124ae2e667a0e5f0ea378db071d27548124321
RCT-Folly: 4464f4d875961fce86008d45f4ecf6cef6de0740
RCTDeprecation: 726d24248aeab6d7180dac71a936bbca6a994ed1
RCTRequired: a94e7febda6db0345d207e854323c37e3a31d93b
RCTTypeSafety: 28e24a6e44f5cbf912c66dde6ab7e07d1059a205
Expand Down
67 changes: 33 additions & 34 deletions src/app/Scenes/InfiniteDiscovery/InfiniteDiscovery.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
Flex,
Image,
Screen,
Spacer,
Text,
Touchable,
useScreenDimensions,
Expand All @@ -14,13 +15,14 @@ import { FancySwiper } from "app/Components/FancySwiper/FancySwiper"
import { Card } from "app/Components/FancySwiper/FancySwiperCard"
import { InfiniteDiscoveryContext } from "app/Scenes/InfiniteDiscovery/InfiniteDiscoveryContext"
import { navigate } from "app/system/navigation/navigate"
import { useEffect } from "react"
import { extractNodes } from "app/utils/extractNodes"
import { NoFallback, withSuspense } from "app/utils/hooks/withSuspense"
import { graphql, useLazyLoadQuery } from "react-relay"

export const InfiniteDiscoveryView: React.FC = () => {
return (
<InfiniteDiscoveryContext.Provider>
<InfiniteDiscovery />
<InfiniteDiscoveryWithSuspense />
</InfiniteDiscoveryContext.Provider>
)
}
Expand All @@ -29,30 +31,16 @@ export const InfiniteDiscovery: React.FC = () => {
const { color } = useTheme()
const { width: screenWidth } = useScreenDimensions()

const data = useLazyLoadQuery<InfiniteDiscoveryQuery>(infiniteDiscoveryQuery, {})

const artworks = InfiniteDiscoveryContext.useStoreState((state) => state.artworks)
const currentArtworkIndex = InfiniteDiscoveryContext.useStoreState(
(state) => state.currentArtworkIndex
)
const goToPreviousArtwork = InfiniteDiscoveryContext.useStoreActions(
(action) => action.goToPreviousArtwork
)
const goToNextArtwork = InfiniteDiscoveryContext.useStoreActions(
(actions) => actions.goToNextArtwork
)
const setArtworks = InfiniteDiscoveryContext.useStoreActions((actions) => actions.setArtworks)
const currentIndex = InfiniteDiscoveryContext.useStoreState((state) => state.currentIndex)
const goToPrevious = InfiniteDiscoveryContext.useStoreActions((action) => action.goToPrevious)
const goToNext = InfiniteDiscoveryContext.useStoreActions((actions) => actions.goToNext)

useEffect(() => {
setArtworks(
(data.marketingCollection?.artworksConnection?.edges?.map((edge) => edge?.node) as any) || []
)
}, [data])
const data = useLazyLoadQuery<InfiniteDiscoveryQuery>(infiniteDiscoveryQuery, {})

const canGoBack = currentArtworkIndex > 0
const artworks = extractNodes(data.marketingCollection?.artworksConnection)

const handleBackPressed = () => {
goToPreviousArtwork()
goToPrevious()
}

const handleExitPressed = () => {
Expand All @@ -64,31 +52,36 @@ export const InfiniteDiscovery: React.FC = () => {
}

const handleSwipedLeft = () => {
goToNextArtwork()
goToNext()
}

const artworkCards: Card[] = artworks.slice(currentArtworkIndex).map((artwork) => {
const artworkCards: Card[] = artworks.map((artwork) => {
return {
jsx: (
<Flex backgroundColor={color("white100")}>
<Flex flexDirection="row" justifyContent="space-between" testID="artist-header">
<Flex flexDirection="row">
<Flex flexDirection="row" px={2}>
<Avatar
initials={artwork.artists[0].initials || undefined}
src={artwork.artists[0].coverArtwork?.image?.cropped?.url || undefined}
initials={artwork?.artists?.[0]?.initials || undefined}
src={artwork?.artists?.[0]?.coverArtwork?.image?.cropped?.url || undefined}
size="xs"
/>
<Flex>
<Text variant="sm-display">{artwork.artistNames}</Text>
<Text variant="xs" color={color("black60")}>
{artwork.artists[0].formattedNationalityAndBirthday}
{artwork?.artists?.[0]?.formattedNationalityAndBirthday}
</Text>
</Flex>
</Flex>
<Button variant="outlineGray">Follow</Button>
<Button variant="outlineGray" size="small">
Follow
</Button>
</Flex>
<Spacer y={2} />
<Flex alignItems="center">
<Image src={artwork.images[0].url} width={screenWidth} aspectRatio={0.79} />
{!!artwork?.images?.[0]?.url && (
<Image src={artwork.images[0].url} width={screenWidth} aspectRatio={0.79} />
)}
</Flex>
<Flex flexDirection="row" justifyContent="space-between" testID="artwork-info">
<Flex>
Expand Down Expand Up @@ -121,7 +114,7 @@ export const InfiniteDiscovery: React.FC = () => {
<Text variant="xs">Back</Text>
</Touchable>
}
hideLeftElements={!canGoBack}
hideLeftElements={currentIndex === 0}
rightElements={
<Touchable onPress={handleExitPressed}>
<Text variant="xs">Exit</Text>
Expand All @@ -140,23 +133,29 @@ export const InfiniteDiscovery: React.FC = () => {
)
}

const infiniteDiscoveryQuery = graphql`
export const InfiniteDiscoveryWithSuspense = withSuspense({
Component: InfiniteDiscovery,
LoadingFallback: () => <Text>Loading...</Text>,
ErrorFallback: NoFallback,
})

export const infiniteDiscoveryQuery = graphql`
query InfiniteDiscoveryQuery {
marketingCollection(slug: "curators-picks") {
artworksConnection(first: 10) {
edges {
node {
artistNames
artists(shallow: true) {
initials
formattedNationalityAndBirthday
coverArtwork {
image {
cropped(height: 45, width: 45) {
url
}
}
}
formattedNationalityAndBirthday
initials
}
date
internalID
Expand Down
29 changes: 13 additions & 16 deletions src/app/Scenes/InfiniteDiscovery/InfiniteDiscoveryContext.ts
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,26 @@
import { action, Action, createContextStore } from "easy-peasy"

export interface InfiniteDiscoveryContextModel {
artworks: any[]
currentArtworkIndex: number
goToPreviousArtwork: Action<this>
goToNextArtwork: Action<this>
setArtworks: Action<this, any[]>
count: number
currentIndex: number
goToPrevious: Action<this>
goToNext: Action<this>
}

export const initialModel: InfiniteDiscoveryContextModel = {
artworks: [],
currentArtworkIndex: 0,
goToPreviousArtwork: action((state) => {
if (state.currentArtworkIndex > 0) {
state.currentArtworkIndex--
// TODO: this needs to come from the result of the query
count: 10,
currentIndex: 0,
goToPrevious: action((state) => {
if (state.currentIndex > 0) {
state.currentIndex = state.currentIndex - 1
}
}),
goToNextArtwork: action((state) => {
if (state.currentArtworkIndex < state.artworks.length - 1) {
state.currentArtworkIndex++
goToNext: action((state) => {
if (state.currentIndex < state.count - 1) {
state.currentIndex = state.currentIndex + 1
}
}),
setArtworks: action((state, artworks) => {
state.artworks = artworks
}),
}

export const InfiniteDiscoveryContext = createContextStore((runtimeModel) => {
Expand Down
98 changes: 64 additions & 34 deletions src/app/Scenes/InfiniteDiscovery/__tests__/InfiniteDiscovery.tests.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import { fireEvent, screen } from "@testing-library/react-native"
import { InfiniteDiscovery } from "app/Scenes/InfiniteDiscovery/InfiniteDiscovery"
import {
infiniteDiscoveryQuery,
InfiniteDiscoveryWithSuspense,
} from "app/Scenes/InfiniteDiscovery/InfiniteDiscovery"
import { InfiniteDiscoveryContext } from "app/Scenes/InfiniteDiscovery/InfiniteDiscoveryContext"
import { navigate } from "app/system/navigation/navigate"
import { renderWithWrappers } from "app/utils/tests/renderWithWrappers"
import { setupTestWrapper } from "app/utils/tests/setupTestWrapper"
import { action } from "easy-peasy"

jest.mock("app/system/navigation/navigate")
Expand All @@ -15,50 +18,77 @@ describe("InfiniteDiscovery", () => {
})

it("shows the back button if the current artwork is not the first artwork", () => {
renderWithWrappers(
<InfiniteDiscoveryContext.Provider
runtimeModel={{ artworks: ["1", "2", "3"], currentArtwork: "2" }}
>
<InfiniteDiscovery />
</InfiniteDiscoveryContext.Provider>
)
const { renderWithRelay } = setupTestWrapper({
Component: () => (
<InfiniteDiscoveryContext.Provider
runtimeModel={{
count: 3,
currentIndex: 1,
}}
>
<InfiniteDiscoveryWithSuspense />
</InfiniteDiscoveryContext.Provider>
),
query: infiniteDiscoveryQuery,
})
renderWithRelay()
expect(screen.getByText("Back")).toBeOnTheScreen()
})

it("hides the back button if the current artwork is on the first artwork", () => {
renderWithWrappers(
<InfiniteDiscoveryContext.Provider
runtimeModel={{ artworks: ["1", "2", "3"], currentArtwork: "1" }}
>
<InfiniteDiscovery />
</InfiniteDiscoveryContext.Provider>
)
const { renderWithRelay } = setupTestWrapper({
Component: () => (
<InfiniteDiscoveryContext.Provider
runtimeModel={{
count: 3,
currentIndex: 0,
}}
>
<InfiniteDiscoveryWithSuspense />
</InfiniteDiscoveryContext.Provider>
),
query: infiniteDiscoveryQuery,
})
renderWithRelay()
expect(screen.queryByText("Back")).not.toBeOnTheScreen()
})

it("returns to the previous artwork when the back button is pressed", () => {
const mockGoToPreviousArtwork = jest.fn().mockImplementation()
renderWithWrappers(
<InfiniteDiscoveryContext.Provider
runtimeModel={{
artworks: ["1", "2", "3"],
currentArtwork: "2",
goToPreviousArtwork: action(mockGoToPreviousArtwork),
}}
>
<InfiniteDiscovery />
</InfiniteDiscoveryContext.Provider>
)
const mockGoToPrevious = jest.fn().mockImplementation()
const { renderWithRelay } = setupTestWrapper({
Component: () => (
<InfiniteDiscoveryContext.Provider
runtimeModel={{
count: 3,
currentIndex: 1,
goToPrevious: action(mockGoToPrevious),
}}
>
<InfiniteDiscoveryWithSuspense />
</InfiniteDiscoveryContext.Provider>
),
query: infiniteDiscoveryQuery,
})
renderWithRelay()
fireEvent.press(screen.getByText("Back"))
expect(mockGoToPreviousArtwork).toHaveBeenCalled()
expect(mockGoToPrevious).toHaveBeenCalled()
})

it("navigates to home view when the exit button is pressed", () => {
renderWithWrappers(
<InfiniteDiscoveryContext.Provider>
<InfiniteDiscovery />
</InfiniteDiscoveryContext.Provider>
)
const { renderWithRelay } = setupTestWrapper({
Component: () => (
<InfiniteDiscoveryContext.Provider
runtimeModel={{
count: 3,
currentIndex: 1,
}}
>
<InfiniteDiscoveryWithSuspense />
</InfiniteDiscoveryContext.Provider>
),
query: infiniteDiscoveryQuery,
})
renderWithRelay()
fireEvent.press(screen.getByText("Exit"))
expect(mockNavigate).toHaveBeenCalledWith("/home-view")
})
Expand Down
Loading

0 comments on commit 1d1327d

Please sign in to comment.