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

🔎 DC++ manual search scaffold

Browse Source
This commit is contained in:
Rishi Ghan
2022-04-19 01:01:34 -07:00
parent 253c7357a0
commit d17f49baf4
4 changed files with 186 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/client/actions/comicinfo.actions.tsx
View File

@@ -1,8 +1,9 @@
import axios from "axios"; import axios from "axios";
import rateLimiter from "axios-rate-limit"; import rateLimiter from "axios-rate-limit";
import { AxiosCacheRequestConfig, createCacheAdapter } from 'axios-simple-cache-adapter'; import {
AxiosCacheRequestConfig,
createCacheAdapter,
} from "axios-simple-cache-adapter";
import qs from "qs"; import qs from "qs";
import { import {
CV_SEARCH_SUCCESS, CV_SEARCH_SUCCESS,
@@ -25,7 +26,6 @@ import {
LIBRARY_SERVICE_BASE_URI, LIBRARY_SERVICE_BASE_URI,
} from "../constants/endpoints"; } from "../constants/endpoints";
const axiosCacheAdapter = createCacheAdapter(); const axiosCacheAdapter = createCacheAdapter();
const http = rateLimiter(axios.create(), { const http = rateLimiter(axios.create(), {
maxRequests: 1, maxRequests: 1,
@@ -39,7 +39,6 @@ export const getWeeklyPullList = (options) => async (dispatch) => {
type: CV_WEEKLY_PULLLIST_CALL_IN_PROGRESS, type: CV_WEEKLY_PULLLIST_CALL_IN_PROGRESS,
}); });
await axios(`${COMICVINE_SERVICE_URI}/getWeeklyPullList`, { await axios(`${COMICVINE_SERVICE_URI}/getWeeklyPullList`, {
method: "get", method: "get",
params: options, params: options,
@@ -145,7 +144,7 @@ export const analyzeLibrary = (issues) => async (dispatch) => {
}); });
}; };
export const getLibraryStatistics = () => async dispatch => { export const getLibraryStatistics = () => async (dispatch) => {
dispatch({ dispatch({
type: LIBRARY_STATISTICS_CALL_IN_PROGRESS, type: LIBRARY_STATISTICS_CALL_IN_PROGRESS,
}); });

21
src/client/actions/fileops.actions.tsx
View File

@@ -52,15 +52,9 @@ export async function walkFolder(path: string): Promise<Array<IFolderData>> {
} }
/** /**
* Fetches comic book covers along with some metadata * Fetches comic book covers along with some metadata
* * @return the comic book metadata
* using {@link Renderer}.
*
* Used by external plugins
*
* @param {Object} options
* @return {Promise<string>} HTML of the page
*/ */
export const fetchComicBookMetadata = (options) => async (dispatch) => { export const fetchComicBookMetadata = () => async (dispatch) => {
const extractionOptions = { const extractionOptions = {
extractTarget: "cover", extractTarget: "cover",
targetExtractionFolder: "./userdata/covers", targetExtractionFolder: "./userdata/covers",
@@ -97,6 +91,11 @@ export const toggleImportQueueStatus = (options) => async (dispatch) => {
data: { manjhul: "jigyadam", action: options.action }, data: { manjhul: "jigyadam", action: options.action },
}); });
}; };
/**
* Fetches comic book metadata for various types
* @return metadata for the comic book object categories
* @param options
**/
export const getComicBooks = (options) => async (dispatch) => { export const getComicBooks = (options) => async (dispatch) => {
const { paginationOptions, predicate, comicStatus } = options; const { paginationOptions, predicate, comicStatus } = options;
@@ -127,6 +126,11 @@ export const getComicBooks = (options) => async (dispatch) => {
} }
}; };
/**
* Makes a call to library service to import the comic book metadata into the ThreeTwo data store.
* @returns Nothing.
* @param payload
*/
export const importToDB = (payload?: any) => (dispatch) => { export const importToDB = (payload?: any) => (dispatch) => {
try { try {
const comicBookMetadata = { const comicBookMetadata = {
@@ -164,6 +168,7 @@ export const importToDB = (payload?: any) => (dispatch) => {
}); });
} }
}; };
export const fetchVolumeGroups = () => async (dispatch) => { export const fetchVolumeGroups = () => async (dispatch) => {
try { try {
dispatch({ dispatch({

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

@@ -13,6 +13,7 @@ import {
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { RootState, SearchInstance } from "threetwo-ui-typings"; import { RootState, SearchInstance } from "threetwo-ui-typings";
import ellipsize from "ellipsize"; import ellipsize from "ellipsize";
import { Form, Field } from "react-final-form";
import { isEmpty, isNil, map } from "lodash"; import { isEmpty, isNil, map } from "lodash";
import { AirDCPPSocketContext } from "../../context/AirDCPPSocket"; import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
interface IAcquisitionPanelProps { interface IAcquisitionPanelProps {
@@ -106,21 +107,52 @@ export const AcquisitionPanel = (
<> <>
<div className="comic-detail columns"> <div className="comic-detail columns">
{!isEmpty(ADCPPSocket) ? ( {!isEmpty(ADCPPSocket) ? (
<div className="column is-one-fifth"> <Form
<button onSubmit={getDCPPSearchResults}
className={ initialValues={{
isAirDCPPSearchInProgress issueName,
? "button is-loading is-warning" }}
: "button" render={({ handleSubmit, form, submitting, pristine, values }) => (
} <div className="column is-three-quarters">
onClick={() => getDCPPSearchResults(dcppQuery)} <div className="box search">
> <div className="columns">
<span className="icon is-small"> <Field name="issueName">
<img src="/img/airdcpp_logo.svg" /> {({ input, meta }) => {
</span> return (
<span className="airdcpp-text">Search on AirDC++</span> <div className="column is-two-thirds">
</button> <input
</div> {...input}
className="input main-search-bar is-medium"
placeholder="Type an issue/volume name"
/>
<span className="help is-clearfix is-light is-info">
Use this to manually override the search.
</span>
</div>
);
}}
</Field>
<div className="column">
<button
className={
isAirDCPPSearchInProgress
? "button is-loading is-warning"
: "button"
}
onClick={() => getDCPPSearchResults(dcppQuery)}
>
<span className="icon is-small">
<img src="/img/airdcpp_logo.svg" />
</span>
<span className="airdcpp-text">Search on AirDC++</span>
</button>
</div>
</div>
</div>
</div>
)}
/>
) : ( ) : (
<div className="column is-three-fifths"> <div className="column is-three-fifths">
<article className="message is-info"> <article className="message is-info">
@@ -131,131 +163,131 @@ export const AcquisitionPanel = (
</article> </article>
</div> </div>
)} )}
{/* AirDC++ search instance details */}
{!isNil(searchInfo) && !isNil(searchInstance) && (
<>
<div className="column is-one-quarter is-size-7">
<div className="card">
<div className="card-content">
<div className="content">
<dl>
<dt>
<div className="tags mb-1">
{userSettings.directConnect.client.hubs.map(
({ value }) => (
<span className="tag is-warning" key={value}>
{value}
</span>
),
)}
</div>
</dt>
<dt>Query: {searchInfo.query.pattern}</dt>
<dd>
Extensions: {searchInfo.query.extensions.join(", ")}
</dd>
<dd>File type: {searchInfo.query.file_type}</dd>
</dl>
</div>
</div>
</div>
</div>
<div className="column is-one-quarter is-size-7">
<div className="card">
<div className="card-content">
<div className="content">
<dl>
<dt>Search Instance: {searchInstance.id}</dt>
<dt>Owned by {searchInstance.owner}</dt>
<dd>Expires in: {searchInstance.expires_in}</dd>
</dl>
</div>
</div>
</div>
</div>
</>
)}
</div> </div>
{/* AirDC++ search instance details */}
{!isNil(searchInfo) && !isNil(searchInstance) && (
<div className="columns">
<div className="column is-one-quarter is-size-7">
<div className="card">
<div className="card-content">
<dl>
<dt>
<div className="tags mb-1">
{userSettings.directConnect.client.hubs.map(
({ value }) => (
<span className="tag is-warning" key={value}>
{value}
</span>
),
)}
</div>
</dt>
<dt>Query: {searchInfo.query.pattern}</dt>
<dd>Extensions: {searchInfo.query.extensions.join(", ")}</dd>
<dd>File type: {searchInfo.query.file_type}</dd>
</dl>
</div>
</div>
</div>
<div className="column is-one-quarter is-size-7">
<div className="card">
<div className="card-content">
<dl>
<dt>Search Instance: {searchInstance.id}</dt>
<dt>Owned by {searchInstance.owner}</dt>
<dd>Expires in: {searchInstance.expires_in}</dd>
</dl>
</div>
</div>
</div>
</div>
)}
{/* AirDC++ results */} {/* AirDC++ results */}
<div className="columns"> <div className="columns">
{!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? ( {!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? (
<table className="table"> <div className="column">
<thead> <table className="table">
<tr> <thead>
<th>Name</th> <tr>
<th>Type</th> <th>Name</th>
<th>Slots</th> <th>Type</th>
<th>Actions</th> <th>Slots</th>
</tr> <th>Actions</th>
</thead> </tr>
<tbody> </thead>
{map(airDCPPSearchResults, ({ result }, idx) => { <tbody>
return ( {map(airDCPPSearchResults, ({ result }, idx) => {
<tr return (
key={idx} <tr
className={!isNil(result.dupe) ? "dupe-search-result" : ""} key={idx}
> className={
<td> !isNil(result.dupe) ? "dupe-search-result" : ""
<p className="mb-2"> }
{result.type.id === "directory" ? ( >
<i className="fas fa-folder"></i> <td>
) : null}{" "} <p className="mb-2">
{ellipsize(result.name, 70)} {result.type.id === "directory" ? (
</p> <i className="fas fa-folder"></i>
) : null}{" "}
{ellipsize(result.name, 70)}
</p>
<dl> <dl>
<dd> <dd>
<div className="tags"> <div className="tags">
{!isNil(result.dupe) ? ( {!isNil(result.dupe) ? (
<span className="tag is-warning">Dupe</span> <span className="tag is-warning">Dupe</span>
) : null} ) : null}
<span className="tag is-light is-info"> <span className="tag is-light is-info">
{result.users.user.nicks} {result.users.user.nicks}
</span>
{result.users.user.flags.map((flag, idx) => (
<span className="tag is-light" key={idx}>
{flag}
</span> </span>
))} {result.users.user.flags.map((flag, idx) => (
</div> <span className="tag is-light" key={idx}>
</dd> {flag}
</dl> </span>
</td> ))}
<td> </div>
<span className="tag is-light is-info"> </dd>
{result.type.id === "directory" </dl>
? "directory" </td>
: result.type.str} <td>
</span> <span className="tag is-light is-info">
</td> {result.type.id === "directory"
<td> ? "directory"
<div className="tags has-addons"> : result.type.str}
<span className="tag is-success">
{result.slots.free} free
</span> </span>
<span className="tag is-light"> </td>
{result.slots.total} <td>
</span> <div className="tags has-addons">
</div> <span className="tag is-success">
</td> {result.slots.free} free
<td> </span>
<a <span className="tag is-light">
onClick={() => {result.slots.total}
downloadDCPPResult( </span>
searchInstance.id, </div>
result.id, </td>
props.comicObjectid, <td>
) <a
} onClick={() =>
> downloadDCPPResult(
<i className="fas fa-file-download"></i> searchInstance.id,
</a> result.id,
</td> props.comicObjectid,
</tr> )
); }
})} >
</tbody> <i className="fas fa-file-download"></i>
</table> </a>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
) : ( ) : (
<div className="column is-three-fifths"> <div className="column is-three-fifths">
<article className="message is-info"> <article className="message is-info">

6
src/client/components/Search.tsx
View File

@@ -8,9 +8,9 @@ import { search } from "../services/api/SearchApi";
import { Form, Field } from "react-final-form"; import { Form, Field } from "react-final-form";
import Card from "./Carda"; import Card from "./Carda";
interface ISearchProps {} interface ISearchProps { }
export const Search = ({}: ISearchProps): ReactElement => { export const Search = ({ }: ISearchProps): ReactElement => {
const formData = { const formData = {
search: "", search: "",
}; };
@@ -83,7 +83,7 @@ export const Search = ({}: ISearchProps): ReactElement => {
)} )}
/> />
{!isNil(comicVineSearchResults.results) && {!isNil(comicVineSearchResults.results) &&
!isEmpty(comicVineSearchResults.results) ? ( !isEmpty(comicVineSearchResults.results) ? (
<div> <div>
{comicVineSearchResults.results.map((result) => { {comicVineSearchResults.results.map((result) => {
return ( return (