From 93154a5a15065e4eec1cabff141742c4be8a6dd1 Mon Sep 17 00:00:00 2001
From: Alperen Elhan <alperen@elhan.io>
Date: Fri, 14 Oct 2022 00:35:58 +0300
Subject: [PATCH] refactor: cleanup add manga code

---
 src/components/addManga/form.tsx              | 163 ++++++
 src/components/addManga/index.tsx             |  55 ++
 .../{ => addManga}/mangaSearchResult.tsx      |   0
 .../addManga/steps/downloadStep.tsx           |  48 ++
 src/components/addManga/steps/index.tsx       |  80 +++
 src/components/addManga/steps/reviewStep.tsx  | 128 +++++
 src/components/addManga/steps/searchStep.tsx  |  70 +++
 src/components/addManga/steps/sourceStep.tsx  |  30 +
 src/components/newMangaCard.tsx               | 533 ------------------
 src/pages/index.tsx                           |   4 +-
 10 files changed, 576 insertions(+), 535 deletions(-)
 create mode 100644 src/components/addManga/form.tsx
 create mode 100644 src/components/addManga/index.tsx
 rename src/components/{ => addManga}/mangaSearchResult.tsx (100%)
 create mode 100644 src/components/addManga/steps/downloadStep.tsx
 create mode 100644 src/components/addManga/steps/index.tsx
 create mode 100644 src/components/addManga/steps/reviewStep.tsx
 create mode 100644 src/components/addManga/steps/searchStep.tsx
 create mode 100644 src/components/addManga/steps/sourceStep.tsx
 delete mode 100644 src/components/newMangaCard.tsx

diff --git a/src/components/addManga/form.tsx b/src/components/addManga/form.tsx
new file mode 100644
index 0000000..89d1cbd
--- /dev/null
+++ b/src/components/addManga/form.tsx
@@ -0,0 +1,163 @@
+import { Button, Code, createStyles, Group, LoadingOverlay, Text } from '@mantine/core';
+import { useForm, zodResolver } from '@mantine/form';
+import { showNotification } from '@mantine/notifications';
+import { IconCheck, IconX } from '@tabler/icons';
+import { useState } from 'react';
+import { z } from 'zod';
+import { trpc } from '../../utils/trpc';
+import AddMangaSteps from './steps';
+
+const useStyles = createStyles((theme) => ({
+  form: {
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: 300,
+    padding: theme.spacing.xs,
+  },
+  buttonGroup: {
+    position: 'fixed',
+    bottom: '19px',
+    right: '55px',
+    width: 'calc(100% - 55px)',
+    height: '50px',
+    background: 'white',
+  },
+}));
+
+const schema = z.object({
+  source: z.string().min(1, { message: 'You must select a source' }),
+  query: z.string().min(1, { message: 'Cannot be empty' }),
+  mangaOrder: z.number().gte(0, { message: 'Please select a manga' }),
+  mangaTitle: z.string().min(1, { message: 'Please select a manga' }),
+  interval: z.string().min(1, { message: 'Please select an interval' }),
+});
+
+export type FormType = z.TypeOf<typeof schema>;
+
+export function AddMangaForm({ onClose }: { onClose: () => void }) {
+  const [active, setActive] = useState(0);
+  const [visible, setVisible] = useState(false);
+  const { classes } = useStyles();
+
+  const mutation = trpc.manga.add.useMutation();
+
+  const form = useForm({
+    validateInputOnBlur: ['source', 'query', 'interval'],
+    initialValues: {
+      source: '',
+      query: '',
+      mangaOrder: -1,
+      mangaTitle: '',
+      interval: '',
+    },
+    validate: zodResolver(schema),
+  });
+
+  const nextStep = () => {
+    if (active === 0) {
+      form.validateField('source');
+      if (!form.isValid('source')) {
+        return;
+      }
+    }
+    if (active === 1) {
+      form.validateField('mangaTitle');
+      form.validateField('mangaOrder');
+      if (!form.isValid('mangaOrder') || !form.isValid('mangaTitle')) {
+        return;
+      }
+    }
+    if (active === 2) {
+      form.validateField('interval');
+      if (!form.isValid('interval')) {
+        return;
+      }
+    }
+    form.clearErrors();
+    setActive((current) => (current < 3 ? current + 1 : current));
+  };
+
+  const prevStep = () => {
+    if (active === 0) {
+      setVisible(false);
+      onClose();
+      form.reset();
+    }
+    if (active === 1) {
+      form.setFieldValue('query', '');
+      form.setFieldValue('source', '');
+    }
+    if (active === 2) {
+      form.setFieldValue('query', '');
+      form.setFieldValue('mangaOrder', -1);
+      form.setFieldValue('mangaTitle', '');
+    }
+    if (active === 3) {
+      form.setFieldValue('interval', '');
+    }
+    setActive((current) => (current > 0 ? current - 1 : current));
+  };
+
+  const onSubmit = form.onSubmit(async (values) => {
+    setVisible((v) => !v);
+    const { mangaOrder, mangaTitle, query, source, interval } = values;
+    try {
+      await mutation.mutateAsync({
+        keyword: query,
+        order: mangaOrder,
+        title: mangaTitle,
+        interval,
+        source,
+      });
+    } catch (err) {
+      showNotification({
+        icon: <IconX size={18} />,
+        color: 'red',
+        autoClose: true,
+        title: 'Manga',
+        message: (
+          <Text>
+            Failed to create add manga. <Code color="red">{`${err}`}</Code>
+          </Text>
+        ),
+      });
+
+      form.reset();
+      onClose();
+      setVisible((v) => !v);
+      return;
+    }
+    form.reset();
+    onClose();
+    setVisible((v) => !v);
+    showNotification({
+      icon: <IconCheck size={18} />,
+      color: 'teal',
+      autoClose: true,
+      title: 'Manga',
+      message: (
+        <Text>
+          <Code color="blue">{values.mangaTitle}</Code> is added to library
+        </Text>
+      ),
+    });
+  });
+
+  return (
+    <form className={classes.form} onSubmit={onSubmit}>
+      <AddMangaSteps form={form} active={active} setActive={setActive} />
+      <LoadingOverlay visible={visible} />
+      <Group position="right" className={classes.buttonGroup}>
+        <Button variant="default" onClick={prevStep}>
+          {active === 0 ? 'Cancel' : 'Back'}
+        </Button>
+        <Button hidden={active !== 3} type="submit">
+          Add
+        </Button>
+        <Button hidden={active === 3} onClick={nextStep}>
+          Next step
+        </Button>
+      </Group>
+    </form>
+  );
+}
diff --git a/src/components/addManga/index.tsx b/src/components/addManga/index.tsx
new file mode 100644
index 0000000..ebb9618
--- /dev/null
+++ b/src/components/addManga/index.tsx
@@ -0,0 +1,55 @@
+import { createStyles, Paper, Tooltip } from '@mantine/core';
+import { useModals } from '@mantine/modals';
+import { IconPlus } from '@tabler/icons';
+import { AddMangaForm } from './form';
+
+const useStyles = createStyles((theme) => ({
+  card: {
+    height: 350,
+    width: 210,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: theme.colors.gray[4],
+    cursor: 'pointer',
+
+    transition: 'transform 150ms ease, box-shadow 150ms ease',
+
+    '&:hover': {
+      transform: 'scale(1.01)',
+      boxShadow: theme.shadows.md,
+    },
+  },
+}));
+
+export function AddManga({ onAdd }: { onAdd: () => void }) {
+  const { classes } = useStyles();
+  const modals = useModals();
+
+  const openCreateModal = () => {
+    const id = modals.openModal({
+      overflow: 'inside',
+      trapFocus: true,
+      size: 'xl',
+      closeOnClickOutside: false,
+      title: 'Add a new manga',
+      centered: true,
+      children: (
+        <AddMangaForm
+          onClose={() => {
+            modals.closeModal(id);
+            onAdd();
+          }}
+        />
+      ),
+    });
+  };
+
+  return (
+    <Tooltip label="Add a new manga" position="bottom">
+      <Paper shadow="lg" p="md" radius="md" className={classes.card} onClick={openCreateModal}>
+        <IconPlus color="darkblue" opacity={0.5} size={96} />
+      </Paper>
+    </Tooltip>
+  );
+}
diff --git a/src/components/mangaSearchResult.tsx b/src/components/addManga/mangaSearchResult.tsx
similarity index 100%
rename from src/components/mangaSearchResult.tsx
rename to src/components/addManga/mangaSearchResult.tsx
diff --git a/src/components/addManga/steps/downloadStep.tsx b/src/components/addManga/steps/downloadStep.tsx
new file mode 100644
index 0000000..a25644a
--- /dev/null
+++ b/src/components/addManga/steps/downloadStep.tsx
@@ -0,0 +1,48 @@
+import { Box, LoadingOverlay, Select, Stack, TextInput } from '@mantine/core';
+import { UseFormReturnType } from '@mantine/form';
+import { IconFolderPlus } from '@tabler/icons';
+import { trpc } from '../../../utils/trpc';
+import type { FormType } from '../form';
+
+const availableIntervals = ['daily', 'hourly', 'weekly', 'minutely'];
+
+export function DownloadStep({ form }: { form: UseFormReturnType<FormType> }) {
+  const libraryQuery = trpc.library.query.useQuery();
+
+  const libraryPath = libraryQuery.data?.path;
+
+  const intervalSelectData = availableIntervals.map((k) => ({ label: k, value: k }));
+
+  if (libraryQuery.isLoading) {
+    return <LoadingOverlay visible />;
+  }
+
+  const sanitizeMangaName = form.values.mangaTitle
+    .replaceAll(/[\\/<>:;"'|?!*{}#%&^+,~\s]/g, '_')
+    .replaceAll(/__+/g, '_')
+    .replaceAll(/^[_\-.]+|[_\-.]+$/g, '_');
+
+  const downloadPath = `${libraryPath}/${sanitizeMangaName}`;
+
+  return (
+    <Box>
+      <Stack>
+        <Select
+          data-autofocus
+          size="sm"
+          data={intervalSelectData}
+          label="Download Interval"
+          placeholder="Select an interval"
+          {...form.getInputProps('interval')}
+        />
+        <TextInput
+          label="Location"
+          size="sm"
+          disabled
+          icon={<IconFolderPlus size={18} stroke={1.5} />}
+          value={downloadPath}
+        />
+      </Stack>
+    </Box>
+  );
+}
diff --git a/src/components/addManga/steps/index.tsx b/src/components/addManga/steps/index.tsx
new file mode 100644
index 0000000..bc73eb3
--- /dev/null
+++ b/src/components/addManga/steps/index.tsx
@@ -0,0 +1,80 @@
+import { createStyles, Stepper } from '@mantine/core';
+import { UseFormReturnType } from '@mantine/form';
+import { Dispatch, SetStateAction } from 'react';
+import type { FormType } from '../form';
+import { DownloadStep } from './downloadStep';
+import { ReviewStep } from './reviewStep';
+import { SearchStep } from './searchStep';
+import { SourceStep } from './sourceStep';
+
+const useStyles = createStyles((_theme) => ({
+  stepper: {
+    flexGrow: 1,
+  },
+  stepBody: {
+    marginTop: 30,
+    marginBottom: 30,
+  },
+  buttonGroup: {
+    position: 'fixed',
+    bottom: '19px',
+    right: '55px',
+    width: 'calc(100% - 55px)',
+    height: '50px',
+    background: 'white',
+  },
+}));
+
+export default function AddMangaSteps({
+  form,
+  active,
+  setActive,
+}: {
+  form: UseFormReturnType<FormType>;
+  active: number;
+  setActive: Dispatch<SetStateAction<number>>;
+}) {
+  const { classes } = useStyles();
+
+  return (
+    <Stepper
+      classNames={{
+        root: classes.stepper,
+        content: classes.stepBody,
+      }}
+      active={active}
+      onStepClick={setActive}
+      breakpoint="sm"
+      m="xl"
+    >
+      <Stepper.Step
+        label="Source"
+        description={form.values.source || 'Select a source'}
+        allowStepSelect={active > 0}
+        color={active > 0 ? 'teal' : 'blue'}
+      >
+        <SourceStep form={form} />
+      </Stepper.Step>
+      <Stepper.Step
+        label="Manga"
+        description={form.values.mangaTitle || 'Search for manga'}
+        allowStepSelect={active > 1}
+        color={active > 1 ? 'teal' : 'blue'}
+      >
+        <SearchStep form={form} />
+      </Stepper.Step>
+      <Stepper.Step
+        label="Download"
+        description={form.values.interval || 'Select an interval'}
+        allowStepSelect={active > 2}
+        color={active > 2 ? 'teal' : 'blue'}
+      >
+        <DownloadStep form={form} />
+      </Stepper.Step>
+
+      <Stepper.Completed>
+        <ReviewStep form={form} />
+      </Stepper.Completed>
+    </Stepper>
+  );
+}
diff --git a/src/components/addManga/steps/reviewStep.tsx b/src/components/addManga/steps/reviewStep.tsx
new file mode 100644
index 0000000..e7dea29
--- /dev/null
+++ b/src/components/addManga/steps/reviewStep.tsx
@@ -0,0 +1,128 @@
+import { Badge, createStyles, Divider, Grid, Group, Image, LoadingOverlay, Text, Title, Tooltip } from '@mantine/core';
+import { UseFormReturnType } from '@mantine/form';
+import { trpc } from '../../../utils/trpc';
+import type { FormType } from '../form';
+
+const useStyles = createStyles((_theme) => ({
+  placeHolder: {
+    alignItems: 'start !important',
+    justifyContent: 'flex-start !important',
+  },
+}));
+
+export function ReviewStep({ form }: { form: UseFormReturnType<FormType> }) {
+  const query = trpc.manga.detail.useQuery(
+    {
+      keyword: form.values.query,
+      source: form.values.source,
+      order: form.values.mangaOrder,
+    },
+    {
+      staleTime: Infinity,
+      enabled: !!form.values.query && !!form.values.source && !!form.values.mangaTitle && form.values.mangaOrder > -1,
+    },
+  );
+
+  const { classes } = useStyles();
+
+  const manga = query.data;
+
+  return (
+    <>
+      <LoadingOverlay visible={query.isLoading} />
+
+      {manga && (
+        <Grid>
+          <Grid.Col span={4}>
+            <Image
+              classNames={{
+                placeholder: classes.placeHolder,
+              }}
+              sx={(theme) => ({
+                boxShadow: theme.shadows.xl,
+              })}
+              withPlaceholder
+              placeholder={
+                <Image
+                  sx={(theme) => ({
+                    width: 210,
+                    boxShadow: theme.shadows.xl,
+                  })}
+                  src="/cover-not-found.jpg"
+                  alt={manga.Name}
+                />
+              }
+              src={manga.Metadata.Cover}
+            />
+          </Grid.Col>
+          <Grid.Col span={8}>
+            <Divider mb="xs" labelPosition="center" label={<Title order={3}>{manga.Name}</Title>} />
+            {manga.Metadata.Synonyms && (
+              <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" />
+            {manga.Metadata.Status ? (
+              <Badge color="cyan" variant="filled" size="sm">
+                {manga.Metadata.Status}
+              </Badge>
+            ) : (
+              <Text size="sm">No status...</Text>
+            )}
+            <Divider variant="dashed" my="xs" label="Chapters" />
+            <Text>
+              There are &nbsp;
+              <Badge color="teal" variant="outline" size="lg">
+                {manga.Chapters?.length || 0}
+              </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" />
+            {manga.Metadata.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>
+            ) : (
+              <Text size="sm">No genres...</Text>
+            )}
+            <Divider variant="dashed" my="xs" label="Tags" />
+            {manga.Metadata.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>
+            ) : (
+              <Text size="sm">No tags...</Text>
+            )}
+          </Grid.Col>
+        </Grid>
+      )}
+    </>
+  );
+}
diff --git a/src/components/addManga/steps/searchStep.tsx b/src/components/addManga/steps/searchStep.tsx
new file mode 100644
index 0000000..24aa7d0
--- /dev/null
+++ b/src/components/addManga/steps/searchStep.tsx
@@ -0,0 +1,70 @@
+import { ActionIcon, LoadingOverlay, TextInput } from '@mantine/core';
+import { UseFormReturnType } from '@mantine/form';
+import { getHotkeyHandler } from '@mantine/hooks';
+import { IconArrowRight, IconSearch } from '@tabler/icons';
+import { useState } from 'react';
+import { trpc } from '../../../utils/trpc';
+import { MangaSearchResult } from '../mangaSearchResult';
+import type { FormType } from '../form';
+
+export function SearchStep({ form }: { form: UseFormReturnType<FormType> }) {
+  const ctx = trpc.useContext();
+  type SearchResult = Awaited<ReturnType<typeof ctx.manga.search.fetch>>;
+
+  const [loading, setLoading] = useState(false);
+  const [searchResult, setSearchResult] = useState<SearchResult>([]);
+
+  const handleSearch = async () => {
+    form.validateField('query');
+    if (!form.isValid('query')) {
+      return;
+    }
+    setLoading(true);
+    const result = await ctx.manga.search.fetch({
+      keyword: form.values.query,
+      source: form.values.source,
+    });
+    setLoading(false);
+
+    if (result) {
+      setSearchResult(result);
+    }
+  };
+
+  return (
+    <>
+      <LoadingOverlay visible={loading} />
+
+      <TextInput
+        data-autofocus
+        mb="xl"
+        size="md"
+        radius="xl"
+        onKeyDown={getHotkeyHandler([['Enter', handleSearch]])}
+        icon={<IconSearch size={18} stroke={1.5} />}
+        rightSection={
+          <ActionIcon size={32} radius="xl" color="blue" variant="filled" onClick={handleSearch}>
+            <IconArrowRight size={18} stroke={1.5} />
+          </ActionIcon>
+        }
+        rightSectionWidth={42}
+        label="Search for a manga"
+        placeholder="Bleach"
+        {...form.getInputProps('query')}
+      />
+      <TextInput hidden {...form.getInputProps('mangaTitle')} />
+      <MangaSearchResult
+        items={searchResult}
+        onSelect={(selected) => {
+          if (selected) {
+            form.setFieldValue('mangaOrder', selected.order);
+            form.setFieldValue('mangaTitle', selected.title);
+          } else {
+            form.setFieldValue('mangaOrder', -1);
+            form.setFieldValue('mangaTitle', '');
+          }
+        }}
+      />
+    </>
+  );
+}
diff --git a/src/components/addManga/steps/sourceStep.tsx b/src/components/addManga/steps/sourceStep.tsx
new file mode 100644
index 0000000..bbb8636
--- /dev/null
+++ b/src/components/addManga/steps/sourceStep.tsx
@@ -0,0 +1,30 @@
+import { Box, LoadingOverlay, Select } from '@mantine/core';
+import { UseFormReturnType } from '@mantine/form';
+import { trpc } from '../../../utils/trpc';
+import type { FormType } from '../form';
+
+export function SourceStep({ form }: { form: UseFormReturnType<FormType> }) {
+  const query = trpc.manga.sources.useQuery(undefined, {
+    staleTime: Infinity,
+  });
+
+  if (query.isLoading) {
+    return <LoadingOverlay visible />;
+  }
+
+  const selectData = query.data?.map((s) => ({
+    value: s,
+    label: s,
+  }));
+
+  return (
+    <Box>
+      <Select
+        data={selectData || []}
+        label="Available sources"
+        placeholder="Select a source"
+        {...form.getInputProps('source')}
+      />
+    </Box>
+  );
+}
diff --git a/src/components/newMangaCard.tsx b/src/components/newMangaCard.tsx
deleted file mode 100644
index e341832..0000000
--- a/src/components/newMangaCard.tsx
+++ /dev/null
@@ -1,533 +0,0 @@
-import {
-  ActionIcon,
-  Badge,
-  Box,
-  Button,
-  Code,
-  createStyles,
-  Divider,
-  Grid,
-  Group,
-  Image,
-  LoadingOverlay,
-  Paper,
-  Select,
-  Stack,
-  Stepper,
-  Text,
-  TextInput,
-  Title,
-  Tooltip,
-} from '@mantine/core';
-import { useForm, UseFormReturnType, zodResolver } from '@mantine/form';
-import { getHotkeyHandler } from '@mantine/hooks';
-import { useModals } from '@mantine/modals';
-import { showNotification } from '@mantine/notifications';
-import { IconArrowRight, IconCheck, IconFolderPlus, IconPlus, IconSearch, IconX } from '@tabler/icons';
-import { useState } from 'react';
-import { z } from 'zod';
-import { trpc } from '../utils/trpc';
-import { MangaSearchResult } from './mangaSearchResult';
-
-const useStyles = createStyles((theme) => ({
-  card: {
-    height: 350,
-    width: 210,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: theme.colors.gray[4],
-    cursor: 'pointer',
-
-    transition: 'transform 150ms ease, box-shadow 150ms ease',
-
-    '&:hover': {
-      transform: 'scale(1.01)',
-      boxShadow: theme.shadows.md,
-    },
-  },
-  form: {
-    display: 'flex',
-    flexDirection: 'column',
-    minHeight: 300,
-    padding: theme.spacing.xs,
-  },
-  stepper: {
-    flexGrow: 1,
-  },
-  stepBody: {
-    marginTop: 30,
-    marginBottom: 30,
-  },
-  buttonGroup: {
-    position: 'fixed',
-    bottom: '19px',
-    right: '55px',
-    width: 'calc(100% - 55px)',
-    height: '50px',
-    background: 'white',
-  },
-  placeHolder: {
-    alignItems: 'start !important',
-    justifyContent: 'flex-start !important',
-  },
-}));
-
-const availableIntervals = ['daily', 'hourly', 'weekly', 'minutely'];
-
-const schema = z.object({
-  source: z.string().min(1, { message: 'You must select a source' }),
-  query: z.string().min(1, { message: 'Cannot be empty' }),
-  mangaOrder: z.number().gte(0, { message: 'Please select a manga' }),
-  mangaTitle: z.string().min(1, { message: 'Please select a manga' }),
-  interval: z.string().min(1, { message: 'Please select an interval' }),
-});
-
-type FormType = z.TypeOf<typeof schema>;
-
-function SourceStep({ form }: { form: UseFormReturnType<FormType> }) {
-  const query = trpc.manga.sources.useQuery(undefined, {
-    staleTime: Infinity,
-  });
-
-  if (query.isLoading) {
-    return <LoadingOverlay visible />;
-  }
-
-  const selectData = query.data?.map((s) => ({
-    value: s,
-    label: s,
-  }));
-
-  return (
-    <Box>
-      <Select
-        data={selectData || []}
-        label="Available sources"
-        placeholder="Select a source"
-        {...form.getInputProps('source')}
-      />
-    </Box>
-  );
-}
-
-function DownloadStep({ form }: { form: UseFormReturnType<FormType> }) {
-  const libraryQuery = trpc.library.query.useQuery();
-
-  const libraryPath = libraryQuery.data?.path;
-
-  const intervalSelectData = availableIntervals.map((k) => ({ label: k, value: k }));
-
-  if (libraryQuery.isLoading) {
-    return <LoadingOverlay visible />;
-  }
-
-  const sanitizeMangaName = form.values.mangaTitle
-    .replaceAll(/[\\/<>:;"'|?!*{}#%&^+,~\s]/g, '_')
-    .replaceAll(/__+/g, '_')
-    .replaceAll(/^[_\-.]+|[_\-.]+$/g, '_');
-
-  const downloadPath = `${libraryPath}/${sanitizeMangaName}`;
-
-  return (
-    <Box>
-      <Stack>
-        <Select
-          data-autofocus
-          size="sm"
-          data={intervalSelectData}
-          label="Download Interval"
-          placeholder="Select an interval"
-          {...form.getInputProps('interval')}
-        />
-        <TextInput
-          label="Location"
-          size="sm"
-          disabled
-          icon={<IconFolderPlus size={18} stroke={1.5} />}
-          value={downloadPath}
-        />
-      </Stack>
-    </Box>
-  );
-}
-
-function SearchStep({ form }: { form: UseFormReturnType<FormType> }) {
-  const ctx = trpc.useContext();
-  type SearchResult = Awaited<ReturnType<typeof ctx.manga.search.fetch>>;
-
-  const [loading, setLoading] = useState(false);
-  const [searchResult, setSearchResult] = useState<SearchResult>([]);
-
-  const handleSearch = async () => {
-    form.validateField('query');
-    if (!form.isValid('query')) {
-      return;
-    }
-    setLoading(true);
-    const result = await ctx.manga.search.fetch({
-      keyword: form.values.query,
-      source: form.values.source,
-    });
-    setLoading(false);
-
-    if (result) {
-      setSearchResult(result);
-    }
-  };
-
-  return (
-    <>
-      <LoadingOverlay visible={loading} />
-
-      <TextInput
-        data-autofocus
-        mb="xl"
-        size="md"
-        radius="xl"
-        onKeyDown={getHotkeyHandler([['Enter', handleSearch]])}
-        icon={<IconSearch size={18} stroke={1.5} />}
-        rightSection={
-          <ActionIcon size={32} radius="xl" color="blue" variant="filled" onClick={handleSearch}>
-            <IconArrowRight size={18} stroke={1.5} />
-          </ActionIcon>
-        }
-        rightSectionWidth={42}
-        label="Search for a manga"
-        placeholder="Bleach"
-        {...form.getInputProps('query')}
-      />
-      <TextInput hidden {...form.getInputProps('mangaTitle')} />
-      <MangaSearchResult
-        items={searchResult}
-        onSelect={(selected) => {
-          if (selected) {
-            form.setFieldValue('mangaOrder', selected.order);
-            form.setFieldValue('mangaTitle', selected.title);
-          } else {
-            form.setFieldValue('mangaOrder', -1);
-            form.setFieldValue('mangaTitle', '');
-          }
-        }}
-      />
-    </>
-  );
-}
-
-function ReviewStep({ form }: { form: UseFormReturnType<FormType> }) {
-  const query = trpc.manga.detail.useQuery(
-    {
-      keyword: form.values.query,
-      source: form.values.source,
-      order: form.values.mangaOrder,
-    },
-    {
-      staleTime: Infinity,
-      enabled: !!form.values.query && !!form.values.source && !!form.values.mangaTitle && form.values.mangaOrder > -1,
-    },
-  );
-
-  const { classes } = useStyles();
-
-  const manga = query.data;
-
-  return (
-    <>
-      <LoadingOverlay visible={query.isLoading} />
-
-      {manga && (
-        <Grid>
-          <Grid.Col span={4}>
-            <Image
-              classNames={{
-                placeholder: classes.placeHolder,
-              }}
-              radius="lg"
-              sx={(theme) => ({
-                boxShadow: theme.shadows.xl,
-              })}
-              withPlaceholder
-              placeholder={
-                <Image
-                  radius="lg"
-                  sx={(theme) => ({
-                    width: 210,
-                    boxShadow: theme.shadows.xl,
-                  })}
-                  src="/cover-not-found.jpg"
-                  alt={manga.Name}
-                />
-              }
-              src={manga.Metadata.Cover}
-            />
-          </Grid.Col>
-          <Grid.Col span={8}>
-            <Divider mb="xs" labelPosition="center" label={<Title order={3}>{manga.Name}</Title>} />
-            {manga.Metadata.Synonyms && (
-              <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" />
-            {manga.Metadata.Status ? (
-              <Badge color="cyan" variant="filled" size="sm">
-                {manga.Metadata.Status}
-              </Badge>
-            ) : (
-              <Text size="sm">No status...</Text>
-            )}
-            <Divider variant="dashed" my="xs" label="Chapters" />
-            <Text>
-              There are &nbsp;
-              <Badge color="teal" variant="outline" size="lg">
-                {manga.Chapters?.length || 0}
-              </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" />
-            {manga.Metadata.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>
-            ) : (
-              <Text size="sm">No genres...</Text>
-            )}
-            <Divider variant="dashed" my="xs" label="Tags" />
-            {manga.Metadata.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>
-            ) : (
-              <Text size="sm">No tags...</Text>
-            )}
-          </Grid.Col>
-        </Grid>
-      )}
-    </>
-  );
-}
-
-function Form({ onClose }: { onClose: () => void }) {
-  const { classes } = useStyles();
-  const [active, setActive] = useState(0);
-  const [visible, setVisible] = useState(false);
-
-  const mutation = trpc.manga.add.useMutation();
-
-  const form = useForm({
-    validateInputOnBlur: ['source', 'query', 'interval'],
-    initialValues: {
-      source: '',
-      query: '',
-      mangaOrder: -1,
-      mangaTitle: '',
-      interval: '',
-    },
-    validate: zodResolver(schema),
-  });
-
-  const nextStep = () => {
-    if (active === 0) {
-      form.validateField('source');
-      if (!form.isValid('source')) {
-        return;
-      }
-    }
-    if (active === 1) {
-      form.validateField('mangaTitle');
-      form.validateField('mangaOrder');
-      if (!form.isValid('mangaOrder') || !form.isValid('mangaTitle')) {
-        return;
-      }
-    }
-    if (active === 2) {
-      form.validateField('interval');
-      if (!form.isValid('interval')) {
-        return;
-      }
-    }
-    form.clearErrors();
-    setActive((current) => (current < 3 ? current + 1 : current));
-  };
-
-  const prevStep = () => {
-    if (active === 0) {
-      setVisible(false);
-      onClose();
-      form.reset();
-    }
-    if (active === 1) {
-      form.setFieldValue('query', '');
-      form.setFieldValue('source', '');
-    }
-    if (active === 2) {
-      form.setFieldValue('query', '');
-      form.setFieldValue('mangaOrder', -1);
-      form.setFieldValue('mangaTitle', '');
-    }
-    if (active === 3) {
-      form.setFieldValue('interval', '');
-    }
-    setActive((current) => (current > 0 ? current - 1 : current));
-  };
-  return (
-    <form
-      className={classes.form}
-      onSubmit={form.onSubmit(async (values) => {
-        setVisible((v) => !v);
-        const { mangaOrder, mangaTitle, query, source, interval } = values;
-        try {
-          await mutation.mutateAsync({
-            keyword: query,
-            order: mangaOrder,
-            title: mangaTitle,
-            interval,
-            source,
-          });
-        } catch (err) {
-          showNotification({
-            icon: <IconX size={18} />,
-            color: 'red',
-            autoClose: true,
-            title: 'Manga',
-            message: (
-              <Text>
-                Failed to create add manga. <Code color="red">{`${err}`}</Code>
-              </Text>
-            ),
-          });
-
-          form.reset();
-          onClose();
-          setVisible((v) => !v);
-          return;
-        }
-        form.reset();
-        onClose();
-        setVisible((v) => !v);
-        showNotification({
-          icon: <IconCheck size={18} />,
-          color: 'teal',
-          autoClose: true,
-          title: 'Manga',
-          message: (
-            <Text>
-              <Code color="blue">{values.mangaTitle}</Code> is added to library
-            </Text>
-          ),
-        });
-      })}
-    >
-      <LoadingOverlay visible={visible} />
-      <Stepper
-        classNames={{
-          root: classes.stepper,
-          content: classes.stepBody,
-        }}
-        active={active}
-        onStepClick={setActive}
-        breakpoint="sm"
-        m="xl"
-      >
-        <Stepper.Step
-          label="Source"
-          description={form.values.source || 'Select a source'}
-          allowStepSelect={active > 0}
-          color={active > 0 ? 'teal' : 'blue'}
-        >
-          <SourceStep form={form} />
-        </Stepper.Step>
-        <Stepper.Step
-          label="Manga"
-          description={form.values.mangaTitle || 'Search for manga'}
-          allowStepSelect={active > 1}
-          color={active > 1 ? 'teal' : 'blue'}
-        >
-          <SearchStep form={form} />
-        </Stepper.Step>
-        <Stepper.Step
-          label="Download"
-          description={form.values.interval || 'Select an interval'}
-          allowStepSelect={active > 2}
-          color={active > 2 ? 'teal' : 'blue'}
-        >
-          <DownloadStep form={form} />
-        </Stepper.Step>
-
-        <Stepper.Completed>
-          <ReviewStep form={form} />
-        </Stepper.Completed>
-      </Stepper>
-
-      <Group position="right" className={classes.buttonGroup}>
-        <Button variant="default" onClick={prevStep}>
-          {active === 0 ? 'Cancel' : 'Back'}
-        </Button>
-        <Button hidden={active !== 3} type="submit">
-          Add
-        </Button>
-        <Button hidden={active === 3} onClick={nextStep}>
-          Next step
-        </Button>
-      </Group>
-    </form>
-  );
-}
-
-export function NewMangaCard({ onAdd }: { onAdd: () => void }) {
-  const { classes } = useStyles();
-  const modals = useModals();
-
-  const openCreateModal = () => {
-    const id = modals.openModal({
-      overflow: 'inside',
-      trapFocus: true,
-      size: 'xl',
-      closeOnClickOutside: false,
-      title: 'Add a new manga',
-      centered: true,
-      children: (
-        <Form
-          onClose={() => {
-            modals.closeModal(id);
-            onAdd();
-          }}
-        />
-      ),
-    });
-  };
-
-  return (
-    <Tooltip label="Add a new manga" position="bottom">
-      <Paper shadow="lg" p="md" radius="md" className={classes.card} onClick={openCreateModal}>
-        <IconPlus color="darkblue" opacity={0.5} size={96} />
-      </Paper>
-    </Tooltip>
-  );
-}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 1ad9173..7875bd6 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,8 +1,8 @@
 import { Grid, LoadingOverlay } from '@mantine/core';
+import { AddManga } from '../components/addManga';
 
 import { EmptyPrompt } from '../components/emptyPrompt';
 import { MangaCard } from '../components/mangaCard';
-import { NewMangaCard } from '../components/newMangaCard';
 import { trpc } from '../utils/trpc';
 
 export default function IndexPage() {
@@ -37,7 +37,7 @@ export default function IndexPage() {
   return (
     <Grid justify="flex-start">
       <Grid.Col span="content">
-        <NewMangaCard
+        <AddManga
           onAdd={() => {
             mangaQuery.refetch();
           }}