🔧 Refactoring AcquisitionPanel
This commit is contained in:
@@ -16,6 +16,7 @@ import { Form, Field } from "react-final-form";
|
|||||||
import { isEmpty, isNil, map } from "lodash";
|
import { isEmpty, isNil, map } from "lodash";
|
||||||
import { useStore } from "../../store";
|
import { useStore } from "../../store";
|
||||||
import { useShallow } from "zustand/react/shallow";
|
import { useShallow } from "zustand/react/shallow";
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
|
||||||
interface IAcquisitionPanelProps {
|
interface IAcquisitionPanelProps {
|
||||||
query: any;
|
query: any;
|
||||||
@@ -38,7 +39,16 @@ export const AcquisitionPanel = (
|
|||||||
airDCPPSessionInformation: state.airDCPPSessionInformation,
|
airDCPPSessionInformation: state.airDCPPSessionInformation,
|
||||||
})),
|
})),
|
||||||
);
|
);
|
||||||
console.log("ulhas umlaut", airDCPPSessionInformation);
|
|
||||||
|
/**
|
||||||
|
* Get the hubs list from an AirDCPP Socket
|
||||||
|
*/
|
||||||
|
const { data: hubs } = useQuery({
|
||||||
|
queryKey: ["hubs"],
|
||||||
|
queryFn: async () => await airDCPPSocketInstance.get(`hubs`),
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("narangi umlaut", hubs);
|
||||||
const issueName = props.query.issue.name || "";
|
const issueName = props.query.issue.name || "";
|
||||||
// const { settings } = props;
|
// const { settings } = props;
|
||||||
const sanitizedIssueName = issueName.replace(/[^a-zA-Z0-9 ]/g, " ");
|
const sanitizedIssueName = issueName.replace(/[^a-zA-Z0-9 ]/g, " ");
|
||||||
@@ -66,45 +76,34 @@ export const AcquisitionPanel = (
|
|||||||
// Pre-populate the search input with the search string, so that
|
// Pre-populate the search input with the search string, so that
|
||||||
// All the user has to do is hit "Search AirDC++"
|
// All the user has to do is hit "Search AirDC++"
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// if (!isEmpty(airDCPPConfiguration.airDCPPState.settings)) {
|
// AirDC++ search query
|
||||||
// // AirDC++ search query
|
const dcppSearchQuery = {
|
||||||
// const dcppSearchQuery = {
|
query: {
|
||||||
// query: {
|
pattern: `${sanitizedIssueName.replace(/#/g, "")}`,
|
||||||
// pattern: `${sanitizedIssueName.replace(/#/g, "")}`,
|
extensions: ["cbz", "cbr", "cb7"],
|
||||||
// extensions: ["cbz", "cbr", "cb7"],
|
},
|
||||||
// },
|
hub_urls: map(hubs, (item) => item.value),
|
||||||
// hub_urls: map(
|
priority: 5,
|
||||||
// airDCPPConfiguration.airDCPPState.settings.directConnect.client.hubs,
|
};
|
||||||
// (item) => item.value,
|
setDcppQuery(dcppSearchQuery);
|
||||||
// ),
|
}, []);
|
||||||
// priority: 5,
|
|
||||||
// };
|
|
||||||
// setDcppQuery(dcppSearchQuery);
|
|
||||||
// }
|
|
||||||
}, [airDCPPConfiguration]);
|
|
||||||
|
|
||||||
const getDCPPSearchResults = useCallback(
|
const getDCPPSearchResults = useCallback(async (searchQuery) => {
|
||||||
async (searchQuery) => {
|
const manualQuery = {
|
||||||
const manualQuery = {
|
query: {
|
||||||
query: {
|
pattern: `${searchQuery.issueName}`,
|
||||||
pattern: `${searchQuery.issueName}`,
|
extensions: ["cbz", "cbr", "cb7"],
|
||||||
extensions: ["cbz", "cbr", "cb7"],
|
},
|
||||||
},
|
hub_urls: map(hubs, (item) => item.value),
|
||||||
hub_urls: map(
|
priority: 5,
|
||||||
airDCPPConfiguration.airDCPPState.settings.directConnect.client.hubs,
|
};
|
||||||
(item) => item.value,
|
// dispatch(
|
||||||
),
|
// search(manualQuery, airDCPPConfiguration.airDCPPState.socket, {
|
||||||
priority: 5,
|
// username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
|
||||||
};
|
// password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
|
||||||
// dispatch(
|
// }),
|
||||||
// search(manualQuery, airDCPPConfiguration.airDCPPState.socket, {
|
// );
|
||||||
// username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
|
}, []);
|
||||||
// password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
|
|
||||||
// }),
|
|
||||||
// );
|
|
||||||
},
|
|
||||||
[airDCPPConfiguration],
|
|
||||||
);
|
|
||||||
|
|
||||||
// download via AirDC++
|
// download via AirDC++
|
||||||
const downloadDCPPResult = useCallback(
|
const downloadDCPPResult = useCallback(
|
||||||
@@ -136,218 +135,9 @@ export const AcquisitionPanel = (
|
|||||||
// ),
|
// ),
|
||||||
// );
|
// );
|
||||||
},
|
},
|
||||||
[airDCPPConfiguration],
|
[],
|
||||||
);
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="comic-detail columns">
|
|
||||||
{!isEmpty(airDCPPConfiguration.airDCPPState.socket) ? (
|
|
||||||
<Form
|
|
||||||
onSubmit={getDCPPSearchResults}
|
|
||||||
initialValues={{
|
|
||||||
issueName,
|
|
||||||
}}
|
|
||||||
render={({ handleSubmit, form, submitting, pristine, values }) => (
|
|
||||||
<form
|
|
||||||
onSubmit={handleSubmit}
|
|
||||||
className="column is-three-quarters"
|
|
||||||
>
|
|
||||||
<div className="box search">
|
|
||||||
<div className="columns">
|
|
||||||
<Field name="issueName">
|
|
||||||
{({ input, meta }) => {
|
|
||||||
return (
|
|
||||||
<div className="column is-two-thirds">
|
|
||||||
<input
|
|
||||||
{...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 perform a manual search.
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</Field>
|
|
||||||
|
|
||||||
<div className="column">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className={
|
|
||||||
isAirDCPPSearchInProgress
|
|
||||||
? "button is-loading is-warning"
|
|
||||||
: "button"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<span className="icon is-small">
|
|
||||||
<img src="/src/client/assets/img/airdcpp_logo.svg" />
|
|
||||||
</span>
|
|
||||||
<span className="airdcpp-text">Search on AirDC++</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="column is-three-fifths">
|
|
||||||
<article className="message is-info">
|
|
||||||
<div className="message-body is-size-6 is-family-secondary">
|
|
||||||
AirDC++ is not configured. Please configure it in{" "}
|
|
||||||
<code>Settings</code>.
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</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">
|
|
||||||
{airDCPPConfiguration.airDCPPState.settings.directConnect.client.hubs.map(
|
|
||||||
({ value }) => (
|
|
||||||
<span className="tag is-warning" key={value}>
|
|
||||||
{value}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</dt>
|
|
||||||
<dt>
|
|
||||||
Query:{" "}
|
|
||||||
<span className="has-text-weight-semibold">
|
|
||||||
{searchInfo.query.pattern}
|
|
||||||
</span>
|
|
||||||
</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 */}
|
|
||||||
<div className="columns">
|
|
||||||
{!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? (
|
|
||||||
<div className="column">
|
|
||||||
<table className="table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Type</th>
|
|
||||||
<th>Slots</th>
|
|
||||||
<th>Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{map(airDCPPSearchResults, ({ result }, idx) => {
|
|
||||||
return (
|
|
||||||
<tr
|
|
||||||
key={idx}
|
|
||||||
className={
|
|
||||||
!isNil(result.dupe) ? "dupe-search-result" : ""
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<td>
|
|
||||||
<p className="mb-2">
|
|
||||||
{result.type.id === "directory" ? (
|
|
||||||
<i className="fas fa-folder"></i>
|
|
||||||
) : null}{" "}
|
|
||||||
{ellipsize(result.name, 70)}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<dl>
|
|
||||||
<dd>
|
|
||||||
<div className="tags">
|
|
||||||
{!isNil(result.dupe) ? (
|
|
||||||
<span className="tag is-warning">Dupe</span>
|
|
||||||
) : null}
|
|
||||||
<span className="tag is-light is-info">
|
|
||||||
{result.users.user.nicks}
|
|
||||||
</span>
|
|
||||||
{result.users.user.flags.map((flag, idx) => (
|
|
||||||
<span className="tag is-light" key={idx}>
|
|
||||||
{flag}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</dd>
|
|
||||||
</dl>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<span className="tag is-light is-info">
|
|
||||||
{result.type.id === "directory"
|
|
||||||
? "directory"
|
|
||||||
: result.type.str}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div className="tags has-addons">
|
|
||||||
<span className="tag is-success">
|
|
||||||
{result.slots.free} free
|
|
||||||
</span>
|
|
||||||
<span className="tag is-light">
|
|
||||||
{result.slots.total}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<a
|
|
||||||
onClick={() =>
|
|
||||||
downloadDCPPResult(
|
|
||||||
searchInstance.id,
|
|
||||||
result.id,
|
|
||||||
result.name,
|
|
||||||
result.size,
|
|
||||||
result.type,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<i className="fas fa-file-download"></i>
|
|
||||||
</a>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="column is-three-fifths">
|
|
||||||
<article className="message is-info">
|
|
||||||
<div className="message-body is-size-6 is-family-secondary">
|
|
||||||
Searching via <strong>AirDC++</strong> is still in{" "}
|
|
||||||
<strong>alpha</strong>. Some searches may take arbitrarily long,
|
|
||||||
or may not work at all. Searches from <code>ADCS</code> hubs are
|
|
||||||
more reliable than <code>NMDCS</code> ones.
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
|
return <></>;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AcquisitionPanel;
|
export default AcquisitionPanel;
|
||||||
|
|||||||
@@ -39,7 +39,7 @@ export const AirDCPPHubsForm = (): ReactElement => {
|
|||||||
queryFn: async () => await airDCPPSocketInstance.get(`hubs`),
|
queryFn: async () => await airDCPPSocketInstance.get(`hubs`),
|
||||||
});
|
});
|
||||||
let hubList = {};
|
let hubList = {};
|
||||||
if (hubs) {
|
if (!isNil(hubs)) {
|
||||||
hubList = hubs.map(({ hub_url, identity }) => ({
|
hubList = hubs.map(({ hub_url, identity }) => ({
|
||||||
value: hub_url,
|
value: hub_url,
|
||||||
label: identity.name,
|
label: identity.name,
|
||||||
|
|||||||
Reference in New Issue
Block a user