From a329bc06362a802ecb6908d70f5c4d229b1fd406 Mon Sep 17 00:00:00 2001 From: olexh Date: Thu, 21 Mar 2024 19:03:36 +0200 Subject: [PATCH] add visibility to collection page, add tags to edit page, fix colors on edit page --- .../anime/[slug]/_components/media.tsx | 4 +- .../anime/[slug]/_components/title.tsx | 51 +++++++------------ .../characters/[slug]/_components/title.tsx | 51 +++++++------------ app/(pages)/characters/[slug]/page.tsx | 2 +- .../content/_components/details.tsx | 11 ++-- .../edit/_components/content/content.tsx | 2 +- app/(pages)/edit/_components/edit-form.tsx | 19 ++++--- .../edit-top-stats/edit-top-stats.tsx | 2 +- app/(pages)/edit/_components/edit-view.tsx | 2 +- app/(pages)/edit/new/page.tsx | 10 +++- .../people/[slug]/_components/title.tsx | 27 +++++++++- .../history/components/ui/history-item.tsx | 2 +- components/edit-button.tsx | 41 +++++++++++++++ components/filters/edit-filters.tsx | 4 ++ .../components/ui/edit-top-item.tsx | 2 +- components/ui/aspect-ratio.tsx | 7 +++ components/ui/base-card.tsx | 33 ++++++------ package.json | 1 + utils/constants.ts | 46 ++++++++++++++++- utils/editParamUtils.ts | 32 ++++++++---- yarn.lock | 8 +++ 21 files changed, 241 insertions(+), 116 deletions(-) create mode 100644 components/edit-button.tsx create mode 100644 components/ui/aspect-ratio.tsx diff --git a/app/(pages)/anime/[slug]/_components/media.tsx b/app/(pages)/anime/[slug]/_components/media.tsx index 05082c1c..194390bf 100644 --- a/app/(pages)/anime/[slug]/_components/media.tsx +++ b/app/(pages)/anime/[slug]/_components/media.tsx @@ -91,7 +91,7 @@ const Component = ({ extended }: Props) => { key={ost.spotify} href={ost.spotify || undefined} title={ost.title} - containerClassName="pt-[100%]" + containerRatio={1} description={ OST[ost.ost_type].title_ua || OST[ost.ost_type].title_en @@ -113,7 +113,7 @@ const Component = ({ extended }: Props) => { href={video.url || '#'} title={video.title} poster={thumb} - containerClassName="pt-[70%]" + containerRatio={1.7} description={ VIDEO[video.video_type].title_ua || VIDEO[video.video_type].title_en diff --git a/app/(pages)/anime/[slug]/_components/title.tsx b/app/(pages)/anime/[slug]/_components/title.tsx index cfa706ca..918ecf50 100644 --- a/app/(pages)/anime/[slug]/_components/title.tsx +++ b/app/(pages)/anime/[slug]/_components/title.tsx @@ -1,52 +1,21 @@ 'use client'; -import clsx from 'clsx'; import { useEffect, useRef } from 'react'; -import MaterialSymbolsEditRounded from '~icons/material-symbols/edit-rounded'; import MaterialSymbolsStarRounded from '~icons/material-symbols/star-rounded'; import Link from 'next/link'; import { useParams, usePathname } from 'next/navigation'; -import EditListModal from '@/components/modals/editlist-modal'; +import EditButton from '@/components/edit-button'; import H2 from '@/components/typography/h2'; import P from '@/components/typography/p'; -import { Button } from '@/components/ui/button'; import useAnimeInfo from '@/services/hooks/anime/useAnimeInfo'; import useIsMobile from '@/services/hooks/useIsMobile'; import { useAuthContext } from '@/services/providers/auth-provider'; -import { useModalContext } from '@/services/providers/modal-provider'; import { useSettingsContext } from '@/services/providers/settings-provider'; import { ANIME_NAV_ROUTES } from '@/utils/constants'; -const EditButton = ({ className }: { className?: string }) => { - const { openModal } = useModalContext(); - const params = useParams(); - - return ( - - ); -}; - const Component = () => { const { titleLanguage } = useSettingsContext(); const isMobile = useIsMobile(); @@ -95,7 +64,14 @@ const Component = () => { )} - {secret && } + {secret && ( + + )}

{data.title_ja}

@@ -109,7 +85,14 @@ const Component = () => { )} - {secret && } + {secret && ( + + )} {data.genres.length > 0 && ( diff --git a/app/(pages)/characters/[slug]/_components/title.tsx b/app/(pages)/characters/[slug]/_components/title.tsx index 33533570..9755632f 100644 --- a/app/(pages)/characters/[slug]/_components/title.tsx +++ b/app/(pages)/characters/[slug]/_components/title.tsx @@ -1,49 +1,18 @@ 'use client'; -import clsx from 'clsx'; import { useEffect, useRef } from 'react'; -import MaterialSymbolsEditRounded from '~icons/material-symbols/edit-rounded'; import { useParams, usePathname } from 'next/navigation'; -import EditListModal from '@/components/modals/editlist-modal'; +import EditButton from '@/components/edit-button'; import H2 from '@/components/typography/h2'; import P from '@/components/typography/p'; -import { Button } from '@/components/ui/button'; import useCharacterInfo from '@/services/hooks/characters/useCharacterInfo'; import useIsMobile from '@/services/hooks/useIsMobile'; import { useAuthContext } from '@/services/providers/auth-provider'; -import { useModalContext } from '@/services/providers/modal-provider'; import { CHARACTER_NAV_ROUTES } from '@/utils/constants'; -const EditButton = ({ className }: { className?: string }) => { - const { openModal } = useModalContext(); - const params = useParams(); - - return ( - - ); -}; - const Component = () => { const isMobile = useIsMobile(); const pathname = usePathname(); @@ -81,12 +50,26 @@ const Component = () => { character.name_ja || ''}{' '} - {secret && } + {secret && ( + + )}

{character.name_ja}

- {secret && } + {secret && ( + + )}
diff --git a/app/(pages)/characters/[slug]/page.tsx b/app/(pages)/characters/[slug]/page.tsx index 6032b359..a527108f 100644 --- a/app/(pages)/characters/[slug]/page.tsx +++ b/app/(pages)/characters/[slug]/page.tsx @@ -8,8 +8,8 @@ const Component = () => { return (
- +
); }; diff --git a/app/(pages)/edit/_components/content/_components/details.tsx b/app/(pages)/edit/_components/content/_components/details.tsx index 0c3cebac..7a1720c0 100644 --- a/app/(pages)/edit/_components/content/_components/details.tsx +++ b/app/(pages)/edit/_components/content/_components/details.tsx @@ -1,16 +1,21 @@ import * as React from 'react'; -import { Label } from '@/components/ui/label'; import P from '@/components/typography/p'; +import { Label } from '@/components/ui/label'; interface Props { - content: API.AnimeInfo | API.Character; + content: API.AnimeInfo | API.Character | API.Person; } const Component = ({ content }: Props) => { const title_ua = 'title_ua' in content ? content.title_ua : content.name_ua; const title_en = 'title_en' in content ? content.title_en : content.name_en; - const title_ja = 'title_ja' in content ? content.title_ja : content.name_ja; + const title_ja = + 'title_ja' in content + ? content.title_ja + : 'name_ja' in content + ? content.name_ja + : content.name_native; return (
diff --git a/app/(pages)/edit/_components/content/content.tsx b/app/(pages)/edit/_components/content/content.tsx index e9a5c917..093d0ac7 100644 --- a/app/(pages)/edit/_components/content/content.tsx +++ b/app/(pages)/edit/_components/content/content.tsx @@ -13,7 +13,7 @@ import Details from './_components/details'; interface Props { slug: string; content_type: API.ContentType; - content?: API.AnimeInfo | API.Character; + content?: API.AnimeInfo | API.Character | API.Person; } const Component = ({ slug, content_type, content }: Props) => { diff --git a/app/(pages)/edit/_components/edit-form.tsx b/app/(pages)/edit/_components/edit-form.tsx index 4c711dc6..850d1a8b 100644 --- a/app/(pages)/edit/_components/edit-form.tsx +++ b/app/(pages)/edit/_components/edit-form.tsx @@ -4,26 +4,29 @@ import * as React from 'react'; import { useRef } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; + + import { useRouter } from 'next/navigation'; + + import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile'; + + import { Button } from '@/components/ui/button'; import addEdit from '@/services/api/edit/addEdit'; import { useAuthContext } from '@/services/providers/auth-provider'; -import { - getEditGroups, - getEditParamSlugs, - getEditParams, - getFilteredEditParams, -} from '@/utils/editParamUtils'; +import { getEditGroups, getEditParamSlugs, getEditParams, getFilteredEditParams } from '@/utils/editParamUtils'; + + import EditGroup from '../_components/edit-group'; import AutoButton from '../_components/ui/auto-button'; import EditDescription from './edit-description'; -type FormValues = (Hikka.AnimeEditParams | Hikka.CharacterEditParams) & { +type FormValues = Record & { description: string; auto?: boolean; }; @@ -32,7 +35,7 @@ interface Props { slug: string; content_type: API.ContentType; mode?: 'view' | 'edit'; - content: API.AnimeInfo | API.Character; + content: API.AnimeInfo | API.Character | API.Person; } const Component = ({ slug, content_type, content, mode = 'edit' }: Props) => { diff --git a/app/(pages)/edit/_components/edit-top-stats/edit-top-stats.tsx b/app/(pages)/edit/_components/edit-top-stats/edit-top-stats.tsx index a1438fdd..6ddd41dd 100644 --- a/app/(pages)/edit/_components/edit-top-stats/edit-top-stats.tsx +++ b/app/(pages)/edit/_components/edit-top-stats/edit-top-stats.tsx @@ -25,7 +25,7 @@ function Component() { const handleOpenModal = () => { openModal({ content: , - title: 'Топ контрибуторів', + title: 'Топ авторів', type: 'sheet', }); }; diff --git a/app/(pages)/edit/_components/edit-view.tsx b/app/(pages)/edit/_components/edit-view.tsx index 0375e791..539ee78f 100644 --- a/app/(pages)/edit/_components/edit-view.tsx +++ b/app/(pages)/edit/_components/edit-view.tsx @@ -24,7 +24,7 @@ import { } from '@/utils/editParamUtils'; -type FormValues = (Hikka.AnimeEditParams | Hikka.CharacterEditParams) & { +type FormValues = Record & { description: string; auto?: boolean; }; diff --git a/app/(pages)/edit/new/page.tsx b/app/(pages)/edit/new/page.tsx index 8c338e0b..29a2b68f 100644 --- a/app/(pages)/edit/new/page.tsx +++ b/app/(pages)/edit/new/page.tsx @@ -9,6 +9,7 @@ import Content from '@/app/(pages)/edit/_components/content/content'; import SubHeader from '@/components/sub-header'; import getAnimeInfo from '@/services/api/anime/getAnimeInfo'; import getCharacterInfo from '@/services/api/characters/getCharacterInfo'; +import getPersonInfo from '@/services/api/people/getPersonInfo'; import getQueryClient from '@/utils/getQueryClient'; import EditForm from '../_components/edit-form'; @@ -45,7 +46,14 @@ const Component = async ({ searchParams: { content_type, slug } }: Props) => { }); } - const content: API.AnimeInfo | API.Character | undefined = + if (content_type === 'person') { + await queryClient.prefetchQuery({ + queryKey: ['person', slug], + queryFn: () => getPersonInfo({ slug: String(slug) }), + }); + } + + const content: API.AnimeInfo | API.Character | API.Person | undefined = queryClient.getQueryData([content_type, slug]); if (!content) { diff --git a/app/(pages)/people/[slug]/_components/title.tsx b/app/(pages)/people/[slug]/_components/title.tsx index 26fad5c7..646e5c72 100644 --- a/app/(pages)/people/[slug]/_components/title.tsx +++ b/app/(pages)/people/[slug]/_components/title.tsx @@ -7,9 +7,16 @@ import { useParams } from 'next/navigation'; import H2 from '@/components/typography/h2'; import P from '@/components/typography/p'; import usePersonInfo from '@/services/hooks/people/usePersonInfo'; - +import { useModalContext } from '@/services/providers/modal-provider'; +import { Button } from '@/components/ui/button'; +import EditListModal from '@/components/modals/editlist-modal'; +import clsx from 'clsx'; +import MaterialSymbolsEditRounded from '~icons/*'; +import EditButton from '@/components/edit-button'; +import { useAuthContext } from '@/services/providers/auth-provider'; const Component = () => { + const { secret } = useAuthContext(); const divRef = useRef(null); const params = useParams(); const { data: person } = usePersonInfo({ slug: String(params.slug) }); @@ -28,9 +35,27 @@ const Component = () => { person.name_en || person.name_native} + {secret && ( + + )}

{person.name_native}

+
+ {secret && ( + + )} +
); 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 index 0d5a8976..2fa20ba4 100644 --- a/app/(pages)/u/[username]/_components/history/components/ui/history-item.tsx +++ b/app/(pages)/u/[username]/_components/history/components/ui/history-item.tsx @@ -28,7 +28,7 @@ const Component = ({ data, className }: Props) => { } return ( -
+
{data.content ? ( { + const { openModal } = useModalContext(); + const params = useParams(); + + return ( + + ); +}; + +export default Component; \ No newline at end of file diff --git a/components/filters/edit-filters.tsx b/components/filters/edit-filters.tsx index d5b5294e..d1fcd98b 100644 --- a/components/filters/edit-filters.tsx +++ b/components/filters/edit-filters.tsx @@ -38,6 +38,10 @@ const CONTENT_TYPES: Record = { title_ua: 'Персонаж', title_en: 'Character', }, + person: { + title_ua: 'Людина', + title_en: 'Person', + }, }; const Component = ({ className }: Props) => { diff --git a/components/modals/edit-top-stats-modal/components/ui/edit-top-item.tsx b/components/modals/edit-top-stats-modal/components/ui/edit-top-item.tsx index 1ad55243..0f0e2aae 100644 --- a/components/modals/edit-top-stats-modal/components/ui/edit-top-item.tsx +++ b/components/modals/edit-top-stats-modal/components/ui/edit-top-item.tsx @@ -45,7 +45,7 @@ const Component = ({ user, rank, accepted, denied, closed }: Props) => { {denied}
-
+
{closed}
diff --git a/components/ui/aspect-ratio.tsx b/components/ui/aspect-ratio.tsx new file mode 100644 index 00000000..d6a5226f --- /dev/null +++ b/components/ui/aspect-ratio.tsx @@ -0,0 +1,7 @@ +"use client" + +import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" + +const AspectRatio = AspectRatioPrimitive.Root + +export { AspectRatio } diff --git a/components/ui/base-card.tsx b/components/ui/base-card.tsx index 01f973ee..5634fe35 100644 --- a/components/ui/base-card.tsx +++ b/components/ui/base-card.tsx @@ -15,6 +15,8 @@ import Image from '@/components/ui/image'; import { Label } from '@/components/ui/label'; import { cn } from '@/utils'; +import { AspectRatio } from './aspect-ratio'; + export interface Props { target?: string; title?: string; @@ -23,6 +25,7 @@ export interface Props { rightSubtitle?: string; poster?: string | ReactNode; href?: string | UrlObject; + containerRatio?: number; posterClassName?: string; containerClassName?: string; titleClassName?: string; @@ -43,6 +46,7 @@ const Component = forwardRef( rightSubtitle, posterClassName, containerClassName, + containerRatio, titleClassName, className, children, @@ -66,9 +70,10 @@ const Component = forwardRef( onClick={onClick} {...props} > -
@@ -78,28 +83,26 @@ const Component = forwardRef( > {poster ? ( typeof poster === 'string' ? ( -
- Poster -
+ Poster ) : ( poster ) ) : ( )} + {!disableChildrenLink && children} {disableChildrenLink && children} -
+ {(title || description) && ( = { type: 'markdown', }, ], + + synonyms: [ + { + slug: 'synonyms', + title: 'Синонім', + placeholder: 'Введіть новий синонім', + type: 'list', + }, + ], }; export const CHARACTER_EDIT_GROUPS: Record = { title: 'Імʼя', description: 'Опис', + synonyms: 'Синоніми', +}; + + + +export const PERSON_EDIT_PARAMS: Record = { + title: [ + { + slug: 'name_ua', + title: 'Українською', + placeholder: 'Введіть імʼя українською', + type: 'input', + }, + { + slug: 'name_en', + title: 'Англійською', + placeholder: 'Введіть імʼя англійською', + type: 'input', + }, + ], + + synonyms: [ + { + slug: 'synonyms', + title: 'Синонім', + placeholder: 'Введіть новий синонім', + type: 'list', + }, + ], }; +export const PERSON_EDIT_GROUPS: Record = { + title: 'Імʼя', + synonyms: 'Синоніми', +}; + + export const CONTENT_TYPES: Hikka.FilterProperty = { anime: { title_ua: 'Аніме', @@ -673,7 +717,7 @@ export const EDIT_STATUSES: Hikka.FilterProperty = { }; export const CONTENT_TYPE_LINKS: Record = { - person: '/person', + person: '/people', character: '/characters', anime: '/anime', edit: '/edit', diff --git a/utils/editParamUtils.ts b/utils/editParamUtils.ts index fd0888fc..2d744b4d 100644 --- a/utils/editParamUtils.ts +++ b/utils/editParamUtils.ts @@ -6,6 +6,8 @@ import { ANIME_EDIT_PARAMS, CHARACTER_EDIT_GROUPS, CHARACTER_EDIT_PARAMS, + PERSON_EDIT_GROUPS, + PERSON_EDIT_PARAMS, } from '@/utils/constants'; export const getEditParamComponent = (type: Hikka.EditParamType) => { @@ -32,15 +34,19 @@ export const getEditParams = ( case 'character': params = CHARACTER_EDIT_PARAMS; break; + case 'person': + params = PERSON_EDIT_PARAMS; + break; } if (filter) { - params = Object.fromEntries( - Object.keys(params).map((key) => [ - key, - params[key].filter((param) => filter.includes(param.slug)), - ]).filter(([, value]) => value.length > 0), + Object.keys(params) + .map((key) => [ + key, + params[key].filter((param) => filter.includes(param.slug)), + ]) + .filter(([, value]) => value.length > 0), ); } @@ -53,6 +59,8 @@ export const getEditGroups = (content_type: API.ContentType) => { return ANIME_EDIT_GROUPS; case 'character': return CHARACTER_EDIT_GROUPS; + case 'person': + return PERSON_EDIT_GROUPS; } }; @@ -64,16 +72,18 @@ export const getEditParamSlugs = ( .map((param) => param.slug); }; - -export const getFilteredEditParams = (paramSlugs: string[], data: Record) => { +export const getFilteredEditParams = ( + paramSlugs: string[], + data: Record, +) => { return Object.keys(data).reduce((acc, key) => { if (paramSlugs.includes(key)) { if (Array.isArray(data[key])) { return { ...acc, - [key]: ( - data[key] as { value: string }[] - ).map((v: { value: string }) => v.value), + [key]: (data[key] as { value: string }[]).map( + (v: { value: string }) => v.value, + ), }; } @@ -82,4 +92,4 @@ export const getFilteredEditParams = (paramSlugs: string[], data: Record