TMP

Signed-off-by: Norman Meier <[email protected]>
TERITORI · Aug 7, 2023 · e384fc6 · e384fc6
1 parent e08c001
commit e384fc6
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 63 deletions.
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "@react-native-clipboard/clipboard": "^1.10.0",
     "@react-native-masked-view/masked-view": "0.2.6",
     "@react-native-picker/picker": "2.4.0",
+    "@react-native-seoul/masonry-list": "^1.4.2",
     "@react-navigation/native": "^6.0.11",
     "@react-navigation/native-stack": "^6.7.0",
     "@reduxjs/toolkit": "^1.8.3",

diff --git a/packages/components/socialFeed/NewsFeed/NewsFeed.tsx b/packages/components/socialFeed/NewsFeed/NewsFeed.tsx
@@ -1,3 +1,4 @@
+import MasonryList from "@react-native-seoul/masonry-list";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import {
   LayoutChangeEvent,
@@ -22,12 +23,7 @@ import {
   useFetchFeed,
 } from "../../../hooks/feed/useFetchFeed";
 import { useIsMobile } from "../../../hooks/useIsMobile";
-import { useMaxResolution } from "../../../hooks/useMaxResolution";
-import {
-  layout,
-  RESPONSIVE_BREAKPOINT_S,
-  screenContentMaxWidth,
-} from "../../../utils/style/layout";
+import { layout, RESPONSIVE_BREAKPOINT_S } from "../../../utils/style/layout";
 import { SpacerColumn, SpacerRow } from "../../spacer";
 import { SocialThreadCard } from "../SocialThread/SocialThreadCard";
 
@@ -46,6 +42,10 @@ interface NewsFeedProps {
   disablePosting?: boolean;
 }
 
+const halfGap = layout.padding_x1;
+
+const maxElemWidth = 400;
+
 export const NewsFeed: React.FC<NewsFeedProps> = ({
   Header,
   req,
@@ -56,7 +56,6 @@ export const NewsFeed: React.FC<NewsFeedProps> = ({
 }) => {
   const isMobile = useIsMobile();
   const { width: windowWidth } = useWindowDimensions();
-  const { width } = useMaxResolution();
   const { data, isFetching, refetch, hasNextPage, fetchNextPage, isLoading } =
     useFetchFeed(req);
   const isLoadingValue = useSharedValue(false);
@@ -65,6 +64,11 @@ export const NewsFeed: React.FC<NewsFeedProps> = ({
     () => (data ? combineFetchFeedPages(data.pages) : []),
     [data]
   );
+  const [containerWidth, setContainerWidth] = useState(0);
+  const elemsPerRow = Math.floor(containerWidth / maxElemWidth) || 1;
+  const elemSize = elemsPerRow
+    ? (containerWidth - halfGap * elemsPerRow * 2) / elemsPerRow
+    : posts.length || 0;
   const [isCreateModalVisible, setCreateModalVisible] = useState(false);
   const [flatListContentOffsetY, setFlatListContentOffsetY] = useState(0);
   const [headerHeight, setHeaderHeight] = useState(0);
@@ -105,7 +109,7 @@ export const NewsFeed: React.FC<NewsFeedProps> = ({
       <>
         <View
           onLayout={onHeaderLayout}
-          style={{ width, alignSelf: "center", alignItems: "center" }}
+          style={{ width: "100%", alignSelf: "center", alignItems: "center" }}
         >
           <Header />
         </View>
@@ -116,6 +120,7 @@ export const NewsFeed: React.FC<NewsFeedProps> = ({
                 justifyContent: "center",
                 alignItems: "center",
                 flexDirection: isMobile ? "row" : "column",
+                width: "100%",
               },
             ]}
           >
@@ -154,16 +159,10 @@ export const NewsFeed: React.FC<NewsFeedProps> = ({
       isLoadingValue,
       isMobile,
       refetch,
-      width,
     ]
   );
 
   const styles = StyleSheet.create({
-    content: {
-      alignItems: "center",
-      alignSelf: "center",
-      width: "100%",
-    },
     floatingActions: {
       position: "absolute",
       justifyContent: "center",
@@ -175,41 +174,33 @@ export const NewsFeed: React.FC<NewsFeedProps> = ({
 
   return (
     <>
-      <Animated.FlatList
-        scrollEventThrottle={0.1}
+      <MasonryList
+        onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
+        key={`${elemsPerRow}`}
+        numColumns={elemsPerRow}
         data={posts}
         renderItem={({ item: post }) => (
-          <View
-            style={{
-              width:
-                windowWidth < RESPONSIVE_BREAKPOINT_S ? windowWidth : width,
-              maxWidth: screenContentMaxWidth,
-            }}
-          >
+          <View style={{ width: elemSize, margin: halfGap }}>
             <SocialThreadCard
-              post={post}
+              post={post as any}
               isPreview
-              style={
+              style={[
+                { width: "100%" },
                 windowWidth < RESPONSIVE_BREAKPOINT_S && {
                   borderRadius: 0,
                   borderLeftWidth: 0,
                   borderRightWidth: 0,
-                }
-              }
+                },
+              ]}
             />
-            <SpacerColumn size={2} />
           </View>
         )}
-        ListHeaderComponentStyle={{
-          zIndex: 1,
-          width: windowWidth,
-          maxWidth: screenContentMaxWidth,
-        }}
+        style={{ width: "100%", marginTop: 32 }}
         ListHeaderComponent={ListHeaderComponent}
         keyExtractor={(post: Post) => post.identifier}
-        onScroll={scrollHandler}
-        contentContainerStyle={styles.content}
-        onEndReachedThreshold={1}
+        // onScroll={scrollHandler}
+        contentContainerStyle={{ width: "100%", margin: -halfGap }}
+        onEndReachedThreshold={1.5}
         onEndReached={onEndReached}
       />
 

diff --git a/packages/components/socialFeed/NewsFeed/NewsFeedInput.tsx b/packages/components/socialFeed/NewsFeed/NewsFeedInput.tsx
@@ -35,7 +35,6 @@ import { useUpdateAvailableFreePost } from "../../../hooks/feed/useUpdateAvailab
 import { useUpdatePostFee } from "../../../hooks/feed/useUpdatePostFee";
 import { useBalances } from "../../../hooks/useBalances";
 import { useIsMobile } from "../../../hooks/useIsMobile";
-import { useMaxResolution } from "../../../hooks/useMaxResolution";
 import { useSelectedNetworkInfo } from "../../../hooks/useSelectedNetwork";
 import useSelectedWallet from "../../../hooks/useSelectedWallet";
 import {
@@ -142,7 +141,6 @@ export const NewsFeedInput = React.forwardRef<
     forwardRef
   ) => {
     const { width: windowWidth } = useWindowDimensions();
-    const { width } = useMaxResolution();
     const isMobile = useIsMobile();
     const [viewWidth, setViewWidth] = useState(0);
     const inputMaxHeight = 400;
@@ -410,7 +408,7 @@ export const NewsFeedInput = React.forwardRef<
 
     return (
       <View
-        style={[{ width }, style]}
+        style={[{ width: "100%" }, style]}
         onLayout={(e) => setViewWidth(e.nativeEvent.layout.width)}
       >
         {isNotEnoughFundModal && (

diff --git a/packages/components/socialFeed/SocialThread/SocialThreadCard.tsx b/packages/components/socialFeed/SocialThread/SocialThreadCard.tsx
@@ -166,6 +166,7 @@ export const SocialThreadCard: React.FC<{
       onPress={() =>
         navigation.navigate("FeedPostView", { id: localPost.identifier })
       }
+      style={{ width: "100%" }}
     >
       <AnimationFadeIn
         style={[

diff --git a/packages/screens/Feed/FeedScreen.tsx b/packages/screens/Feed/FeedScreen.tsx
@@ -31,12 +31,11 @@ export const FeedScreen: ScreenFC<"Feed"> = () => {
 
   return (
     <ScreenContainer
-      fullWidth
+      isLarge
       responsive
-      noMargin
-      noScroll
       footerChildren={<></>}
       forceNetworkFeatures={[NetworkFeature.SocialFeed]}
+      noScroll
       headerChildren={<BrandText>Social Feed</BrandText>}
     >
       <NewsFeed

diff --git a/packages/screens/Feed/components/FeedHeader.tsx b/packages/screens/Feed/components/FeedHeader.tsx
@@ -3,7 +3,6 @@ import { StyleSheet } from "react-native";
 
 import { SpacerColumn } from "../../../components/spacer";
 import { Tabs } from "../../../components/tabs/Tabs";
-import { useMaxResolution } from "../../../hooks/useMaxResolution";
 import { feedsTabItems } from "../../../utils/social-feed";
 import { primaryColor } from "../../../utils/style/colors";
 import { fontSemibold16 } from "../../../utils/style/fonts";
@@ -17,14 +16,13 @@ export const FeedHeader: React.FC<FeedHeaderProps> = ({
   selectedTab,
   onTabChange,
 }) => {
-  const { width } = useMaxResolution();
   return (
     <>
       <Tabs
         items={feedsTabItems}
         selected={selectedTab}
         onSelect={onTabChange}
-        style={[styles.header, { width }]}
+        style={[styles.header, { width: "100%" }]}
         borderColorTabSelected={primaryColor}
         gradientText
         tabTextStyle={fontSemibold16}

diff --git a/packages/screens/Organizations/OrganizationsScreen.tsx b/packages/screens/Organizations/OrganizationsScreen.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ScrollView, View } from "react-native";
+import { View } from "react-native";
 
 import { DAOsRequest } from "../../api/dao/v1/dao";
 import { BrandText } from "../../components/BrandText";
@@ -19,25 +19,22 @@ export const OrganizationsScreen = () => {
 
   return (
     <ScreenContainer
+      isLarge
       headerChildren={<BrandText>DAO List</BrandText>}
       footerChildren={<></>}
-      noMargin
-      fullWidth
-      noScroll
+      responsive
       forceNetworkFeatures={[NetworkFeature.Organizations]}
     >
-      <ScrollView>
-        <DAOsSection
-          req={{ networkId }}
-          title="All DAOs"
-          topRight={
-            <PrimaryButton
-              text="Create Dao"
-              onPress={() => navigation.navigate("OrganizationDeployer")}
-            />
-          }
-        />
-      </ScrollView>
+      <DAOsSection
+        req={{ networkId }}
+        title="All DAOs"
+        topRight={
+          <PrimaryButton
+            text="Create Dao"
+            onPress={() => navigation.navigate("OrganizationDeployer")}
+          />
+        }
+      />
     </ScreenContainer>
   );
 };
@@ -50,7 +47,7 @@ const DAOsSection: React.FC<{
   return (
     <View
       style={{
-        padding: layout.contentPadding,
+        paddingBottom: layout.contentPadding,
         paddingTop: layout.topContentPaddingWithHeading,
       }}
     >

diff --git a/packages/screens/UserPublicProfile/UserPublicProfileScreen.tsx b/packages/screens/UserPublicProfile/UserPublicProfileScreen.tsx
@@ -213,7 +213,7 @@ export const UserPublicProfileScreen: ScreenFC<"UserPublicProfile"> = ({
       key={`UserPublicProfile ${id}`} // this key is to reset the screen state when the id changes
       forceNetworkId={network?.id}
       responsive
-      fullWidth
+      isLarge
       noScroll={selectedTab === "userPosts" || selectedTab === "mentionsPosts"}
       footerChildren={<></>}
       headerChildren={

diff --git a/yarn.lock b/yarn.lock
@@ -7163,6 +7163,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native-seoul/masonry-list@npm:^1.4.2":
+  version: 1.4.2
+  resolution: "@react-native-seoul/masonry-list@npm:1.4.2"
+  dependencies:
+    dooboolab-welcome: ^1.3.2
+  peerDependencies:
+    expo: "*"
+    react: ">=16.9"
+    react-native: ">=0.58"
+  checksum: d208f76b539913e70b6f3085715c36234a7a5344c3877d3ad4e20620b28e98814d491622ca70a7948f359c89c295f000cb54d8dd9aee8c278e1a20f39ec779c6
+  languageName: node
+  linkType: hard
+
 "@react-native/assets@npm:1.0.0":
   version: 1.0.0
   resolution: "@react-native/assets@npm:1.0.0"
@@ -14008,6 +14021,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dooboolab-welcome@npm:^1.3.2":
+  version: 1.3.2
+  resolution: "dooboolab-welcome@npm:1.3.2"
+  bin:
+    dooboolab-welcome: bin/hello.js
+  checksum: 9a4e5c17a16b5cf874bdc1482ee7a2a221a8f269d8bfe6ba1425f678e764d256e265e30ca6169635ce9fa77af53b2e5a0b810a5c4b48b01c13d906613f799c96
+  languageName: node
+  linkType: hard
+
 "dot-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "dot-case@npm:3.0.4"
@@ -27645,6 +27667,7 @@ __metadata:
     "@react-native-clipboard/clipboard": ^1.10.0
     "@react-native-masked-view/masked-view": 0.2.6
     "@react-native-picker/picker": 2.4.0
+    "@react-native-seoul/masonry-list": ^1.4.2
     "@react-navigation/native": ^6.0.11
     "@react-navigation/native-stack": ^6.7.0
     "@reduxjs/toolkit": ^1.8.3