diff --git a/native/app/inventory/pages/InventoryPage.tsx b/native/app/inventory/pages/InventoryPage.tsx index 3c6656ffe..c0bc59109 100644 --- a/native/app/inventory/pages/InventoryPage.tsx +++ b/native/app/inventory/pages/InventoryPage.tsx @@ -1,6 +1,6 @@ import { useIsFocused } from "@react-navigation/native"; import { FlashList } from "@shopify/flash-list"; -import { useEffect, useRef } from "react"; +import { useEffect, useRef, useState } from "react"; import { RefreshControl, ScrollView, StyleSheet, View, useWindowDimensions } from "react-native"; import { getFullProfile } from "@/app/bungie/BungieApi.ts"; @@ -39,7 +39,6 @@ const getItemType = (item: UISections) => item.type; export default function InventoryPage({ inventoryPageEnum, pageEstimatedFlashListItemSize }: Props) { "use memo"; - const currentListIndex = useGGStore((state) => state.currentListIndex); const { width } = useWindowDimensions(); const HOME_WIDTH = width; @@ -47,6 +46,31 @@ export default function InventoryPage({ inventoryPageEnum, pageEstimatedFlashLis const pagedScrollRef = useRef(null); const isFocused = useIsFocused(); + const jumpToCharacterRef = useRef<() => void>(() => { + const currentListIndex = useGGStore.getState().currentListIndex; + const posX = HOME_WIDTH * currentListIndex; + console.log("jump to character", currentListIndex, posX); + pagedScrollRef.current?.scrollTo({ x: posX, y: 0, animated: false }); + }); + + const listMovedRef = useRef<(toY: number, allPages?: boolean) => void>((toY: number, allPages = false) => { + if (lastOffsetY !== toY) { + useGGStore.getState().setPageOffsetY(inventoryPageEnum, toY); + const currentListIndex = useGGStore.getState().currentListIndex; + + lastOffsetY = toY; + for (let i = 0; i < listRefs.current.length; i++) { + if (i === currentListIndex && !allPages) { + continue; + } + const lRef = listRefs.current[i]; + if (lRef) { + lRef.scrollToOffset({ offset: toY, animated: false }); + } + } + } + }); + const styles = StyleSheet.create({ container: {}, page: { @@ -55,11 +79,6 @@ export default function InventoryPage({ inventoryPageEnum, pageEstimatedFlashLis }, }); - const jumpToCharacter = () => { - const posX = HOME_WIDTH * currentListIndex; - pagedScrollRef.current?.scrollTo({ x: posX, y: 0, animated: false }); - }; - useEffect(() => { const unsubscribe = useGGStore.subscribe( (state) => state.animateToInventoryPage, @@ -73,37 +92,28 @@ export default function InventoryPage({ inventoryPageEnum, pageEstimatedFlashLis return unsubscribe; }, [isFocused, HOME_WIDTH]); - const initialAccountDataReady = useGGStore((state) => state.initialAccountDataReady); + const [pageReady, setPageReady] = useState(false); + + useEffect(() => { + if (pageReady) { + jumpToCharacterRef.current(); + } + }, [pageReady]); - // biome-ignore lint/correctness/useExhaustiveDependencies: useEffect(() => { - if (isFocused && initialAccountDataReady) { + if (isFocused && pageReady) { + jumpToCharacterRef.current(); useGGStore.getState().setCurrentInventoryPage(inventoryPageEnum); - jumpToCharacter(); } - }, [isFocused, initialAccountDataReady]); + }, [isFocused, pageReady, inventoryPageEnum]); let lastOffsetY = 0; - const listMoved = (toY: number) => { - if (lastOffsetY !== toY) { - lastOffsetY = toY; - for (let i = 0; i < listRefs.current.length; i++) { - if (i === currentListIndex) { - continue; - } - const lRef = listRefs.current[i]; - if (lRef) { - lRef.scrollToOffset({ offset: toY, animated: false }); - } - } - } - }; - - const debouncedMove = debounce(listMoved, 40); + const debouncedMove = debounce(listMovedRef.current, 40); const debounceListIndex = debounce(calcCurrentListIndex, 40); function getData(inventoryPage: InventoryPageEnums): UISections[][] | undefined { + console.log("getData", inventoryPage); switch (inventoryPage) { case InventoryPageEnums.Armor: return useGGStore((state) => state.ggArmor); @@ -118,18 +128,13 @@ export default function InventoryPage({ inventoryPageEnum, pageEstimatedFlashLis const pullRefreshing = useGGStore((state) => state.pullRefreshing); return ( - + debounceListIndex(e.nativeEvent.contentOffset.x, HOME_WIDTH)} ref={pagedScrollRef} - onContentSizeChange={(e) => { - if (e > 0) { - useGGStore.getState().setInitialAccountDataReady(); - } - }} > {mainData.map((_c, index) => { return ( @@ -150,6 +155,11 @@ export default function InventoryPage({ inventoryPageEnum, pageEstimatedFlashLis }} /> } + onLoad={() => { + if (index === mainData.length - 1) { + setPageReady(true); + } + }} data={mainData[index]} renderItem={UiCellRenderItem} keyExtractor={keyExtractor} diff --git a/native/app/store/Account/AccountSlice.ts b/native/app/store/Account/AccountSlice.ts index 7c810cda4..d8f0c8b6f 100644 --- a/native/app/store/Account/AccountSlice.ts +++ b/native/app/store/Account/AccountSlice.ts @@ -78,7 +78,6 @@ export interface AccountSlice { lastRefreshTime: number; animateToInventoryPage: { index: number; animate: boolean }; activateInventoryMenu: boolean; - initialAccountDataReady: boolean; weaponsSortSubmenuOpen: boolean; armorSortSubmenuOpen: boolean; @@ -107,12 +106,12 @@ export interface AccountSlice { secondaryComponentsMintedTimestamp: Date; setStateHydrated: () => void; - setInitialAccountDataReady: () => void; setAppStartupTime: (appStartupTime: number) => void; setRefreshing: (refreshing: boolean) => void; setPullRefreshing: (pullRefreshing: boolean) => void; setCurrentListIndex: (payload: number) => void; setPageOffsetY: (inventoryPage: InventoryPageEnums, offsetY: number) => void; + getPageOffsetY: (inventoryPage: InventoryPageEnums) => number; setJumpToIndex: (payload: { index: number; animate: boolean }) => void; setWeaponsSort: (weaponsSort: WeaponsSort) => void; setArmorSort: (armorSort: ArmorSort) => void; @@ -145,7 +144,6 @@ export const createAccountSlice: StateCreator = (s animateToInventoryPage: { index: 0, animate: false }, showingPerks: false, activateInventoryMenu: false, - initialAccountDataReady: false, weaponsSortSubmenuOpen: false, armorSortSubmenuOpen: false, @@ -175,14 +173,6 @@ export const createAccountSlice: StateCreator = (s rawProfileData: null, setStateHydrated: () => set({ stateHydrated: true }), - setInitialAccountDataReady: () => { - if (!get().initialAccountDataReady) { - set({ initialAccountDataReady: true }); - if (get().itemsDefinitionReady && get().bungieDefinitionsReady) { - set({ appReady: true }); - } - } - }, setAppStartupTime: (appStartupTime) => set({ appStartupTime }), setRefreshing: (refreshing) => set({ refreshing }), setPullRefreshing: (pullRefreshing) => set({ pullRefreshing }), @@ -195,6 +185,18 @@ export const createAccountSlice: StateCreator = (s set({ generalPageOffsetY: offsetY }); } }, + getPageOffsetY: (inventoryPage) => { + if (inventoryPage === InventoryPageEnums.Weapons) { + return get().weaponsPageOffsetY; + } + if (inventoryPage === InventoryPageEnums.Armor) { + return get().armorPageOffsetY; + } + if (inventoryPage === InventoryPageEnums.General) { + return get().generalPageOffsetY; + } + return 0; + }, setCurrentListIndex: (currentListIndex) => { set({ currentListIndex, animateToInventoryPage: { index: currentListIndex, animate: false } }); },