nft only chapter

aura-nw · Sep 6, 2023 · 8ffc9e9 · 8ffc9e9
1 parent 237208e
commit 8ffc9e9
Show file tree

Hide file tree

Showing 15 changed files with 196 additions and 185 deletions.
diff --git a/public/locales/vn/common.json b/public/locales/vn/common.json
@@ -15,6 +15,8 @@
   "Unknown creator": "Tác giả ẩn danh",
   "views": "luợt xem",
   "likes": "lượt thích",
+  "view": "luợt xem",
+  "like": "lượt thích",
   "Latest": "Mới nhất",
   "Chap": "Chương",
   "Subscribed": "Đã đăng ký",
@@ -33,6 +35,7 @@
   "Please": "Vui lòng",
   "to countinue reading": "để tiếp tục đọc",
   "comments": "bình luận",
+  "comment": "bình luận",
   "Previous chap": "Chương trước",
   "Next chap": "Chương sau",
   "See Detail": "Chi tiết",
@@ -45,7 +48,7 @@
   "Only digits": "Chỉ nhập chữ số",
   "All types": "Tất cả loại",
   "Free": "Miễn phí",
-  "NFTs only": "Cần NFT",
+  "NFTs only": "Yêu cầu NFT",
   "Sort by newest": "Mới nhất",
   "Sort by oldest": "Cũ nhất",
   "Search by title": "Tìm kiếm truyện và tác giả",

diff --git a/src/components/pages/chapter/chapterList.tsx b/src/components/pages/chapter/chapterList.tsx
@@ -17,6 +17,7 @@ import Image from 'next/image'
 import { useRouter } from 'next/router'
 import { useContext, useEffect, useState } from 'react'
 import m6 from 'src/assets/images/mockup6.png'
+import { CHAPTER_STATUS, CHAPTER_TYPE } from 'src/constants/chapter.constant'
 import { Context } from 'src/context'
 import { getBlurUrl } from 'src/utils'
 
@@ -86,15 +87,15 @@ export default function ChapterList({
                   },
 
                   {
-                    key: 'Free',
+                    key: CHAPTER_TYPE.FREE,
                     value: t('Free'),
                   },
                   {
-                    key: 'NFTs only',
+                    key: CHAPTER_TYPE.NFTS_ONLY,
                     value: t('NFTs only'),
                   },
                   {
-                    key: 'Account only',
+                    key: CHAPTER_TYPE.ACCOUNT_ONLY,
                     value: t('Account only'),
                   },
                 ]}
@@ -206,6 +207,10 @@ const Chapter = ({
       ;(document.querySelector('#open-sign-in-btn') as any)?.click()
     }
   }
+  const unavailable =
+    chapter.status == CHAPTER_STATUS.UPCOMING ||
+    (!account && chapter.type == CHAPTER_TYPE.ACCOUNT_ONLY) ||
+    (!data.hasAccess && chapter.type == CHAPTER_TYPE.NFTS_ONLY)
   return (
     <>
       <div
@@ -224,7 +229,7 @@ const Chapter = ({
           width={60}
           height={60}
           onClick={() => {
-            if (chapter.status == 'Upcoming' || (!account && chapter.type == 'Account only')) return
+            if (unavailable) return
             setExpandDetail(false)
             router.push(`/comic/${data.id}/chapter/${chapter.number}`)
           }}
@@ -235,7 +240,7 @@ const Chapter = ({
               <p>{`${t('Chapter')} ${chapter.number}`}</p>
               {(function () {
                 switch (chapter.type) {
-                  case 'Account only':
+                  case CHAPTER_TYPE.ACCOUNT_ONLY:
                     if (account) {
                       return (
                         <StatusLabel status='success'>
@@ -252,19 +257,30 @@ const Chapter = ({
                         </StatusLabel>
                       )
                     }
-                  case 'Upcoming':
-                    return (
-                      <StatusLabel status='warning'>
-                        <>{t('Upcoming')}</>
-                      </StatusLabel>
-                    )
+                  case CHAPTER_TYPE.NFTS_ONLY:
+                    if (data.hasAccess) {
+                      return (
+                        <StatusLabel status='success'>
+                          <>{t('NFTs only')}</>
+                        </StatusLabel>
+                      )
+                    } else {
+                      return (
+                        <StatusLabel status='error'>
+                          <div className='flex gap-1'>
+                            <Image src={LockIcon} alt='' />
+                            {t('NFTs only')}
+                          </div>
+                        </StatusLabel>
+                      )
+                    }
                   default:
                     return <div></div>
                 }
               })()}
               {(function () {
                 switch (chapter.status) {
-                  case 'Upcoming':
+                  case CHAPTER_STATUS.UPCOMING:
                     return (
                       <StatusLabel status='warning'>
                         <>{t('Upcoming')}</>
@@ -278,7 +294,7 @@ const Chapter = ({
             <div
               className='font-[600]'
               onClick={() => {
-                if (chapter.status == 'Upcoming' || (!account && chapter.type == 'Account only')) return
+                if (unavailable) return
                 setExpandDetail(false)
                 router.push(`/comic/${data.id}/chapter/${chapter.number}`)
               }}>

diff --git a/src/components/pages/chapter/comicDetail.tsx b/src/components/pages/chapter/comicDetail.tsx
@@ -19,6 +19,7 @@ import ChapterList from './chapterList'
 import { Tab } from '@headlessui/react'
 import Ninja from 'images/ninja-2.svg'
 import Link from 'next/link'
+import { CHAPTER_STATUS } from 'src/constants/chapter.constant'
 
 export default function ComicDetail({
   data,
@@ -157,7 +158,7 @@ export default function ComicDetail({
                 ))}
               </p>
               <p className='text-subtle-dark items-center'>
-                <strong>{data.views?.toLocaleString('en-US')}</strong> {t('views')}
+                <strong>{data.views?.toLocaleString('en-US')}</strong> {data.views > 1 ? t('views') : t('view')}
                 <svg
                   xmlns='http://www.w3.org/2000/svg'
                   width='3'
@@ -167,7 +168,7 @@ export default function ComicDetail({
                   className='inline mx-3'>
                   <circle cx='1.5' cy='2' r='1.5' fill='#61646B' />
                 </svg>
-                <strong>{comicLikes?.toLocaleString('en-US')}</strong> {t('likes')}
+                <strong>{comicLikes?.toLocaleString('en-US')}</strong> {comicLikes > 1 ? t('likes') : t('like')}
               </p>
               <div className={`${expandDetail ? '' : 'flex-col 2xl:flex-row'} 2xl:items-start  flex gap-[10px]`}>
                 <div>
@@ -218,15 +219,15 @@ export default function ComicDetail({
               </p>
             )}
           </div>
-          {data.chapters.find((chapter) => chapter.status === 'Upcoming')?.date && (
+          {data.chapters.find((chapter) => chapter.status === CHAPTER_STATUS.UPCOMING)?.date && (
             <div
               className={`flex gap-2 items-center text-second-color text-sm font-semibold italic ${
                 expandDetail ? ' h-6 opacity-100' : 'opacity-0 h-0'
               } duration-500 transition-all overflow-hidden`}>
               <Image src={CalendarIcon} alt='' className='w-5 h-5' />{' '}
               <div>
                 {`${t('New chapter arrives on')} 
-                ${moment(data.chapters.find((chapter) => chapter.status === 'Upcoming')?.date).format(
+                ${moment(data.chapters.find((chapter) => chapter.status === CHAPTER_STATUS.UPCOMING)?.date).format(
                   'dddd, DD/MM/yyyy'
                 )}.
                 ${t('Don’t miss latest update, subscribe now')}!`}

diff --git a/src/components/pages/chapter/headerBar.tsx b/src/components/pages/chapter/headerBar.tsx
@@ -12,6 +12,7 @@ import Image from 'next/image'
 import { useRouter } from 'next/router'
 import { useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { CHAPTER_STATUS } from 'src/constants/chapter.constant'
 import { Context } from 'src/context'
 export default function HeaderBar({
   openComments,
@@ -88,7 +89,8 @@ export default function HeaderBar({
           </div>
           <Image
             className={`cursor-pointer w-6 h-6 ${
-              currentChapIndex == 0 || comicDetails.data.chapters?.[currentChapIndex - 1]?.status == 'Upcoming'
+              currentChapIndex == 0 ||
+              comicDetails.data.chapters?.[currentChapIndex - 1]?.status == CHAPTER_STATUS.UPCOMING
                 ? 'opacity-60 cursor-not-allowed pointer-events-none'
                 : ''
             }`}

diff --git a/src/components/pages/chapter/readingSection.tsx b/src/components/pages/chapter/readingSection.tsx
@@ -26,6 +26,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useContext, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { CHAPTER_STATUS, CHAPTER_TYPE } from 'src/constants/chapter.constant'
 import { LanguageType } from 'src/constants/global.types'
 import { Context } from 'src/context'
 import { IChapter } from 'src/models/chapter'
@@ -198,7 +199,7 @@ export default function ReadingSection({
           </div>
         </div>
       </div>
-      {!account && chapterData.type == 'Account only' ? (
+      {!account && chapterData.type == CHAPTER_TYPE.ACCOUNT_ONLY ? (
         <div className='h-full w-full flex justify-center items-center'>
           <div>
             <p className='italic text-subtle-dark '>
@@ -260,9 +261,9 @@ export default function ReadingSection({
           <div className='text-ellipsis max-w-[90%] overflow-hidden whitespace-nowrap'>
             <div className='font-bold truncate'>{`Chapter ${chapterData.number} • ${chapterData.name}`}</div>
             <p className='text-subtle-dark truncate'>
-              {(chapterLikes || 0).toLocaleString('en-US')} {t('likes')} •{' '}
-              {(chapterData.views || 0).toLocaleString('en-US')} {t('views')} •{' '}
-              {(commentNumber || 0).toLocaleString('en-US')} {t('comments')}
+              {(chapterLikes || 0).toLocaleString('en-US')} {chapterLikes > 1 ? t('likes') : t('like')} •{' '}
+              {(chapterData.views || 0).toLocaleString('en-US')} {chapterData.views > 1 ? t('views') : t('view')} •{' '}
+              {(commentNumber || 0).toLocaleString('en-US')} {commentNumber > 1 ? t('comments') : t('comment')}
             </p>
           </div>
         </div>
@@ -275,7 +276,9 @@ export default function ReadingSection({
           </OutlineButton>
           <OutlineButton
             onClick={() => goToChap('Next')}
-            disabled={currentChapIndex == 0 || data.chapters?.[currentChapIndex - 1]?.status == 'Upcoming'}>
+            disabled={
+              currentChapIndex == 0 || data.chapters?.[currentChapIndex - 1]?.status == CHAPTER_STATUS.UPCOMING
+            }>
             <div className='flex items-center w-[130px] justify-between py-[3px] mx-[-6px] whitespace-nowrap'>
               {t('Next chap')}
               <ChevronRightIcon className='w-5 h-5' />
@@ -332,9 +335,9 @@ export default function ReadingSection({
           <div className='text-ellipsis max-w-[90%] overflow-hidden whitespace-nowrap'>
             <strong className='font-bold'>{`${t('Chapter')} ${chapterData.number} • ${chapterData.name}`}</strong>
             <p className='text-subtle-dark truncate'>
-              {(chapterLikes || 0).toLocaleString('en-US')} {t('likes')} •{' '}
-              {(chapterData.views || 0).toLocaleString('en-US')} {t('views')} •{' '}
-              {(commentNumber || 0).toLocaleString('en-US')} {t('comments')}
+              {(chapterLikes || 0).toLocaleString('en-US')} {chapterLikes > 1 ? t('likes') : t('like')} •{' '}
+              {(chapterData.views || 0).toLocaleString('en-US')} {chapterData.views > 1 ? t('views') : t('view')} •{' '}
+              {(commentNumber || 0).toLocaleString('en-US')} {commentNumber > 1 ? t('comments') : t('comment')}
             </p>
           </div>
         </div>
@@ -386,7 +389,7 @@ export default function ReadingSection({
           </div>
           <Image
             className={`cursor-pointer ${
-              currentChapIndex == 0 || data.chapters?.[currentChapIndex - 1]?.status == 'Upcoming'
+              currentChapIndex == 0 || data.chapters?.[currentChapIndex - 1]?.status == CHAPTER_STATUS.UPCOMING
                 ? 'opacity-60 cursor-not-allowed pointer-events-none'
                 : ''
             }`}

diff --git a/src/components/pages/comic/ChapterList.tsx b/src/components/pages/comic/ChapterList.tsx
@@ -14,8 +14,9 @@ import NoteIcon from 'images/icons/ic_note.svg'
 import ArrowSwapIcon from 'images/icons/arrow-swap-light.svg'
 import { IChapter } from 'src/models/chapter'
 import { useTranslation } from 'react-i18next'
+import { CHAPTER_STATUS, CHAPTER_TYPE } from 'src/constants/chapter.constant'
 
-export default function ChapterList({ list, like, unlike, setComicLikes }) {
+export default function ChapterList({ list, like, unlike, setComicLikes, hasAccess }) {
   const { t } = useTranslation()
   const [isDesc, setIsDesc] = useState(true)
   const [searchChapter, setSearchChapter] = useState('')
@@ -58,7 +59,14 @@ export default function ChapterList({ list, like, unlike, setComicLikes }) {
           })
           .sort(() => (isDesc ? 1 : -1))
           .map((chapter, index) => (
-            <Chapter chapter={chapter} key={index} like={like} unlike={unlike} setComicLikes={setComicLikes} />
+            <Chapter
+              chapter={chapter}
+              key={index}
+              like={like}
+              hasAccess={hasAccess}
+              unlike={unlike}
+              setComicLikes={setComicLikes}
+            />
           ))}
       </div>
     </div>
@@ -69,11 +77,13 @@ const Chapter = ({
   like,
   unlike,
   setComicLikes,
+  hasAccess,
 }: {
   chapter: IChapter
   like: any
   unlike: any
   setComicLikes: any
+  hasAccess: boolean
 }) => {
   const router = useRouter()
   const { query } = useRouter()
@@ -97,15 +107,13 @@ const Chapter = ({
       ;(document.querySelector('#open-sign-in-btn') as any)?.click()
     }
   }
+  const unavailable =
+    chapter.status == CHAPTER_STATUS.UPCOMING ||
+    (!account && chapter.type == CHAPTER_TYPE.ACCOUNT_ONLY) ||
+    (!hasAccess && chapter.type == CHAPTER_TYPE.NFTS_ONLY)
   return (
     <div
-      onClick={() =>
-        chapter.status != 'Upcoming'
-          ? !(!account && chapter.type == 'Account only')
-            ? router.push(`/comic/${query.comicId}/chapter/${chapter.number}`)
-            : null
-          : null
-      }
+      onClick={() => (!unavailable ? router.push(`/comic/${query.comicId}/chapter/${chapter.number}`) : null)}
       className='flex border-bottom border-[#414141] bg-[#292929]/80 text-white relative'>
       <Image
         src={chapter.thumbnail || m6}
@@ -117,7 +125,7 @@ const Chapter = ({
       <div className='absolute top-0 left-0 [&>*]:absolute [&>*]:w-[100px] [&>*]:rounded-none [&_span]:text-xs [&_span]:px-0 [&_span]:w-[100px] [&_span]:flex [&_span]:justify-center'>
         {(function () {
           switch (chapter.type) {
-            case 'Account only':
+            case CHAPTER_TYPE.ACCOUNT_ONLY:
               if (account) {
                 return (
                   <StatusLabel status='success'>
@@ -134,6 +142,23 @@ const Chapter = ({
                   </StatusLabel>
                 )
               }
+            case CHAPTER_TYPE.NFTS_ONLY:
+              if (hasAccess) {
+                return (
+                  <StatusLabel status='success'>
+                    <>{t('NFTs only')}</>
+                  </StatusLabel>
+                )
+              } else {
+                return (
+                  <StatusLabel status='error'>
+                    <div className='flex gap-1'>
+                      <Image src={LockIcon} alt='' />
+                      {t('NFTs only')}
+                    </div>
+                  </StatusLabel>
+                )
+              }
             default:
               return <div></div>
           }
@@ -143,24 +168,6 @@ const Chapter = ({
         <div>
           <div className='flex items-center gap-5'>
             <p className='text-[10px]'>{`${t('Chapter')} ${chapter.number}`}</p>
-            {/* {(function () {
-              switch (chapter.status) {
-                case 'Published':
-                  return <></>
-                case 'Upcoming':
-                  return (
-                    <StatusLabel status='warning'>
-                      <>{t('Upcoming')}</>
-                    </StatusLabel>
-                  )
-                default:
-                  return (
-                    <div>
-                      <>{t(chapter.status)}</>
-                    </div>
-                  )
-              }
-            })()} */}
           </div>
           <div className='font-[600] text-xs'>{chapter.name}</div>
         </div>

diff --git a/src/components/pages/homepage/comic.tsx b/src/components/pages/homepage/comic.tsx
@@ -75,10 +75,10 @@ export default function Comic(props: IComic) {
             </div>
             <div className=' flex gap-[24px]'>
               <div>
-                <strong>{props.views.toLocaleString('en-US')}</strong> {t('views')}
+                <strong>{props.views.toLocaleString('en-US')}</strong> {props.views > 1 ? t('views') : t('view')}
               </div>
               <div>
-                <strong>{props.likes.toLocaleString('en-US')}</strong> {t('likes')}
+                <strong>{props.likes.toLocaleString('en-US')}</strong> {props.likes > 1 ? t('likes') : t('like')}
               </div>
             </div>
             <div className=' text-[16px] leading-[20px] line-clamp-3'>{props[locale].description}</div>

diff --git a/src/components/pages/profile/comic.tsx b/src/components/pages/profile/comic.tsx
@@ -58,10 +58,10 @@ export default function Comic(props: IComic & { unsubscribe?: () => void; subscr
           </div>
           <div className='text-subtle-dark flex gap-[24px]'>
             <div>
-              <strong>{props.views.toLocaleString('en-US')}</strong> {t('views')}
+              <strong>{props.views.toLocaleString('en-US')}</strong> {props.views > 1 ? t('views') : t('view')}
             </div>
             <div>
-              <strong>{props.likes.toLocaleString('en-US')}</strong> {t('likes')}
+              <strong>{props.likes.toLocaleString('en-US')}</strong> {props.likes > 1 ? t('likes') : t('like')}
             </div>
           </div>
           <div className=' text-[16px] leading-[20px] line-clamp-3'>{props[locale].description}</div>