fix artist detail

aura-nw · Sep 8, 2023 · e96fd9e · e96fd9e
1 parent c3b9d82
commit e96fd9e
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 25 deletions.
diff --git a/public/locales/vn/common.json b/public/locales/vn/common.json
@@ -174,6 +174,6 @@
   "Joined date": "Ngày tham gia",
   "Mangas": "Truyện",
   "NFT Collections": "Bộ sưu tập NFT",
-  "View more on Seekhype": "Xem thêm tại Seekhype",
-  "View on SEEKHYPE": "Xem trên Seekhype"
+  "View more on SEEKHYPE": "Xem thêm tại SEEKHYPE",
+  "View on SEEKHYPE": "Xem trên SEEKHYPE"
 }
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -151,7 +151,7 @@ export default function Header({ className }: { className?: string }) {
                       <div
                         key={index}
                         className={`flex gap-2 cursor-pointer ${
-                          manga.status.text == 'Upcoming' && 'pointer-events-none'
+                          manga.status.text == 'Upcoming' && '[&_a:not(.author)]:pointer-events-none'
                         }`}
                         onClick={() => router.push(`/comic/${manga.id}/chapter/1`)}>
                         <Image
@@ -170,7 +170,9 @@ export default function Header({ className }: { className?: string }) {
                                   <span className='text-second-color font-[600] first:hidden'>, </span>
                                   <span className='text-second-color font-[600]'>
                                     {author.id ? (
-                                      <Link href={`/artist/${author.id}`}>{t(author.name)}</Link>
+                                      <Link className='author' href={`/artist/${author.id}`}>
+                                        {t(author.name)}
+                                      </Link>
                                     ) : (
                                       t(author.name)
                                     )}
@@ -336,7 +338,9 @@ export default function Header({ className }: { className?: string }) {
                   {searchComic.data?.map((manga, index) => (
                     <div
                       key={index}
-                      className={`flex gap-2 ${manga.status.text == 'Upcoming' && 'pointer-events-none'}`}
+                      className={`flex gap-2 ${
+                        manga.status.text == 'Upcoming' && '[&_a:not(.author)]:pointer-events-none'
+                      }`}
                       onClick={() => router.push(`/comic/${manga.id}/chapter/1`)}>
                       <Image
                         src={manga.image || NoImage}
@@ -354,7 +358,9 @@ export default function Header({ className }: { className?: string }) {
                                 <span className='text-second-color font-[600] first:hidden'>, </span>
                                 <span className='text-second-color font-[600]'>
                                   {author.id ? (
-                                    <Link href={`/artist/${author.id}`}>{t(author.name)}</Link>
+                                    <Link className='author' href={`/artist/${author.id}`}>
+                                      {t(author.name)}
+                                    </Link>
                                   ) : (
                                     t(author.name)
                                   )}

diff --git a/src/components/pages/chapter/comicDetail.tsx b/src/components/pages/chapter/comicDetail.tsx
@@ -152,7 +152,13 @@ export default function ComicDetail({
                   <Fragment key={index}>
                     <span className='text-second-color font-[600] first:hidden'>, </span>
                     <span className='text-second-color font-[600]'>
-                      {author.id ? <Link href={`/artist/${author.id}`}>{t(author.name)}</Link> : t(author.name)}
+                      {author.id ? (
+                        <Link className='author' href={`/artist/${author.id}`}>
+                          {t(author.name)}
+                        </Link>
+                      ) : (
+                        t(author.name)
+                      )}
                     </span>
                   </Fragment>
                 ))}

diff --git a/src/components/pages/homepage/comic.tsx b/src/components/pages/homepage/comic.tsx
@@ -14,7 +14,7 @@ export default function Comic(props: IComic) {
   const router = useRouter()
   const { t } = useTranslation()
   return (
-    <div className={`${props.status.text == 'Upcoming' ? 'pointer-events-none' : ''}`}>
+    <div className={`${props.status.text == 'Upcoming' ? '[&_a:not(.author)]:pointer-events-none' : ''}`}>
       <div className='hidden md:flex gap-[20px]'>
         <Link href={`/comic/${props.id}`} className='flex-auto w-1/3 xl:hidden'>
           <Image
@@ -63,7 +63,13 @@ export default function Comic(props: IComic) {
                   <Fragment key={index}>
                     <span className='text-second-color font-[600] first:hidden'>, </span>
                     <span className='text-second-color font-[600]'>
-                      {author.id ? <Link href={`/artist/${author.id}`}>{t(author.name)}</Link> : t(author.name)}
+                      {author.id ? (
+                        <Link className='author' href={`/artist/${author.id}`}>
+                          {t(author.name)}
+                        </Link>
+                      ) : (
+                        t(author.name)
+                      )}
                     </span>
                   </Fragment>
                 ))}
@@ -97,7 +103,11 @@ export default function Comic(props: IComic) {
         </div>
       </div>
       <div className='md:hidden h-full w-fit mx-auto'>
-        <div onClick={() => router.push(`/comic/${props.id}`)} className='relative flex flex-col h-full'>
+        <div
+          onClick={() => {
+            props.status.text == 'Upcoming' ? null : router.push(`/comic/${props.id}`)
+          }}
+          className='relative flex flex-col h-full'>
           <Image
             src={props.image || NoImage}
             alt=''
@@ -119,7 +129,13 @@ export default function Comic(props: IComic) {
               <Fragment key={index}>
                 <span className='text-second-color font-[600] first:hidden'>, </span>
                 <span className='text-second-color font-[600]'>
-                  {author.id ? <Link href={`/artist/${author.id}`}>{t(author.name)}</Link> : t(author.name)}
+                  {author.id ? (
+                    <Link className='author' onClick={(e) => e.stopPropagation()} href={`/artist/${author.id}`}>
+                      {t(author.name)}
+                    </Link>
+                  ) : (
+                    t(author.name)
+                  )}
                 </span>
               </Fragment>
             ))}

diff --git a/src/components/pages/homepage/trendingComic.tsx b/src/components/pages/homepage/trendingComic.tsx
@@ -13,7 +13,8 @@ export default function TrendingComic(props: IComic) {
   const { locale } = useRouter()
   const { t } = useTranslation()
   return (
-    <div className={`flex gap-[20px] ${props.status.text == 'Upcoming' ? 'pointer-events-none' : ''}`}>
+    <div
+      className={`flex gap-[20px] ${props.status.text == 'Upcoming' ? '[&_a:not(.author)]:pointer-events-none' : ''}`}>
       <Link href={`/comic/${props.id}`} className='xl:hidden relative w-[150px] shrink-0'>
         <Image
           src={props.image || NoImage}
@@ -57,7 +58,13 @@ export default function TrendingComic(props: IComic) {
               <Fragment key={index}>
                 <span className='font-[500] first:hidden text-second-color md:text-black'>, </span>
                 <span className='font-[500] text-second-color md:text-black'>
-                  {author.id ? <Link href={`/artist/${author.id}`}>{t(author.name)}</Link> : t(author.name)}
+                  {author.id ? (
+                    <Link className='author' href={`/artist/${author.id}`}>
+                      {t(author.name)}
+                    </Link>
+                  ) : (
+                    t(author.name)
+                  )}
                 </span>
               </Fragment>
             ))}

diff --git a/src/components/pages/profile/comic.tsx b/src/components/pages/profile/comic.tsx
@@ -46,7 +46,13 @@ export default function Comic(props: IComic & { unsubscribe?: () => void; subscr
               <Fragment key={index}>
                 <span className='text-second-color font-[600] first:hidden'>, </span>
                 <span className='text-second-color font-[600]'>
-                  {author.id ? <Link href={`/artist/${author.id}`}>{t(author.name)}</Link> : t(author.name)}
+                  {author.id ? (
+                    <Link className='author' href={`/artist/${author.id}`}>
+                      {t(author.name)}
+                    </Link>
+                  ) : (
+                    t(author.name)
+                  )}
                 </span>
               </Fragment>
             ))}

diff --git a/src/pages/artist/[artist]/artist.tsx b/src/pages/artist/[artist]/artist.tsx
@@ -27,6 +27,7 @@ export default function Artist({ artistDetail }) {
   const { locale } = useRouter()
   const { t } = useTranslation()
   const [currentPage, setCurrentPage] = useState(1)
+  const [showMore, setShowMore] = useState(false)
   const seekhypeBaseUrl = new URL(getConfig().SEEKHYPE_URL).origin
   if (!artist) return <></>
   return (
@@ -127,7 +128,9 @@ export default function Artist({ artistDetail }) {
                 <div className='h-0 w-max invisible hidden lg:block'>{t('Total subscribers')}:</div>
                 <div className='h-0 w-max invisible lg:hidden'>{t('Gender')}:</div>
               </div>
-              <div className='font-medium line-clamp-3'>{artist?.bio}</div>
+              <div className={`font-medium ${showMore ? '' : 'line-clamp-3'}`} onClick={() => setShowMore(!showMore)}>
+                {artist?.bio}
+              </div>
             </div>
           </div>
         </div>
@@ -160,7 +163,7 @@ export default function Artist({ artistDetail }) {
                       <div className='flex gap-[10px]'>
                         <div className='text-sm leading-6 truncate lg:text-xl lg:leading-6'>{collection.name}</div>
                         <Link
-                          title={t('View more on Seekhype')}
+                          title={t('View more on SEEKHYPE')}
                           href={`${seekhypeBaseUrl}/collection/${collection.address}`}
                           className='cursor-pointer'>
                           <Image src={ShareIcon} alt='' className='w-5 h-5' />
@@ -171,6 +174,7 @@ export default function Artist({ artistDetail }) {
                       {collection.tokens.map((token, index) => (
                         <Link
                           href={`${seekhypeBaseUrl}/nft/${collection.address}/${token.id}`}
+                          target='_blank'
                           key={index}
                           className='p-[5px] lg:p-5 [&:hover_.view-on-seekhype]:translate-y-0'>
                           <div className='bg-white rounded-[20px] p-[10px]'>

diff --git a/src/pages/artist/[artist]/with-api.tsx b/src/pages/artist/[artist]/with-api.tsx
@@ -83,8 +83,8 @@ const withApi = (Component: React.FC<any>) => (props: any) => {
                 text: formatStatus(manga.status),
               },
               authors: manga.manga_creators?.map((c: any) => ({
-                id: c.creator?.isActive ? c.creator?.id : undefined,
-                name: c.creator?.isActive ? c.creator?.name : 'Unknown creator',
+                id: c.creator?.id,
+                name: c.creator?.pen_name || c.creator?.name,
               })),
               views: manga.manga_total_views?.views || 0,
               likes: manga.manga_total_likes?.likes || 0,

diff --git a/src/pages/comic/[comicId]/comic.tsx b/src/pages/comic/[comicId]/comic.tsx
@@ -100,7 +100,13 @@ export default function Comic({ comicDetails, subscribe, unsubscribe, like, unli
                   <Fragment key={index}>
                     <span className='text-primary-color font-[600] first:hidden'>, </span>
                     <span className='text-primary-color font-[600]'>
-                      {author.id ? <Link href={`/artist/${author.id}`}>{t(author.name)}</Link> : t(author.name)}
+                      {author.id ? (
+                        <Link className='author' href={`/artist/${author.id}`}>
+                          {t(author.name)}
+                        </Link>
+                      ) : (
+                        t(author.name)
+                      )}
                     </span>
                   </Fragment>
                 ))}

diff --git a/src/pages/profile/with-api.tsx b/src/pages/profile/with-api.tsx
@@ -22,7 +22,7 @@ const withApi = (Component: React.FC<any>) => (props: any) => {
         },
         authors: m.manga_creators?.map((c: any) => ({
           id: c.creator?.isActive ? c.creator?.id : undefined,
-          name: c.creator?.isActive ? c.creator?.name : 'Unknown creator',
+          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,
@@ -73,6 +73,7 @@ const withApi = (Component: React.FC<any>) => (props: any) => {
       creator {
         id
         name
+        pen_name
         isActive
       }
     }
@@ -111,7 +112,7 @@ const withApi = (Component: React.FC<any>) => (props: any) => {
           },
           authors: m.manga_creators?.map((c: any) => ({
             id: c.creator?.isActive ? c.creator?.id : undefined,
-            name: c.creator?.isActive ? c.creator?.name : 'Unknown creator',
+            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,

diff --git a/src/services/index.ts b/src/services/index.ts
@@ -17,7 +17,7 @@ export const getLatestComic = async (): Promise<IComic[]> => {
         },
         authors: m.manga_creators?.map((c: any) => ({
           id: c.creator?.isActive ? c.creator?.id : undefined,
-          name: c.creator?.isActive ? c.creator?.name : 'Unknown creator',
+          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,
@@ -60,7 +60,7 @@ export const getTrendingComic = async (): Promise<IComic[]> => {
         },
         authors: m.manga_creators?.map((c: any) => ({
           id: c.creator?.isActive ? c.creator?.id : undefined,
-          name: c.creator?.isActive ? c.creator?.name : 'Unknown creator',
+          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,
@@ -153,7 +153,7 @@ export const search = async (content: string) => {
       },
       authors: m.manga_creators?.map((c: any) => ({
         id: c.creator?.isActive ? c.creator?.id : undefined,
-        name: c.creator?.isActive ? c.creator?.name : 'Unknown creator',
+        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,
@@ -228,7 +228,7 @@ export const getComicDetail = async (comicId: string, accountId: string) => {
     }),
     authors: data.manga_creators?.map((c: any) => ({
       id: c.creator?.isActive ? c.creator?.id : undefined,
-      name: c.creator?.isActive ? c.creator?.name : 'Unknown creator',
+      name: c.creator?.isActive ? c.creator?.pen_name || c.creator?.name : 'Unknown creator',
     })),
     releaseDate: data.release_date,
   }