🧸 Zustand and Tanstack Query (#96)
* ↪️ Removed node-sass, added sass * 🏗️ Refactoring Navbar to read from zustand store * ⬆️ Bumped deps * 🏗️ Refactored AirDC++ session status indicator * 🏗️ Refactored Import page to read from global state * 🏗 Wired up the event emit correctly * 🏗️ Added import queue related state * 🏗 Implemented setQueueAction * 🏗️ Wired up job queue control methods * 🏗️ Added null check and removed useless deps * 🏗️ Refactored the Import page * ↪️ Added cache invalidation to job statistics query * 🏗️ Refactoring the Library page * 🏗️ Fixed pagination and disabled states * ✏️ Changed page to offset To better reflect what we are doing with the pagination controls * 🏗️ Refactoring ComicDetail page and its children * 🏗️ Refactored ComicDetailContainer with useQuery * 🔧 Fixed the error check on Library page * 🏗️ Refactoring AcquisitionPanel * 🏗️ Refactoring the AirDC++ Forms * 🦃 Thanksgiving Day bug fixes * ⬆️ Bumped up Vite to 5.0 * 🔧 Refactoring AcquisitionPanel * 🏗️ Wiring up the DC++ search method * 🏗️ Refactoring AirDC++ search method * 🔎 Added some validation to ADC++ Hubs settings form * 🏗️ Fixed the ADC++ search results * 🏗️ Cleanup of the search results pane
This commit was merged in pull request #96.
This commit is contained in:
GitHub
@@ -1,21 +1,18 @@
|
||||
import React, {
|
||||
useCallback,
|
||||
useContext,
|
||||
ReactElement,
|
||||
useEffect,
|
||||
useState,
|
||||
} from "react";
|
||||
import React, { useCallback, ReactElement, useEffect, useState } from "react";
|
||||
import {
|
||||
search,
|
||||
downloadAirDCPPItem,
|
||||
getBundlesForComic,
|
||||
sleep,
|
||||
} from "../../actions/airdcpp.actions";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { SearchQuery, PriorityEnum, SearchResponse } from "threetwo-ui-typings";
|
||||
import { RootState, SearchInstance } from "threetwo-ui-typings";
|
||||
import ellipsize from "ellipsize";
|
||||
import { Form, Field } from "react-final-form";
|
||||
import { difference } from "../../shared/utils/object.utils";
|
||||
import { isEmpty, isNil, map } from "lodash";
|
||||
import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
|
||||
import { useStore } from "../../store";
|
||||
import { useShallow } from "zustand/react/shallow";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
interface IAcquisitionPanelProps {
|
||||
query: any;
|
||||
@@ -27,107 +24,196 @@ interface IAcquisitionPanelProps {
|
||||
export const AcquisitionPanel = (
|
||||
props: IAcquisitionPanelProps,
|
||||
): ReactElement => {
|
||||
const {
|
||||
airDCPPSocketInstance,
|
||||
airDCPPClientConfiguration,
|
||||
airDCPPSessionInformation,
|
||||
} = useStore(
|
||||
useShallow((state) => ({
|
||||
airDCPPSocketInstance: state.airDCPPSocketInstance,
|
||||
airDCPPClientConfiguration: state.airDCPPClientConfiguration,
|
||||
airDCPPSessionInformation: state.airDCPPSessionInformation,
|
||||
})),
|
||||
);
|
||||
|
||||
/**
|
||||
* Get the hubs list from an AirDCPP Socket
|
||||
*/
|
||||
const { data: hubs } = useQuery({
|
||||
queryKey: ["hubs"],
|
||||
queryFn: async () => await airDCPPSocketInstance.get(`hubs`),
|
||||
});
|
||||
|
||||
const issueName = props.query.issue.name || "";
|
||||
// const { settings } = props;
|
||||
const sanitizedIssueName = issueName.replace(/[^a-zA-Z0-9 ]/g, " ");
|
||||
|
||||
// Selectors for picking state
|
||||
const airDCPPSearchResults = useSelector((state: RootState) => {
|
||||
return state.airdcpp.searchResults;
|
||||
});
|
||||
const isAirDCPPSearchInProgress = useSelector(
|
||||
(state: RootState) => state.airdcpp.isAirDCPPSearchInProgress,
|
||||
);
|
||||
const searchInfo = useSelector(
|
||||
(state: RootState) => state.airdcpp.searchInfo,
|
||||
);
|
||||
const searchInstance: SearchInstance = useSelector(
|
||||
(state: RootState) => state.airdcpp.searchInstance,
|
||||
);
|
||||
// const airDCPPSearchResults = useSelector((state: RootState) => {
|
||||
// return state.airdcpp.searchResults;
|
||||
// });
|
||||
// const isAirDCPPSearchInProgress = useSelector(
|
||||
// (state: RootState) => state.airdcpp.isAirDCPPSearchInProgress,
|
||||
// );
|
||||
// const searchInfo = useSelector(
|
||||
// (state: RootState) => state.airdcpp.searchInfo,
|
||||
// );
|
||||
// const searchInstance: SearchInstance = useSelector(
|
||||
// (state: RootState) => state.airdcpp.searchInstance,
|
||||
// );
|
||||
|
||||
// const settings = useSelector((state: RootState) => state.settings.data);
|
||||
const airDCPPConfiguration = useContext(AirDCPPSocketContext);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
// const airDCPPConfiguration = useContext(AirDCPPSocketContext);
|
||||
interface SearchData {
|
||||
query: Pick<SearchQuery, "pattern"> & Partial<Omit<SearchQuery, "pattern">>;
|
||||
hub_urls: string[] | undefined | null;
|
||||
priority: PriorityEnum;
|
||||
}
|
||||
const [dcppQuery, setDcppQuery] = useState({});
|
||||
const [airDCPPSearchResults, setAirDCPPSearchResults] = useState([]);
|
||||
|
||||
// Construct a AirDC++ query based on metadata inferred, upon component mount
|
||||
// Pre-populate the search input with the search string, so that
|
||||
// All the user has to do is hit "Search AirDC++"
|
||||
useEffect(() => {
|
||||
if (!isEmpty(airDCPPConfiguration.airDCPPState.settings)) {
|
||||
// AirDC++ search query
|
||||
const dcppSearchQuery = {
|
||||
query: {
|
||||
pattern: `${sanitizedIssueName.replace(/#/g, "")}`,
|
||||
extensions: ["cbz", "cbr", "cb7"],
|
||||
},
|
||||
hub_urls: map(
|
||||
airDCPPConfiguration.airDCPPState.settings.directConnect.client.hubs,
|
||||
(item) => item.value,
|
||||
),
|
||||
priority: 5,
|
||||
};
|
||||
setDcppQuery(dcppSearchQuery);
|
||||
}
|
||||
}, [airDCPPConfiguration]);
|
||||
// AirDC++ search query
|
||||
const dcppSearchQuery = {
|
||||
query: {
|
||||
pattern: `${sanitizedIssueName.replace(/#/g, "")}`,
|
||||
extensions: ["cbz", "cbr", "cb7"],
|
||||
},
|
||||
hub_urls: map(hubs, (item) => item.value),
|
||||
priority: 5,
|
||||
};
|
||||
setDcppQuery(dcppSearchQuery);
|
||||
}, []);
|
||||
|
||||
const getDCPPSearchResults = useCallback(
|
||||
async (searchQuery) => {
|
||||
const manualQuery = {
|
||||
query: {
|
||||
pattern: `${searchQuery.issueName}`,
|
||||
extensions: ["cbz", "cbr", "cb7"],
|
||||
const search = async (data: SearchData, ADCPPSocket: any) => {
|
||||
try {
|
||||
if (!ADCPPSocket.isConnected()) {
|
||||
await ADCPPSocket();
|
||||
}
|
||||
const instance: SearchInstance = await ADCPPSocket.post("search");
|
||||
// dispatch({
|
||||
// type: AIRDCPP_SEARCH_IN_PROGRESS,
|
||||
// });
|
||||
|
||||
// We want to get notified about every new result in order to make the user experience better
|
||||
await ADCPPSocket.addListener(
|
||||
`search`,
|
||||
"search_result_added",
|
||||
async (groupedResult) => {
|
||||
// ...add the received result in the UI
|
||||
// (it's probably a good idea to have some kind of throttling for the UI updates as there can be thousands of results)
|
||||
setAirDCPPSearchResults((state) => [...state, groupedResult]);
|
||||
},
|
||||
hub_urls: map(
|
||||
airDCPPConfiguration.airDCPPState.settings.directConnect.client.hubs,
|
||||
(item) => item.value,
|
||||
),
|
||||
priority: 5,
|
||||
};
|
||||
dispatch(
|
||||
search(manualQuery, airDCPPConfiguration.airDCPPState.socket, {
|
||||
username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
|
||||
password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
|
||||
}),
|
||||
instance.id,
|
||||
);
|
||||
},
|
||||
[dispatch, airDCPPConfiguration],
|
||||
);
|
||||
|
||||
// We also want to update the existing items in our list when new hits arrive for the previously listed files/directories
|
||||
await ADCPPSocket.addListener(
|
||||
`search`,
|
||||
"search_result_updated",
|
||||
async (groupedResult) => {
|
||||
// ...update properties of the existing result in the UI
|
||||
const bundleToUpdateIndex = airDCPPSearchResults?.findIndex(
|
||||
(bundle) => bundle.result.id === groupedResult.result.id,
|
||||
);
|
||||
const updatedState = [...airDCPPSearchResults];
|
||||
if (
|
||||
!isNil(difference(updatedState[bundleToUpdateIndex], groupedResult))
|
||||
) {
|
||||
updatedState[bundleToUpdateIndex] = groupedResult;
|
||||
}
|
||||
setAirDCPPSearchResults((state) => [...state, ...updatedState]);
|
||||
},
|
||||
instance.id,
|
||||
);
|
||||
|
||||
// We need to show something to the user in case the search won't yield any results so that he won't be waiting forever)
|
||||
// Wait for 5 seconds for any results to arrive after the searches were sent to the hubs
|
||||
await ADCPPSocket.addListener(
|
||||
`search`,
|
||||
"search_hub_searches_sent",
|
||||
async (searchInfo) => {
|
||||
await sleep(5000);
|
||||
|
||||
// Check the number of received results (in real use cases we should know that even without calling the API)
|
||||
const currentInstance = await ADCPPSocket.get(
|
||||
`search/${instance.id}`,
|
||||
);
|
||||
if (currentInstance.result_count === 0) {
|
||||
// ...nothing was received, show an informative message to the user
|
||||
console.log("No more search results.");
|
||||
}
|
||||
|
||||
// The search can now be considered to be "complete"
|
||||
// If there's an "in progress" indicator in the UI, that could also be disabled here
|
||||
// dispatch({
|
||||
// type: AIRDCPP_HUB_SEARCHES_SENT,
|
||||
// searchInfo,
|
||||
// instance,
|
||||
// });
|
||||
},
|
||||
instance.id,
|
||||
);
|
||||
// Finally, perform the actual search
|
||||
await ADCPPSocket.post(`search/${instance.id}/hub_search`, data);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
const getDCPPSearchResults = async (searchQuery) => {
|
||||
const manualQuery = {
|
||||
query: {
|
||||
pattern: `${searchQuery.issueName}`,
|
||||
extensions: ["cbz", "cbr", "cb7"],
|
||||
},
|
||||
hub_urls: map(hubs, (hub) => hub.hub_url),
|
||||
priority: 5,
|
||||
};
|
||||
|
||||
search(manualQuery, airDCPPSocketInstance);
|
||||
};
|
||||
|
||||
// download via AirDC++
|
||||
const downloadDCPPResult = useCallback(
|
||||
(searchInstanceId, resultId, name, size, type) => {
|
||||
dispatch(
|
||||
downloadAirDCPPItem(
|
||||
searchInstanceId,
|
||||
resultId,
|
||||
props.comicObjectId,
|
||||
name,
|
||||
size,
|
||||
type,
|
||||
airDCPPConfiguration.airDCPPState.socket,
|
||||
{
|
||||
username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
|
||||
password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
|
||||
},
|
||||
),
|
||||
);
|
||||
// dispatch(
|
||||
// downloadAirDCPPItem(
|
||||
// searchInstanceId,
|
||||
// resultId,
|
||||
// props.comicObjectId,
|
||||
// name,
|
||||
// size,
|
||||
// type,
|
||||
// airDCPPConfiguration.airDCPPState.socket,
|
||||
// {
|
||||
// username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
|
||||
// password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
|
||||
// },
|
||||
// ),
|
||||
// );
|
||||
// this is to update the download count badge on the downloads tab
|
||||
dispatch(
|
||||
getBundlesForComic(
|
||||
props.comicObjectId,
|
||||
airDCPPConfiguration.airDCPPState.socket,
|
||||
{
|
||||
username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
|
||||
password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
|
||||
},
|
||||
),
|
||||
);
|
||||
// dispatch(
|
||||
// getBundlesForComic(
|
||||
// props.comicObjectId,
|
||||
// airDCPPConfiguration.airDCPPState.socket,
|
||||
// {
|
||||
// username: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.username}`,
|
||||
// password: `${airDCPPConfiguration.airDCPPState.settings.directConnect.client.host.password}`,
|
||||
// },
|
||||
// ),
|
||||
// );
|
||||
},
|
||||
[airDCPPConfiguration],
|
||||
[],
|
||||
);
|
||||
console.log("yaman", airDCPPSearchResults);
|
||||
return (
|
||||
<>
|
||||
<div className="comic-detail columns">
|
||||
{!isEmpty(airDCPPConfiguration.airDCPPState.socket) ? (
|
||||
{!isEmpty(airDCPPSocketInstance) ? (
|
||||
<Form
|
||||
onSubmit={getDCPPSearchResults}
|
||||
initialValues={{
|
||||
@@ -149,9 +235,7 @@ export const AcquisitionPanel = (
|
||||
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>
|
||||
<span className="help is-clearfix is-light is-info"></span>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
@@ -161,9 +245,9 @@ export const AcquisitionPanel = (
|
||||
<button
|
||||
type="submit"
|
||||
className={
|
||||
isAirDCPPSearchInProgress
|
||||
false
|
||||
? "button is-loading is-warning"
|
||||
: "button"
|
||||
: "button is-success is-light"
|
||||
}
|
||||
>
|
||||
<span className="icon is-small">
|
||||
@@ -182,57 +266,13 @@ export const AcquisitionPanel = (
|
||||
<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>.
|
||||
<code>Settings > AirDC++ > Connection</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) ? (
|
||||
@@ -259,7 +299,7 @@ export const AcquisitionPanel = (
|
||||
<p className="mb-2">
|
||||
{result.type.id === "directory" ? (
|
||||
<i className="fas fa-folder"></i>
|
||||
) : null}{" "}
|
||||
) : null}
|
||||
{ellipsize(result.name, 70)}
|
||||
</p>
|
||||
|
||||
@@ -299,7 +339,8 @@ export const AcquisitionPanel = (
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a
|
||||
<button
|
||||
className="button is-small is-light is-success"
|
||||
onClick={() =>
|
||||
downloadDCPPResult(
|
||||
searchInstance.id,
|
||||
@@ -310,8 +351,11 @@ export const AcquisitionPanel = (
|
||||
)
|
||||
}
|
||||
>
|
||||
<i className="fas fa-file-download"></i>
|
||||
</a>
|
||||
<span className="icon">
|
||||
<i className="fas fa-file-download"></i>
|
||||
</span>
|
||||
<span>Download </span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
@@ -323,10 +367,22 @@ export const AcquisitionPanel = (
|
||||
<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.
|
||||
<p>
|
||||
The default search term is an auto-detected title; you may
|
||||
need to change it to get better matches if the auto-detected
|
||||
one doesn't work.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="message is-warning">
|
||||
<div className="message-body is-size-6 is-family-secondary">
|
||||
<p className="content">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
@@ -336,4 +392,4 @@ export const AcquisitionPanel = (
|
||||
);
|
||||
};
|
||||
|
||||
export default AcquisitionPanel;
|
||||
export default AcquisitionPanel;
|
||||
|
||||
Reference in New Issue
Block a user