Merge pull request #6 from olexh/home-update

Home update

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

@@ -0,0 +1,51 @@
+'use client';
+
+import { FC } from 'react';
+import MaterialSymbolsAddRounded from '~icons/material-symbols/add-rounded';
+
+import Link from 'next/link';
+
+import CollectionItem from '@/app/(pages)/u/[username]/components/collections/components/ui/collection-item';
+import Block from '@/components/ui/block';
+import { Button } from '@/components/ui/button';
+import Header from '@/components/ui/header';
+import useSession from '@/services/hooks/auth/useSession';
+import useCollections from '@/services/hooks/collections/useCollections';
+import { cn } from '@/utils/utils';
+
+interface Props {
+    className?: string;
+}
+
+const Collections: FC<Props> = ({ className }) => {
+    const { user: loggedUser } = useSession();
+
+    const { data: collections } = useCollections({
+        sort: 'created',
+        page: 1,
+    });
+
+    const filteredCollections = collections?.list?.slice(0, 3);
+
+    return (
+        <Block className={cn(className)}>
+            <Header title="Колекції" href="/collections">
+                {loggedUser?.username && (
+                    <Button asChild size="icon-sm" variant="outline">
+                        <Link href="/collections/new">
+                            <MaterialSymbolsAddRounded />
+                        </Link>
+                    </Button>
+                )}
+            </Header>
+            <div className="flex flex-col gap-6">
+                {filteredCollections &&
+                    filteredCollections.map((item) => (
+                        <CollectionItem data={item} key={item.reference} />
+                    ))}
+            </div>
+        </Block>
+    );
+};
+
+export default Collections;

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

@@ -0,0 +1,47 @@
+'use client';
+
+import * as React from 'react';
+import { FC } from 'react';
+
+import EntryCard from '@/components/entry-card/entry-card';
+import Block from '@/components/ui/block';
+import Header from '@/components/ui/header';
+import HorizontalCard from '@/components/ui/horizontal-card';
+import useLatestComments from '@/services/hooks/comments/useLatestComments';
+import { CONTENT_TYPE_LINKS } from '@/utils/constants';
+import { cn } from '@/utils/utils';
+
+interface Props {
+    className?: string;
+}
+
+const Comments: FC<Props> = ({ className }) => {
+    const { data: comments } = useLatestComments();
+
+    return (
+        <Block className={cn(className)}>
+            <Header title="Коментарі" />
+            <div className="flex flex-col gap-6">
+                {comments?.map((item) => (
+                    <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}
+                    >
+                        <EntryCard
+                            className="w-10"
+                            poster={item.image}
+                            href={`${CONTENT_TYPE_LINKS[item.content_type]}/${item.slug}`}
+                        />
+                    </HorizontalCard>
+                ))}
+            </div>
+        </Block>
+    );
+};
+
+export default Comments;

app/(pages)/(root)/components/history/components/ui/history-item.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { FC, Fragment } from 'react';
+
+import HorizontalCard from '@/components/ui/horizontal-card';
+import { convertActivity } from '@/utils/convertActivity';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import Link from 'next/link';
+
+interface Props {
+    data: API.History;
+    className?: string;
+}
+
+const HistoryItem: FC<Props> = ({ data, className }) => {
+    const activity = convertActivity(data);
+
+    if (activity.length === 0) {
+        return null;
+    }
+
+    if (!data.content) return null;
+
+    const Activity = (
+        <Fragment>
+            {activity.map((event, i, arr) =>
+                event ? (
+                    <Fragment key={i}>
+                        {event}
+                        {i !== arr.length - 1 && ', '}
+                    </Fragment>
+                ) : null,
+            )}
+        </Fragment>
+    );
+
+    return (
+        <HorizontalCard
+            title={data.content.title!}
+            href={`/anime/${data.content.slug}`}
+            description={Activity}
+            createdAt={data.created}
+            image={data.content.poster}
+        >
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Link href={`/u/${data.user.username}`}>
+                        <Avatar className="size-10 rounded-md">
+                            <AvatarImage className="size-10 rounded-md" src={data.user.avatar} />
+                            <AvatarFallback className="size-10 rounded-md" title={data.user.username[0]} />
+                        </Avatar>
+                    </Link>
+                </TooltipTrigger>
+                <TooltipContent>
+                    {data.user.username}
+                </TooltipContent>
+            </Tooltip>
+        </HorizontalCard>
+    );
+};
+
+export default HistoryItem;

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

@@ -0,0 +1,40 @@
+'use client';
+
+import { FC } from 'react';
+
+import Block from '@/components/ui/block';
+import Header from '@/components/ui/header';
+import NotFound from '@/components/ui/not-found';
+import useUserHistory from '@/services/hooks/history/useFollowingHistory';
+import { cn } from '@/utils/utils';
+
+import HistoryItem from './components/ui/history-item';
+
+interface Props {
+    className?: string;
+}
+
+const History: FC<Props> = ({ className }) => {
+    const { list } = useUserHistory();
+
+    const filteredHistory = list?.slice(0, 3);
+
+    return (
+        <Block className={cn(className)}>
+            <Header title="Активність" />
+            <div className="flex flex-col gap-6">
+                {filteredHistory?.map((item) => (
+                    <HistoryItem data={item} key={item.reference} />
+                ))}
+                {filteredHistory?.length === 0 && (
+                    <NotFound
+                        title="Історія відсутня"
+                        description="Історія оновиться після змін у Вашому списку, або у списку користувачів, яких Ви відстежуєте"
+                    />
+                )}
+            </div>
+        </Block>
+    );
+};
+
+export default History;

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

@@ -0,0 +1,43 @@
+'use client';
+
+import * as React from 'react';
+import { FC } from 'react';
+
+import { range } from '@antfu/utils';
+
+import AnimeCard from '@/app/(pages)/(content)/components/anime-card';
+import SkeletonCard from '@/components/skeletons/entry-card';
+import Block from '@/components/ui/block';
+import Header from '@/components/ui/header';
+import Stack from '@/components/ui/stack';
+import useAnimeCatalog from '@/services/hooks/anime/useAnimeCatalog';
+import { cn } from '@/utils/utils';
+
+interface Props {
+    className?: string;
+}
+
+const Ongoings: FC<Props> = ({ className }) => {
+    const { list,  isLoading } = useAnimeCatalog({
+        status: ['ongoing'],
+        page: 1,
+        iPage: 1,
+    });
+
+    const filteredList = list?.slice(0, 8);
+
+    return (
+        <Block className={cn(className)}>
+            <Header title="Онґоінґи" href="/anime?statuses=ongoing" />
+            <Stack>
+                {isLoading &&
+                    range(0, 8).map((v) => <SkeletonCard key={v} />)}
+                {filteredList?.map((item) => (
+                    <AnimeCard anime={item} key={item.slug} />
+                ))}
+            </Stack>
+        </Block>
+    );
+};
+
+export default Ongoings;