fix: url in drop screen

packages/app/components/css-swipe-list.web.tsx

@@ -42,7 +42,7 @@ export const CssSwipeList = ({
 }: Props) => {
   const router = useRouter();
   const listRef = useRef<HTMLDivElement>(null);
-  const [initialParamProp] = useParam("initialScrollIndex");
+  const [initialParamProp] = useParam("initialScrollItemId");
   const isSwipeListScreen = typeof initialParamProp !== "undefined";
   const visibleItems = useSharedValue<any[]>([
     undefined,
@@ -80,7 +80,7 @@ export const CssSwipeList = ({
               pathname: "/profile/[username]/[dropSlug]",
               query: {
                 ...router.query,
-                initialScrollIndex: activeIndex,
+                initialScrollItemId: data[activeIndex].nft_id,
                 username: data[activeIndex].creator_username,
                 dropSlug: data[activeIndex].slug,
               },

packages/app/components/feed/feed.md.tsx

@@ -99,7 +99,9 @@ const NFTScrollList = ({ data, isLoading, fetchMore }: NFTScrollListProps) => {
       <View tw="p-2">
         <Card
           as={getNFTSlug(item)}
-          href={`${getNFTSlug(item)}?initialScrollIndex=${index}&type=feed`}
+          href={`${getNFTSlug(item)}?initialScrollItemId=${
+            item.nft_id
+          }&type=feed`}
           nft={item}
           sizeStyle={{ width: CARD_WIDTH, height: CARD_WIDTH }}
           tw="mb-4"

packages/app/components/home/home-item.tsx

@@ -86,7 +86,7 @@ export const HomeItem = memo<{ nft: NFT; index: number; mediaSize: number }>(
 
     return (
       <NativeRouteComponent
-        href={`${getNFTSlug(nft)}?initialScrollIndex=${index}&type=feed`}
+        href={`${getNFTSlug(nft)}?initialScrollItemId=${nft.nft_id}&type=feed`}
       >
         <View tw="mb-2 mt-6 px-4 md:px-0">
           <View tw="flex-row items-center">
@@ -138,7 +138,9 @@ export const HomeItem = memo<{ nft: NFT; index: number; mediaSize: number }>(
           >
             <RouteComponent
               as={getNFTSlug(nft)}
-              href={`${getNFTSlug(nft)}?initialScrollIndex=${index}&type=feed`}
+              href={`${getNFTSlug(nft)}?initialScrollItemId=${
+                nft.nft_id
+              }&type=feed`}
             >
               <Text tw="text-15 font-bold text-gray-900 dark:text-white">
                 {nft?.token_name}
@@ -162,9 +164,9 @@ export const HomeItem = memo<{ nft: NFT; index: number; mediaSize: number }>(
             <View tw="mt-3 flex-row items-center">
               <RouteComponent
                 as={getNFTSlug(nft)}
-                href={`${getNFTSlug(
-                  nft
-                )}?initialScrollIndex=${index}&type=feed`}
+                href={`${getNFTSlug(nft)}?initialScrollItemId=${
+                  nft.nft_id
+                }&type=feed`}
               >
                 <View
                   tw="overflow-hidden rounded-2xl bg-gray-100 dark:bg-gray-900"

packages/app/components/profile/profile-tab-list.tsx

@@ -65,9 +65,9 @@ export const ProfileTabList = forwardRef<ProfileTabListRef, TabListProps>(
       refresh,
     }));
     const onItemPress = useCallback(
-      (item: NFT, currentIndex: number) => {
+      (item: NFT) => {
         router.push(
-          `${getNFTSlug(item)}?initialScrollIndex=${currentIndex}&tabType=${
+          `${getNFTSlug(item)}?initialScrollItemId=${item.nft_id}&tabType=${
             list.type
           }&profileId=${profileId}&collectionId=${
             filter.collectionId

packages/app/components/profile/profile.web.tsx

@@ -224,15 +224,15 @@ const Profile = ({ username }: ProfileScreenProps) => {
     }: ListRenderItemInfo<NFT[] & { loading?: boolean }>) => {
       return (
         <View tw="mx-auto mb-px max-w-screen-xl flex-row space-x-px px-0 md:space-x-6 md:px-4 lg:space-x-8">
-          {chuckItem.map((item, chuckItemIndex) => (
+          {chuckItem.map((item) => (
             <Card
               index={itemIndex}
               key={item.nft_id}
               nft={item}
               numColumns={numColumns}
               as={getNFTSlug(item)}
-              href={`${getNFTSlug(item)}?initialScrollIndex=${
-                itemIndex * numColumns + chuckItemIndex
+              href={`${getNFTSlug(item)}?initialScrollItemId=${
+                item.nft_id
               }&tabType=${type}&profileId=${profileId}&collectionId=${
                 filter.collectionId
               }&sortType=${filter.sortType}&type=profile`}

packages/app/components/swipe-list.web.tsx

@@ -49,7 +49,7 @@ export const SwipeList = ({
 }: Props) => {
   const router = useRouter();
   const [activeIndex, setActiveIndex] = useState(0);
-  const [initialParamProp] = useParam("initialScrollIndex");
+  const [initialParamProp] = useParam("initialScrollItemId");
   const isSwipeListScreen = typeof initialParamProp !== "undefined";
   const isSwiped = useRef(false);
   const swiper = useRef<any>(null);
@@ -89,25 +89,23 @@ export const SwipeList = ({
         e.activeIndex + 1 < data.length ? e.activeIndex + 1 : undefined,
       ];
       if (isSwipeListScreen) {
-        scrollTimer.current = setTimeout(() => {
-          router.replace(
-            {
-              pathname: "/profile/[username]/[dropSlug]",
-              query: {
-                ...router.query,
-                initialScrollIndex: activeIndex,
-                username: data[activeIndex].creator_username,
-                dropSlug: data[activeIndex].slug,
-              },
+        router.replace(
+          {
+            pathname: "/profile/[username]/[dropSlug]",
+            query: {
+              ...router.query,
+              initialScrollItemId: data[e.activeIndex].nft_id,
+              username: data[e.activeIndex].creator_username,
+              dropSlug: data[e.activeIndex].slug,
             },
-            getNFTSlug(data[activeIndex]),
-            { shallow: true }
-          );
-        }, 700);
+          },
+          getNFTSlug(data[e.activeIndex]),
+          { shallow: true }
+        );
       }
       setActiveIndex(e.activeIndex);
     },
-    [router, visibleItems, data, isSwipeListScreen, activeIndex]
+    [router, visibleItems, data, isSwipeListScreen]
   );
 
   if (data.length === 0) return null;

packages/app/components/trending/trending-item.tsx

@@ -74,9 +74,9 @@ export const TrendingItem = memo<TrendingItemProps>(function TrendingItem({
     <View tw={["h-full w-full", tw]} style={viewStyle} {...rest}>
       <RouteComponent
         as={getNFTSlug(nft)}
-        href={`${getNFTSlug(
-          nft
-        )}?initialScrollIndex=${index}&filter=${filter}&type=trendingNFTs`}
+        href={`${getNFTSlug(nft)}?initialScrollItemId=${
+          nft.nft_id
+        }&filter=${filter}&type=trendingNFTs`}
       >
         <View
           tw="overflow-hidden rounded-2xl"
@@ -122,9 +122,9 @@ export const TrendingItem = memo<TrendingItemProps>(function TrendingItem({
       </View>
       <RouteComponent
         as={getNFTSlug(nft)}
-        href={`${getNFTSlug(
-          nft
-        )}?initialScrollIndex=${index}&filter=all&type=trendingNFTs`}
+        href={`${getNFTSlug(nft)}?initialScrollItemId=${
+          nft.nft_id
+        }&filter=all&type=trendingNFTs`}
         tw="mt-2.5"
       >
         <Text

packages/app/screens/nft.tsx

@@ -43,16 +43,16 @@ type Query = {
   showClaim?: boolean;
   username?: string;
   dropSlug?: string;
-  initialScrollIndex?: string;
+  initialScrollItemId?: string;
   showCreatorChannelIntro?: boolean;
 };
 
 const { useParam } = createParam<Query>();
 const { height: screenHeight, width: screenWidth } = Dimensions.get("screen");
 
 export function NftScreen({ fallback = {} }: { fallback?: object }) {
-  const [initialScrollIndex] = useParam("initialScrollIndex");
-  if (typeof initialScrollIndex !== "undefined") {
+  const [initialScrollItemId] = useParam("initialScrollItemId");
+  if (typeof initialScrollItemId !== "undefined") {
     return <SwipeListScreen />;
   }
 

packages/app/screens/swipe-list.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { Platform } from "react-native";
 
 import { useSafeAreaInsets } from "@showtime-xyz/universal.safe-area";
@@ -23,7 +24,7 @@ type Query = {
   profileId: any;
   collectionId: any;
   sortType: string;
-  initialScrollIndex: any;
+  initialScrollItemId: any;
   filter: string;
   creatorId: any;
 };
@@ -55,12 +56,17 @@ export const SwipeListScreen = withColorScheme(() => {
 const FeedSwipeList = () => {
   const { useParam } = createParam<Query>();
   const { data } = useFeed();
-  const [initialScrollIndex] = useParam("initialScrollIndex");
+  const [initialScrollItemId] = useParam("initialScrollItemId");
   const { bottom: safeAreaBottom } = useSafeAreaInsets();
+  const initialScrollIndex = useMemo(() => {
+    const index = data?.findIndex((item) => item.nft_id == initialScrollItemId);
+    return index === -1 ? 0 : index;
+  }, [data, initialScrollItemId]);
+
   return (
     <SwipeList
       data={data}
-      initialScrollIndex={Number(initialScrollIndex)}
+      initialScrollIndex={initialScrollIndex}
       bottomPadding={safeAreaBottom}
     />
   );
@@ -72,7 +78,7 @@ const ProfileSwipeList = () => {
   const [profileId] = useParam("profileId");
   const [collectionId] = useParam("collectionId");
   const [sortType] = useParam("sortType");
-  const [initialScrollIndex] = useParam("initialScrollIndex");
+  const [initialScrollItemId] = useParam("initialScrollItemId");
   const { user } = useUser();
 
   const { data, fetchMore, updateItem, isRefreshing, refresh } = useProfileNFTs(
@@ -85,6 +91,11 @@ const ProfileSwipeList = () => {
   );
   const { bottom: safeAreaBottom } = useSafeAreaInsets();
 
+  const initialScrollIndex = useMemo(() => {
+    const index = data?.findIndex((item) => item.nft_id == initialScrollItemId);
+    return index === -1 ? 0 : index;
+  }, [data, initialScrollItemId]);
+
   return (
     <MutateProvider mutate={updateItem}>
       <ProfileTabsNFTProvider
@@ -99,7 +110,7 @@ const ProfileSwipeList = () => {
           fetchMore={fetchMore}
           isRefreshing={isRefreshing}
           refresh={refresh}
-          initialScrollIndex={Number(initialScrollIndex)}
+          initialScrollIndex={initialScrollIndex}
           bottomPadding={safeAreaBottom}
         />
       </ProfileTabsNFTProvider>
@@ -110,19 +121,23 @@ const ProfileSwipeList = () => {
 const TrendingNFTsSwipeList = () => {
   const { useParam } = createParam<Query>();
   const [filter] = useParam("filter");
-  const [initialScrollIndex] = useParam("initialScrollIndex");
+  const [initialScrollItemId] = useParam("initialScrollItemId");
   const { data } = useTrendingNFTS({
     filter,
   });
   const { bottom: safeAreaBottom } = useSafeAreaInsets();
+  const initialScrollIndex = useMemo(() => {
+    const index = data?.findIndex((item) => item.nft_id == initialScrollItemId);
+    return index === -1 ? 0 : index;
+  }, [data, initialScrollItemId]);
 
   return (
     <SwipeList
       data={data}
       // fetchMore={fetchMore}
       // isRefreshing={isRefreshing}
       // refresh={refresh}
-      initialScrollIndex={Number(initialScrollIndex)}
+      initialScrollIndex={initialScrollIndex}
       bottomPadding={safeAreaBottom}
     />
   );