Add release date on hover to grouped chapter list and link to manga page

s0hv · May 9, 2024 · 33cfba4 · 33cfba4
1 parent 4c7c69f
commit 33cfba4
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 33 deletions.
diff --git a/web/__tests__/components/GroupedChapterList.test.jsx b/web/__tests__/components/GroupedChapterList.test.jsx
@@ -3,16 +3,16 @@ import { render, screen } from '@testing-library/react';
 import { vi } from 'vitest';
 
 import {
-  GroupedChapterList,
   ChapterGroupWithCover,
   ChapterWithLink,
+  GroupedChapterList,
 } from '../../src/components/GroupedChapterList';
 import { testChapterUrlFormat } from '../constants';
 import {
   formatChapterTitle,
   formatChapterUrl,
 } from '../../src/utils/formatting';
-import { setupFaker, generateNSchemas, LatestChapter } from '../schemas';
+import { generateNSchemas, LatestChapter, setupFaker } from '../schemas';
 
 
 describe('ChapterGroupWithCover', () => {
@@ -71,7 +71,7 @@ describe('ChapterWithLink', () => {
     expect(screen.getByRole('listitem')).toBeInTheDocument();
 
     // Chapter title should be properly formatted
-    expect(screen.getByText(new RegExp(formatChapterTitle(chapter) + '.+?'))).toBeInTheDocument();
+    expect(screen.getByText(formatChapterTitle(chapter))).toBeInTheDocument();
 
     // Link button should exist
     const linkBtn = screen.getByRole('button', { name: /Open chapter in new tab/i });

diff --git a/web/server/db/chapter.ts b/web/server/db/chapter.ts
@@ -20,28 +20,35 @@ export const getChapterReleases = (mangaId: MangaId) => {
 
 export const getLatestChapters = (limit: number, offset: number, userId?: DatabaseId) => {
   return db.manyOrNone<ChapterRelease>`
-                ${userId ? db.sql`WITH follows AS (SELECT DISTINCT manga_id, service_id FROM user_follows WHERE user_id=${userId})` : db.sql``}
-                SELECT
-                    chapter_id,
-                    chapters.title,
-                    chapter_number,
-                    chapter_decimal,
-                    release_date,
-                    g.name as "group",
-                    chapters.service_id,
-                    chapter_identifier,
-                    m.title as manga,
-                    m.manga_id,
-                    ms.title_id,
-                    mi.cover
-                FROM chapters
-                INNER JOIN groups g ON g.group_id = chapters.group_id
-                INNER JOIN manga m ON chapters.manga_id = m.manga_id
-                INNER JOIN manga_service ms ON chapters.manga_id = ms.manga_id AND chapters.service_id=ms.service_id
-                LEFT JOIN manga_info mi ON m.manga_id = mi.manga_id
-                ${userId ? db.sql`INNER JOIN follows f ON f.manga_id=m.manga_id AND (f.service_id IS NULL OR f.service_id=ms.service_id)` : db.sql``}
-                ORDER BY release_date DESC
-                LIMIT ${limit} ${offset ? db.sql`OFFSET ${offset}` : db.sql``}`;
+      ${userId ? db.sql`WITH follow_all AS (
+          SELECT manga_id FROM user_follows WHERE user_id=${userId} GROUP BY manga_id HAVING COUNT(*) != COUNT(service_id)
+      ),
+      follows AS (
+          SELECT DISTINCT manga_id, service_id FROM user_follows WHERE user_id=${userId} AND manga_id NOT IN (SELECT manga_id FROM follow_all)
+          UNION ALL
+          SELECT manga_id, NULL as service_id FROM follow_all
+      )` : db.sql``}
+      SELECT
+          chapter_id,
+          chapters.title,
+          chapter_number,
+          chapter_decimal,
+          release_date,
+          g.name as "group",
+          chapters.service_id,
+          chapter_identifier,
+          m.title as manga,
+          m.manga_id,
+          ms.title_id,
+          mi.cover
+      FROM chapters
+      INNER JOIN groups g ON g.group_id = chapters.group_id
+      INNER JOIN manga m ON chapters.manga_id = m.manga_id
+      INNER JOIN manga_service ms ON chapters.manga_id = ms.manga_id AND chapters.service_id=ms.service_id
+      LEFT JOIN manga_info mi ON m.manga_id = mi.manga_id
+      ${userId ? db.sql`INNER JOIN follows f ON f.manga_id=m.manga_id AND (f.service_id IS NULL OR f.service_id=ms.service_id)` : db.sql``}
+      ORDER BY release_date DESC
+      LIMIT ${limit} ${offset ? db.sql`OFFSET ${offset}` : db.sql``}`;
 };
 
 export type AddChapter = DefaultExcept<Omit<Chapter, 'chapterId'>,

diff --git a/web/src/components/GroupedChapterList.tsx b/web/src/components/GroupedChapterList.tsx
@@ -10,6 +10,7 @@ import {
   IconButton,
   Paper,
   Skeleton,
+  Tooltip,
   Typography,
 } from '@mui/material';
 
@@ -19,6 +20,8 @@ import { formatChapterTitle, formatChapterUrl } from '../utils/formatting';
 import { MangaCover } from './MangaCover';
 import type { ServiceForApi } from '@/types/api/services';
 import type { ChapterRelease } from '@/types/api/chapter';
+import { defaultDateFormat } from '@/webUtils/utilities';
+import type { DatabaseId } from '@/types/dbTypes';
 
 export type ChapterComponentProps = {
   chapter: ChapterRelease
@@ -27,9 +30,10 @@ export type ChapterComponentProps = {
 export type GroupComponentProps = PropsWithChildren<{
   groupString: string | React.ReactNode
   group: string
+  mangaId: DatabaseId
 }>
 
-export const ChapterGroupBase: FC<Omit<GroupComponentProps, 'group'>> = ({ groupString, children }) => (
+export const ChapterGroupBase: FC<Omit<GroupComponentProps, 'group' | 'mangaId'>> = ({ groupString, children }) => (
   <Paper sx={{
     mb: 1,
     pt: 2,
@@ -42,15 +46,19 @@ export const ChapterGroupBase: FC<Omit<GroupComponentProps, 'group'>> = ({ group
   </Paper>
 );
 
-export const ChapterGroupWithCover = (mangaToCover: Record<string, string>): FC<GroupComponentProps> => ({ group, groupString, children }) => (
+export const ChapterGroupWithCover = (mangaToCover: Record<string, string>): FC<GroupComponentProps> => (
+  { mangaId, group, groupString, children }
+) => (
   <ChapterGroupBase groupString={groupString}>
     <div style={{ display: 'flex' }}>
       <div>
-        <MangaCover
-          url={mangaToCover[group]}
-          alt={groupString}
-          maxWidth={96}
-        />
+        <a href={`/manga/${mangaId}`} target='_blank' rel='noopener noreferrer'>
+          <MangaCover
+            url={mangaToCover[group]}
+            alt={groupString}
+            maxWidth={96}
+          />
+        </a>
       </div>
       <div>
         {children}
@@ -64,7 +72,21 @@ export const ChapterWithLink = (services: Record<number, ServiceForApi>): FC<Cha
   return (
     <li>
       <div>
-        {formatChapterTitle(chapter)}
+        <Tooltip
+          title={defaultDateFormat(new Date(chapter.releaseDate))}
+          arrow
+          slotProps={{
+            tooltip: {
+              sx: {
+                fontSize: '1rem',
+              },
+            },
+          }}
+        >
+          <span>
+            {formatChapterTitle(chapter)}
+          </span>
+        </Tooltip>
         <a
           href={formatChapterUrl(service.chapterUrlFormat, chapter.chapterIdentifier, chapter.titleId)}
           target='_blank'
@@ -134,6 +156,7 @@ export const GroupedChapterList: FC<GroupedChapterListProps> = ({
         <GroupComponent
           groupString={groupToString(group.group, group.arr)}
           group={group.group}
+          mangaId={group.arr[0].mangaId}
           /* eslint-disable-next-line react/no-array-index-key */
           key={`${idx}`}
         >