From 21e7e16c11aecc163646a76c94318f0f2b4fc5c1 Mon Sep 17 00:00:00 2001 From: shixuewen Date: Thu, 14 Mar 2024 19:00:41 +0800 Subject: [PATCH 1/2] feat: explore hot communities --- apps/u3/src/components/explore/HomeLayout.tsx | 10 +-- .../explore/community/CommunityItem.tsx | 65 +++++++++++++++++++ .../explore/community/HotCommunities.tsx | 51 +++++++++++++++ apps/u3/src/container/explore/Home.tsx | 32 +++++++++ 4 files changed, 153 insertions(+), 5 deletions(-) create mode 100644 apps/u3/src/components/explore/community/CommunityItem.tsx create mode 100644 apps/u3/src/components/explore/community/HotCommunities.tsx diff --git a/apps/u3/src/components/explore/HomeLayout.tsx b/apps/u3/src/components/explore/HomeLayout.tsx index f4b11d69..8036c1da 100644 --- a/apps/u3/src/components/explore/HomeLayout.tsx +++ b/apps/u3/src/components/explore/HomeLayout.tsx @@ -2,12 +2,12 @@ import { useNavigate } from 'react-router-dom'; import { MainWrapper } from '../layout/Index'; import HotPosts from './posts/HotPosts'; import type { ExploreHomeState } from '../../container/explore/Home'; -import TopChannels from './channels/TopChannels'; import ColorButton from '../common/button/ColorButton'; +import HotCommunities from './community/HotCommunities'; export default function HomeLayout({ hotPosts, - topChannels, + hotCommunities, }: ExploreHomeState) { const navigate = useNavigate(); return ( @@ -17,9 +17,9 @@ export default function HomeLayout({ isLoading={hotPosts.isLoading} farcasterUserData={hotPosts.farcasterUserData} /> - & { + communityInfo: CommunityInfo; +}) { + const navigate = useNavigate(); + const { logo, name, description, memberInfo, types } = communityInfo || {}; + return ( +
{ + navigate(`/community/${communityInfo.channelId}`); + }} + {...props} + > + +
+
+
+ {types?.length > 0 && ( +
+ {types.reduce((acc, cur) => { + return `${acc}, ${cur}`; + })} +
+ )} +
{name}
+
+ +
+
+ {memberInfo?.newPostNumber > 0 && ( +
+ {memberInfo?.newPostNumber} new posts +
+ )} + {memberInfo?.totalNumber > 0 && ( +
+ {memberInfo?.totalNumber} members +
+ )} +
+
+ {description} +
+
+
+ ); +} diff --git a/apps/u3/src/components/explore/community/HotCommunities.tsx b/apps/u3/src/components/explore/community/HotCommunities.tsx new file mode 100644 index 00000000..61ad002b --- /dev/null +++ b/apps/u3/src/components/explore/community/HotCommunities.tsx @@ -0,0 +1,51 @@ +import { useNavigate } from 'react-router-dom'; +import Title from '../Title'; +import Loading from '../../common/loading/Loading'; +import { cn } from '@/lib/utils'; +import { CommunityInfo } from '@/services/community/types/community'; +import CommunityItem from './CommunityItem'; + +export type HotCommunitiesData = Array; + +export default function HotCommunities({ + communities, + isLoading, +}: { + communities: HotCommunitiesData; + isLoading: boolean; +}) { + const navigate = useNavigate(); + return ( +
+ { + navigate(`/communities`); + }} + /> + <div className={cn('w-full mt-[20px]', 'max-sm:mt-[10px]')}> + {isLoading ? ( + <div + className={cn( + 'w-full h-full flex justify-center items-center', + 'max-sm:h-[430px]' + )} + > + <Loading /> + </div> + ) : ( + <div + className={cn( + 'w-full grid gap-[20px] grid-cols-3', + 'max-sm:grid-cols-1 max-sm:gap-[10px]' + )} + > + {communities.map((item) => { + return <CommunityItem key={item.id} communityInfo={item} />; + })} + </div> + )} + </div> + </div> + ); +} diff --git a/apps/u3/src/container/explore/Home.tsx b/apps/u3/src/container/explore/Home.tsx index d3148cfa..b3e25b0f 100644 --- a/apps/u3/src/container/explore/Home.tsx +++ b/apps/u3/src/container/explore/Home.tsx @@ -13,6 +13,8 @@ import HomeLayout from '../../components/explore/HomeLayout'; import { TopChannelsData } from '@/components/explore/channels/TopChannels'; import { useFarcasterCtx } from '@/contexts/social/FarcasterCtx'; import type { ExploreLayoutCtx } from './ExploreLayout'; +import { HotCommunitiesData } from '@/components/explore/community/HotCommunities'; +import { fetchTrendingCommunities } from '@/services/community/api/community'; type FarcasterUserData = { [key: string]: { type: number; value: string }[] }; type HotPostsState = { @@ -32,11 +34,16 @@ type HighScoreDappsState = { dapps: HighScoreDappsData; isLoading: boolean; }; +type HotCommunitiesState = { + communities: HotCommunitiesData; + isLoading: boolean; +}; export type ExploreHomeState = { hotPosts: HotPostsState; topLinks: TopLinksState; topChannels: TopChannelsState; highScoreDapps: HighScoreDappsState; + hotCommunities: HotCommunitiesState; }; export default function Home() { @@ -62,6 +69,11 @@ export default function Home() { isLoading: true, }); + const [hotCommunities, setHotCommunities] = useState<HotCommunitiesState>({ + communities: [], + isLoading: true, + }); + useEffect(() => { getHotPosts() .then((res) => { @@ -125,6 +137,25 @@ export default function Home() { .catch(() => { setHighScoreDapps((pre) => ({ ...pre, dapps: [], isLoading: false })); }); + + fetchTrendingCommunities({ + pageSize: 3, + pageNumber: 1, + }) + .then((res) => { + const { data: communities } = res.data; + setHotCommunities({ + communities, + isLoading: false, + }); + }) + .catch(() => { + setHotCommunities((pre) => ({ + ...pre, + communities: [], + isLoading: false, + })); + }); }, []); const { trendChannels, trendChannelsLoading } = useFarcasterCtx(); @@ -165,6 +196,7 @@ export default function Home() { topLinks={topLinks} topChannels={topChannels} highScoreDapps={highScoreDapps} + hotCommunities={hotCommunities} /> ); } From 88cd6a95cc6df8bb01617511e849e64550f1c27f Mon Sep 17 00:00:00 2001 From: shixuewen <friendlysxw@163.com> Date: Fri, 15 Mar 2024 12:02:35 +0800 Subject: [PATCH 2/2] fix: community description style --- apps/u3/src/components/community/CommunityItem.tsx | 2 +- apps/u3/src/components/explore/community/CommunityItem.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/u3/src/components/community/CommunityItem.tsx b/apps/u3/src/components/community/CommunityItem.tsx index d60498fa..266ac352 100644 --- a/apps/u3/src/components/community/CommunityItem.tsx +++ b/apps/u3/src/components/community/CommunityItem.tsx @@ -56,7 +56,7 @@ export default function CommunityItem({ </div> )} </div> - <div className="text-[#FFF] text-[14px] font-normal leading-[20px] line-clamp-2"> + <div className="text-[#FFF] text-[14px] font-normal leading-[20px] line-clamp-2 max-sm:line-clamp-1"> {description} </div> </div> diff --git a/apps/u3/src/components/explore/community/CommunityItem.tsx b/apps/u3/src/components/explore/community/CommunityItem.tsx index edf63a42..97d5f385 100644 --- a/apps/u3/src/components/explore/community/CommunityItem.tsx +++ b/apps/u3/src/components/explore/community/CommunityItem.tsx @@ -56,7 +56,7 @@ export default function CommunityItem({ </div> )} </div> - <div className="text-[#FFF] text-[14px] font-normal leading-[20px] line-clamp-2"> + <div className="text-[#FFF] text-[14px] font-normal leading-[20px] line-clamp-2 max-sm:line-clamp-1"> {description} </div> </div>