add visibility to collection page, add tags to edit page, fix colors …

…on edit page
hikka-io · Mar 20, 2024 · bfd4ece · bfd4ece
1 parent 1cbeaab
commit bfd4ece
Show file tree

Hide file tree

Showing 20 changed files with 192 additions and 127 deletions.
diff --git a/app/(pages)/collections/[reference]/page.tsx b/app/(pages)/collections/[reference]/page.tsx
@@ -2,6 +2,7 @@ import { Metadata } from 'next';
 import React from 'react';
 
 import Link from 'next/link';
+import { redirect } from 'next/navigation';
 
 import { dehydrate } from '@tanstack/query-core';
 import { HydrationBoundary } from '@tanstack/react-query';
@@ -24,11 +25,19 @@ export async function generateMetadata({
 }: {
     params: Record<string, any>;
 }): Promise<Metadata> {
-    const collection = await getCollection({ reference });
+    const secret = await getCookie('secret');
+
+    try {
+        const collection = await getCollection({ reference, secret });
 
-    return _generateMetadata({
-        title: `Колекції / ${collection.title}`,
-    });
+        return _generateMetadata({
+            title: `Колекції / ${collection.title}`,
+        });
+    } catch (e) {
+        return _generateMetadata({
+            title: `Колекції`,
+        });
+    }
 }
 
 const Component = async ({
@@ -39,15 +48,16 @@ const Component = async ({
     const queryClient = getQueryClient();
     const secret = await getCookie('secret');
 
-    await queryClient.prefetchQuery({
-        queryKey: ['collection', { reference, secret }],
-        queryFn: () => getCollection({ reference, secret }),
-    });
+    let collection;
 
-    const collection: API.Collection | undefined = queryClient.getQueryData([
-        'collection',
-        { reference, secret },
-    ]);
+    try {
+        collection = await queryClient.fetchQuery({
+            queryKey: ['collection', reference, { secret }],
+            queryFn: () => getCollection({ reference, secret }),
+        });
+    } catch (e) {
+        return redirect('/collections');
+    }
 
     const dehydratedState = dehydrate(queryClient);
 

diff --git a/app/(pages)/collections/new/_components/collection-settings/collection-settings.tsx b/app/(pages)/collections/new/_components/collection-settings/collection-settings.tsx
@@ -7,6 +7,7 @@ import { useParams } from 'next/navigation';
 
 import AnilistCollection from '@/app/(pages)/collections/new/_components/anilist-collection';
 import { Button } from '@/components/ui/button';
+import { Combobox } from '@/components/ui/combobox';
 import { Input } from '@/components/ui/input';
 import { InputTags } from '@/components/ui/input-tags';
 import { Label } from '@/components/ui/label';
@@ -27,6 +28,21 @@ interface Props {
     mode?: 'create' | 'edit';
 }
 
+const COLLECTION_VISIBILITY_OPTIONS = [
+    {
+        value: 'public',
+        label: 'Публічна',
+    },
+    {
+        value: 'private',
+        label: 'Приватна',
+    },
+    {
+        value: 'unlisted',
+        label: 'Лише у профілі',
+    },
+];
+
 const Component = ({ mode = 'create' }: Props) => {
     const { openModal } = useModalContext();
     const params = useParams();
@@ -35,7 +51,7 @@ const Component = ({ mode = 'create' }: Props) => {
         title,
         nsfw,
         spoiler,
-        private: isPrivate,
+        visibility,
         setState: setCollectionState,
         description,
         tags,
@@ -102,6 +118,15 @@ const Component = ({ mode = 'create' }: Props) => {
         });
     };
 
+    const handleImportAnilistModal = () => {
+        openModal({
+            content: (
+                <AnilistCollection setCollectionState={setCollectionState!} />
+            ),
+            title: 'Імпорт з AniList',
+        });
+    };
+
     return (
         <ScrollArea className="flex flex-col items-start gap-8 lg:max-h-[calc(100vh-6rem)]">
             <div className="flex h-full flex-col gap-6 p-4">
@@ -146,6 +171,25 @@ const Component = ({ mode = 'create' }: Props) => {
                     />
                 </div>
 
+                <div className="flex flex-col gap-4">
+                    <Label htmlFor="private" className="text-muted-foreground">
+                        Відображення
+                    </Label>
+                    <Combobox
+                        value={visibility}
+                        onChange={(value) =>
+                            setCollectionState!((state) => ({
+                                ...state,
+                                visibility: value as
+                                    | 'private'
+                                    | 'public'
+                                    | 'unlisted',
+                            }))
+                        }
+                        options={COLLECTION_VISIBILITY_OPTIONS}
+                    />
+                </div>
+
                 <div className="flex items-center justify-between gap-4">
                     <Label htmlFor="nsfw" className="text-muted-foreground">
                         Контент +18
@@ -156,6 +200,7 @@ const Component = ({ mode = 'create' }: Props) => {
                         id="nsfw"
                     />
                 </div>
+
                 <div className="flex items-center justify-between gap-4">
                     <Label htmlFor="spoiler" className="text-muted-foreground">
                         Спойлери
@@ -168,18 +213,6 @@ const Component = ({ mode = 'create' }: Props) => {
                         id="spoiler"
                     />
                 </div>
-                <div className="flex items-center justify-between gap-4">
-                    <Label htmlFor="private" className="text-muted-foreground">
-                        Приватна колекція
-                    </Label>
-                    <Switch
-                        checked={isPrivate}
-                        onCheckedChange={() =>
-                            handleParamChange('private', !isPrivate)
-                        }
-                        id="private"
-                    />
-                </div>
 
                 <div className="flex flex-col gap-4">
                     {mode === 'edit' && (
@@ -218,18 +251,7 @@ const Component = ({ mode = 'create' }: Props) => {
                             <Button
                                 size="icon"
                                 variant="secondary"
-                                onClick={() =>
-                                    openModal({
-                                        content: (
-                                            <AnilistCollection
-                                                setCollectionState={
-                                                    setCollectionState!
-                                                }
-                                            />
-                                        ),
-                                        title: 'Імпорт з AniList',
-                                    })
-                                }
+                                onClick={handleImportAnilistModal}
                             >
                                 <SimpleIconsAnilist />
                             </Button>

diff --git a/app/(pages)/collections/new/page.tsx b/app/(pages)/collections/new/page.tsx
@@ -10,6 +10,7 @@ import CollectionGroups from './_components/collection-groups';
 import CollectionSettings from './_components/collection-settings';
 import CollectionTitle from './_components/collection-title';
 
+
 export async function generateMetadata(): Promise<Metadata> {
     return _generateMetadata({
         title: {

diff --git a/app/(pages)/edit/_components/edit-list/_components/edit-head.tsx b/app/(pages)/edit/_components/edit-list/_components/edit-head.tsx
@@ -10,7 +10,7 @@ const Component = () => {
                 <TableHead>Автор</TableHead>
                 <TableHead align="left">Контент</TableHead>
                 <TableHead className=" hidden lg:table-cell" align="left">
-                    Опис
+                    Зміни
                 </TableHead>
                 <TableHead align="center" className="w-20">
                     Статус

diff --git a/app/(pages)/edit/_components/edit-list/_components/edit-row.tsx b/app/(pages)/edit/_components/edit-list/_components/edit-row.tsx
@@ -10,12 +10,14 @@ import { useRouter } from 'next/navigation';
 import P from '@/components/typography/p';
 import Small from '@/components/typography/small';
 import { Avatar, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
 import { Label } from '@/components/ui/label';
 import { TableCell, TableRow } from '@/components/ui/table';
 import { useSettingsContext } from '@/services/providers/settings-provider';
 import {
     CONTENT_TYPES,
     CONTENT_TYPE_LINKS,
+    EDIT_PARAMS,
     EDIT_STATUS,
 } from '@/utils/constants';
 
@@ -75,14 +77,13 @@ const Component = ({ edit }: Props) => {
                 </Label>
             </TableCell>
             <TableCell className="hidden md:w-1/3 lg:table-cell" align="left">
-                <P
-                    className={clsx(
-                        'text-sm overflow-hidden overflow-ellipsis break-all line-clamp-2',
-                        !edit.description && 'text-muted-foreground',
-                    )}
-                >
-                    {edit.description ? edit.description : 'Немає опису правки'}
-                </P>
+                <div className="flex flex-wrap gap-2">
+                    {Object.keys(edit.after).map((key) => (
+                        <Badge variant="outline" key={key}>
+                            {EDIT_PARAMS[key as keyof typeof EDIT_PARAMS]}
+                        </Badge>
+                    ))}
+                </div>
             </TableCell>
             <TableCell align="center" className="w-20">
                 <div className="flex justify-end">

diff --git a/app/(pages)/edit/_components/edit-top-stats/components/ui/edit-top-item.tsx b/app/(pages)/edit/_components/edit-top-stats/components/ui/edit-top-item.tsx
@@ -76,7 +76,7 @@ const Component = ({ user, rank, accepted, denied, closed }: Props) => {
                     <Tooltip delayDuration={0}>
                         <TooltipTrigger>
                             <div className="flex items-center gap-2 text-muted-foreground">
-                                <div className="flex size-2 items-center justify-center rounded-full bg-warning" />
+                                <div className="flex size-2 items-center justify-center rounded-full bg-muted-foreground" />
                                 <Small>{closed}</Small>
                             </div>
                         </TooltipTrigger>

diff --git a/app/(pages)/edit/page.tsx b/app/(pages)/edit/page.tsx
@@ -18,7 +18,7 @@ import EditList from './_components/edit-list/edit-list';
 
 
 const Component = async ({
-    searchParams: { page },
+    searchParams: { page, content_type, order, sort, edit_status },
 }: {
     searchParams: { [key: string]: string | string[] | undefined };
 }) => {
@@ -29,7 +29,16 @@ const Component = async ({
     const queryClient = getQueryClient();
 
     await queryClient.prefetchQuery({
-        queryKey: ['editList', { page }],
+        queryKey: [
+            'editList',
+            {
+                page,
+                content_type: content_type || null,
+                order: order || 'desc',
+                sort: sort || 'edit_id',
+                edit_status: edit_status || null,
+            },
+        ],
         queryFn: () => getEditList({ page: Number(page) }),
     });
 
@@ -48,7 +57,10 @@ const Component = async ({
                     <div className="flex flex-col gap-12">
                         <EditTopStats />
                         <EditFiltersModal>
-                            <Button variant="outline" className="flex lg:hidden">
+                            <Button
+                                variant="outline"
+                                className="flex lg:hidden"
+                            >
                                 <AntDesignFilterFilled /> Фільтри
                             </Button>
                         </EditFiltersModal>

diff --git a/app/(pages)/u/[username]/_components/history/components/ui/history-item.tsx b/app/(pages)/u/[username]/_components/history/components/ui/history-item.tsx
@@ -67,7 +67,7 @@ const Component = ({ data, className }: Props) => {
                     )}
                 </Small>
                 <Small className="text-muted-foreground opacity-60">
-                    {formatDistance(data.created * 1000, Date.now(), {
+                    {formatDistance(data.updated * 1000, Date.now(), {
                         addSuffix: true,
                     })}
                 </Small>

diff --git a/components/breadcrumbs.tsx b/components/breadcrumbs.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
-import { Children, PropsWithChildren, useEffect, useState } from 'react';
+import { Children, Fragment, PropsWithChildren, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import IconamoonSignDivisionSlashThin from '~icons/iconamoon/sign-division-slash-thin';
 
@@ -27,15 +27,15 @@ const Component = ({ children }: Props) => {
             <div className="flex h-auto min-h-10 flex-1 items-center gap-4 overflow-hidden px-4 md:hidden">
                 {Children.map(arrayChildren, (child, index) => {
                     return (
-                        <>
+                        <Fragment key={child.toString() + "-" + index}>
                             <IconamoonSignDivisionSlashThin
                                 className={clsx(
                                     'opacity-30',
                                     index === 0 && 'hidden md:block',
                                 )}
                             />
                             {child}
-                        </>
+                        </Fragment>
                     );
                 })}
             </div>,

diff --git a/components/nav-menu.tsx b/components/nav-menu.tsx
@@ -39,10 +39,10 @@ const Component = ({ routes, urlPrefix, showOnMobile, isEqualPath = true }: Prop
     }
 
     return (
-        <NavigationMenu className="min-w-0">
+        <NavigationMenu>
             <NavigationMenuList>
                 <NavigationMenuItem>
-                    <NavigationMenuTrigger className="min-w-0">
+                    <NavigationMenuTrigger>
                         {current && (
                             <P className="truncate text-sm">{current.title_ua}</P>
                         )}

diff --git a/package.json b/package.json
@@ -66,7 +66,7 @@
         "lucide-react": "^0.309.0",
         "marked": "^12.0.1",
         "million": "^3.0.6",
-        "next": "14.1.0",
+        "next": "14.1.4",
         "next-plausible": "^3.12.0",
         "next-sitemap": "^4.2.3",
         "next-themes": "^0.2.1",

diff --git a/services/api/collections/createCollection.ts b/services/api/collections/createCollection.ts
@@ -14,7 +14,7 @@ export type Request = {
     content_type: API.ContentType;
     description: string;
     labels_order: string[];
-    private: boolean;
+    visibility: 'private' | 'public' | 'unlisted';
     spoiler: boolean;
     nsfw: boolean;
     secret: string;

diff --git a/services/api/collections/updateCollection.ts b/services/api/collections/updateCollection.ts
@@ -14,7 +14,7 @@ type Request = {
     content_type: API.ContentType;
     description: string;
     labels_order: string[];
-    private: boolean;
+    visibility: 'private' | 'public' | 'unlisted';
     spoiler: boolean;
     nsfw: boolean;
     secret: string;

diff --git a/services/hooks/collections/useCollection.ts b/services/hooks/collections/useCollection.ts
@@ -16,6 +16,7 @@ const useCollection = ({
         queryKey: ['collection', reference, { secret }],
         queryFn: () => getCollection({ reference: reference, secret }),
         enabled: enabled,
+        staleTime: 0,
     });
 };
 

diff --git a/services/hooks/collections/useCreateCollection.ts b/services/hooks/collections/useCreateCollection.ts
@@ -22,6 +22,7 @@ const useCreateCollection = (params: CollectionRequest) => {
         onSuccess: async (data) => {
             await queryClient.invalidateQueries({
                 queryKey: ['collection', { reference: data.reference }],
+                exact: false,
             });
             enqueueSnackbar('Колекцію успішно створено', {
                 variant: 'success',

diff --git a/services/hooks/collections/useUpdateCollection.ts b/services/hooks/collections/useUpdateCollection.ts
@@ -31,6 +31,7 @@ const useUpdateCollection = ({
         onSuccess: async (data) => {
             await queryClient.invalidateQueries({
                 queryKey: ['collection', { reference: data.reference }],
+                exact: false,
             });
             enqueueSnackbar('Колекцію успішно оновлено', {
                 variant: 'success',