frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🐘 Massive refactor for graphql changes

Browse Source
This commit is contained in:
Rishi Ghan
2026-03-04 23:42:50 -05:00
parent 4b8d7b5905
commit 74c0d6513c
46 changed files with 10254 additions and 652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/client/components/ComicDetail/AcquisitionPanel.tsx
View File

@@ -160,7 +160,9 @@ export const AcquisitionPanel = (
type,
config,
},
(data: any) => console.log(data),
(data: any) => {
// Download initiated
},
);
};

35
src/client/components/ComicDetail/ComicDetail.tsx
View File

@@ -10,6 +10,7 @@ import "react-sliding-pane/dist/react-sliding-pane.css";
import SlidingPane from "react-sliding-pane";
import { determineCoverFile } from "../../shared/utils/metadata.utils";
import { styled } from "styled-components";
import { RawFileDetails as RawFileDetailsType } from "../../graphql/generated";
// Extracted modules
import { useComicVineMatching } from "./useComicVineMatching";
@@ -22,45 +23,32 @@ const StyledSlidingPanel = styled(SlidingPane)`
background: #ccc;
`;
interface RawFileDetails {
name: string;
cover?: {
filePath?: string;
};
containedIn?: string;
fileSize?: number;
path?: string;
extension?: string;
mimeType?: string;
[key: string]: any;
}
interface InferredIssue {
type InferredIssue = {
name?: string;
number?: number;
year?: string;
subtitle?: string;
[key: string]: any;
}
};
interface ComicVineMetadata {
type ComicVineMetadata = {
name?: string;
volumeInformation?: any;
[key: string]: any;
}
};
interface Acquisition {
type Acquisition = {
directconnect?: {
downloads?: any[];
};
torrent?: any[];
[key: string]: any;
}
};
interface ComicDetailProps {
type ComicDetailProps = {
data: {
_id: string;
rawFileDetails?: RawFileDetails;
rawFileDetails?: RawFileDetailsType;
inferredMetadata: {
issue?: InferredIssue;
};
@@ -76,7 +64,7 @@ interface ComicDetailProps {
userSettings?: any;
queryClient?: any;
comicObjectId?: string;
}
};
/**
* Component for displaying the metadata for a comic in greater detail.
@@ -117,7 +105,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
}, []);
const afterOpenModal = useCallback((things: any) => {
console.log("kolaveri", things);
// Modal opened callback
}, []);
const closeModal = useCallback(() => {
@@ -154,7 +142,6 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
openEditMetadataPanel();
break;
default:
console.log("No valid action selected.");
break;
}
};

55
src/client/components/ComicDetail/ComicDetailContainer.tsx
View File

@@ -1,9 +1,9 @@
import React, { ReactElement } from "react";
import { useParams } from "react-router-dom";
import { ComicDetail } from "../ComicDetail/ComicDetail";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { LIBRARY_SERVICE_BASE_URI } from "../../constants/endpoints";
import axios from "axios";
import { useQueryClient } from "@tanstack/react-query";
import { useGetComicByIdQuery } from "../../graphql/generated";
import { adaptGraphQLComicToLegacy } from "../../graphql/adapters/comicAdapter";
export const ComicDetailContainer = (): ReactElement | null => {
const { comicObjectId } = useParams<{ comicObjectId: string }>();
@@ -13,31 +13,28 @@ export const ComicDetailContainer = (): ReactElement | null => {
data: comicBookDetailData,
isLoading,
isError,
} = useQuery({
queryKey: ["comicBookMetadata", comicObjectId],
queryFn: async () =>
await axios({
url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookById`,
method: "POST",
data: {
id: comicObjectId,
},
}),
});
{
isError && <>Error</>;
}
{
isLoading && <>Loading...</>;
}
return (
comicBookDetailData?.data && (
<ComicDetail
data={comicBookDetailData.data}
queryClient={queryClient}
comicObjectId={comicObjectId}
/>
)
} = useGetComicByIdQuery(
{ id: comicObjectId! },
{ enabled: !!comicObjectId }
);
if (isError) {
return <div>Error loading comic details</div>;
}
if (isLoading) {
return <div>Loading...</div>;
}
const adaptedData = comicBookDetailData?.comic
? adaptGraphQLComicToLegacy(comicBookDetailData.comic)
: null;
return adaptedData ? (
<ComicDetail
data={adaptedData}
queryClient={queryClient}
comicObjectId={comicObjectId}
/>
) : null;
};

2
src/client/components/ComicDetail/DownloadProgressTick.tsx
View File

@@ -77,8 +77,6 @@ export const DownloadProgressTick: React.FC<DownloadProgressTickProps> = ({
*/
const onDownloadTick = (data: DownloadTickData) => {
// Compare numeric data.id to string bundleId
console.log(data.id);
console.log(`bundleId is ${bundleId}`)
if (data.id === parseInt(bundleId, 10)) {
setTick(data);
}

51
src/client/components/ComicDetail/RawFileDetails.tsx
View File

@@ -1,21 +1,12 @@
import React, { ReactElement } from "react";
import React, { ReactElement, ReactNode } from "react";
import prettyBytes from "pretty-bytes";
import { isEmpty } from "lodash";
import { format, parseISO } from "date-fns";
import { RawFileDetails as RawFileDetailsType } from "../../graphql/generated";
interface RawFileDetailsProps {
type RawFileDetailsProps = {
data?: {
rawFileDetails?: {
containedIn?: string;
name?: string;
fileSize?: number;
path?: string;
extension?: string;
mimeType?: string;
cover?: {
filePath?: string;
};
};
rawFileDetails?: RawFileDetailsType;
inferredMetadata?: {
issue?: {
year?: string;
@@ -27,18 +18,18 @@ interface RawFileDetailsProps {
created_at?: string;
updated_at?: string;
};
children?: any;
}
children?: ReactNode;
};
export const RawFileDetails = (props: RawFileDetailsProps): ReactElement => {
const { rawFileDetails, inferredMetadata, created_at, updated_at } =
props.data;
props.data || {};
return (
<>
<div className="max-w-2xl ml-5">
<div className="px-4 sm:px-6">
<p className="text-gray-500 dark:text-gray-400">
<span className="text-xl">{rawFileDetails.name}</span>
<span className="text-xl">{rawFileDetails?.name}</span>
</p>
</div>
<div className="px-4 py-5 sm:px-6">
@@ -48,10 +39,10 @@ export const RawFileDetails = (props: RawFileDetailsProps): ReactElement => {
Raw File Details
</dt>
<dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
{rawFileDetails.containedIn +
"/" +
rawFileDetails.name +
rawFileDetails.extension}
{rawFileDetails?.containedIn}
{"/"}
{rawFileDetails?.name}
{rawFileDetails?.extension}
</dd>
</div>
<div className="sm:col-span-1">
@@ -59,10 +50,10 @@ export const RawFileDetails = (props: RawFileDetailsProps): ReactElement => {
Inferred Issue Metadata
</dt>
<dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
Series Name: {inferredMetadata.issue.name}
{!isEmpty(inferredMetadata.issue.number) ? (
Series Name: {inferredMetadata?.issue?.name}
{!isEmpty(inferredMetadata?.issue?.number) ? (
<span className="tag is-primary is-light">
{inferredMetadata.issue.number}
{inferredMetadata?.issue?.number}
</span>
) : null}
</dd>
@@ -79,7 +70,7 @@ export const RawFileDetails = (props: RawFileDetailsProps): ReactElement => {
</span>
<span className="text-md text-slate-500 dark:text-slate-900">
{rawFileDetails.mimeType}
{rawFileDetails?.mimeType}
</span>
</span>
</dd>
@@ -96,7 +87,7 @@ export const RawFileDetails = (props: RawFileDetailsProps): ReactElement => {
</span>
<span className="text-md text-slate-500 dark:text-slate-900">
{prettyBytes(rawFileDetails.fileSize)}
{rawFileDetails?.fileSize ? prettyBytes(rawFileDetails.fileSize) : "N/A"}
</span>
</span>
</dd>
@@ -106,8 +97,12 @@ export const RawFileDetails = (props: RawFileDetailsProps): ReactElement => {
Import Details
</dt>
<dd className="mt-1 text-sm text-gray-900 dark:text-gray-400">
{format(parseISO(created_at), "dd MMMM, yyyy")},{" "}
{format(parseISO(created_at), "h aaaa")}
{created_at ? (
<>
{format(parseISO(created_at), "dd MMMM, yyyy")},{" "}
{format(parseISO(created_at), "h aaaa")}
</>
) : "N/A"}
</dd>
</div>
<div className="sm:col-span-2">

17
src/client/components/ComicDetail/SlidingPanelContent.tsx
View File

@@ -2,17 +2,18 @@ import React from "react";
import { ComicVineSearchForm } from "./ComicVineSearchForm";
import { ComicVineMatchPanel } from "./ComicVineMatchPanel";
import { EditMetadataPanel } from "./EditMetadataPanel";
import { RawFileDetails } from "../../graphql/generated";
interface InferredIssue {
type InferredIssue = {
name?: string;
number?: number;
year?: string;
subtitle?: string;
[key: string]: any;
}
};
interface CVMatchesPanelProps {
rawFileDetails: any;
type CVMatchesPanelProps = {
rawFileDetails?: RawFileDetails;
inferredMetadata: {
issue?: InferredIssue;
};
@@ -20,7 +21,7 @@ interface CVMatchesPanelProps {
comicObjectId: string;
queryClient: any;
onMatchApplied: () => void;
}
};
export const CVMatchesPanel: React.FC<CVMatchesPanelProps> = ({
rawFileDetails,
@@ -55,9 +56,9 @@ export const CVMatchesPanel: React.FC<CVMatchesPanelProps> = ({
</>
);
interface EditMetadataPanelWrapperProps {
rawFileDetails: any;
}
type EditMetadataPanelWrapperProps = {
rawFileDetails?: RawFileDetails;
};
export const EditMetadataPanelWrapper: React.FC<EditMetadataPanelWrapperProps> = ({
rawFileDetails,

3
src/client/components/ComicDetail/Tabs/ArchiveOperations.tsx
View File

@@ -77,8 +77,7 @@ export const ArchiveOperations = (props: { data: any }): ReactElement => {
},
});
} catch (error) {
console.error("Error fetching uncompressed archive:", error);
// Handle error if necessary
// Error handling could be added here if needed
}
};
fetchUncompressedArchive();

1
src/client/components/ComicDetail/TorrentDownloads.tsx
View File

@@ -4,7 +4,6 @@ import prettyBytes from "pretty-bytes";
export const TorrentDownloads = (props) => {
const { data } = props;
console.log(Object.values(data));
return (
<>
{data.map(({ torrent }) => {

2
src/client/components/ComicDetail/TorrentSearchPanel.tsx
View File

@@ -43,7 +43,7 @@ export const TorrentSearchPanel = (props) => {
mutationFn: async (newTorrent) =>
axios.post(`${QBITTORRENT_SERVICE_BASE_URI}/addTorrent`, newTorrent),
onSuccess: async (data) => {
console.log(data);
// Torrent added successfully
},
});
const searchIndexer = (values) => {

24
src/client/components/ComicDetail/useComicVineMatching.ts
View File

@@ -3,29 +3,25 @@ import axios from "axios";
import { isNil, isUndefined, isEmpty } from "lodash";
import { refineQuery } from "filename-parser";
import { COMICVINE_SERVICE_URI } from "../../constants/endpoints";
import { RawFileDetails as RawFileDetailsType } from "../../graphql/generated";
interface ComicVineMatch {
type ComicVineMatch = {
score: number;
[key: string]: any;
}
};
interface ComicVineSearchQuery {
type ComicVineSearchQuery = {
inferredIssueDetails: {
name: string;
[key: string]: any;
};
[key: string]: any;
}
};
interface RawFileDetails {
name: string;
[key: string]: any;
}
interface ComicVineMetadata {
type ComicVineMetadata = {
name?: string;
[key: string]: any;
}
};
export const useComicVineMatching = () => {
const [comicVineMatches, setComicVineMatches] = useState<ComicVineMatch[]>([]);
@@ -67,18 +63,18 @@ export const useComicVineMatching = () => {
const scoredMatches = matches.sort((a: ComicVineMatch, b: ComicVineMatch) => b.score - a.score);
setComicVineMatches(scoredMatches);
} catch (err) {
console.log(err);
// Error handling could be added here if needed
}
};
const prepareAndFetchMatches = (
rawFileDetails: RawFileDetails | undefined,
rawFileDetails: RawFileDetailsType | undefined,
comicvine: ComicVineMetadata | undefined,
) => {
let seriesSearchQuery: ComicVineSearchQuery = {} as ComicVineSearchQuery;
let issueSearchQuery: ComicVineSearchQuery = {} as ComicVineSearchQuery;
if (!isUndefined(rawFileDetails)) {
if (!isUndefined(rawFileDetails) && rawFileDetails.name) {
issueSearchQuery = refineQuery(rawFileDetails.name) as ComicVineSearchQuery;
} else if (!isEmpty(comicvine) && comicvine?.name) {
issueSearchQuery = refineQuery(comicvine.name) as ComicVineSearchQuery;