From 7aac2ef54931bcad6c22c93b81165057678ea073 Mon Sep 17 00:00:00 2001
From: Alperen Elhan <alperen@elhan.io>
Date: Mon, 17 Oct 2022 02:47:36 +0300
Subject: [PATCH] feat: restrict height of the manga metadata in details page

---
 src/components/chaptersTable.tsx |   5 +
 src/components/mangaDetail.tsx   | 187 ++++++++++++++++++-------------
 src/pages/index.tsx              |   5 +-
 src/pages/manga/[id].tsx         |   2 +-
 4 files changed, 117 insertions(+), 82 deletions(-)

diff --git a/src/components/chaptersTable.tsx b/src/components/chaptersTable.tsx
index 957cbf3..2749ddd 100644
--- a/src/components/chaptersTable.tsx
+++ b/src/components/chaptersTable.tsx
@@ -33,6 +33,11 @@ export function ChaptersTable({ manga }: { manga: MangaWithMetadataAndChaptersLi
       highlightOnHover
       records={records}
       recordsPerPage={PAGE_SIZE}
+      sx={(themes) => ({
+        '*': {
+          fontSize: `${themes.fontSizes.xs}px !important`,
+        },
+      })}
       page={page}
       totalRecords={manga.chapters.length}
       onPageChange={(p) => setPage(p)}
diff --git a/src/components/mangaDetail.tsx b/src/components/mangaDetail.tsx
index 0ce612a..5e6f255 100644
--- a/src/components/mangaDetail.tsx
+++ b/src/components/mangaDetail.tsx
@@ -1,8 +1,21 @@
-import { Badge, createStyles, Divider, Grid, Group, Image, Text, Title, Tooltip } from '@mantine/core';
+import { Badge, createStyles, Divider, Grid, Group, Image, Spoiler, Text, Title } from '@mantine/core';
+import { NextLink } from '@mantine/next';
 import { Prisma } from '@prisma/client';
+import { IconExternalLink } from '@tabler/icons';
 
-const useStyles = createStyles((_theme) => ({
-  root: {},
+const useStyles = createStyles((theme) => ({
+  root: {
+    wordBreak: 'break-word',
+  },
+  outsideLink: {
+    textDecoration: 'none',
+    fontWeight: 600,
+    color: theme.colors.blue[7],
+    '&:hover': {
+      color: theme.colors.indigo[7],
+    },
+    fontSize: 24,
+  },
   placeHolder: {
     alignItems: 'start !important',
     justifyContent: 'flex-start !important',
@@ -19,83 +32,97 @@ export function MangaDetail({ manga }: { manga: MangaWithMetadataAndChapters })
   const { classes } = useStyles();
 
   return (
-    <Grid className={classes.root}>
-      <Grid.Col span="auto" style={{ maxWidth: 300 }}>
-        <Image
-          classNames={{
-            placeholder: classes.placeHolder,
-          }}
-          sx={(theme) => ({
-            width: 210,
-            boxShadow: theme.shadows.xl,
-          })}
-          withPlaceholder
-          placeholder={
-            <Image
-              sx={(theme) => ({
-                width: 210,
-                boxShadow: theme.shadows.xl,
-              })}
-              src="/cover-not-found.jpg"
-              alt={manga.title}
-            />
-          }
-          src={manga.metadata.cover}
-        />
-      </Grid.Col>
-      <Grid.Col span="auto">
-        <Divider mb="xs" labelPosition="left" label={<Title order={3}>{manga.title}</Title>} />
-        <Group spacing="xs">
-          {manga.metadata.synonyms.map((synonym) => (
-            <Tooltip label={synonym} key={synonym}>
-              <div style={{ maxWidth: 100 }}>
-                <Badge color="blue" variant="filled" size="sm" fullWidth>
-                  {synonym}
-                </Badge>
-              </div>
-            </Tooltip>
-          ))}
-        </Group>
-        <Divider variant="dashed" my="xs" label="Status" />
-        <Badge color="cyan" variant="filled" size="sm">
-          {manga.metadata.status}
-        </Badge>
-
-        <Divider variant="dashed" my="xs" label="Chapters" />
-        <Text>
-          There are &nbsp;
-          <Badge color="teal" variant="outline" size="lg">
-            {manga.chapters.length}
+    <Spoiler
+      maxHeight={460}
+      styles={{
+        control: {
+          width: '100%',
+          textDecoration: 'none !important',
+          fontWeight: 'bolder',
+        },
+      }}
+      showLabel={<Divider labelPosition="center" size="sm" variant="solid" label="Show More" />}
+      hideLabel={<Divider labelPosition="center" size="sm" variant="solid" label="Hide" />}
+    >
+      <Grid className={classes.root}>
+        <Grid.Col span="auto" style={{ maxWidth: 300 }}>
+          <Image
+            classNames={{
+              placeholder: classes.placeHolder,
+            }}
+            sx={(theme) => ({
+              width: 210,
+              boxShadow: theme.shadows.xl,
+            })}
+            withPlaceholder
+            placeholder={
+              <Image
+                sx={(theme) => ({
+                  width: 210,
+                  boxShadow: theme.shadows.xl,
+                })}
+                src="/cover-not-found.jpg"
+                alt={manga.title}
+              />
+            }
+            src={manga.metadata.cover}
+          />
+        </Grid.Col>
+        <Grid.Col span="auto">
+          <Divider
+            mb="xs"
+            labelPosition="left"
+            label={
+              manga.metadata.urls.find((url) => url.includes('anilist')) ? (
+                <NextLink
+                  target="_blank"
+                  className={classes.outsideLink}
+                  href={manga.metadata.urls.find((url) => url.includes('anilist')) || '#'}
+                >
+                  <Text mr={5} inline component="span">
+                    {manga.title}
+                  </Text>
+                  <IconExternalLink size={18} />
+                </NextLink>
+              ) : (
+                <Title sx={{ fontSize: 24 }} order={3}>
+                  {manga.title}
+                </Title>
+              )
+            }
+          />
+          <Group spacing={0}>
+            {manga.metadata.synonyms.map((synonym) => (
+              <Badge key={synonym} color="gray" variant="filled" size="xs" m={2}>
+                {synonym}
+              </Badge>
+            ))}
+          </Group>
+          <Divider sx={{ fontWeight: 'bolder' }} variant="dashed" my="xs" label="Status" />
+          <Badge color="cyan" variant="filled" size="sm">
+            {manga.metadata.status}
           </Badge>
-          &nbsp; chapters
-        </Text>
-        <Divider variant="dashed" my="xs" label="Summary" />
-        <Text size="sm">{manga.metadata.summary || 'No summary...'}</Text>
-        <Divider variant="dashed" my="xs" label="Genres" />
-        <Group spacing="xs">
-          {manga.metadata.genres.map((genre) => (
-            <Tooltip label={genre} key={genre}>
-              <div style={{ maxWidth: 100 }}>
-                <Badge color="indigo" variant="light" size="xs" fullWidth>
-                  {genre}
-                </Badge>
-              </div>
-            </Tooltip>
-          ))}
-        </Group>
-        <Divider variant="dashed" my="xs" label="Tags" />
-        <Group spacing="xs">
-          {manga.metadata.tags.map((tag) => (
-            <Tooltip label={tag} key={tag}>
-              <div style={{ maxWidth: 100 }}>
-                <Badge color="violet" variant="light" size="xs" fullWidth>
-                  {tag}
-                </Badge>
-              </div>
-            </Tooltip>
-          ))}
-        </Group>
-      </Grid.Col>
-    </Grid>
+
+          <Divider sx={{ fontWeight: 'bolder' }} variant="dashed" my="xs" label="Summary" />
+          <Text size="xs">{manga.metadata.summary || 'No summary...'}</Text>
+          <Divider sx={{ fontWeight: 'bolder' }} variant="dashed" my="xs" label="Genres" />
+          <Group spacing={0}>
+            {manga.metadata.genres.map((genre) => (
+              <Badge key={genre} color="indigo" variant="light" size="xs" m={2}>
+                {genre}
+              </Badge>
+            ))}
+          </Group>
+          <Divider sx={{ fontWeight: 'bolder' }} variant="dashed" my="xs" label="Tags" />
+          <Group spacing={0}>
+            {manga.metadata.tags.map((tag) => (
+              <Badge key={tag} color="violet" variant="light" size="xs" m={2}>
+                {tag}
+              </Badge>
+            ))}
+          </Group>
+        </Grid.Col>
+      </Grid>
+    </Spoiler>
   );
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 8d3ba54..6bc621a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -97,7 +97,10 @@ export default function IndexPage() {
                   title={manga.title}
                   cover={manga.metadata.cover}
                   onRemove={() => handleRemove(manga.id, manga.title)}
-                  onClick={() => router.push(`/manga/${manga.id}`)}
+                  onClick={() => {
+                    mangaQuery.refetch();
+                    router.push(`/manga/${manga.id}`);
+                  }}
                 />
               </Grid.Col>
             );
diff --git a/src/pages/manga/[id].tsx b/src/pages/manga/[id].tsx
index 3cdf539..68d2316 100644
--- a/src/pages/manga/[id].tsx
+++ b/src/pages/manga/[id].tsx
@@ -4,7 +4,7 @@ import { ChaptersTable } from '../../components/chaptersTable';
 import { MangaDetail } from '../../components/mangaDetail';
 import { trpc } from '../../utils/trpc';
 
-export default function LibraryPage() {
+export default function MangaPage() {
   const router = useRouter();
   const { id } = router.query;
   const mangaQuery = trpc.manga.get.useQuery(