refactor: address review comments

Co-authored-by: Nikita Skalkin <[email protected]>

src/app/Components/ArtworkLists/ArtworkListsContext.tsx

@@ -29,7 +29,7 @@ export const ARTWORK_LISTS_CONTEXT_INITIAL_STATE: ArtworkListState = {
   addingArtworkLists: [],
   removingArtworkLists: [],
   hasUnsavedChanges: false,
-  toastBottomPadding: 0,
+  toastBottomPadding: null,
 }
 
 export const ArtworkListsContext = createContext<ArtworkListsContextState>(
@@ -251,7 +251,7 @@ const reducer = (state: ArtworkListState, action: ArtworkListAction): ArtworkLis
     case "RESET":
       return {
         ...ARTWORK_LISTS_CONTEXT_INITIAL_STATE,
-        toastBottomPadding: state.toastBottomPadding || 0,
+        toastBottomPadding: state.toastBottomPadding || null,
       }
     case "SET_UNSAVED_CHANGES":
       return {

src/app/Components/ArtworkLists/types.ts

@@ -44,7 +44,7 @@ export type ArtworkListState = {
   addingArtworkLists: ArtworkListEntity[]
   removingArtworkLists: ArtworkListEntity[]
   hasUnsavedChanges: boolean
-  toastBottomPadding: number
+  toastBottomPadding: number | null
 }
 
 export type ArtworkListAction =

src/app/Components/ArtworkLists/useArtworkListsToast.ts

@@ -21,13 +21,13 @@ type SingleArtworkListOptions = Options & {
   artworkList: ArtworkListEntity
 }
 
-export const useArtworkListToast = (bottomPadding?: number) => {
+export const useArtworkListToast = (bottomPadding?: number | null) => {
   const toast = useToast()
 
   const showToast = (message: string, options?: Omit<ToastOptions, "bottomPadding">) => {
     toast.show(message, DEFAULT_TOAST_PLACEMENT, {
       ...options,
-      bottomPadding,
+      bottomPadding: bottomPadding ?? null,
     })
   }
   const savedToDefaultArtworkList = (options: SavedToDefaultArtworkListOptions) => {

src/app/Components/Toast/ToastComponent.tsx

@@ -1,11 +1,9 @@
-import { Flex, useColor, Text, Touchable, Box } from "@artsy/palette-mobile"
+import { Box, Flex, Text, Touchable, useColor } from "@artsy/palette-mobile"
 import { useActionSheet } from "@expo/react-native-action-sheet"
-import { modules } from "app/AppRegistry"
 import { OpaqueImageView } from "app/Components/OpaqueImageView2"
-import { __unsafe_mainModalStackRef } from "app/NativeModules/ARScreenPresenterModule"
 import { GlobalStore } from "app/store/GlobalStore"
 import { useScreenDimensions } from "app/utils/hooks"
-import { useEffect, useMemo, useState } from "react"
+import { useEffect, useState } from "react"
 import { Animated } from "react-native"
 import useTimeoutFn from "react-use/lib/useTimeoutFn"
 import { ToastDetails, ToastDuration } from "./types"
@@ -62,20 +60,7 @@ export const ToastComponent = ({
     }).start(() => GlobalStore.actions.toast.remove(id))
   }, toastDuration)
 
-  const toastBottomPadding = useMemo(() => {
-    const moduleName = __unsafe_mainModalStackRef.current?.getCurrentRoute()?.params // @ts-expect-error
-      ?.moduleName as keyof typeof modules
-
-    const isBottomTabHidden = modules[moduleName].options.hidesBottomTabs
-
-    // We currently handle custom bottom padding only for when the bottom tab bar is hidden
-    // We can change this later if we need to handle custom bottom padding for when the bottom tab bar is visible
-    if (isBottomTabHidden) {
-      return bottomPadding || 0
-    }
-
-    return TABBAR_HEIGHT
-  }, [])
+  const toastBottomPadding = bottomPadding ?? TABBAR_HEIGHT
 
   if (placement === "middle") {
     const innerMiddle = (

src/app/Components/Toast/types.ts

@@ -25,7 +25,7 @@ export interface ToastDetails {
   imageURL?: string
   backgroundColor?: Color
   duration?: ToastDuration
-  bottomPadding?: number
+  bottomPadding?: number | null
 }
 
 export type ToastOptions = Pick<

src/app/Scenes/Artwork/Components/ArtworkStickyBottomContent.tsx

@@ -1,11 +1,12 @@
-import { Box, Separator, useSpace } from "@artsy/palette-mobile"
+import { Box, Separator } from "@artsy/palette-mobile"
 import { ArtworkStickyBottomContent_artwork$key } from "__generated__/ArtworkStickyBottomContent_artwork.graphql"
 import { ArtworkStickyBottomContent_me$key } from "__generated__/ArtworkStickyBottomContent_me.graphql"
 import { useArtworkListsContext } from "app/Components/ArtworkLists/ArtworkListsContext"
 import { AuctionTimerState } from "app/Components/Bidding/Components/Timer"
 import { ArtworkStore } from "app/Scenes/Artwork/ArtworkStore"
 import { useScreenDimensions } from "app/utils/hooks"
 import { DateTime } from "luxon"
+import { useEffect } from "react"
 import { useFragment } from "react-relay"
 import { graphql } from "relay-runtime"
 import { ArtworkCommercialButtons } from "./ArtworkCommercialButtons"
@@ -25,8 +26,9 @@ export const ArtworkStickyBottomContent: React.FC<ArtworkStickyBottomContentProp
   const meData = useFragment(meFragment, me)
   const auctionState = ArtworkStore.useStoreState((state) => state.auctionState)
 
+  const { bottom: bottomSafeAreaInset } = useScreenDimensions().safeAreaInsets
+
   const { dispatch } = useArtworkListsContext()
-  const space = useSpace()
 
   const checkIsLotEnded = () => {
     const endAt = artworkData.saleArtwork?.extendedBiddingEndAt ?? artworkData.saleArtwork?.endAt
@@ -38,12 +40,22 @@ export const ArtworkStickyBottomContent: React.FC<ArtworkStickyBottomContentProp
     return DateTime.now() > DateTime.fromISO(endAt)
   }
 
-  if (
+  const hideContent =
     !artworkData.isForSale ||
     artworkData.isSold ||
     auctionState === AuctionTimerState.CLOSED ||
     checkIsLotEnded()
-  ) {
+
+  useEffect(() => {
+    if (hideContent) {
+      dispatch({
+        type: "SET_TOAST_BOTTOM_PADDING",
+        payload: 0,
+      })
+    }
+  }, [])
+
+  if (hideContent) {
     return null
   }
 
@@ -55,8 +67,7 @@ export const ArtworkStickyBottomContent: React.FC<ArtworkStickyBottomContentProp
       onLayout={(e) => {
         dispatch({
           type: "SET_TOAST_BOTTOM_PADDING",
-          // TBD: the additinoal space
-          payload: e.nativeEvent.layout.height - space(2),
+          payload: e.nativeEvent.layout.height - bottomSafeAreaInset,
         })
       }}
     >