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

🏗️ Changes to ComicDetail section

Browse Source
This commit is contained in:
Rishi Ghan
2023-12-29 22:24:37 -05:00
parent 9db4bc239e
commit 4b2f905dc5
9 changed files with 96 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -185,10 +185,8 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
<i className="h-5 w-5 icon-[solar--code-file-bold-duotone] text-slate-500 dark:text-slate-300" />
),
content: (
<div className="columns" key={2}>
<div className="column is-three-quarters">
{!isNil(comicInfo) && <ComicInfoXML json={comicInfo} />}
</div>
<div key={2}>
{!isNil(comicInfo) && <ComicInfoXML json={comicInfo} />}
</div>
),
shouldShow: !isEmpty(comicInfo),
@@ -199,9 +197,7 @@ export const ComicDetail = (data: ComicDetailProps): ReactElement => {
<i className="h-5 w-5 icon-[solar--winrar-bold-duotone] text-slate-500 dark:text-slate-300" />
),
name: "Archive Operations",
content: <></>,
/*
<ArchiveOperations data={data.data} key={3} /> */
content: <ArchiveOperations data={data.data} key={3} />,
shouldShow: areRawFileDetailsAvailable,
},
{

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

@@ -14,7 +14,7 @@ export const ComicDetailContainer = (): ReactElement | null => {
isLoading,
isError,
} = useQuery({
queryKey: [],
queryKey: ["comicBookMetadata"],
queryFn: async () =>
await axios({
url: `${LIBRARY_SERVICE_BASE_URI}/getComicBookById`,
@@ -25,10 +25,6 @@ export const ComicDetailContainer = (): ReactElement | null => {
}),
});
console.log(comicBookDetailData);
useEffect(() => {
// dispatch(getComicBookDetailById(comicObjectId));
// dispatch(getSettings());
}, []);
{
isError && <>Error</>;

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

@@ -1,6 +1,6 @@
import React, { useEffect, useContext, ReactElement, useState } from "react";
import { RootState } from "threetwo-ui-typings";
import { isArray, isEmpty, isNil, isUndefined, map } from "lodash";
import { isEmpty, map } from "lodash";
import prettyBytes from "pretty-bytes";
import dayjs from "dayjs";
import ellipsize from "ellipsize";

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

@@ -1,5 +1,5 @@
import React, { ReactElement, useEffect, useState } from "react";
import { isEmpty, isNil } from "lodash";
import { isNil } from "lodash";
export const TabControls = (props): ReactElement => {
// const comicBookDetailData = useSelector(

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

@@ -6,6 +6,9 @@ import SlidingPane from "react-sliding-pane";
import { extractComicArchive } from "../../../actions/fileops.actions";
import { analyzeImage } from "../../../actions/fileops.actions";
import { Canvas } from "../../shared/Canvas";
import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { LIBRARY_SERVICE_BASE_URI } from "../../../constants/endpoints";
export const ArchiveOperations = (props): ReactElement => {
const { data } = props;
@@ -20,7 +23,28 @@ export const ArchiveOperations = (props): ReactElement => {
// return state.fileOps.imageAnalysisResults;
// });
const unpackComicArchive = useCallback(() => {
const unpackComicArchive = () => {
const { data } = useQuery({
queryFn: async () =>
await axios({
method: "POST",
url: `${LIBRARY_SERVICE_BASE_URI}/uncompressFullArchive`,
headers: {
"Content-Type": "application/json; charset=utf-8",
},
data: {
filePath: data.rawFileDetails.filePath,
options: {
type: "full",
purpose: "analysis",
imageResizeOptions: {
baseWidth: 275,
},
},
},
}),
queryKey: [""],
});
// dispatch(
// extractComicArchive(data.rawFileDetails.filePath, {
// type: "full",
@@ -30,7 +54,7 @@ export const ArchiveOperations = (props): ReactElement => {
// },
// }),
// );
}, []);
};
// sliding panel config
const [visible, setVisible] = useState(false);
@@ -92,22 +116,16 @@ export const ArchiveOperations = (props): ReactElement => {
) : null}
</div>
{!isEmpty(extractedComicBookArchive) ? (
<div className="column mt-5">
<Sticky enabled={true} top={70} bottomBoundary={3000}>
<div className="card">
<div className="card-content">
<span className="has-text-size-4">
{extractedComicBookArchive.length} pages
</span>
<button className="button is-small is-light is-primary is-outlined">
<span className="icon is-small">
<i className="fa-solid fa-compress"></i>
</span>
<span>Convert to CBZ</span>
</button>
</div>
</div>
</Sticky>
<div>
<span className="has-text-size-4">
{extractedComicBookArchive.length} pages
</span>
<button className="button is-small is-light is-primary is-outlined">
<span className="icon is-small">
<i className="fa-solid fa-compress"></i>
</span>
<span>Convert to CBZ</span>
</button>
</div>
) : null}
</div>

87
src/client/components/ComicDetail/Tabs/ComicInfoXML.tsx
View File

@@ -4,52 +4,59 @@ import React, { ReactElement } from "react";
export const ComicInfoXML = (data): ReactElement => {
const { json } = data;
return (
<div className="comicInfo-metadata">
<dl className="has-text-size-7">
<dd className="has-text-weight-medium">{json.series[0]}</dd>
<dd className="mt-2 mb-2">
<div className="field is-grouped is-grouped-multiline">
<div className="control">
<span className="tags has-addons">
<span className="tag">Pages</span>
<span className="tag is-warning is-light">
{json.publisher[0]}
<div className="flex">
<dl className="dark:bg-yellow-600 bg-yellow-200 p-3 rounded-lg">
<dt>
<p className="text-lg">{json.series[0]}</p>
</dt>
<dd className="text-sm">
published by{" "}
<span className="underline">
{json.publisher[0]}
<i className="icon-[solar--arrow-right-up-outline] w-4 h-4" />
</span>
</dd>
<span className="inline-flex flex-row gap-2">
{/* Issue number */}
{!isUndefined(json.number) && (
<dd className="my-2">
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1">
<i className="icon-[solar--hashtag-outline] w-4 h-4"></i>
</span>
<span className="text-md text-slate-900 dark:text-slate-900">
{parseInt(json.number[0], 10)}
</span>
</span>
</div>
<div className="control">
<span className="tags has-addons">
<span className="tag">Issue #</span>
<span className="tag is-warning is-light">
{!isUndefined(json.number) && parseInt(json.number[0], 10)}
</span>
</dd>
)}
<dd className="my-2">
{/* Genre */}
<span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2 rounded-md dark:text-slate-900 dark:bg-slate-400">
<span className="pr-1 pt-1">
<i className="icon-[solar--sticker-smile-circle-bold-duotone] w-5 h-5"></i>
</span>
</div>
<div className="control">
<span className="tags has-addons">
<span className="tag">Pages</span>
<span className="tag is-warning is-light">
{json.pagecount[0]}
</span>
<span className="text-md text-slate-500 dark:text-slate-900">
{json.genre[0]}
</span>
</div>
{!isUndefined(json.genre) && (
<div className="control">
<span className="tags has-addons">
<span className="tag">Genre</span>
<span className="tag is-success is-light">
{json.genre[0]}
</span>
</span>
</div>
)}
</div>
</span>
</dd>
</span>
<dd className="my-1">
{/* Summary */}
{!isUndefined(json.summary) && (
<span className="text-md text-slate-500 dark:text-slate-900">
{json.summary[0]}
</span>
)}
</dd>
<dd>
<span className="is-size-7">{json.notes[0]}</span>
</dd>
<dd className="mt-1 mb-1">
{!isUndefined(json.summary) && json.summary[0]}
{/* Notes */}
<span className="text-sm text-slate-500 dark:text-slate-900">
{json.notes[0]}
</span>
</dd>
</dl>
</div>

9
src/client/components/Library/Library.tsx
View File

@@ -27,7 +27,6 @@ export const Library = (): ReactElement => {
const [offset, setOffset] = useState(0);
const [searchQuery, setSearchQuery] = useState({
query: {},
pagination: {
size: 25,
from: offset,
@@ -37,7 +36,10 @@ export const Library = (): ReactElement => {
});
const queryClient = useQueryClient();
// Method to fetch paginated issues
/**
* Method that queries the Elasticsearch index "comics" for issues specified by the query
* @param searchQuery - A searchQuery object that contains the search term, type, and pagination params.
*/
const fetchIssues = async (searchQuery) => {
const { pagination, query, type } = searchQuery;
return await axios({
@@ -50,6 +52,7 @@ export const Library = (): ReactElement => {
},
});
};
const searchIssues = (e) => {
queryClient.invalidateQueries({ queryKey: ["comics"] });
setSearchQuery({
@@ -242,7 +245,7 @@ export const Library = (): ReactElement => {
{!isUndefined(searchResults?.hits) ? (
<div>
<div>
<div className="grid grid-cols-2">
<div className="my-5 flex self-start ml-32 w-fit">
<SearchBar searchHandler={(e) => searchIssues(e)} />
</div>
<T2Table

20
src/client/components/Library/SearchBar.tsx
View File

@@ -1,28 +1,10 @@
import React, { ReactElement, useCallback } from "react";
import React, { ReactElement } from "react";
import PropTypes from "prop-types";
import { Form, Field } from "react-final-form";
import { Link } from "react-router-dom";
import { searchIssue } from "../../actions/fileops.actions";
export const SearchBar = (props): ReactElement => {
const { searchHandler } = props;
const handleSubmit = useCallback((e) => {
// searchIssue(
// {
// query: {
// volumeName: e.search,
// },
// },
// {
// pagination: {
// size: 25,
// from: 0,
// },
// type: "volumeName",
// trigger: "libraryPage",
// },
// ),
}, []);
return (
<Form
onSubmit={searchHandler}

1
src/client/components/shared/T2Table.tsx
View File

@@ -1,6 +1,5 @@
import React, { ReactElement, useMemo, useState } from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import {
ColumnDef,
flexRender,