From 276255dcf3621329d6c5a066a0930b67e758daf1 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 12 Jun 2024 00:44:27 -0700
Subject: [PATCH] better screen transitions

---
 .../StarterPack/Wizard/ScreenTransition.tsx   | 28 +++++++++++++++++++
 src/screens/StarterPack/Wizard/State.tsx      | 15 ++++++++--
 .../StarterPack/Wizard/StepDetails.tsx        |  4 +--
 src/screens/StarterPack/Wizard/StepFeeds.tsx  |  4 +--
 .../StarterPack/Wizard/StepProfiles.tsx       |  4 +--
 5 files changed, 47 insertions(+), 8 deletions(-)
 create mode 100644 src/components/StarterPack/Wizard/ScreenTransition.tsx

diff --git a/src/components/StarterPack/Wizard/ScreenTransition.tsx b/src/components/StarterPack/Wizard/ScreenTransition.tsx
new file mode 100644
index 0000000000..06e5b59586
--- /dev/null
+++ b/src/components/StarterPack/Wizard/ScreenTransition.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import {StyleProp, ViewStyle} from 'react-native'
+import Animated, {
+  FadeOut,
+  SlideInLeft,
+  SlideInRight,
+} from 'react-native-reanimated'
+
+export function ScreenTransition({
+  direction,
+  style,
+  children,
+}: {
+  direction: 'Backward' | 'Forward'
+  style?: StyleProp<ViewStyle>
+  children: React.ReactNode
+}) {
+  const entering = direction === 'Forward' ? SlideInRight : SlideInLeft
+
+  return (
+    <Animated.View
+      entering={entering}
+      exiting={FadeOut.duration(90)} // Totally vibes based
+      style={style}>
+      {children}
+    </Animated.View>
+  )
+}
diff --git a/src/screens/StarterPack/Wizard/State.tsx b/src/screens/StarterPack/Wizard/State.tsx
index abbacc0e9b..80a5912fb4 100644
--- a/src/screens/StarterPack/Wizard/State.tsx
+++ b/src/screens/StarterPack/Wizard/State.tsx
@@ -34,6 +34,7 @@ interface State {
   feeds: GeneratorView[]
   processing: boolean
   error?: string
+  transitionDirection: 'Backward' | 'Forward'
 }
 
 type TStateContext = [State, (action: Action) => void]
@@ -50,9 +51,17 @@ function reducer(state: State, action: Action): State {
   // -- Navigation
   const currentIndex = steps.indexOf(state.currentStep)
   if (action.type === 'Next' && state.currentStep !== 'Feeds') {
-    updatedState = {...state, currentStep: steps[currentIndex + 1]}
+    updatedState = {
+      ...state,
+      currentStep: steps[currentIndex + 1],
+      transitionDirection: 'Forward',
+    }
   } else if (action.type === 'Back' && state.currentStep !== 'Details') {
-    updatedState = {...state, currentStep: steps[currentIndex - 1]}
+    updatedState = {
+      ...state,
+      currentStep: steps[currentIndex - 1],
+      transitionDirection: 'Backward',
+    }
   }
 
   switch (action.type) {
@@ -122,6 +131,7 @@ export function Provider({
         profiles: listItems?.map(i => i.subject) ?? [],
         feeds: starterPack.feeds ?? [],
         processing: false,
+        transitionDirection: 'Forward',
       }
     }
 
@@ -131,6 +141,7 @@ export function Provider({
       profiles: [profile],
       feeds: [],
       processing: false,
+      transitionDirection: 'Forward',
     }
   }
 
diff --git a/src/screens/StarterPack/Wizard/StepDetails.tsx b/src/screens/StarterPack/Wizard/StepDetails.tsx
index 4d8c278a6e..234f9956c4 100644
--- a/src/screens/StarterPack/Wizard/StepDetails.tsx
+++ b/src/screens/StarterPack/Wizard/StepDetails.tsx
@@ -5,11 +5,11 @@ import {useLingui} from '@lingui/react'
 
 import {useProfileQuery} from 'state/queries/profile'
 import {useSession} from 'state/session'
-import {ScreenTransition} from '#/screens/Login/ScreenTransition'
 import {useWizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a} from '#/alf'
 import * as TextField from '#/components/forms/TextField'
 import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
+import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition'
 import {Text} from '#/components/Typography'
 
 export function StepDetails() {
@@ -23,7 +23,7 @@ export function StepDetails() {
   })
 
   return (
-    <ScreenTransition>
+    <ScreenTransition direction={state.transitionDirection}>
       <View style={[a.px_xl, a.gap_xl, a.mt_4xl]}>
         <View style={[{height: 90}]}>
           <StarterPackIcon />
diff --git a/src/screens/StarterPack/Wizard/StepFeeds.tsx b/src/screens/StarterPack/Wizard/StepFeeds.tsx
index b73aa20deb..ca7e0d2f90 100644
--- a/src/screens/StarterPack/Wizard/StepFeeds.tsx
+++ b/src/screens/StarterPack/Wizard/StepFeeds.tsx
@@ -11,10 +11,10 @@ import {
 } from 'state/queries/feed'
 import {SearchInput} from 'view/com/util/forms/SearchInput'
 import {List} from 'view/com/util/List'
-import {ScreenTransition} from '#/screens/Login/ScreenTransition'
 import {useWizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, useTheme} from '#/alf'
 import {Loader} from '#/components/Loader'
+import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition'
 import {WizardFeedCard} from '#/components/StarterPack/Wizard/WizardFeedCard'
 
 function keyExtractor(item: GeneratorView) {
@@ -59,7 +59,7 @@ export function StepFeeds() {
   }
 
   return (
-    <ScreenTransition style={[a.flex_1]}>
+    <ScreenTransition style={[a.flex_1]} direction={state.transitionDirection}>
       <View style={[a.border_b, t.atoms.border_contrast_medium]}>
         <View style={[a.my_sm, a.px_md, {height: 40}]}>
           <SearchInput
diff --git a/src/screens/StarterPack/Wizard/StepProfiles.tsx b/src/screens/StarterPack/Wizard/StepProfiles.tsx
index 6db13177d4..8f58c1445f 100644
--- a/src/screens/StarterPack/Wizard/StepProfiles.tsx
+++ b/src/screens/StarterPack/Wizard/StepProfiles.tsx
@@ -8,10 +8,10 @@ import {useProfileFollowsQuery} from 'state/queries/profile-follows'
 import {useSession} from 'state/session'
 import {SearchInput} from 'view/com/util/forms/SearchInput'
 import {List} from 'view/com/util/List'
-import {ScreenTransition} from '#/screens/Login/ScreenTransition'
 import {useWizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, useTheme} from '#/alf'
 import {Loader} from '#/components/Loader'
+import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition'
 import {WizardProfileCard} from '#/components/StarterPack/Wizard/WizardProfileCard'
 
 function keyExtractor(item: AppBskyActorDefs.ProfileViewBasic) {
@@ -44,7 +44,7 @@ export function StepProfiles() {
   }
 
   return (
-    <ScreenTransition style={[a.flex_1]}>
+    <ScreenTransition style={[a.flex_1]} direction={state.transitionDirection}>
       <View style={[a.border_b, t.atoms.border_contrast_medium]}>
         <View style={[a.my_sm, a.px_md, {height: 40}]}>
           <SearchInput