nandi.uk
This repository has no description
2.3 kB
91 lines
1'use client';
2
3import useGlobalFeed from '@/features/feeds/lib/queries/useGlobalFeed';
4import FeedItem from '@/features/feeds/components/feedItem/FeedItem';
5import {
6 Stack,
7 Title,
8 Text,
9 Center,
10 Container,
11 Box,
12 Loader,
13} from '@mantine/core';
14import MyFeedContainerSkeleton from './Skeleton.MyFeedContainer';
15import MyFeedContainerError from './Error.MyFeedContainer';
16import InfiniteScroll from '@/components/contentDisplay/infiniteScroll/InfiniteScroll';
17import RefetchButton from '@/components/navigation/refetchButton/RefetchButton';
18
19export default function MyFeedContainer() {
20 const {
21 data,
22 error,
23 isPending,
24 fetchNextPage,
25 hasNextPage,
26 isFetchingNextPage,
27 isRefetching,
28 refetch,
29 } = useGlobalFeed();
30
31 const allActivities =
32 data?.pages.flatMap((page) => page.activities ?? []) ?? [];
33
34 if (isPending) {
35 return <MyFeedContainerSkeleton />;
36 }
37
38 if (error) {
39 return <MyFeedContainerError />;
40 }
41
42 return (
43 <Container p="xs" size="xl">
44 <Stack>
45 <Title order={1}>Explore</Title>
46 {isRefetching && (
47 <Stack align="center" gap={'xs'}>
48 <Loader color={'gray'} />
49 <Text fw={600} c={'gray'}>
50 Fetching the latest activities...
51 </Text>
52 </Stack>
53 )}
54 {allActivities.length === 0 ? (
55 <Center h={200}>
56 <Text fz="h3" fw={600} c="gray">
57 No activity to show yet
58 </Text>
59 </Center>
60 ) : (
61 <InfiniteScroll
62 dataLength={allActivities.length}
63 hasMore={!!hasNextPage}
64 isInitialLoading={isPending}
65 isLoading={isFetchingNextPage}
66 loadMore={fetchNextPage}
67 >
68 <Stack gap={'xl'} mx={'auto'} maw={600} w={'100%'}>
69 <Stack gap={60}>
70 {allActivities.map((item) => (
71 <FeedItem key={item.id} item={item} />
72 ))}
73 </Stack>
74 </Stack>
75 </InfiniteScroll>
76 )}
77 </Stack>
78
79 <Box
80 pos={'fixed'}
81 bottom={0}
82 mt={'md'}
83 mx={{ base: 10, sm: 2.5 }}
84 mb={{ base: 100, sm: 'md' }}
85 style={{ zIndex: 2 }}
86 >
87 <RefetchButton onRefetch={() => refetch()} />
88 </Box>
89 </Container>
90 );
91}