feature: add comments/latest page

app/(pages)/(root)/components/comments.tsx

@@ -20,7 +20,7 @@ const Comments: FC<Props> = ({ className }) => {
 
     return (
         <Block className={cn(className)}>
-            <Header title="Коментарі" />
+            <Header title="Коментарі" href="/comments/latest" />
             <div className="flex flex-col gap-6">
                 {comments?.map((item) => (
                     <HorizontalCard

app/(pages)/comments/latest/components/comments.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import * as React from 'react';
+import { FC } from 'react';
+
+import ContentCard from '@/components/content-card/content-card';
+import LoadMoreButton from '@/components/load-more-button';
+import { Badge } from '@/components/ui/badge';
+import Block from '@/components/ui/block';
+import Card from '@/components/ui/card';
+import Header from '@/components/ui/header';
+import HorizontalCard from '@/components/ui/horizontal-card';
+import NotFound from '@/components/ui/not-found';
+import Stack from '@/components/ui/stack';
+import useGlobalComments from '@/services/hooks/comments/useGlobalComments';
+import { CONTENT_TYPE_LINKS } from '@/utils/constants';
+import { cn } from '@/utils/utils';
+
+interface Props {
+    className?: string;
+}
+
+const Comments: FC<Props> = ({ className }) => {
+    const { list, hasNextPage, ref, isFetchingNextPage, fetchNextPage } =
+        useGlobalComments();
+
+    return (
+        <Block className={cn(className)}>
+            <Header title="Останні коментарі" />
+            <Stack
+                size={3}
+                extended
+                extendedSize={3}
+                className="grid-cols-1 md:grid-cols-1"
+            >
+                {list?.map((item, index) => (
+                    <Card key={item.reference}>
+                        <Badge
+                            variant="secondary"
+                            className="absolute -top-3 left-4 z-[1]"
+                        >
+                            #{index + 1}
+                        </Badge>
+                        <HorizontalCard
+                            image={item.author.avatar}
+                            imageRatio={1}
+                            description={item.text}
+                            key={item.created}
+                            title={item.author.username}
+                            href={`/u/${item.author.username}`}
+                            createdAt={item.created}
+                        >
+                            <ContentCard
+                                className="w-10"
+                                poster={item.image}
+                                href={`${CONTENT_TYPE_LINKS[item.content_type]}/${item.slug}`}
+                            />
+                        </HorizontalCard>
+                    </Card>
+                ))}
+                {list?.length === 0 && (
+                    <NotFound
+                        title="Історія відсутня"
+                        description="Історія оновиться після змін у Вашому списку, або у списку користувачів, яких Ви відстежуєте"
+                    />
+                )}
+            </Stack>
+            {list && hasNextPage && (
+                <LoadMoreButton
+                    ref={ref}
+                    fetchNextPage={fetchNextPage}
+                    isFetchingNextPage={isFetchingNextPage}
+                />
+            )}
+        </Block>
+    );
+};
+
+export default Comments;

app/(pages)/comments/latest/page.tsx

@@ -0,0 +1,55 @@
+import { Metadata } from 'next';
+import * as React from 'react';
+import { FC } from 'react';
+
+
+
+import { dehydrate } from '@tanstack/query-core';
+import { HydrationBoundary } from '@tanstack/react-query';
+
+
+
+import getGlobalComments from '@/services/api/comments/getGlobalComments';
+import getFollowingHistory from '@/services/api/history/getFollowingHistory';
+import { getCookie } from '@/utils/cookies';
+import _generateMetadata from '@/utils/generateMetadata';
+import getQueryClient from '@/utils/getQueryClient';
+
+
+
+import Comments from './components/comments';
+
+
+export const metadata: Metadata = _generateMetadata({
+    title: 'Активність',
+});
+
+interface Props {
+    searchParams: Record<string, any>;
+}
+
+const FollowingHistoryPage: FC<Props> = async ({ searchParams }) => {
+    const queryClient = await getQueryClient();
+
+    await queryClient.prefetchInfiniteQuery({
+        initialPageParam: 1,
+        queryKey: ['globalComments'],
+        queryFn: ({ pageParam, meta }) =>
+            getGlobalComments({
+                page: pageParam,
+                auth: meta?.auth,
+            }),
+    })
+
+    const dehydratedState = dehydrate(queryClient);
+
+    return (
+        <HydrationBoundary state={dehydratedState}>
+            <div className="flex flex-col gap-12">
+                <Comments />
+            </div>
+        </HydrationBoundary>
+    );
+};
+
+export default FollowingHistoryPage;

services/api/comments/getGlobalComments.ts

@@ -0,0 +1,18 @@
+import {
+    BaseFetchRequestProps,
+    fetchRequest,
+} from '@/services/api/fetchRequest';
+
+export default async function req({
+    page = 1,
+    size = 15,
+    ...props
+}: BaseFetchRequestProps): Promise<API.WithPagination<API.GlobalComment>> {
+    return fetchRequest<API.WithPagination<API.GlobalComment>>({
+        ...props,
+        path: `/comments/list`,
+        method: 'get',
+        page,
+        size,
+    });
+}

services/api/comments/getLatestComments.ts

@@ -3,23 +3,10 @@ import {
     fetchRequest,
 } from '@/services/api/fetchRequest';
 
-export type LatestComment = {
-    author: API.User;
-    updated: number;
-    created: number;
-    content_type: API.ContentType;
-    image: string;
-    text: string;
-    vote_score: number;
-    reference: string;
-    depth: number;
-    slug: string;
-};
-
 export default async function req(
     props?: BaseFetchRequestProps,
-): Promise<LatestComment[]> {
-    return fetchRequest<LatestComment[]>({
+): Promise<API.GlobalComment[]> {
+    return fetchRequest<API.GlobalComment[]>({
         ...props,
         path: `/comments/latest`,
         method: 'get',

services/hooks/comments/useGlobalComments.ts

@@ -0,0 +1,14 @@
+import getGlobalComments from '@/services/api/comments/getGlobalComments';
+import useInfiniteList from '@/services/hooks/useInfiniteList';
+
+const useGlobalComments = () => {
+    return useInfiniteList({
+        queryKey: ['globalComments'],
+        queryFn: ({ pageParam }) =>
+            getGlobalComments({
+                page: pageParam,
+            }),
+    });
+};
+
+export default useGlobalComments;

types/api.d.ts

@@ -251,6 +251,19 @@ declare global {
             parent: string | null;
         };
 
+        type GlobalComment = {
+            author: API.User;
+            updated: number;
+            created: number;
+            content_type: API.ContentType;
+            image: string;
+            text: string;
+            vote_score: number;
+            reference: string;
+            depth: number;
+            slug: string;
+        };
+
         type External = {
             url: string;
             text: string;