refactor: revert navigations (#8223)

* chor: reverting navigations changes

* yes

* with ff

src/app/AppRegistry.tsx

@@ -8,8 +8,8 @@ import {
   WorksForYouScreenQuery,
 } from "app/Components/Containers/WorksForYou"
 import { FadeIn } from "app/Components/FadeIn"
-import { ArtQuiz } from "app/Scenes/ArtQuiz/ArtQuiz"
 import { ArtQuizArtworks } from "app/Scenes/ArtQuiz/ArtQuizArtworks"
+import { ArtQuizNavigation } from "app/Scenes/ArtQuiz/ArtQuizNavigation"
 import { ArtQuizResults } from "app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResults"
 import { SearchScreenQuery } from "app/Scenes/Search/Search"
 import { SearchScreenQuery as SearchScreenQuery2 } from "app/Scenes/Search/Search2"
@@ -343,7 +343,7 @@ export const modules = defineModules({
   DevMenu: reactModule(DevMenu, { alwaysPresentModally: true, hasOwnModalCloseButton: true }),
   About: reactModule(About),
   AddOrEditMyCollectionArtwork: reactModule(MyCollectionArtworkForm, { hidesBackButton: true }),
-  ArtQuiz: reactModule(ArtQuiz, artQuizScreenOptions),
+  ArtQuiz: reactModule(ArtQuizNavigation, artQuizScreenOptions),
   ArtQuizArtworks: reactModule(ArtQuizArtworks, artQuizScreenOptions),
   ArtQuizResults: reactModule(ArtQuizResults, artQuizScreenOptions),
   Articles: reactModule(ArticlesScreen, {}, [ArticlesScreenQuery]),

src/app/Scenes/ArtQuiz/ArtQuizArtworks.tsx

@@ -8,14 +8,16 @@ import {
   Text,
   BackButton,
 } from "@artsy/palette-mobile"
+import { NavigationProp, useNavigation } from "@react-navigation/native"
 import { ArtQuizArtworksDislikeMutation } from "__generated__/ArtQuizArtworksDislikeMutation.graphql"
 import { ArtQuizArtworksQuery } from "__generated__/ArtQuizArtworksQuery.graphql"
 import { ArtQuizArtworksSaveMutation } from "__generated__/ArtQuizArtworksSaveMutation.graphql"
 import { ArtQuizArtworksUpdateQuizMutation } from "__generated__/ArtQuizArtworksUpdateQuizMutation.graphql"
 import { usePopoverMessage } from "app/Components/PopoverMessage/popoverMessageHooks"
 import { ArtQuizLoader } from "app/Scenes/ArtQuiz/ArtQuizLoader"
+import { ArtQuizNavigationStack } from "app/Scenes/ArtQuiz/ArtQuizNavigation"
+import { useOnboardingContext } from "app/Scenes/Onboarding/OnboardingQuiz/Hooks/useOnboardingContext"
 import { GlobalStore } from "app/store/GlobalStore"
-import { goBack, navigate } from "app/system/navigation/navigate"
 import { extractNodes } from "app/utils/extractNodes"
 import { Suspense, useEffect, useRef, useState } from "react"
 import { Image } from "react-native"
@@ -33,6 +35,9 @@ export const ArtQuizResultsScreen = () => {
   const pagerViewRef = useRef<PagerView>(null)
   const popoverMessage = usePopoverMessage()
 
+  const { goBack, navigate } = useNavigation<NavigationProp<ArtQuizNavigationStack>>()
+  const { onDone } = useOnboardingContext()
+
   const currentArtwork = artworks[activeCardIndex]
   const previousArtwork = artworks[activeCardIndex - 1]
 
@@ -98,11 +103,7 @@ export const ArtQuizResultsScreen = () => {
     })
 
     if (activeCardIndex + 1 === artworks.length) {
-      navigate("/art-quiz/results", {
-        passProps: {
-          isCalculatingResult: true,
-        },
-      })
+      navigate("ArtQuizResults", { isCalculatingResult: true })
       return
     }
   }
@@ -150,7 +151,7 @@ export const ArtQuizResultsScreen = () => {
   }
 
   const handleOnSkip = () => {
-    navigate("/")
+    onDone()
     popoverMessage.hide()
   }
 

src/app/Scenes/ArtQuiz/ArtQuizNavigation.tsx

@@ -0,0 +1,61 @@
+import { NavigationContainer } from "@react-navigation/native"
+import { createStackNavigator, TransitionPresets } from "@react-navigation/stack"
+import { ArtQuizNavigationQuery } from "__generated__/ArtQuizNavigationQuery.graphql"
+import { ArtQuizArtworks } from "app/Scenes/ArtQuiz/ArtQuizArtworks"
+import { ArtQuizLoader } from "app/Scenes/ArtQuiz/ArtQuizLoader"
+import { ArtQuizResults } from "app/Scenes/ArtQuiz/ArtQuizResults/ArtQuizResults"
+import { ArtQuizWelcome } from "app/Scenes/ArtQuiz/ArtQuizWelcome"
+import { Suspense } from "react"
+import { graphql, useLazyLoadQuery } from "react-relay"
+
+export type ArtQuizNavigationStack = {
+  ArtQuizWelcome: undefined
+  ArtQuizArtworks: undefined
+  ArtQuizResults: { isCalculatingResult?: boolean }
+}
+
+export const StackNavigator = createStackNavigator<ArtQuizNavigationStack>()
+
+const ArtQuiz: React.FC = () => {
+  const quizCompleted = useLazyLoadQuery<ArtQuizNavigationQuery>(artQuizNavigationQuery, {}).me
+    ?.quiz.completedAt
+
+  if (quizCompleted) {
+    return <ArtQuizResults />
+  }
+
+  return (
+    <NavigationContainer independent>
+      <StackNavigator.Navigator
+        screenOptions={{
+          ...TransitionPresets.DefaultTransition,
+          headerShown: false,
+          headerMode: "screen",
+          gestureEnabled: false,
+        }}
+      >
+        <StackNavigator.Screen name="ArtQuizWelcome" component={ArtQuizWelcome} />
+        <StackNavigator.Screen name="ArtQuizArtworks" component={ArtQuizArtworks} />
+        <StackNavigator.Screen name="ArtQuizResults" component={ArtQuizResults} />
+      </StackNavigator.Navigator>
+    </NavigationContainer>
+  )
+}
+
+export const ArtQuizNavigation = () => {
+  return (
+    <Suspense fallback={<ArtQuizLoader />}>
+      <ArtQuiz />
+    </Suspense>
+  )
+}
+
+const artQuizNavigationQuery = graphql`
+  query ArtQuizNavigationQuery {
+    me {
+      quiz {
+        completedAt
+      }
+    }
+  }
+`

src/app/Scenes/ArtQuiz/ArtQuizWelcome.tsx

@@ -1,8 +1,25 @@
 import { Spacer, Flex, Screen, Text, ArtsyLogoBlackIcon } from "@artsy/palette-mobile"
-import { navigate } from "app/system/navigation/navigate"
+import { NavigationProp, useNavigation } from "@react-navigation/native"
+import { ArtQuizWelcomeQuery } from "__generated__/ArtQuizWelcomeQuery.graphql"
+import { ArtQuizLoader } from "app/Scenes/ArtQuiz/ArtQuizLoader"
+import { ArtQuizNavigationStack } from "app/Scenes/ArtQuiz/ArtQuizNavigation"
+import { useOnboardingContext } from "app/Scenes/Onboarding/OnboardingQuiz/Hooks/useOnboardingContext"
+import { extractNodes } from "app/utils/extractNodes"
 import { Button } from "palette"
+import { Suspense } from "react"
+import { graphql, useLazyLoadQuery } from "react-relay"
+
+export const ArtQuizWelcomeScreen = () => {
+  const { onDone } = useOnboardingContext()
+  const queryResult = useLazyLoadQuery<ArtQuizWelcomeQuery>(artQuizWelcomeQuery, {})
+  const { navigate } = useNavigation<NavigationProp<ArtQuizNavigationStack>>()
+
+  const artworks = extractNodes(queryResult.artworksConnection)
+
+  if (!artworks) {
+    return null
+  }
 
-export const ArtQuizWelcome = () => {
   return (
     <Screen>
       <Screen.Body>
@@ -18,15 +35,40 @@ export const ArtQuizWelcome = () => {
           </Text>
         </Flex>
         <Flex justifyContent="flex-end">
-          <Button block onPress={() => navigate("/art-quiz/artworks")}>
+          <Button
+            block
+            onPress={() => {
+              return navigate("ArtQuizArtworks")
+            }}
+          >
             Start the Quiz
           </Button>
           <Spacer y={1} />
-          <Button block variant="text" onPress={() => navigate("/")}>
+          <Button block variant="text" onPress={onDone}>
             Skip
           </Button>
         </Flex>
       </Screen.Body>
     </Screen>
   )
 }
+
+export const ArtQuizWelcome = () => {
+  return (
+    <Suspense fallback={<ArtQuizLoader />}>
+      <ArtQuizWelcomeScreen />
+    </Suspense>
+  )
+}
+
+const artQuizWelcomeQuery = graphql`
+  query ArtQuizWelcomeQuery {
+    artworksConnection(first: 1) {
+      edges {
+        node {
+          isSaved
+        }
+      }
+    }
+  }
+`

src/app/Scenes/Onboarding/OnboardingQuiz/OnboardingArtTasteQuiz.tsx

@@ -1,5 +1,5 @@
-import { ArtQuiz } from "app/Scenes/ArtQuiz/ArtQuiz"
+import { ArtQuizNavigation } from "app/Scenes/ArtQuiz/ArtQuizNavigation"
 
 export const OnboardingArtTasteQuiz: React.FC = () => {
-  return <ArtQuiz />
+  return <ArtQuizNavigation />
 }

src/app/Scenes/Onboarding/OnboardingQuiz/OnboardingQuestionThree.tsx

@@ -10,7 +10,9 @@ import {
   OPTION_FOLLOW_GALLERIES_IM_INTERESTED_IN,
   OPTION_KEEP_TRACK_OF_ART,
   OPTION_TOP_AUCTION_LOTS,
+  OPTION_THE_ART_TASTE_QUIZ,
 } from "app/Scenes/Onboarding/OnboardingQuiz/config"
+import { useFeatureFlag } from "app/store/GlobalStore"
 import { useCallback, useMemo } from "react"
 import { OnboardingQuestionTemplate } from "./Components/OnboardingQuestionTemplate"
 import { useNextOnboardingScreen } from "./Hooks/useNextOnboardingScreen"
@@ -24,6 +26,8 @@ export const OnboardingQuestionThree = () => {
   } = useOnboardingContext()
   const nextScreen = useNextOnboardingScreen()
 
+  const ARShowArtQuizApp = useFeatureFlag("ARShowArtQuizApp")
+
   const handleNext = useCallback(() => {
     if (!!questionThree) {
       trackAnsweredQuestionThree(questionThree)
@@ -34,6 +38,33 @@ export const OnboardingQuestionThree = () => {
 
   const options = useMemo(() => {
     switch (true) {
+      case questionTwo.length > 2 &&
+        questionTwo.includes(OPTION_DEVELOPING_MY_ART_TASTES) &&
+        questionTwo.includes(OPTION_COLLECTING_ART_THAT_MOVES_ME) &&
+        questionTwo.includes(OPTION_FINDING_GREAT_INVESTMENTS):
+      case questionTwo.length > 1 &&
+        questionTwo.includes(OPTION_DEVELOPING_MY_ART_TASTES) &&
+        questionTwo.includes(OPTION_FINDING_GREAT_INVESTMENTS):
+      case questionTwo.length > 1 &&
+        questionTwo.includes(OPTION_COLLECTING_ART_THAT_MOVES_ME) &&
+        questionTwo.includes(OPTION_FINDING_GREAT_INVESTMENTS):
+      case questionTwo.length > 1 &&
+        questionTwo.includes(OPTION_DEVELOPING_MY_ART_TASTES) &&
+        questionTwo.includes(OPTION_COLLECTING_ART_THAT_MOVES_ME):
+        if (ARShowArtQuizApp) {
+          return [
+            OPTION_THE_ART_TASTE_QUIZ,
+            OPTION_TOP_AUCTION_LOTS,
+            OPTION_ARTISTS_ON_THE_RISE,
+            OPTION_A_CURATED_SELECTION_OF_ARTWORKS,
+          ]
+        } else {
+          return [
+            OPTION_TOP_AUCTION_LOTS,
+            OPTION_ARTISTS_ON_THE_RISE,
+            OPTION_A_CURATED_SELECTION_OF_ARTWORKS,
+          ]
+        }
       case questionTwo.length > 1:
         return [
           OPTION_FOLLOW_ARTISTS_I_WANT_TO_COLLECT,
@@ -43,22 +74,40 @@ export const OnboardingQuestionThree = () => {
         ]
 
       case questionTwo[0] === OPTION_DEVELOPING_MY_ART_TASTES:
-        return [
-          OPTION_TOP_AUCTION_LOTS,
-          OPTION_A_CURATED_SELECTION_OF_ARTWORKS,
-          OPTION_ARTISTS_ON_THE_RISE,
-        ]
+        if (ARShowArtQuizApp) {
+          return [
+            OPTION_THE_ART_TASTE_QUIZ,
+            OPTION_TOP_AUCTION_LOTS,
+            OPTION_A_CURATED_SELECTION_OF_ARTWORKS,
+            OPTION_ARTISTS_ON_THE_RISE,
+          ]
+        } else {
+          return [
+            OPTION_TOP_AUCTION_LOTS,
+            OPTION_A_CURATED_SELECTION_OF_ARTWORKS,
+            OPTION_ARTISTS_ON_THE_RISE,
+          ]
+        }
 
       case questionTwo[0] === OPTION_KEEP_TRACK_OF_ART:
         return [OPTION_FOLLOW_ARTISTS_I_WANT_TO_COLLECT, OPTION_FOLLOW_GALLERIES_IM_INTERESTED_IN]
 
       case questionTwo[0] === OPTION_FINDING_GREAT_INVESTMENTS:
       case questionTwo[0] === OPTION_COLLECTING_ART_THAT_MOVES_ME:
-        return [
-          OPTION_FOLLOW_ARTISTS_I_WANT_TO_COLLECT,
-          OPTION_TOP_AUCTION_LOTS,
-          OPTION_ARTISTS_ON_THE_RISE,
-        ]
+        if (ARShowArtQuizApp) {
+          return [
+            OPTION_THE_ART_TASTE_QUIZ,
+            OPTION_FOLLOW_ARTISTS_I_WANT_TO_COLLECT,
+            OPTION_TOP_AUCTION_LOTS,
+            OPTION_ARTISTS_ON_THE_RISE,
+          ]
+        } else {
+          return [
+            OPTION_FOLLOW_ARTISTS_I_WANT_TO_COLLECT,
+            OPTION_TOP_AUCTION_LOTS,
+            OPTION_ARTISTS_ON_THE_RISE,
+          ]
+        }
 
       default:
         return []