mangamochi/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: mangamochi:5fc5f4676df94a1062fd82f13f47106bbc6bf070
Branches Tags
mangamochi:main
mangamochi:refactor
mangamochi:feature/improvements
mangamochi:fix/manga-dex
mangamochi:feature/security
mangamochi:feature/rework
..
compare: mangamochi:0fc2378cfa90d1de00a9bcc74a17a368969beb92
Branches Tags
mangamochi:main
mangamochi:refactor
mangamochi:feature/improvements
mangamochi:fix/manga-dex
mangamochi:feature/security
mangamochi:feature/rework

No commits in common. "5fc5f4676df94a1062fd82f13f47106bbc6bf070" and "0fc2378cfa90d1de00a9bcc74a17a368969beb92" have entirely different histories.
5fc5f4676d ... 0fc2378cfa

6 changed files with 58 additions and 198 deletions
Show Stats Expand all files Collapse all files

5
src/api/generated/api.schemas.ts
View File

@ -117,7 +117,6 @@ export interface ContentProviderDTO {
name: string; name: string;
url?: string; url?: string;
active?: boolean; active?: boolean;
supportsContentFetch?: boolean;
} }
export interface ContentProviderListDTO { export interface ContentProviderListDTO {
@ -215,9 +214,9 @@ export interface PageMangaImportJobDTO {
number?: number; number?: number;
pageable?: PageableObject; pageable?: PageableObject;
numberOfElements?: number; numberOfElements?: number;
sort?: SortObject;
first?: boolean; first?: boolean;
last?: boolean; last?: boolean;
sort?: SortObject;
empty?: boolean; empty?: boolean;
} }
@ -278,9 +277,9 @@ export interface PageMangaListDTO {
number?: number; number?: number;
pageable?: PageableObject; pageable?: PageableObject;
numberOfElements?: number; numberOfElements?: number;
sort?: SortObject;
first?: boolean; first?: boolean;
last?: boolean; last?: boolean;
sort?: SortObject;
empty?: boolean; empty?: boolean;
} }

56
src/features/admin/components/FailedImportJobs.tsx
View File

@ -18,8 +18,6 @@ import {
DialogTitle, DialogTitle,
} from "@/components/ui/dialog.tsx"; } from "@/components/ui/dialog.tsx";
import { Input } from "@/components/ui/input.tsx"; import { Input } from "@/components/ui/input.tsx";
import { Skeleton } from "@/components/ui/skeleton.tsx";
import { Spinner } from "@/components/ui/spinner.tsx";
import { import {
Select, Select,
SelectContent, SelectContent,
@ -48,7 +46,7 @@ export const FailedImportJobs = () => {
const [errorDialogOpen, setErrorDialogOpen] = useState(false); const [errorDialogOpen, setErrorDialogOpen] = useState(false);
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const { data, isPending } = useGetMangaImportJobs({ const { data } = useGetMangaImportJobs({
status: statusFilter, status: statusFilter,
searchQuery: searchQuery, searchQuery: searchQuery,
page: currentPage - 1, page: currentPage - 1,
@ -56,41 +54,6 @@ export const FailedImportJobs = () => {
}); });
const importJobsData = data?.data; const importJobsData = data?.data;
if (isPending) {
return (
<div className="space-y-5">
<div>
<Skeleton className="h-7 w-52" />
<Skeleton className="mt-2 h-4 w-72" />
</div>
<div className="grid grid-cols-2 gap-4 sm:grid-cols-5">
{Array.from({ length: 5 }).map((_, i) => (
<Card key={i} className="p-4">
<Skeleton className="h-4 w-20" />
<Skeleton className="mt-2 h-8 w-16" />
</Card>
))}
</div>
<div className="flex flex-wrap items-center gap-4">
<div className="relative flex-1 min-w-[200px]">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Skeleton className="h-10 w-full pl-10" />
</div>
<Skeleton className="h-10 w-[150px]" />
</div>
<Card>
<div className="p-6 flex flex-col items-center justify-center">
<Spinner className="size-12 text-primary" />
<Skeleton className="mt-4 h-4 w-48" />
</div>
</Card>
</div>
);
}
const formatDate = (dateString: string) => { const formatDate = (dateString: string) => {
return new Date(dateString).toLocaleString("en-US", { return new Date(dateString).toLocaleString("en-US", {
year: "numeric", year: "numeric",
@ -365,6 +328,23 @@ export const FailedImportJobs = () => {
> >
Close Close
</Button> </Button>
{/*<Button*/}
{/* variant="default"*/}
{/* onClick={() => {*/}
{/* // Mock retry action*/}
{/* setJobs((prev) =>*/}
{/* prev.map((j) =>*/}
{/* j.id === selectedJob.id*/}
{/* ? { ...j, status: "PENDING" as ImportStatus, updatedAt: new Date().toISOString() }*/}
{/* : j*/}
{/* )*/}
{/* )*/}
{/* setErrorDialogOpen(false)*/}
{/* }}*/}
{/*>*/}
{/* <RefreshCw className="mr-2 h-4 w-4" />*/}
{/* Retry Import*/}
{/*</Button>*/}
</div> </div>
</div> </div>
)} )}

53
src/features/admin/components/IngestReview.tsx
View File

@ -2,60 +2,9 @@ import {Card} from "@/components/ui/card.tsx";
import {AlertCircle} from "lucide-react"; import {AlertCircle} from "lucide-react";
import {useGetMangaIngestReviews} from "@/api/generated/manga-ingest-review/manga-ingest-review.ts"; import {useGetMangaIngestReviews} from "@/api/generated/manga-ingest-review/manga-ingest-review.ts";
import {ImportReviewCard} from "@/features/admin/components/ImportReviewCard.tsx"; import {ImportReviewCard} from "@/features/admin/components/ImportReviewCard.tsx";
import {Skeleton} from "@/components/ui/skeleton.tsx";
import {Spinner} from "@/components/ui/spinner.tsx";
export const IngestReview = () => { export const IngestReview = () => {
const { data: importReviewData, queryKey, isPending } = useGetMangaIngestReviews(); const { data: importReviewData, queryKey } = useGetMangaIngestReviews();
if (isPending) {
return (
<div className="space-y-6">
<div>
<Skeleton className="h-7 w-40" />
<Skeleton className="mt-2 h-4 w-72" />
</div>
<div className="flex flex-col items-center justify-center py-12">
<Spinner className="size-12 text-primary" />
<Skeleton className="mt-4 h-4 w-48" />
</div>
{Array.from({ length: 2 }).map((_, i) => (
<Card key={i} className="p-4">
<div className="space-y-4">
<div className="flex items-start justify-between">
<div className="flex-1 space-y-2">
<Skeleton className="h-5 w-48" />
<Skeleton className="h-4 w-32" />
</div>
</div>
<Skeleton className="h-16 w-full rounded-md" />
<div className="space-y-3">
<div className="flex flex-row gap-4 w-full">
<div className="w-full space-y-2">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-10 w-full" />
</div>
<div className="w-full space-y-2">
<Skeleton className="h-4 w-32" />
<Skeleton className="h-10 w-full" />
</div>
</div>
<div className="flex gap-2">
<Skeleton className="h-10 flex-1" />
<Skeleton className="h-10 w-10" />
</div>
</div>
</div>
</Card>
))}
</div>
);
}
return (<div className="space-y-6"> return (<div className="space-y-6">
<div> <div>

61
src/features/admin/components/ProviderManager.tsx
View File

@ -7,7 +7,6 @@ import {
import { Badge } from "@/components/ui/badge.tsx"; import { Badge } from "@/components/ui/badge.tsx";
import { Button } from "@/components/ui/button.tsx"; import { Button } from "@/components/ui/button.tsx";
import { Card } from "@/components/ui/card.tsx"; import { Card } from "@/components/ui/card.tsx";
import {toast} from "sonner";
export const ProviderManager = () => { export const ProviderManager = () => {
const { data } = useGetContentProviders(); const { data } = useGetContentProviders();
@ -16,26 +15,12 @@ export const ProviderManager = () => {
const { const {
mutate: mutateFetchContentProviderMangas, mutate: mutateFetchContentProviderMangas,
isPending: isPendingFetchContentProviderMangas, isPending: isPendingFetchContentProviderMangas,
} = useFetchContentProviderMangas({ } = useFetchContentProviderMangas();
mutation: {
onSuccess: () => {
toast.success("Content Provider mangas update queued successfully!");
},
},
});
const { const {
mutate: mutateFetchAllContentProviderMangas, mutate: mutateFetchAllContentProviderMangas,
isPending: isPendingFetchAllContentProviderMangas, isPending: isPendingFetchAllContentProviderMangas,
} = useFetchAllContentProviderMangas( } = useFetchAllContentProviderMangas();
{
mutation: {
onSuccess: () => {
toast.success("All Content Provider mangas update queued successfully!");
},
},
}
);
const activeCount = providers?.filter((p) => p.active).length; const activeCount = providers?.filter((p) => p.active).length;
@ -119,28 +104,26 @@ export const ProviderManager = () => {
</p> </p>
</div> </div>
{provider.supportsContentFetch && ( <Button
<Button variant="outline"
variant="outline" size="sm"
size="sm" onClick={() =>
onClick={() => mutateFetchContentProviderMangas({
mutateFetchContentProviderMangas({ providerId: provider?.id ?? -1,
providerId: provider?.id ?? -1, })
}) }
} disabled={
disabled={ !provider.active || isPendingFetchContentProviderMangas
!provider.active || isPendingFetchContentProviderMangas }
} className="gap-2 shrink-0"
className="gap-2 shrink-0" >
> {isPendingFetchContentProviderMangas ? (
{isPendingFetchContentProviderMangas ? ( <Loader2 className="h-3 w-3 animate-spin" />
<Loader2 className="h-3 w-3 animate-spin" /> ) : (
) : ( <RefreshCw className="h-3 w-3" />
<RefreshCw className="h-3 w-3" /> )}
)} Update
Update </Button>
</Button>
)}
</div> </div>
</Card> </Card>
); );

48
src/pages/Admin.tsx
View File

@ -2,8 +2,6 @@ import {AlertCircle, ArrowLeft, Download, FileStack, Server, Shield} from "lucid
import { type ReactNode, useEffect, useState } from "react"; import { type ReactNode, useEffect, useState } from "react";
import { useNavigate } from "react-router"; import { useNavigate } from "react-router";
import { Button } from "@/components/ui/button.tsx"; import { Button } from "@/components/ui/button.tsx";
import { Skeleton } from "@/components/ui/skeleton.tsx";
import { Spinner } from "@/components/ui/spinner.tsx";
import { useAuth } from "@/contexts/AuthContext.tsx"; import { useAuth } from "@/contexts/AuthContext.tsx";
import { FailedImportJobs } from "@/features/admin/components/FailedImportJobs.tsx"; import { FailedImportJobs } from "@/features/admin/components/FailedImportJobs.tsx";
import { ProviderManager } from "@/features/admin/components/ProviderManager.tsx"; import { ProviderManager } from "@/features/admin/components/ProviderManager.tsx";
@ -72,52 +70,6 @@ const Admin = () => {
// }, // },
]; ];
if (isLoading) {
return (
<main className="min-h-screen bg-background">
<div className="flex">
<aside className="sticky top-0 h-screen w-64 shrink-0 border-r border-border bg-card">
<div className="flex h-full flex-col">
<div className="border-b border-border px-6 py-5">
<div className="flex items-center gap-2">
<Skeleton className="h-5 w-5" />
<Skeleton className="h-5 w-28" />
</div>
<Skeleton className="mt-2 h-3 w-40" />
</div>
<nav className="flex-1 space-y-1 px-3 py-4">
{Array.from({ length: 4 }).map((_, i) => (
<div
key={i}
className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5"
>
<Skeleton className="h-4 w-4" />
<Skeleton className="h-4 w-24" />
</div>
))}
</nav>
<div className="border-t border-border px-3 py-4">
<div className="flex items-center gap-2 px-3 py-2">
<Skeleton className="h-4 w-4" />
<Skeleton className="h-4 w-20" />
</div>
</div>
</div>
</aside>
<div className="flex-1 flex items-center justify-center px-8 py-8">
<div className="flex flex-col items-center gap-4">
<Spinner className="size-12 text-primary" />
<Skeleton className="h-4 w-48" />
</div>
</div>
</div>
</main>
);
}
return ( return (
<main className="min-h-screen bg-background"> <main className="min-h-screen bg-background">
<div className="flex"> <div className="flex">

33
src/pages/Manga.tsx
View File

@ -249,20 +249,18 @@ const Manga = () => {
{/* Manga Info Section */} {/* Manga Info Section */}
<div className="grid gap-8 lg:grid-cols-[300px_1fr]"> <div className="grid gap-8 lg:grid-cols-[300px_1fr]">
{/* Cover */} {/* Cover */}
<div className="lg:sticky lg:top-24"> <div className="relative aspect-2/3 overflow-hidden rounded-lg border border-border bg-muted lg:sticky lg:top-8 lg:h-fit">
<div className="relative aspect-2/3 overflow-hidden rounded-lg border border-border bg-muted"> <img
<img src={
src={ (mangaData.data?.coverImageKey &&
(mangaData.data?.coverImageKey && import.meta.env.VITE_OMV_BASE_URL +
import.meta.env.VITE_OMV_BASE_URL + "/" +
"/" + mangaData.data?.coverImageKey) ||
mangaData.data?.coverImageKey) || "/placeholder.svg"
"/placeholder.svg" }
} alt={mangaData.data?.title ?? ""}
alt={mangaData.data?.title ?? ""} className="absolute inset-0 w-full h-full object-cover"
className="absolute inset-0 w-full h-full object-cover" />
/>
</div>
</div> </div>
{/* Details */} {/* Details */}
@ -361,10 +359,9 @@ const Manga = () => {
</div> </div>
)} )}
<p <p className="text-pretty text-justify leading-relaxed text-foreground">
className="text-pretty text-justify leading-relaxed text-foreground" {mangaData.data?.synopsis}
dangerouslySetInnerHTML={{ __html: mangaData.data?.synopsis ?? "" }} </p>
/>
<div className="grid gap-4 sm:grid-cols-2"> <div className="grid gap-4 sm:grid-cols-2">
<div className="flex items-center gap-3 rounded-lg border border-border bg-card p-4"> <div className="flex items-center gap-3 rounded-lg border border-border bg-card p-4">