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