Merge pull request #553 from us3r-network/F-listRender-shixuewen

feat: list render optimization
us3r-network · Oct 12, 2024 · d1b692c · d1b692c
2 parents ee3d9f2 + 45f801b
commit d1b692c
Show file tree

Hide file tree

Showing 10 changed files with 248 additions and 253 deletions.
diff --git a/components/explore/CastFeeds.tsx b/components/explore/CastFeeds.tsx
@@ -1,8 +1,7 @@
 import { useEffect, useState } from "react";
 import useLoadCastFeeds from "~/hooks/explore/useLoadCastFeeds";
 import CastListWithChannel from "../social-farcaster/proposal/CastListWithChannel";
-import Carousel from "react-native-reanimated-carousel";
-import { Image, Pressable, View } from "react-native";
+import ExploreHeader from "../social-farcaster/proposal/ExploreHeader";
 
 export default function CastFeeds({
   jumpTo,
@@ -29,58 +28,3 @@ export default function CastFeeds({
     />
   );
 }
-
-const banners = [
-  { img: "images/explore-banner-1.png", tab: "vote" },
-  { img: "images/explore-banner-2.png", tab: "collect" },
-];
-function ExploreHeader({ jumpTo }: { jumpTo?: (key: string) => void }) {
-  const [itemWidth, setItemWidth] = useState<number>(0);
-  const [ratio, setRatio] = useState<number>(0);
-  useEffect(() => {
-    Image.getSize("images/explore-banner-1.png", (width, height) => {
-      setRatio(width / height);
-    });
-  }, []);
-  const itemHeight = itemWidth / ratio;
-  return (
-    <View
-      className="mb-4 w-full"
-      onLayout={(e) => {
-        const layout = e.nativeEvent.layout;
-        if (layout.width === 0 && layout.height === 0) return;
-        setItemWidth(layout.width);
-      }}
-    >
-      {itemWidth && itemHeight ? (
-        <Carousel
-          vertical={false}
-          width={itemWidth}
-          height={itemHeight}
-          loop
-          autoPlay={true}
-          autoPlayInterval={5000}
-          data={banners}
-          renderItem={({ index, item }) => (
-            <View>
-              <Pressable
-                onPress={(e) => {
-                  jumpTo?.(item.tab);
-                }}
-              >
-                <Image
-                  key={index}
-                  source={{
-                    uri: item.img,
-                  }}
-                  resizeMode="center"
-                  style={{ width: itemWidth, height: itemHeight }}
-                />
-              </Pressable>
-            </View>
-          )}
-        />
-      ) : null}
-    </View>
-  );
-}
diff --git a/components/explore/ChannelListWithCollectCasts.tsx b/components/explore/ChannelListWithCollectCasts.tsx
@@ -22,15 +22,14 @@ export default function ChannelListWithCollectCasts({
       }}
       showsHorizontalScrollIndicator={false}
       data={items}
-      keyExtractor={(item, index) => index.toString()}
+      keyExtractor={(item, index) => `${item.channel.id}-${index}`}
       onEndReached={onEndReached}
       onEndReachedThreshold={0.1}
       ItemSeparatorComponent={() => <View className="h-4" />}
-      renderItem={({ item, index }) => {
+      renderItem={({ item }) => {
         const { channel, casts, tokenInfo } = item;
         return (
           <ChannelCollectCard
-            key={index.toString()}
             channel={channel}
             tokenInfo={tokenInfo}
             casts={casts}

diff --git a/components/explore/channel-card/ChannelCollectCardCasts.tsx b/components/explore/channel-card/ChannelCollectCardCasts.tsx
@@ -1,5 +1,6 @@
 import { forwardRef, LegacyRef, useRef, useState } from "react";
 import {
+  Dimensions,
   FlatList,
   Pressable,
   View,
@@ -18,9 +19,13 @@ import ProposalStatusActions, {
 } from "~/components/social-farcaster/proposal/proposal-status-actions/ProposalStatusActions";
 import FCastMenuButton from "~/components/social-farcaster/FCastMenuButton";
 import { Loading } from "~/components/common/Loading";
+import { isMobile } from "react-device-detect";
 
+const pcItemWidth = 640;
+const mobileWindowWidth = Dimensions.get("window").width;
+const mobileItemWidth = mobileWindowWidth - 15 * 2;
+const itemWidth = isMobile ? mobileItemWidth : pcItemWidth;
 const itemHeight = FCastHeightWithNftImage + ProposalStatusActionsHeight + 15;
-
 const ChannelCollectCardCasts = forwardRef(function (
   {
     channel,
@@ -38,7 +43,6 @@ const ChannelCollectCardCasts = forwardRef(function (
 ) {
   const showCasts = casts.slice(0, 10);
 
-  const [itemWidth, setItemWidth] = useState<number>(0);
   const [currentIndex, setCurrentIndex] = useState<number>(0);
   const [showIdxs, setShowIdxs] = useState<number[]>([0]);
   const flatListRef =
@@ -89,75 +93,67 @@ const ChannelCollectCardCasts = forwardRef(function (
         style={{
           height: itemHeight,
         }}
-        onLayout={(e) => {
-          const layout = e.nativeEvent.layout;
-          if (layout.width === 0 && layout.height === 0) return;
-          setItemWidth(layout.width);
-        }}
       >
-        {itemWidth ? (
-          <FlatList
-            horizontal
-            disableIntervalMomentum={true}
-            pagingEnabled={true}
-            showsHorizontalScrollIndicator={false}
-            ref={flatListRef}
-            data={showCasts}
-            viewabilityConfigCallbackPairs={
-              viewabilityConfigCallbackPairs.current
-            }
-            getItemLayout={(data, index) => ({
-              length: itemWidth,
-              offset: itemWidth * index,
-              index,
-            })}
-            keyExtractor={(item, index) => index.toString()}
-            renderItem={({ item, index }) => {
-              const { cast, proposal } = item;
-              return (
-                <View
-                  key={index.toString()}
-                  style={{
-                    width: itemWidth,
-                    height: itemHeight,
-                  }}
-                  className="flex flex-col gap-4 px-4"
-                >
-                  {showIdxs.includes(index) ? (
-                    <FCastWithNftImage
-                      className="overflow-hidden"
-                      cast={cast}
-                      channel={channel!}
-                      tokenInfo={tokenInfo}
-                      proposal={proposal}
-                    />
-                  ) : (
-                    <View
-                      style={{ height: FCastHeightWithNftImage }}
-                      className="flex w-full flex-row items-center justify-center"
-                    >
-                      <Loading />
-                    </View>
-                  )}
-
-                  <View className="flex flex-row items-center justify-between">
-                    <FCastMenuButton
-                      cast={cast}
-                      communityInfo={channel as any}
-                      proposal={proposal}
-                    />
-                    <ProposalStatusActions
-                      cast={cast}
-                      channel={channel!}
-                      tokenInfo={tokenInfo}
-                      proposal={proposal}
-                    />
+        <FlatList
+          horizontal
+          disableIntervalMomentum={true}
+          pagingEnabled={true}
+          showsHorizontalScrollIndicator={false}
+          ref={flatListRef}
+          data={showCasts}
+          viewabilityConfigCallbackPairs={
+            viewabilityConfigCallbackPairs.current
+          }
+          getItemLayout={(data, index) => ({
+            length: itemWidth,
+            offset: itemWidth * index,
+            index,
+          })}
+          keyExtractor={(item, index) => `${item.cast.hash}-${index}`}
+          renderItem={({ item, index }) => {
+            const { cast, proposal } = item;
+            return (
+              <View
+                style={{
+                  width: itemWidth,
+                  height: itemHeight,
+                }}
+                className="flex flex-col gap-4 px-4"
+              >
+                {showIdxs.includes(index) ? (
+                  <FCastWithNftImage
+                    className="overflow-hidden"
+                    cast={cast}
+                    channel={channel!}
+                    tokenInfo={tokenInfo}
+                    proposal={proposal}
+                  />
+                ) : (
+                  <View
+                    style={{ height: FCastHeightWithNftImage }}
+                    className="flex w-full flex-row items-center justify-center"
+                  >
+                    <Loading />
                   </View>
+                )}
+
+                <View className="flex flex-row items-center justify-between">
+                  <FCastMenuButton
+                    cast={cast}
+                    communityInfo={channel as any}
+                    proposal={proposal}
+                  />
+                  <ProposalStatusActions
+                    cast={cast}
+                    channel={channel!}
+                    tokenInfo={tokenInfo}
+                    proposal={proposal}
+                  />
                 </View>
-              );
-            }}
-          />
-        ) : null}
+              </View>
+            );
+          }}
+        />
       </View>
       {showCasts.length > 1 ? (
         <Pagination