From f0c7e9bf11296415c01ab5fe548a03b845c6b0f5 Mon Sep 17 00:00:00 2001 From: imhson Date: Tue, 6 Aug 2024 17:20:54 +0700 Subject: [PATCH] update creator --- src/components/pages/artist/Artworks.tsx | 69 ++++++++++--- src/components/pages/artist/Collections.tsx | 103 ++++++++++++++++---- src/components/pages/artist/Contests.tsx | 6 +- src/components/pages/artist/Mangas.tsx | 45 ++++++--- src/components/pages/homepage/manga.tsx | 2 +- src/pages/artist/[artist]/artist.tsx | 20 ++-- src/services/index.ts | 80 ++++++++++++++- 7 files changed, 262 insertions(+), 63 deletions(-) diff --git a/src/components/pages/artist/Artworks.tsx b/src/components/pages/artist/Artworks.tsx index 1b69fd48..094ce282 100644 --- a/src/components/pages/artist/Artworks.tsx +++ b/src/components/pages/artist/Artworks.tsx @@ -1,26 +1,35 @@ import { Pagination, Skeleton } from '@mui/material' import Mc from 'assets/images/mascot-empty.png' import Image from 'next/image' -import { useState } from 'react' +import { useRef, useState } from 'react' import { useTranslation } from 'react-i18next' import { getArtistArtworks } from 'src/services' import useSWR from 'swr' import Manga from '../homepage/manga' +import Modal from 'components/Modal' + +import 'swiper/css' +import 'swiper/css/grid' +import 'swiper/css/navigation' +import 'swiper/css/pagination' +import { Swiper, SwiperSlide } from 'swiper/react' +import { Controller } from 'swiper/modules' export default function ArtworkList({ id }) { const [page, setPage] = useState(1) + const [open, setOpen] = useState(false) + const [index, setIndex] = useState(1) const { data, isLoading } = useSWR( { key: 'fetch-artist-artworks', id, - page, }, - ({ id, page }) => (id ? getArtistArtworks(id, (page - 1) * 12) : null) + ({ id }) => (id ? getArtistArtworks(id) : null) ) const { t } = useTranslation() if (isLoading) { return ( -
+
{Array(6) .fill(0) ?.map((c, index) => ( @@ -34,17 +43,45 @@ export default function ArtworkList({ id }) { return (
{data?.artworks?.length ? ( -
- {data?.artworks?.map((comic, index) => ( -
- -
- ))} -
-
-
-
-
+ <> + + + {data?.artworks?.map((artwork, index) => ( + + + + ))} + + +
+ {data?.artworks?.slice((page - 1) * 12, page * 12)?.map((artwork, index) => ( +
{ + setIndex(index) + setOpen(true) + }}> + +
+ ))} +
+
+
+
+
+ ) : (
@@ -52,7 +89,7 @@ export default function ArtworkList({ id }) {
)} {!!data?.artworks_aggregate?.aggregate?.count && ( -
+
+ id ? getArtistCollections(id) : null + ) const { t } = useTranslation() + const { locale } = useRouter() + if (isLoading) { + ;
+ {Array(6) + .fill(0) + .map((_, i) => ( +
+ +
+ ))} +
+ } return (
- {list?.length ? ( -
- {list?.slice((page - 1) * 20, page * 20)?.map((comic, index) => ( -
- -
+ {data?.count ? ( +
+ {data?.launchpads?.slice((page - 1) * 4, page * 4)?.map((launchpad, index) => ( + +
+ + {launchpad.featured_images[2] && ( +
+ + +
+ )} +
+
+ {launchpad.launchpad_creator.avatar_url && ( + + )} +
+
{launchpad[locale].name}
+
+ {t('by')}{' '} + + {launchpad.launchpad_creator.pen_name} + +
+
+
+ ))} -
-
-
-
) : (
@@ -28,11 +95,11 @@ export default function CollectionList({ list }) {
{t('No collection found')}
)} - {!!list.length && ( -
+ {!!data?.count && ( +
, value: number) => { setPage(value) diff --git a/src/components/pages/artist/Contests.tsx b/src/components/pages/artist/Contests.tsx index 460db7c0..d31664e5 100644 --- a/src/components/pages/artist/Contests.tsx +++ b/src/components/pages/artist/Contests.tsx @@ -7,7 +7,7 @@ import { useState } from 'react' import { useTranslation } from 'react-i18next' import { getContests } from 'src/services' import useSWR from 'swr' -export const Contests = ({ id }) => { +export default function Contests({ id }) { const [page, setPage] = useState(1) const { t } = useTranslation() const { locale } = useRouter() @@ -15,9 +15,8 @@ export const Contests = ({ id }) => { { key: 'fetch-artist-contest', id, - page, }, - ({ id, page }) => (id ? getContests(id, (page - 1) * 4) : null) + ({ id }) => (id ? getContests(id) : null) ) if (isLoading) @@ -27,6 +26,7 @@ export const Contests = ({ id }) => {
) + console.log(data) return (
{data?.contest?.length ? ( diff --git a/src/components/pages/artist/Mangas.tsx b/src/components/pages/artist/Mangas.tsx index 99c0e027..748185b7 100644 --- a/src/components/pages/artist/Mangas.tsx +++ b/src/components/pages/artist/Mangas.tsx @@ -1,37 +1,52 @@ -import { Pagination } from '@mui/material' -import Manga from '../homepage/manga' -import { useState } from 'react' +import { Pagination, Skeleton } from '@mui/material' import Mc from 'assets/images/mascot-empty.png' import Image from 'next/image' +import { useState } from 'react' import { useTranslation } from 'react-i18next' -export default function MangaList({ list }) { +import { getArtistMangas } from 'src/services' +import useSWR from 'swr' +import Manga from '../homepage/manga' +export default function MangaList({ id }) { + const { data, isLoading } = useSWR({ + key: 'fetch-artist-mangas', + id, + }, ({id}) => id ? getArtistMangas(id):null) const [page, setPage] = useState(1) const { t } = useTranslation() + if (isLoading) { + return ( +
+ {Array(10) + .fill(0) + ?.map((c, index) => ( +
+ +
+ ))} +
+ ) + } return (
- {list?.length ? ( -
- {list?.slice((page - 1) * 20, page * 20)?.map((comic, index) => ( + {data?.length ? ( +
+ {data?.slice((page - 1) * 20, page * 20)?.map((comic, index) => (
))} -
-
-
-
) : ( -
+
{t('No manga found')}
)} - {!!list.length && ( -
+ {!!data?.length && ( +
, value: number) => { setPage(value) diff --git a/src/components/pages/homepage/manga.tsx b/src/components/pages/homepage/manga.tsx index dfec8033..2c6d5fb5 100644 --- a/src/components/pages/homepage/manga.tsx +++ b/src/components/pages/homepage/manga.tsx @@ -27,7 +27,7 @@ export default function Manga(props: IComic) { return ( + className='w-full block aspect-[16/23] rounded-md relative overflow-hidden'> -
+
setTab('collections')} - className={`${tab == 'collections' ? 'text-text-brand-defaul' : ''}`}> + className={`py-3 font-semibold border-b border-border-teriary ${ + tab == 'collections' ? 'text-text-brand-defaul' : 'text-text-primary' + }`}> NFT Collections
setTab('contests')} - className={`${tab == 'contests' ? 'text-text-brand-defaul' : ''}`}> + className={`py-3 font-semibold ${ + tab == 'contests' ? 'text-text-brand-defaul' : 'text-text-primary' + }`}> Contests
@@ -133,10 +139,10 @@ function Artist({ artistDetail, data }) {
- {tab == 'mangas' && } - {tab == 'artworks' &&
} - {tab == 'collections' && } - {tab == 'contests' &&
} + {tab == 'mangas' && } + {tab == 'artworks' && } + {tab == 'collections' && } + {tab == 'contests' && }
diff --git a/src/services/index.ts b/src/services/index.ts index 316616a9..9fc6acc9 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -633,7 +633,81 @@ export const mintNfts = async (launchpad_id: string, amount: number) => { console.log(error) } } -export const getLicenseTerm = async (id: string) => { - const { data } = await axios.get(`https://edge.stg.storyprotocol.net/api/v1/licenses/terms/${id}`) - return data?.launchpad_by_pk + +export const getArtistMangas = async (id: string): Promise => { + return await axios.get(`${getConfig().API_URL}/api/rest/public/creators/${id}/manga`).then((res) => + res.data?.manga?.map((m: any) => { + const response = { + id: m.id, + slug: m.slug, + image: m.poster, + status: { + type: COMIC_STATUS[formatStatus(m.status)], + text: formatStatus(m.status), + }, + authors: m.manga_creators?.map((c: any) => ({ + id: c.creator?.isActive ? c.creator?.id : undefined, + slug: c.creator?.isActive ? c.creator?.slug : undefined, + name: c.creator?.isActive ? c.creator?.pen_name || c.creator?.name : 'Unknown creator', + })), + views: m.manga_total_views?.views || 0, + likes: m.manga_total_likes?.likes || 0, + subscriptions: m.manga_subscribers_aggregate?.aggregate?.count || 0, + latestChap: { + number: m.chapters?.[0]?.chapter_number, + id: m.chapters?.[0]?.id, + }, + tags: m.manga_tags.map(({ tag }: any) => { + const r = {} + LANGUAGE.forEach((l) => { + const tagLanguage = tag.tag_languages.find((tl) => tl.language_id == l.id) || tag.tag_languages[0] + r[l.shortLang] = tagLanguage.value + }) + return r + }), + } + LANGUAGE.forEach((language) => { + const l = + m.manga_languages.find((ml) => ml.language_id == language.id) || + m.manga_languages.find((ml) => ml.is_main_language) + response[language.shortLang] = { + title: l ? l?.title : 'Unknown title', + description: l ? l?.description : 'Unknown description', + } + }) + return response + }) + ) +} +export const getArtistArtworks = async (id: string) => { + return await axios + .get(`${getConfig().API_URL}/api/rest/public/creators/${id}/artworks?limit=99999&offset=0`) + .then((res) => res.data) +} +export const getArtistCollections = async (id: string) => { + const {data} = await axios.get(`${getConfig().API_URL}/api/rest/public/creators/${id}/launchpad`) + const launchpadData = data.launchpad + const count = data.launchpad.length + const launchpads = launchpadData?.map((launchpad: any) => { + LANGUAGE.forEach((l) => { + const launchpadLanguages = + launchpad.launchpad_i18ns.find((ml) => ml.i18n_language.id == l.id) || + launchpad.launchpad_i18ns.find((ml) => ml.i18n_language.is_main) + launchpad[l.shortLang] = { + seo: { + title: launchpadLanguages?.data?.name, + description: launchpadLanguages?.data?.description, + thumbnail_url: launchpadLanguages?.data?.thumbnail_url, + }, + name: launchpadLanguages?.data?.name, + description: launchpadLanguages?.data?.description, + } + }) + return launchpad + }) + return { launchpads: launchpads as Launchpad[], count } +} +export const getContests = async (id: string) => { + const res = await axios.get(`${getConfig().API_URL}/api/rest/public/creators/${id}/contests`) + return res?.data }