From e384fc69f7e0dae152f7647683000316184dcacd Mon Sep 17 00:00:00 2001 From: Norman Meier Date: Mon, 7 Aug 2023 04:03:42 +0200 Subject: [PATCH] TMP Signed-off-by: Norman Meier --- package.json | 1 + .../socialFeed/NewsFeed/NewsFeed.tsx | 63 ++++++++----------- .../socialFeed/NewsFeed/NewsFeedInput.tsx | 4 +- .../SocialThread/SocialThreadCard.tsx | 1 + packages/screens/Feed/FeedScreen.tsx | 5 +- .../screens/Feed/components/FeedHeader.tsx | 4 +- .../Organizations/OrganizationsScreen.tsx | 31 +++++---- .../UserPublicProfileScreen.tsx | 2 +- yarn.lock | 23 +++++++ 9 files changed, 71 insertions(+), 63 deletions(-) diff --git a/package.json b/package.json index 603f44705e..5a2aaba3ef 100644 --- 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 index f1c091b55e..08cce73abd 100644 --- 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 = ({ Header, req, @@ -56,7 +56,6 @@ export const NewsFeed: React.FC = ({ }) => { 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 = ({ () => (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 = ({ <>
@@ -116,6 +120,7 @@ export const NewsFeed: React.FC = ({ justifyContent: "center", alignItems: "center", flexDirection: isMobile ? "row" : "column", + width: "100%", }, ]} > @@ -154,16 +159,10 @@ export const NewsFeed: React.FC = ({ 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 = ({ return ( <> - setContainerWidth(e.nativeEvent.layout.width)} + key={`${elemsPerRow}`} + numColumns={elemsPerRow} data={posts} renderItem={({ item: post }) => ( - + - )} - 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 index 634cca1b39..527c0a549d 100644 --- 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 ( setViewWidth(e.nativeEvent.layout.width)} > {isNotEnoughFundModal && ( diff --git a/packages/components/socialFeed/SocialThread/SocialThreadCard.tsx b/packages/components/socialFeed/SocialThread/SocialThreadCard.tsx index f7e78fea8f..38745c47a7 100644 --- 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%" }} > = () => { return ( } forceNetworkFeatures={[NetworkFeature.SocialFeed]} + noScroll headerChildren={Social Feed} > = ({ selectedTab, onTabChange, }) => { - const { width } = useMaxResolution(); return ( <> { return ( DAO List} footerChildren={<>} - noMargin - fullWidth - noScroll + responsive forceNetworkFeatures={[NetworkFeature.Organizations]} > - - navigation.navigate("OrganizationDeployer")} - /> - } - /> - + navigation.navigate("OrganizationDeployer")} + /> + } + /> ); }; @@ -50,7 +47,7 @@ const DAOsSection: React.FC<{ return ( diff --git a/packages/screens/UserPublicProfile/UserPublicProfileScreen.tsx b/packages/screens/UserPublicProfile/UserPublicProfileScreen.tsx index 57abb3035b..f47f52e6ce 100644 --- 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 index 6600e7ce78..5256124ea6 100644 --- 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