feat: add metadata

docker-compose.yml

@@ -1,7 +1,29 @@
 version: '3'
 
+volumes:
+  db:
+
+
 services:
   redis:
     image: redis:7-alpine
     ports:
       - 6379:6379
+  db:
+    image: postgres:alpine
+    restart: unless-stopped
+    healthcheck:
+      test: [ "CMD-SHELL", "pg_isready -U kaizoku" ]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+    env_file:
+      - .env
+    environment:
+      POSTGRES_USER: ${DATABASE_USER}
+      POSTGRES_DB: ${DATABASE_SCHEMA}
+      POSTGRES_PASSWORD: ${DATABASE_PASSWORD}
+    volumes:
+      - db:/var/lib/postgresql/data
+    ports:
+      - "${DATABASE_PORT}:5432"

prisma/migrations/20221015225209_init/migration.sql

@@ -0,0 +1,70 @@
+-- CreateTable
+CREATE TABLE "Library" (
+    "id" SERIAL NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "path" TEXT NOT NULL,
+
+    CONSTRAINT "Library_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Manga" (
+    "id" SERIAL NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "title" TEXT NOT NULL,
+    "interval" TEXT NOT NULL,
+    "source" TEXT NOT NULL,
+    "libraryId" INTEGER NOT NULL,
+    "metadataId" INTEGER NOT NULL,
+
+    CONSTRAINT "Manga_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Chapter" (
+    "id" SERIAL NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "index" INTEGER NOT NULL,
+    "fileName" TEXT NOT NULL,
+    "size" INTEGER NOT NULL,
+    "mangaId" INTEGER NOT NULL,
+
+    CONSTRAINT "Chapter_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Metadata" (
+    "id" SERIAL NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "genres" TEXT[] DEFAULT ARRAY[]::TEXT[],
+    "summary" TEXT NOT NULL DEFAULT '',
+    "authors" TEXT[] DEFAULT ARRAY[]::TEXT[],
+    "cover" TEXT NOT NULL DEFAULT '/cover-not-found.jpg',
+    "tags" TEXT[] DEFAULT ARRAY[]::TEXT[],
+    "characters" TEXT[] DEFAULT ARRAY[]::TEXT[],
+    "status" TEXT NOT NULL DEFAULT 'UNKNOWN',
+    "startDate" TIMESTAMP(3),
+    "endDate" TIMESTAMP(3),
+    "synonyms" TEXT[] DEFAULT ARRAY[]::TEXT[],
+    "urls" TEXT[] DEFAULT ARRAY[]::TEXT[],
+
+    CONSTRAINT "Metadata_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Library_path_key" ON "Library"("path");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Manga_title_key" ON "Manga"("title");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Manga_metadataId_key" ON "Manga"("metadataId");
+
+-- AddForeignKey
+ALTER TABLE "Manga" ADD CONSTRAINT "Manga_libraryId_fkey" FOREIGN KEY ("libraryId") REFERENCES "Library"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Manga" ADD CONSTRAINT "Manga_metadataId_fkey" FOREIGN KEY ("metadataId") REFERENCES "Metadata"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Chapter" ADD CONSTRAINT "Chapter_mangaId_fkey" FOREIGN KEY ("mangaId") REFERENCES "Manga"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/migrations/migration_lock.toml

@@ -1,3 +1,3 @@
 # Please do not edit this file manually
 # It should be added in your version-control system (i.e. Git)
-provider = "sqlite"
+provider = "postgresql"

prisma/schema.prisma

@@ -7,8 +7,8 @@ generator client {
 }
 
 datasource db {
-  provider = "sqlite"
-  url      = "file:./kaizoku.db"
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
 }
 
 model Library {
@@ -19,15 +19,16 @@ model Library {
 }
 
 model Manga {
-  id        Int       @id @default(autoincrement())
-  createdAt DateTime  @default(now())
-  title     String    @unique
-  cover     String
-  interval  String
-  source    String
-  library   Library   @relation(fields: [libraryId], references: [id], onDelete: Cascade)
-  libraryId Int
-  chapter   Chapter[]
+  id         Int       @id @default(autoincrement())
+  createdAt  DateTime  @default(now())
+  title      String    @unique
+  interval   String
+  source     String
+  library    Library   @relation(fields: [libraryId], references: [id], onDelete: Cascade)
+  libraryId  Int
+  chapter    Chapter[]
+  metadata   Metadata  @relation(fields: [metadataId], references: [id], onDelete: Cascade)
+  metadataId Int       @unique
 }
 
 model Chapter {
@@ -39,3 +40,20 @@ model Chapter {
   manga     Manga    @relation(fields: [mangaId], references: [id], onDelete: Cascade)
   mangaId   Int
 }
+
+model Metadata {
+  id         Int       @id @default(autoincrement())
+  createdAt  DateTime  @default(now())
+  manga      Manga?
+  genres     String[]  @default([])
+  summary    String    @default("")
+  authors    String[]  @default([])
+  cover      String    @default("/cover-not-found.jpg")
+  tags       String[]  @default([])
+  characters String[]  @default([])
+  status     String    @default("UNKNOWN")
+  startDate  DateTime?
+  endDate    DateTime?
+  synonyms   String[]  @default([])
+  urls       String[]  @default([])
+}

src/components/addManga/index.tsx

@@ -32,6 +32,7 @@ export function AddManga({ onAdd }: { onAdd: () => void }) {
       trapFocus: true,
       size: 'xl',
       closeOnClickOutside: false,
+      closeOnEscape: true,
       title: 'Add a new manga',
       centered: true,
       children: (

src/components/addManga/steps/index.tsx

@@ -50,23 +50,23 @@ export default function AddMangaSteps({
       <Stepper.Step
         label="Source"
         description={form.values.source || 'Select a source'}
-        allowStepSelect={active > 0}
+        allowStepSelect={false}
         color={active > 0 ? 'teal' : 'blue'}
       >
         <SourceStep form={form} />
       </Stepper.Step>
       <Stepper.Step
         label="Manga"
         description={form.values.mangaTitle || 'Search for manga'}
-        allowStepSelect={active > 1}
+        allowStepSelect={false}
         color={active > 1 ? 'teal' : 'blue'}
       >
         <SearchStep form={form} />
       </Stepper.Step>
       <Stepper.Step
         label="Download"
         description={form.values.interval || 'Select an interval'}
-        allowStepSelect={active > 2}
+        allowStepSelect={false}
         color={active > 2 ? 'teal' : 'blue'}
       >
         <DownloadStep form={form} />

src/components/headerSearch.tsx

@@ -31,15 +31,15 @@ export function SearchControl() {
       setActions(
         mangaQuery.data.map((m) => ({
           title: m.title,
-          description: m.title,
+          description: `${m.metadata.summary.split(' ').slice(0, 50).join(' ')}...`,
           group: m.source,
           icon: (
             <Image
               withPlaceholder
-              placeholder={<Image src="/cover-not-found.jpg" alt={m.title} width={63} height={96} />}
-              src={m.cover}
-              width={42}
-              height={64}
+              placeholder={<Image src="/cover-not-found.jpg" alt={m.title} width={60} height={100} />}
+              src={m.metadata.cover}
+              width={60}
+              height={100}
             />
           ),
           closeOnTrigger: true,
@@ -54,6 +54,7 @@ export function SearchControl() {
       actions={actions}
       searchIcon={<IconSearch size={18} />}
       highlightQuery
+      limit={5}
       disabled={isDisabled}
       searchPlaceholder="Search..."
       shortcut="ctrl + p"

src/components/navbar.tsx

@@ -140,7 +140,7 @@ function History({ data }: { data: HistoryType }) {
           <Timeline.Item
             key={chapter.id}
             lineVariant="dotted"
-            bullet={<Image mt={20} alt="header" src={chapter.manga.cover} height={40} width={26} />}
+            bullet={<Image mt={20} alt="header" src={chapter.manga.metadata.cover} height={40} width={26} />}
             title={<HistoryItemTitle chapter={chapter} />}
           >
             <HistoryItem chapter={chapter} />
@@ -235,6 +235,11 @@ export function KaizokuNavbar() {
 
   const historyQuery = trpc.manga.history.useQuery();
   const activityQuery = trpc.manga.activity.useQuery();
+  const libraryQuery = trpc.library.query.useQuery();
+
+  if (!libraryQuery.data) {
+    return null;
+  }
 
   return (
     <Navbar width={{ sm: 300 }} p="md" className={classes.navbar} fixed>

src/pages/index.tsx

@@ -1,4 +1,4 @@
-import { Code, Grid, Text } from '@mantine/core';
+import { Code, Grid, LoadingOverlay, Text } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { IconCheck, IconX } from '@tabler/icons';
 import { useRouter } from 'next/router';
@@ -15,6 +15,10 @@ export default function IndexPage() {
 
   const mangaQuery = trpc.manga.query.useQuery();
 
+  if (libraryQuery.isLoading) {
+    return <LoadingOverlay visible />;
+  }
+
   if (mangaQuery.isLoading || libraryQuery.isLoading) {
     return (
       <Grid justify="flex-start">
@@ -90,7 +94,7 @@ export default function IndexPage() {
               <MangaCard
                 badge={manga.source}
                 title={manga.title}
-                cover={manga.cover}
+                cover={manga.metadata.cover}
                 onRemove={() => handleRemove(manga.id, manga.title)}
                 onClick={() => router.push(`/manga/${manga.id}`)}
               />