From e2926cddbc04a19a807b85c845a30bc4fc3baa56 Mon Sep 17 00:00:00 2001 From: glax Date: Fri, 5 Sep 2025 16:31:16 +0200 Subject: [PATCH] Manga Remove button --- tranga-website/src/App.tsx | 28 ++++++++++++++--- .../Mangas/Detail/ChaptersSection.tsx | 0 .../Mangas/Detail/DownloadSection.tsx | 31 +++++++++---------- .../Components/Mangas/Detail/MangaDetail.tsx | 27 +++++++++------- tranga-website/src/main.tsx | 2 +- 5 files changed, 53 insertions(+), 35 deletions(-) create mode 100644 tranga-website/src/Components/Mangas/Detail/ChaptersSection.tsx diff --git a/tranga-website/src/App.tsx b/tranga-website/src/App.tsx index 1a33413..e2a7b53 100644 --- a/tranga-website/src/App.tsx +++ b/tranga-website/src/App.tsx @@ -1,8 +1,8 @@ import Sheet from '@mui/joy/Sheet'; import Header from './Header.tsx'; import Settings from './Components/Settings/Settings.tsx'; -import ApiProvider from './contexts/ApiContext.tsx'; -import { useEffect, useState } from 'react'; +import ApiProvider, { ApiContext } from './contexts/ApiContext.tsx'; +import { useContext, useEffect, useState } from 'react'; import { ApiConfig } from './api/http-client.ts'; import MangaProvider from './contexts/MangaContext.tsx'; import MangaList from './Components/Mangas/MangaList.tsx'; @@ -10,8 +10,9 @@ import { Search } from './Search.tsx'; import MangaConnectorProvider from './contexts/MangaConnectorContext.tsx'; import LibraryProvider from './contexts/FileLibraryContext.tsx'; import MangaDetail from './Components/Mangas/Detail/MangaDetail.tsx'; +import TButton from './Components/Inputs/TButton.tsx'; -export default function App() { +export function App() { const [apiUri, setApiUri] = useState( localStorage.getItem('apiUri') ?? window.location.href.substring(0, window.location.href.lastIndexOf('/')) + '/api' @@ -21,16 +22,30 @@ export default function App() { setApiConfig({ baseUrl: apiUri }); }, [apiUri]); + const Api = useContext(ApiContext); + const [searchOpen, setSearchOpen] = useState(false); const [downloadDrawerOpen, setDownloadDrawerOpen] = useState(false); const [selectedMangaKey, setSelectedMangaKey] = useState(); const [downloadSectionOpen, setDownloadSectionOpen] = useState(false); + function openMangaDownloadDrawer(mangaKey: string, downloadSectionOpen?: boolean) { setDownloadDrawerOpen(true); setSelectedMangaKey(mangaKey); setDownloadSectionOpen(downloadSectionOpen ?? false); } + const removeManga = async (mangaKey?: string): Promise => { + if (!mangaKey) return Promise.reject(); + try { + let r = await Api.mangaDelete(mangaKey); + if (r.ok) return Promise.resolve(); + else return Promise.reject(); + } catch (reason) { + return await Promise.reject(reason); + } + }; + return ( @@ -54,8 +69,11 @@ export default function App() { open={downloadDrawerOpen} setOpen={setDownloadDrawerOpen} mangaKey={selectedMangaKey} - downloadOpen={downloadSectionOpen} - /> + downloadOpen={downloadSectionOpen}> + removeManga(selectedMangaKey)}> + Remove + + diff --git a/tranga-website/src/Components/Mangas/Detail/ChaptersSection.tsx b/tranga-website/src/Components/Mangas/Detail/ChaptersSection.tsx new file mode 100644 index 0000000..e69de29 diff --git a/tranga-website/src/Components/Mangas/Detail/DownloadSection.tsx b/tranga-website/src/Components/Mangas/Detail/DownloadSection.tsx index 6486a8a..2cb273d 100644 --- a/tranga-website/src/Components/Mangas/Detail/DownloadSection.tsx +++ b/tranga-website/src/Components/Mangas/Detail/DownloadSection.tsx @@ -5,20 +5,21 @@ import { Box, Checkbox, List, - ListItem, Option, + ListItem, + Option, Select, Stack, - Typography -} from "@mui/joy"; -import {ReactNode, useContext} from "react"; -import TButton from "../../Inputs/TButton.tsx"; -import MangaConnectorIcon from "../MangaConnectorIcon.tsx"; -import {FileLibrary, Manga, MangaConnectorId} from "../../../api/data-contracts.ts"; -import {FileLibraryContext} from "../../../contexts/FileLibraryContext.tsx"; + Typography, +} from '@mui/joy'; +import { ReactNode, useContext } from 'react'; +import TButton from '../../Inputs/TButton.tsx'; +import MangaConnectorIcon from '../MangaConnectorIcon.tsx'; +import { FileLibrary, Manga, MangaConnectorId } from '../../../api/data-contracts.ts'; +import { FileLibraryContext } from '../../../contexts/FileLibraryContext.tsx'; -export default function DownloadSection (props: DownloadSectionProps) : ReactNode { +export default function DownloadSection(props: DownloadSectionProps): ReactNode { const Libraries = useContext(FileLibraryContext); - + return ( @@ -64,13 +65,9 @@ export default function DownloadSection (props: DownloadSectionProps) : ReactNod gap: 5, }}> - - {id.mangaConnectorName} - + {id.mangaConnectorName} } /> @@ -91,4 +88,4 @@ export interface DownloadSectionProps { onLibraryChange: (_: any, value: string | null) => void; downloadFromMap: Map; setDownload: () => Promise; -} \ No newline at end of file +} diff --git a/tranga-website/src/Components/Mangas/Detail/MangaDetail.tsx b/tranga-website/src/Components/Mangas/Detail/MangaDetail.tsx index 5c65362..633ef14 100644 --- a/tranga-website/src/Components/Mangas/Detail/MangaDetail.tsx +++ b/tranga-website/src/Components/Mangas/Detail/MangaDetail.tsx @@ -1,21 +1,12 @@ import { Dispatch, ReactNode, useContext, useEffect, useState } from 'react'; -import { - Card, - CardCover, - Chip, - Modal, - ModalDialog, - Stack, - Typography, - useTheme, -} from '@mui/joy'; +import { Card, CardCover, Chip, Modal, ModalDialog, Stack, Typography, useTheme } from '@mui/joy'; import ModalClose from '@mui/joy/ModalClose'; import { FileLibrary, Manga, MangaConnectorId } from '../../../api/data-contracts.ts'; import { ApiContext } from '../../../contexts/ApiContext.tsx'; import { MangaContext } from '../../../contexts/MangaContext.tsx'; import { FileLibraryContext } from '../../../contexts/FileLibraryContext.tsx'; import MarkdownPreview from '@uiw/react-markdown-preview'; -import DownloadSection from "./DownloadSection.tsx"; +import DownloadSection from './DownloadSection.tsx'; export default function MangaDetail(props: MangaDetailProps): ReactNode { const Api = useContext(ApiContext); @@ -139,9 +130,20 @@ export default function MangaDetail(props: MangaDetailProps): ReactNode { overflowY: 'auto', }} /> + + {props.children} + - + ); @@ -153,4 +155,5 @@ export interface MangaDetailProps { open: boolean; setOpen: Dispatch; downloadOpen?: boolean; + children?: ReactNode; } diff --git a/tranga-website/src/main.tsx b/tranga-website/src/main.tsx index 9a04fa5..ed93403 100644 --- a/tranga-website/src/main.tsx +++ b/tranga-website/src/main.tsx @@ -1,6 +1,6 @@ import { createRoot } from 'react-dom/client'; import './index.css'; -import App from './App.tsx'; +import { App } from './App.tsx'; // @ts-expect-error font import '@fontsource/inter'; import { CssVarsProvider } from '@mui/joy/styles';