update animation

src/app/(tabs)/my-bar.tsx

@@ -14,10 +14,11 @@ import {
   Text,
 } from '~/components'
 import { useAnalytics, useFetchMatchedRecipes, useSession } from '~/hooks'
-import { useStore } from '~/providers'
+import { useDetailsModal, useStore } from '~/providers'
 
 export default function MyBarScreen() {
-  const { myBarPopoverDismissed, setMyBarPopoverDismissed, setCurrentIngredientId } = useStore()
+  const { myBarPopoverDismissed, setMyBarPopoverDismissed } = useStore()
+  const { setCurrentIngredientId } = useDetailsModal()
   const { user } = useSession()
   const { capture } = useAnalytics()
   const [deleteingItemId, setDeleteingItemId] = useState<string>('')

src/app/_layout.tsx

@@ -8,8 +8,7 @@ import { Feedback } from '~/components'
 import { DetailsModal } from '~/components/DetailsModal'
 import { useAnalytics } from '~/hooks'
 import { StoreProvider } from '~/providers'
-import { AppContentProvider } from '~/providers/AppContentProvider'
-import { SessionProvider } from '~/providers/SessionProvider'
+import { AppContentProvider, DetailsModalProvider, SessionProvider } from '~/providers'
 import { api } from '~/services/api'
 import { initSentry } from '~/services/sentry'
 import { customFontsToLoad } from '~/theme/typography'
@@ -81,10 +80,11 @@ const AppWrapper = ({ children }) => {
 function RootLayoutNav() {
   try {
     return (
-        <AppWrapper>
-          <SessionProvider>
-            <ApolloProvider client={api?.apolloClient}>
-              <AppContentProvider>
+      <AppWrapper>
+        <SessionProvider>
+          <ApolloProvider client={api?.apolloClient}>
+            <AppContentProvider>
+              <DetailsModalProvider>
                 <StoreProvider>
                   <DetailsModal />
                   <Feedback />
@@ -103,10 +103,11 @@ function RootLayoutNav() {
                     <Stack.Screen name="add-ingredients" />
                   </Stack>
                 </StoreProvider>
-              </AppContentProvider>
-            </ApolloProvider>
-          </SessionProvider>
-        </AppWrapper>
+              </DetailsModalProvider>
+            </AppContentProvider>
+          </ApolloProvider>
+        </SessionProvider>
+      </AppWrapper>
     )
   } catch (error) {
     captureError(error.message)

src/app/add-ingredients.tsx

@@ -9,7 +9,7 @@ import { DELETE_FROM_MY_BAR } from '~/graphql/mutations/deleteFromMyBar'
 import { useAnalytics } from '~/hooks/useAnalytics'
 import { useFetchIngredients } from '~/hooks/useFetchIngredients'
 import { useSession } from '~/hooks/useSession'
-import { useStore } from '~/providers'
+import { useDetailsModal, useStore } from '~/providers'
 import { captureError } from '~/utils/captureError'
 
 export default function AddIngredientsScreen() {
@@ -25,7 +25,8 @@ export default function AddIngredientsScreen() {
     setSelectedItems,
     setInitialSelectedItems,
   } = useFetchIngredients()
-  const { setCurrentIngredientId, setEventCount } = useStore()
+  const { setEventCount } = useStore()
+  const { setCurrentIngredientId } = useDetailsModal()
   const [loading, setLoading] = useState(false)
   const { user } = useSession()
   const [addToMyBar, { error: addError }] = useMutation(ADD_TO_MY_BAR)

src/components/DetailsModal.tsx

@@ -1,13 +1,13 @@
 import { useEffect, useRef } from 'react'
 import { BottomSheet, BottomSheetRef } from '~/components/BottomSheet'
-import { useStore } from '~/providers'
+import { useDetailsModal } from '~/providers'
 import { EquipmentDetails } from './EquipmentDetails'
 import { IngredientDetails } from './IngredientDetails'
 
 export const DetailsModal = () => {
   const modalRef = useRef<BottomSheetRef>(null)
   const { currentEquipmentId, currentIngredientId, setCurrentEquipmentId, setCurrentIngredientId } =
-    useStore()
+    useDetailsModal()
 
   useEffect(() => {
     if (currentIngredientId || currentEquipmentId) {

src/components/RecipeTabs.tsx

@@ -5,7 +5,7 @@ import { GetRecipeDetailsQuery, Units } from '~/__generated__/graphql'
 import { defaultJiggerSize } from '~/constants'
 import { GET_UNITS } from '~/graphql/queries'
 import { useAnalytics, useSession } from '~/hooks'
-import { useStore } from '~/providers'
+import { useDetailsModal, useStore } from '~/providers'
 import { convertUnitToOtherSystem } from '~/store'
 import { ListItem } from './ListItem'
 import { RecipeMeasurements } from './RecipeMeasurements'
@@ -45,13 +45,7 @@ export const RecipeTabs = function RecipeTabs({
   loading,
   isPitcher,
 }: RecipeTabsProps) {
-  const {
-    selectedJiggerSize,
-    doubleRecipe,
-    selectedUnitSystem,
-    setCurrentEquipmentId,
-    setCurrentIngredientId,
-  } = useStore()
+  const { selectedJiggerSize, doubleRecipe, selectedUnitSystem } = useStore()
   const { capture } = useAnalytics()
   const { isLoggedIn } = useSession()
   const { data } = useQuery(GET_UNITS)
@@ -74,6 +68,7 @@ export const RecipeTabs = function RecipeTabs({
 
   const renderIngredientItem = useCallback(
     ({ ingredient, quantity, unit, isOptional, inMyBar }: Ingredient & { inMyBar: boolean }) => {
+      const { setCurrentIngredientId } = useDetailsModal()
       if (!units) return null
       const { quantity: outputQuantity, unit: outputUnit } = convertUnitToOtherSystem({
         unit: unit as Units,
@@ -106,6 +101,7 @@ export const RecipeTabs = function RecipeTabs({
 
   const renderEquipmentItem = useCallback(
     ({ name, imageUrl, id }: Equipment) => {
+      const { setCurrentEquipmentId } = useDetailsModal()
       return (
         <ListItem
           key={id}

src/hooks/useFetchIngredientDetails.ts

@@ -3,7 +3,7 @@ import { router, useGlobalSearchParams } from 'expo-router'
 import { GetRecipesByIngredientQuery } from '~/__generated__/graphql'
 import { ADD_TO_MY_BAR, DELETE_FROM_MY_BAR } from '~/graphql/mutations'
 import { GET_INGREDIENT_DETAILS, GET_MY_BAR, GET_RECIPES_BY_INGREDIENT } from '~/graphql/queries'
-import { useStore } from '~/providers'
+import { useDetailsModal } from '~/providers'
 import { captureError } from '~/utils/captureError'
 import { useSession } from './useSession'
 
@@ -20,7 +20,7 @@ export const useFetchIngredientDetails = (ingredientId: string, onClosed: () =>
       fetchPolicy: 'cache-and-network',
     })
 
-    const { setCurrentIngredientId } = useStore()
+    const { setCurrentIngredientId } = useDetailsModal()
 
     const [addToMyBar, { loading: addLoading }] = useMutation(ADD_TO_MY_BAR)
     const [deleteFromMyBar] = useMutation(DELETE_FROM_MY_BAR)

src/providers/DetailsModalProvider.tsx

@@ -0,0 +1,36 @@
+import React, { Dispatch, FC, SetStateAction, createContext, useContext, useState } from 'react'
+
+interface DetailsModalContextType {
+  currentEquipmentId: string
+  currentIngredientId: string
+  setCurrentEquipmentId: Dispatch<SetStateAction<string>>
+  setCurrentIngredientId: Dispatch<SetStateAction<string>>
+}
+
+const DetailsModalContext = createContext<DetailsModalContextType | undefined>(undefined)
+
+export const DetailsModalProvider: FC<{ children: any }> = ({ children }) => {
+  const [currentIngredientId, setCurrentIngredientId] = useState<string | null>(null)
+  const [currentEquipmentId, setCurrentEquipmentId] = useState<string | null>(null)
+
+  return (
+    <DetailsModalContext.Provider
+      value={{
+        currentEquipmentId,
+        currentIngredientId,
+        setCurrentEquipmentId,
+        setCurrentIngredientId,
+      }}
+    >
+      {children}
+    </DetailsModalContext.Provider>
+  )
+}
+
+export const useDetailsModal = () => {
+  const context = useContext(DetailsModalContext)
+  if (!context) {
+    throw new Error('useDetailsModal must be used within a DetailsModalProvider')
+  }
+  return context
+}

src/providers/StoreProvider.tsx

@@ -1,21 +1,17 @@
 import AsyncStorage from '@react-native-async-storage/async-storage'
-import React, { Dispatch, FC, SetStateAction, createContext, useContext, useState } from 'react'
+import React, { Dispatch, FC, SetStateAction, createContext, useContext } from 'react'
 import { defaultJiggerSize, defaultUnitSystem } from '~/constants'
 import { clearPersistedState, usePersistedState } from '~/hooks/usePeristedState'
 import { JiggerSize, UnitSystem } from '~/types'
 
 interface StoreContextType {
-  currentEquipmentId: string
-  currentIngredientId: string
   doubleRecipe: boolean
   feedbackShown: boolean
   eventCount: Record<string, any>
   myBarPopoverDismissed: boolean
   selectedJiggerSize: JiggerSize
   selectedUnitSystem: UnitSystem
-  setCurrentEquipmentId: Dispatch<SetStateAction<string>>
 
-  setCurrentIngredientId: Dispatch<SetStateAction<string>>
   setDoubleRecipe: Dispatch<SetStateAction<boolean>>
   setFeedbackShown: Dispatch<SetStateAction<boolean>>
   setMyBarPopoverDismissed: Dispatch<SetStateAction<boolean>>
@@ -30,8 +26,6 @@ export const StoreProvider: FC<{ children: any }> = ({ children }) => {
   // AsyncStorage.clear()
   // clearPersistedState()
 
-  const [currentIngredientId, setCurrentIngredientId] = useState<string | null>(null)
-  const [currentEquipmentId, setCurrentEquipmentId] = useState<string | null>(null)
   const [feedbackShown, setFeedbackShown] = usePersistedState('feedbackShown', false)
   const [eventCount, setEventCount] = usePersistedState('eventCount', {
     recipeView: {},
@@ -57,16 +51,12 @@ export const StoreProvider: FC<{ children: any }> = ({ children }) => {
   return (
     <StoreContext.Provider
       value={{
-        currentEquipmentId,
-        currentIngredientId,
         doubleRecipe,
         eventCount,
         feedbackShown,
         myBarPopoverDismissed,
         selectedJiggerSize,
         selectedUnitSystem,
-        setCurrentEquipmentId,
-        setCurrentIngredientId,
         setDoubleRecipe,
         setEventCount,
         setFeedbackShown,

src/providers/index.ts

@@ -1,3 +1,4 @@
 export * from './StoreProvider'
 export * from './SessionProvider'
 export * from './AppContentProvider'
+export * from './DetailsModalProvider'