From 19920fb507a8e23be04c7a528bc704ba84aded5b Mon Sep 17 00:00:00 2001 From: glax Date: Thu, 4 Sep 2025 21:48:05 +0200 Subject: [PATCH] lint and prettier --- tranga-website/src/App.tsx | 13 +- .../src/Components/Inputs/loadingBorder.css | 23 +-- .../src/Components/Mangas/MangaCard.css | 2 +- .../src/Components/Mangas/MangaCard.tsx | 18 +- .../Components/Mangas/MangaConnectorIcon.tsx | 12 +- .../src/Components/Mangas/MangaList.tsx | 10 +- tranga-website/src/MangaDetail.tsx | 146 +++++++++++---- tranga-website/src/MangaDownloadDrawer.tsx | 166 +++++++++++------- tranga-website/src/Search.tsx | 84 +++++---- .../src/contexts/FileLibraryContext.tsx | 16 +- 10 files changed, 329 insertions(+), 161 deletions(-) diff --git a/tranga-website/src/App.tsx b/tranga-website/src/App.tsx index f31aa85..b5c3d3c 100644 --- a/tranga-website/src/App.tsx +++ b/tranga-website/src/App.tsx @@ -6,9 +6,9 @@ import { useEffect, useState } from 'react' import { ApiConfig } from './api/http-client.ts' import MangaProvider from './contexts/MangaContext.tsx' import MangaList from './Components/Mangas/MangaList.tsx' -import {Search} from './Search.tsx' +import { Search } from './Search.tsx' import MangaConnectorProvider from './contexts/MangaConnectorContext.tsx' -import LibraryProvider from "./contexts/FileLibraryContext.tsx"; +import LibraryProvider from './contexts/FileLibraryContext.tsx' export default function App() { const [apiUri, setApiUri] = useState( @@ -35,8 +35,13 @@ export default function App() { - setSearchOpen(true)} /> - + setSearchOpen(true)} + /> + diff --git a/tranga-website/src/Components/Inputs/loadingBorder.css b/tranga-website/src/Components/Inputs/loadingBorder.css index 277b4c7..55855f4 100644 --- a/tranga-website/src/Components/Inputs/loadingBorder.css +++ b/tranga-website/src/Components/Inputs/loadingBorder.css @@ -1,10 +1,13 @@ @keyframes spin { - from {transform: translate(-50%, -50%) rotate(0);} - to {transform: translate(-50%, -50%) rotate(360deg);} + from { + transform: translate(-50%, -50%) rotate(0); + } + to { + transform: translate(-50%, -50%) rotate(360deg); + } } - -.t-loadable[aria-disabled="true"] { +.t-loadable[aria-disabled='true'] { --border-radius: 5px; --border-size: 2px; --border-bg: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); @@ -12,7 +15,7 @@ position: relative; overflow: hidden; border-radius: var(--border-radius); - border: none; + border: none; z-index: 0; &::before { @@ -29,10 +32,10 @@ z-index: -1 !important; animation: spin 5s linear infinite; } - &--reverse::before{ + &--reverse::before { animation-direction: reverse; } - &::after{ + &::after { content: ''; position: absolute; inset: var(--border-size); @@ -42,10 +45,10 @@ } } -.t-loadable[aria-disabled="true"]:has(input)::after { +.t-loadable[aria-disabled='true']:has(input)::after { background: black; } -.t-loadable[aria-disabled="true"]:is(button) { +.t-loadable[aria-disabled='true']:is(button) { color: var(--joy-palette-text-primary); -} \ No newline at end of file +} diff --git a/tranga-website/src/Components/Mangas/MangaCard.css b/tranga-website/src/Components/Mangas/MangaCard.css index 5653c1e..ed19680 100644 --- a/tranga-website/src/Components/Mangas/MangaCard.css +++ b/tranga-website/src/Components/Mangas/MangaCard.css @@ -13,7 +13,7 @@ .manga-card-cover-blur { background: linear-gradient( 150deg, - rgba(245, 169, 184, 0.80) 50%, + rgba(245, 169, 184, 0.8) 50%, rgba(91, 206, 250, 0.3) ); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); diff --git a/tranga-website/src/Components/Mangas/MangaCard.tsx b/tranga-website/src/Components/Mangas/MangaCard.tsx index c38d5b0..8b42b8a 100644 --- a/tranga-website/src/Components/Mangas/MangaCard.tsx +++ b/tranga-website/src/Components/Mangas/MangaCard.tsx @@ -13,23 +13,31 @@ import { Manga, MinimalManga } from '../../api/data-contracts.ts' import { ApiContext } from '../../contexts/ApiContext.tsx' export default function MangaCard(props: MangaCardProps): ReactNode { - const Api = useContext(ApiContext); + const Api = useContext(ApiContext) return ( ( - + ))} className={'manga-card-badge'} > - + - + - {props.manga?.name ?? ( + {props.manga?.name ?? ( {stringWithRandomLength()} )} diff --git a/tranga-website/src/Components/Mangas/MangaConnectorIcon.tsx b/tranga-website/src/Components/Mangas/MangaConnectorIcon.tsx index 2553fb1..2b5de12 100644 --- a/tranga-website/src/Components/Mangas/MangaConnectorIcon.tsx +++ b/tranga-website/src/Components/Mangas/MangaConnectorIcon.tsx @@ -14,20 +14,20 @@ export default function MangaConnectorIcon({ const [connector, setConnector] = useState( mangaConnector - ); + ) useEffect(() => { if (mangaConnector) { setConnector(mangaConnector) - return; + return } - if (!mangaConnectorName) return; + if (!mangaConnectorName) return Api.mangaConnectorDetail(mangaConnectorName).then((result) => { if (result.ok) { setConnector(result.data) } - }); - }, [Api, mangaConnectorName, mangaConnector]); + }) + }, [Api, mangaConnectorName, mangaConnector]) return ( @@ -35,7 +35,7 @@ export default function MangaConnectorIcon({ src={connector?.iconUrl ?? '/blahaj.png'} width={'25px'} height={'25px'} - style={{borderRadius: '100%'}} + style={{ borderRadius: '100%' }} /> ) diff --git a/tranga-website/src/Components/Mangas/MangaList.tsx b/tranga-website/src/Components/Mangas/MangaList.tsx index 6926653..b74d5d4 100644 --- a/tranga-website/src/Components/Mangas/MangaList.tsx +++ b/tranga-website/src/Components/Mangas/MangaList.tsx @@ -1,6 +1,6 @@ import { Stack } from '@mui/joy' import './MangaList.css' -import {Dispatch, ReactNode, useContext, useEffect, useState} from 'react' +import { Dispatch, ReactNode, useContext, useEffect, useState } from 'react' import { Manga, MangaReleaseStatus, @@ -56,7 +56,13 @@ export function MangaCardList(props: MangaCardListProps): ReactNode { > {props.children} {props.manga.map((m) => ( - { if(props.mangaOnClick) props.mangaOnClick(m); } } /> + { + if (props.mangaOnClick) props.mangaOnClick(m) + }} + /> ))} ) diff --git a/tranga-website/src/MangaDetail.tsx b/tranga-website/src/MangaDetail.tsx index 945ea91..7da15bf 100644 --- a/tranga-website/src/MangaDetail.tsx +++ b/tranga-website/src/MangaDetail.tsx @@ -1,59 +1,135 @@ -import {Manga} from "./api/data-contracts.ts"; -import {Dispatch, ReactNode, useContext, useEffect, useState} from "react"; -import {Card, CardCover, Chip, Modal, ModalDialog, Stack, Typography, useTheme} from "@mui/joy"; -import ModalClose from "@mui/joy/ModalClose"; -import {ApiContext} from "./contexts/ApiContext.tsx"; -import {MangaContext} from "./contexts/MangaContext.tsx"; +import { Manga } from './api/data-contracts.ts' +import { Dispatch, ReactNode, useContext, useEffect, useState } from 'react' +import { + Card, + CardCover, + Chip, + Modal, + ModalDialog, + Stack, + Typography, + useTheme, +} from '@mui/joy' +import ModalClose from '@mui/joy/ModalClose' +import { ApiContext } from './contexts/ApiContext.tsx' +import { MangaContext } from './contexts/MangaContext.tsx' import './Components/Mangas/MangaCard.css' -import MarkdownPreview from "@uiw/react-markdown-preview"; +import MarkdownPreview from '@uiw/react-markdown-preview' -export default function MangaDetail (props: MangaDetailProps) : ReactNode { - const Api = useContext(ApiContext); - const Manga = useContext(MangaContext); +export default function MangaDetail(props: MangaDetailProps): ReactNode { + const Api = useContext(ApiContext) + const Manga = useContext(MangaContext) const [manga, setManga] = useState(props.manga) useEffect(() => { - if (!props.open) return; - if (!props.mangaKey) return; - if (props.manga != undefined) return; - Manga.GetManga(props.mangaKey).then(setManga); - }, [Api, props]); - - const theme = useTheme(); - + if (!props.open) return + if (!props.mangaKey) return + if (props.manga != undefined) return + Manga.GetManga(props.mangaKey).then(setManga) + }, [Api, Manga, props]) + + const theme = useTheme() + return ( props.setOpen(false)}> -
- {manga?.name} +
+ + {manga?.name} + - + - + - {manga?.tags.map(tag => {tag})} - {manga?.authors.map(author => {author.name} )} - {manga?.links.map(link => {link.provider})} + {manga?.tags.map((tag) => ( + + {tag} + + ))} + {manga?.authors.map((author) => ( + + {author.name} + + ))} + {manga?.links.map((link) => ( + + {link.provider} + + ))} - + - + {props.actions}
- - ); + + ) } export interface MangaDetailProps { - manga?: Manga; - mangaKey?: string; - open: boolean; - setOpen: Dispatch; - actions?: ReactNode[]; -} \ No newline at end of file + manga?: Manga + mangaKey?: string + open: boolean + setOpen: Dispatch + actions?: ReactNode[] +} diff --git a/tranga-website/src/MangaDownloadDrawer.tsx b/tranga-website/src/MangaDownloadDrawer.tsx index 23f2287..c2f7511 100644 --- a/tranga-website/src/MangaDownloadDrawer.tsx +++ b/tranga-website/src/MangaDownloadDrawer.tsx @@ -1,82 +1,130 @@ -import {Dispatch, ReactNode, useContext, useEffect, useState} from "react"; -import {Box, Card, Checkbox, Drawer, List, ListItem, Option, Select, Stack, Typography} from "@mui/joy"; -import ModalClose from "@mui/joy/ModalClose"; -import {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 MangaConnectorIcon from "./Components/Mangas/MangaConnectorIcon.tsx"; -import TButton from "./Components/Inputs/TButton.tsx"; +import { Dispatch, ReactNode, useContext, useEffect, useState } from 'react' +import { + Box, + Card, + Checkbox, + Drawer, + List, + ListItem, + Option, + Select, + Stack, + Typography, +} from '@mui/joy' +import ModalClose from '@mui/joy/ModalClose' +import { 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 MangaConnectorIcon from './Components/Mangas/MangaConnectorIcon.tsx' +import TButton from './Components/Inputs/TButton.tsx' -export default function MangaDownloadDrawer (props: MangaDownloadDrawerProps) : ReactNode{ - const Api = useContext(ApiContext); - const Manga = useContext(MangaContext); - const Libraries = useContext(FileLibraryContext); +export default function MangaDownloadDrawer( + props: MangaDownloadDrawerProps +): ReactNode { + const Api = useContext(ApiContext) + const Manga = useContext(MangaContext) + const Libraries = useContext(FileLibraryContext) const [manga, setManga] = useState(props.manga) - const [downloadFromMap, setDownloadFromMap] = useState>(new Map()) + const [downloadFromMap, setDownloadFromMap] = useState< + Map + >(new Map()) useEffect(() => { - if (!props.open) return; - if (!props.mangaKey) return; - if (props.manga != undefined) return; - Manga.GetManga(props.mangaKey).then(setManga); - }, [Api, props]); + if (!props.open) return + if (!props.mangaKey) return + if (props.manga != undefined) return + Manga.GetManga(props.mangaKey).then(setManga) + }, [Api, Manga, props]) useEffect(() => { - const newMap = new Map(); - manga?.mangaConnectorIds.forEach(id => { - newMap.set(id, id.useForDownload); + const newMap = new Map() + manga?.mangaConnectorIds.forEach((id) => { + newMap.set(id, id.useForDownload) }) - setDownloadFromMap(newMap); - }, [manga]); - - const setDownload = () : Promise => { - if (!manga) return Promise.reject(); + setDownloadFromMap(newMap) + }, [manga]) + + const setDownload = (): Promise => { + if (!manga) return Promise.reject() downloadFromMap.forEach(async (download, id) => { - const result = await Api.mangaSetAsDownloadFromCreate(manga?.key, id.mangaConnectorName, download); - if (!result.ok) - return Promise.reject(); - }); - return Promise.resolve(); + const result = await Api.mangaSetAsDownloadFromCreate( + manga?.key, + id.mangaConnectorName, + download + ) + if (!result.ok) return Promise.reject() + }) + return Promise.resolve() } - + return ( - props.setOpen(false)} - anchor="left" - size="md"> - + props.setOpen(false)} + anchor="left" + size="md" + > + - Download - {manga?.name} - + Download + {manga?.name} + - Select a Library to Download to: - + {Libraries.map((l) => ( + + ))} - Select which connectors you want to download this Manga from: + + Select which connectors you want to download this + Manga from: + - {manga?.mangaConnectorIds.map(id => ( + {manga?.mangaConnectorIds.map((id) => ( - downloadFromMap.set(id, c.target.checked)} + onChange={(c) => + downloadFromMap.set( + id, + c.target.checked + ) + } label={ -
- - {id.mangaConnectorName} -
- } +
+ + + {id.mangaConnectorName} + +
+ } /> ))} - Download All + + Download All + @@ -84,8 +132,8 @@ export default function MangaDownloadDrawer (props: MangaDownloadDrawerProps) : } export interface MangaDownloadDrawerProps { - manga?: Manga; - mangaKey?: string; - open: boolean; - setOpen: Dispatch; -} \ No newline at end of file + manga?: Manga + mangaKey?: string + open: boolean + setOpen: Dispatch +} diff --git a/tranga-website/src/Search.tsx b/tranga-website/src/Search.tsx index ed0d9ba..e6b49a3 100644 --- a/tranga-website/src/Search.tsx +++ b/tranga-website/src/Search.tsx @@ -1,4 +1,4 @@ -import {Dispatch, ReactNode, useContext, useEffect, useState} from 'react' +import { Dispatch, ReactNode, useContext, useEffect, useState } from 'react' import { Button, List, @@ -17,9 +17,9 @@ import MangaConnectorIcon from './Components/Mangas/MangaConnectorIcon.tsx' import TInput from './Components/Inputs/TInput.tsx' import { ApiContext } from './contexts/ApiContext.tsx' import { MangaCardList } from './Components/Mangas/MangaList.tsx' -import {MangaConnector, MinimalManga} from './api/data-contracts.ts' -import MangaDetail from "./MangaDetail.tsx"; -import MangaDownloadDrawer from "./MangaDownloadDrawer.tsx"; +import { MangaConnector, MinimalManga } from './api/data-contracts.ts' +import MangaDetail from './MangaDetail.tsx' +import MangaDownloadDrawer from './MangaDownloadDrawer.tsx' export function Search(props: SearchModalProps): ReactNode { const Api = useContext(ApiContext) @@ -27,10 +27,10 @@ export function Search(props: SearchModalProps): ReactNode { useEffect(() => { if (props.open) { - setSelectedConnector(undefined); - setSearchResults([]); + setSelectedConnector(undefined) + setSearchResults([]) } - }, [open]); + }, [props]) const [selectedConnector, setSelectedConnector] = useState() const [searchResults, setSearchResults] = useState([]) @@ -42,46 +42,52 @@ export function Search(props: SearchModalProps): ReactNode { setSearchResults([]) if (isUrl(value)) { try { - let result = await Api.searchUrlCreate(value); + const result = await Api.searchUrlCreate(value) if (result.ok) { setSearchResults([result.data]) return Promise.resolve() } else return Promise.reject() } catch (reason) { - return await Promise.reject(reason); + return await Promise.reject(reason) } } else { if (!selectedConnector) return Promise.reject() try { - let result2 = await Api.searchDetail(selectedConnector?.key, value); + const result2 = await Api.searchDetail( + selectedConnector?.key, + value + ) if (result2.ok) { setSearchResults(result2.data) return Promise.resolve() } else return Promise.reject() } catch (reason1) { - return await Promise.reject(reason1); + return await Promise.reject(reason1) } } } - - const [selectedManga, setSelectedManga] = useState(undefined); - const [mangaDetailOpen, setMangaDetailOpen] = useState(false); - const [mangaDownloadDrawerOpen, setMangaDownloadDrawerOpen] = useState(false); - + + const [selectedManga, setSelectedManga] = useState< + MinimalManga | undefined + >(undefined) + const [mangaDetailOpen, setMangaDetailOpen] = useState(false) + const [mangaDownloadDrawerOpen, setMangaDownloadDrawerOpen] = + useState(false) + function openMangaDetail(manga: MinimalManga) { - setSelectedManga(manga); - setMangaDetailOpen(true); + setSelectedManga(manga) + setMangaDetailOpen(true) } - + function openMangaDownloadDrawer() { - setMangaDetailOpen(false); - setMangaDownloadDrawerOpen(true); + setMangaDetailOpen(false) + setMangaDownloadDrawerOpen(true) } return ( props.setOpen(false)}> - - + + @@ -127,19 +133,33 @@ export function Search(props: SearchModalProps): ReactNode { /> - - Download - ]} /> - + + + Download + , + ]} + /> + ) } export interface SearchModalProps { - open: boolean; - setOpen: Dispatch; + open: boolean + setOpen: Dispatch } function isUrl(str: string): boolean { @@ -149,4 +169,4 @@ function isUrl(str: string): boolean { } catch { return false } -} \ No newline at end of file +} diff --git a/tranga-website/src/contexts/FileLibraryContext.tsx b/tranga-website/src/contexts/FileLibraryContext.tsx index 8a802ed..774e83e 100644 --- a/tranga-website/src/contexts/FileLibraryContext.tsx +++ b/tranga-website/src/contexts/FileLibraryContext.tsx @@ -5,12 +5,16 @@ import { useEffect, useState, } from 'react' -import {FileLibrary} from '../api/data-contracts.ts' +import { FileLibrary } from '../api/data-contracts.ts' import { ApiContext } from './ApiContext.tsx' -export const FileLibraryContext = createContext([]); +export const FileLibraryContext = createContext([]) -export default function LibraryProvider({ children }: { children: ReactNode }) : ReactNode { +export default function LibraryProvider({ + children, +}: { + children: ReactNode +}): ReactNode { const Api = useContext(ApiContext) const [state, setState] = useState([]) @@ -22,8 +26,6 @@ export default function LibraryProvider({ children }: { children: ReactNode }) : } }) }, [Api]) - - return ( - {children} - ); + + return {children} }