fix(report): fix infinity rerender issue in report page and update st…

…yles

src/app/dash/[userid]/home/reading-book.tsx

@@ -21,7 +21,7 @@ function ReadingBook(props: ReadingBookProps) {
       <BookInfo book={book} uid={props.uid} />
       <Link
         href={`/dash/${props.uid}/clippings/${props.clipping.id}?iac=${IN_APP_CHANNEL.clippingFromBook}`}
-        className='font-lxgw text-3xl leading-loose from-yellow-100 to-yellow-200 bg-gradient-to-br rounded-lg p-8 block hover:shadow-xl m-4 transform hover:scale-x-105 duration-300 dark:from-purple-600 dark:to-purple-800 dark:text-gray-200'>
+        className='font-lxgw text-3xl leading-loose from-yellow-100 to-yellow-200 bg-gradient-to-br rounded-lg p-8 block hover:shadow-xl m-4 transform hover:scale-x-105 duration-150 dark:from-purple-600 dark:to-purple-800 dark:text-gray-200 active:scale-95'>
 
         <ClippingContent content={props.clipping.content} />
 

src/app/dash/[userid]/profile/content.tsx

@@ -15,17 +15,15 @@ import { IN_APP_CHANNEL } from '../../../../services/channel'
 import { API_HOST } from '../../../../constants/config'
 import { toast } from 'react-hot-toast'
 import Link from 'next/link';
-import OGWithUserProfile from '../../../../components/og/og-with-user-profile';
 import CliApiToken from './cli-api';
 import AvatarPicker from '../../../../components/profile/avatar-picker';
 import PersonalActivity from '../../../../components/profile/activity';
 import { ProfileQuery, useFollowUserMutation, useUnfollowUserMutation, useUpdateProfileMutation } from '../../../../schema/generated';
 import { Divider, Text } from '@mantine/core';
 import UserName from '../../../../components/profile/user-name';
 import styles from './profile.module.css'
-import { Masonry } from 'masonic';
 import ClippingList from './clipping-list';
-import Loading from '../../../loading';
+import Loading from '../square/loading';
 
 type ProfilePageContentProps = {
   userid: string

src/app/report/yearly/content.tsx

@@ -143,7 +143,7 @@ function ReportYearly(props: ReportYearlyProps) {
           ))}
         </div>
 
-        <PageContainer>
+        <PageContainer bgImage={defaultBgImage}>
           <div>
             <h2 className='text-gray-700 text-xl lg:text-3xl 2xl:text-6xl dark:text-gray-200 mb-8 text-center'>{t('app.slogan')}</h2>
             <p className='text-sm lg:text-lg 2xl:text-xl text-gray-700 dark:text-gray-500 w-full text-center px-8'>

src/components/book-cover/book-cover.tsx

@@ -14,13 +14,13 @@ function BookCover({ book, domain }: TBookCoverProps) {
   return (
     <Link
       href={`/dash/${domain}/book/${book.doubanId}`}
-      className={styles.cover + ' bg-transparent flex flex-col items-center content-center transition-all duration-300 rounded hover:bg-opacity-75 hover:bg-gray-300 hover:shadow-lg animate__fadeInDown w-128 h-156 overflow-visible font-lxgw with-slide-in'}>
+      className={styles.cover + ' bg-transparent flex flex-col items-center content-center rounded active:scale-95 w-128 overflow-visible font-lxgw with-slide-in'}>
       <BlurhashView
         blurhashValue={book.edges?.imageInfo.blurHashValue ?? 'LEHV6nWB2yk8pyo0adR*.7kCMdnj'}
         src={book.image}
         height={384}
         width={320}
-        className={styles.image + ' rounded shadow-lg duration-300 transition-transform w-72 h-96 overflow-visible'}
+        className={styles.image + ' rounded-sm shadow-lg duration-300 transition-transform w-72 h-96'}
         alt={book.title}
       />
       <div className='flex-col flex content-center items-center mt-4'>

src/components/public-book-item/public-book-item.tsx

@@ -10,7 +10,7 @@ type PublicBookItemProps = {
 function PublicBookItem(props: PublicBookItemProps) {
   const book = props.book
   return (
-    <div className={'relative mx-8 mb-8 transition-all duration-300 rounded transform hover:scale-110 shadow-2xl with-slide-in'}>
+    <div className={'relative transition-all duration-300 rounded transform hover:scale-110 shadow-2xl with-slide-in'}>
       <BlurhashView
         blurhashValue={book.edges?.imageInfo.blurHashValue ?? 'LEHV6nWB2yk8pyo0adR*.7kCMdnj'}
         src={book.image}

src/components/reports/report-book-section.tsx

@@ -60,7 +60,7 @@ function ReportBookSection(props: ReportBookSectionProps) {
             {t('app.report.clippingCountOnBook', { count: props.reportDataBook?.clippingsCount })}
           </Title>
           <Divider className='my-4 lg:my-10' />
-          <HoverCard width={560} shadow='lg'>
+          <HoverCard width={560} shadow='lg' withArrow>
             <HoverCard.Target>
               <p className=' text-sm lg:text-base line-clamp-6'>
                 {props.book.summary}

src/components/reports/report-hero.tsx

@@ -5,28 +5,28 @@ import PublicBookItem from '../public-book-item/public-book-item'
 import styles from './report-hero.module.css'
 
 type ReportHeroProps = {
-    books: WenquBook[]
-    clippings: FetchYearlyReportQuery['reportYearly']['books']
+  books: WenquBook[]
+  clippings: FetchYearlyReportQuery['reportYearly']['books']
 }
 
 function ReportHero(props: ReportHeroProps) {
-    return (
+  return (
+    <div
+      className={`grid mb-8 gap-8 grid-cols-4 ${props.books.length > 8 ? 'py-10 lg:py-20 ' : ''}`}
+    >
+      {props.books.map((b, i) => (
         <div
-            className={`flex flex-wrap justify-center items-center ${props.books.length > 8 ? 'py-10 lg:py-20 ' : ''}`}
+          key={b.id}
+          className={styles.cell}
+          style={{
+            animationDelay: `${100 * (i + 1)}ms`
+          }}
         >
-            {props.books.map((b, i) => (
-                <div
-                    key={b.id}
-                    className={styles.cell}
-                    style={{
-                        animationDelay: `${100 * (i + 1)}ms`
-                    }}
-                >
-                    <PublicBookItem book={b} />
-                </div>
-            ))}
+          <PublicBookItem book={b} />
         </div>
-    )
+      ))}
+    </div>
+  )
 }
 
 export default ReportHero

src/hooks/book.ts

@@ -55,7 +55,7 @@ export function useMultipBook(doubanIds: string[], skip?: boolean): bookRequestR
     }))
   })
 
-  const isLoading = bbs.every(bs => bs.isLoading)
+  const isLoading = useMemo(() => bbs.every(bs => bs.isLoading), [bbs.map(x => x.isLoading)])
   // reorder
   const books = useMemo<WenquBook[]>(() => {
     const bsList = bbs
@@ -68,7 +68,7 @@ export function useMultipBook(doubanIds: string[], skip?: boolean): bookRequestR
       }
       return acc
     }, [])
-  }, [bbs, validDoubanIdList])
+  }, [JSON.stringify(bbs.map(x => x.data?.books)), validDoubanIdList])
 
   return {
     books,