This repository has no description
0

Configure Feed

Select the types of activity you want to include in your feed.

semble / src / webapp / features / platforms / bluesky / container / blueskyMentionsContainer / BlueskyMentionsContainer.tsx
1.8 kB 59 lines
1'use client'; 2 3import SembleMentionsContainerError from '@/features/semble/containers/sembleMentionsContainer/Error.SembleMentionsContainer'; 4import useSearchBlueskyPosts from '../../lib/queries/useSearchBlueskyPosts'; 5import { BlueskySearchSortOptions } from '../../lib/types'; 6import SembleEmptyTab from '@/features/semble/components/sembleEmptyTab/SembleEmptyTab'; 7import { MdOutlineAlternateEmail } from 'react-icons/md'; 8import { Grid, Group, Select } from '@mantine/core'; 9import InfiniteScroll from '@/components/contentDisplay/infiniteScroll/InfiniteScroll'; 10import BlueskyMentionPost from '@/features/platforms/bluesky/components/blueskyMentionPost/BlueskyMentionPost'; 11 12interface Props { 13 url: string; 14 sortBy: BlueskySearchSortOptions; 15} 16 17export default function BlueskyMentionsContainer(props: Props) { 18 const { 19 data, 20 error, 21 isPending, 22 fetchNextPage, 23 hasNextPage, 24 isFetchingNextPage, 25 } = useSearchBlueskyPosts({ query: props.url, sortBy: props.sortBy }); 26 27 const allPosts = data?.pages.flatMap((page) => page.posts ?? []) ?? []; 28 29 if (error) { 30 return <SembleMentionsContainerError />; 31 } 32 33 if (allPosts.length === 0) { 34 return ( 35 <SembleEmptyTab 36 message="No mentions found" 37 icon={MdOutlineAlternateEmail} 38 /> 39 ); 40 } 41 42 return ( 43 <InfiniteScroll 44 dataLength={allPosts.length} 45 hasMore={!!hasNextPage} 46 isInitialLoading={isPending} 47 isLoading={isFetchingNextPage} 48 loadMore={fetchNextPage} 49 > 50 <Grid gap="sm" mx={'auto'} maw={600} w={'100%'}> 51 {allPosts.map((post) => ( 52 <Grid.Col key={post.uri} span={12}> 53 <BlueskyMentionPost post={post} /> 54 </Grid.Col> 55 ))} 56 </Grid> 57 </InfiniteScroll> 58 ); 59}