From c5600535c128603456eee43dd981667fa75843b6 Mon Sep 17 00:00:00 2001
From: imhson <phamhoangson99@gmail.com>
Date: Fri, 28 Jul 2023 10:04:08 +0700
Subject: [PATCH] update

---
 .../chapter/[chapterNumber]/chapter.tsx       | 53 ++++++++++++-------
 .../chapter/[chapterNumber]/with-api.tsx      |  4 ++
 src/pages/index.tsx                           |  4 +-
 3 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/src/pages/comic/[comicId]/chapter/[chapterNumber]/chapter.tsx b/src/pages/comic/[comicId]/chapter/[chapterNumber]/chapter.tsx
index cae0f22a..f04be4fe 100644
--- a/src/pages/comic/[comicId]/chapter/[chapterNumber]/chapter.tsx
+++ b/src/pages/comic/[comicId]/chapter/[chapterNumber]/chapter.tsx
@@ -102,7 +102,16 @@ const Chapter: React.FC = ({
     }
   }, [comicDetails?.data?.id])
 
-  if (!comicDetails.data || !chapterDetails.data) return null
+  if (comicDetails.loading || chapterDetails.loading) return null
+
+  if ((!comicDetails.data && !comicDetails.loading) || (!chapterDetails.data && !chapterDetails.loading))
+    return (
+      <div className='h-[100vh]'>
+        <Header />
+        <div className='flex justify-center items-center'>Error while fetching data!</div>
+      </div>
+    )
+
   const currentChapIndex = comicDetails?.data?.chapters.findIndex((chap) => chap.id == chapterDetails.data.id)
   const mainLanguage = comicDetails.data?.languages?.find((l) => l.isMainLanguage).shortLang
   const chapterLocale = chapterDetails.data?.[language] ? language : mainLanguage
@@ -224,8 +233,8 @@ const Chapter: React.FC = ({
           </div>
           <div
             className={`${
-              openComments ? 'h-[calc(100vh-48px)]' : 'h-0'
-            } transition-all w-full overflow-auto fixed bottom-0 pb-[52px] bg-[#000000b2]`}>
+              openComments ? 'h-[calc(100vh-48px)] pb-[52px]' : 'pb-0 h-0'
+            } transition-all w-full  fixed bottom-0  bg-[#000000b2]`}>
             <div className='flex flex-col gap-6 overflow-auto p-5'>
               {chapterComments.data?.length &&
                 chapterComments.data.map((comment, index) => (
@@ -237,24 +246,28 @@ const Chapter: React.FC = ({
                   />
                 ))}
             </div>
-            {account?.verified && account?.name ? (
-              <div className='bg-light-gray fixed bottom-0 right-0 left-0 w-full'>
-                <ChatInput onSubmit={postComment} />
-              </div>
-            ) : (
-              <div className='bg-light-gray fixed bottom-0 right-0 left-0 w-full py-[14px]'>
-                <div className=' text-sm font-medium text-center leading-6'>
-                  You must{' '}
-                  <span
-                    className='text-second-color underline font-bold cursor-pointer'
-                    onClick={() => {
-                      ;(document.querySelector('#open-sign-in-btn') as any)?.click()
-                    }}>
-                    sign in
-                  </span>{' '}
-                  to comment
+            {openComments ? (
+              account?.verified && account?.name ? (
+                <div className='bg-light-gray fixed bottom-0 right-0 left-0 w-full'>
+                  <ChatInput onSubmit={postComment} />
                 </div>
-              </div>
+              ) : (
+                <div className='bg-light-gray fixed bottom-0 right-0 left-0 w-full py-[14px]'>
+                  <div className=' text-sm font-medium text-center leading-6'>
+                    You must{' '}
+                    <span
+                      className='text-second-color underline font-bold cursor-pointer'
+                      onClick={() => {
+                        ;(document.querySelector('#open-sign-in-btn') as any)?.click()
+                      }}>
+                      sign in
+                    </span>{' '}
+                    to comment
+                  </div>
+                </div>
+              )
+            ) : (
+              <></>
             )}
           </div>
         </div>
diff --git a/src/pages/comic/[comicId]/chapter/[chapterNumber]/with-api.tsx b/src/pages/comic/[comicId]/chapter/[chapterNumber]/with-api.tsx
index a9843023..b8783089 100644
--- a/src/pages/comic/[comicId]/chapter/[chapterNumber]/with-api.tsx
+++ b/src/pages/comic/[comicId]/chapter/[chapterNumber]/with-api.tsx
@@ -86,6 +86,10 @@ const withApi = (Component: React.FC<any>) => (props: any) => {
     )
     const data = cdata[0]
 
+    if (!data) {
+      return null
+    }
+
     const res = {
       id: data.id,
       views: data.views || 0,
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index c6bc0278..37a4a25d 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -110,7 +110,7 @@ export default function Home() {
                 />
               </div>
             </div>
-            <div className='grid grid-cols-3 md:grid-cols-2 gap-10 md:gap-[80px] mt-3 md:mt-[76px]'>
+            <div className='grid grid-cols-3 md:grid-cols-2 gap-10 md:gap-[80px] mt-2 md:mt-[76px]'>
               {latestComic.loading
                 ? Array.apply(null, Array(2)).map((d, index) => {
                     return <DummyComic key={index} />
@@ -132,7 +132,7 @@ export default function Home() {
           </div>
           <div className='lg:flex-auto lg:w-[24%] mt-6 lg:mt-0 px-2 md:px-0'>
             <div className='md:text-[24px] text-sm leading-6 font-[800]'>Trending</div>
-            <div className='flex flex-col gap-10 mt-10'>
+            <div className='flex flex-col gap-10 mt-2 md:mt-10'>
               {trendingComic.loading
                 ? Array.apply(null, Array(2)).map((d, index) => {
                     return <DummyComic key={index} />