🔧 Fixing the DC++ download bundles
This commit is contained in:
@@ -1,5 +1,4 @@
|
|||||||
import React, { useCallback, ReactElement, useEffect, useState } from "react";
|
import React, { useCallback, ReactElement, useEffect, useState } from "react";
|
||||||
import { getBundlesForComic, sleep } from "../../actions/airdcpp.actions";
|
|
||||||
import { SearchQuery, PriorityEnum, SearchResponse } from "threetwo-ui-typings";
|
import { SearchQuery, PriorityEnum, SearchResponse } from "threetwo-ui-typings";
|
||||||
import { RootState, SearchInstance } from "threetwo-ui-typings";
|
import { RootState, SearchInstance } from "threetwo-ui-typings";
|
||||||
import ellipsize from "ellipsize";
|
import ellipsize from "ellipsize";
|
||||||
@@ -12,7 +11,6 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import { AIRDCPP_SERVICE_BASE_URI } from "../../constants/endpoints";
|
import { AIRDCPP_SERVICE_BASE_URI } from "../../constants/endpoints";
|
||||||
|
|
||||||
|
|
||||||
interface IAcquisitionPanelProps {
|
interface IAcquisitionPanelProps {
|
||||||
query: any;
|
query: any;
|
||||||
comicObjectId: any;
|
comicObjectId: any;
|
||||||
@@ -35,7 +33,7 @@ export const AcquisitionPanel = (
|
|||||||
priority: PriorityEnum;
|
priority: PriorityEnum;
|
||||||
}
|
}
|
||||||
interface SearchResult {
|
interface SearchResult {
|
||||||
id: string;
|
id: string;
|
||||||
// Add other properties as needed
|
// Add other properties as needed
|
||||||
slots: any;
|
slots: any;
|
||||||
type: any;
|
type: any;
|
||||||
@@ -112,26 +110,20 @@ export const AcquisitionPanel = (
|
|||||||
*/
|
*/
|
||||||
const search = async (searchData: any) => {
|
const search = async (searchData: any) => {
|
||||||
setAirDCPPSearchResults([]);
|
setAirDCPPSearchResults([]);
|
||||||
socketIOInstance.emit(
|
socketIOInstance.emit("call", "socket.search", {
|
||||||
"call",
|
query: searchData,
|
||||||
"socket.search",
|
config: {
|
||||||
{
|
protocol: `ws`,
|
||||||
query: searchData,
|
hostname: `localhost:5600`,
|
||||||
config: {
|
username: `user`,
|
||||||
protocol: `ws`,
|
password: `pass`,
|
||||||
hostname: `localhost:5600`,
|
|
||||||
username: `user`,
|
|
||||||
password: `pass`,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
);
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
socketIOInstance.on("searchResultAdded", ({ result }: any) => {
|
socketIOInstance.on("searchResultAdded", ({ result }: any) => {
|
||||||
setAirDCPPSearchResults((previousState) => {
|
setAirDCPPSearchResults((previousState) => {
|
||||||
const exists = previousState.some(
|
const exists = previousState.some((item) => result.id === item.id);
|
||||||
(item) => result.id === item.id,
|
|
||||||
);
|
|
||||||
if (!exists) {
|
if (!exists) {
|
||||||
return [...previousState, result];
|
return [...previousState, result];
|
||||||
}
|
}
|
||||||
@@ -334,118 +326,121 @@ export const AcquisitionPanel = (
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="divide-y divide-slate-100 dark:divide-gray-500">
|
<tbody className="divide-y divide-slate-100 dark:divide-gray-500">
|
||||||
{map(airDCPPSearchResults, ({ dupe, type, name, id, slots, users, size }, idx) => {
|
{map(
|
||||||
return (
|
airDCPPSearchResults,
|
||||||
<tr
|
({ dupe, type, name, id, slots, users, size }, idx) => {
|
||||||
key={idx}
|
return (
|
||||||
className={
|
<tr
|
||||||
!isNil(dupe)
|
key={idx}
|
||||||
? "bg-gray-100 dark:bg-gray-700"
|
className={
|
||||||
: "w-fit text-sm"
|
!isNil(dupe)
|
||||||
}
|
? "bg-gray-100 dark:bg-gray-700"
|
||||||
>
|
: "w-fit text-sm"
|
||||||
<td className="whitespace-nowrap px-3 py-3 text-gray-700 dark:text-slate-300">
|
}
|
||||||
<p className="mb-2">
|
>
|
||||||
{type.id === "directory" ? (
|
<td className="whitespace-nowrap px-3 py-3 text-gray-700 dark:text-slate-300">
|
||||||
<i className="fas fa-folder"></i>
|
<p className="mb-2">
|
||||||
) : null}
|
{type.id === "directory" ? (
|
||||||
{ellipsize(name, 70)}
|
<i className="fas fa-folder"></i>
|
||||||
</p>
|
) : null}
|
||||||
|
{ellipsize(name, 70)}
|
||||||
|
</p>
|
||||||
|
|
||||||
<dl>
|
<dl>
|
||||||
<dd>
|
<dd>
|
||||||
<div className="inline-flex flex-row gap-2">
|
<div className="inline-flex flex-row gap-2">
|
||||||
{!isNil(dupe) ? (
|
{!isNil(dupe) ? (
|
||||||
|
<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--copy-bold-duotone] w-5 h-5"></i>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span className="text-md text-slate-500 dark:text-slate-900">
|
||||||
|
Dupe
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{/* Nicks */}
|
||||||
<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="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">
|
<span className="pr-1 pt-1">
|
||||||
<i className="icon-[solar--copy-bold-duotone] w-5 h-5"></i>
|
<i className="icon-[solar--user-rounded-bold-duotone] w-5 h-5"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span className="text-md text-slate-500 dark:text-slate-900">
|
<span className="text-md text-slate-500 dark:text-slate-900">
|
||||||
Dupe
|
{users.user.nicks}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
) : null}
|
{/* Flags */}
|
||||||
|
{users.user.flags.map((flag, idx) => (
|
||||||
|
<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--tag-horizontal-bold-duotone] w-5 h-5"></i>
|
||||||
|
</span>
|
||||||
|
|
||||||
{/* Nicks */}
|
<span className="text-md text-slate-500 dark:text-slate-900">
|
||||||
<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">
|
{flag}
|
||||||
<span className="pr-1 pt-1">
|
</span>
|
||||||
<i className="icon-[solar--user-rounded-bold-duotone] w-5 h-5"></i>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span className="text-md text-slate-500 dark:text-slate-900">
|
|
||||||
{users.user.nicks}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
{/* Flags */}
|
|
||||||
{users.user.flags.map((flag, idx) => (
|
|
||||||
<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--tag-horizontal-bold-duotone] w-5 h-5"></i>
|
|
||||||
</span>
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{/* Extension */}
|
||||||
|
<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--zip-file-bold-duotone] w-5 h-5"></i>
|
||||||
|
</span>
|
||||||
|
|
||||||
<span className="text-md text-slate-500 dark:text-slate-900">
|
<span className="text-md text-slate-500 dark:text-slate-900">
|
||||||
{flag}
|
{type.str}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</dd>
|
|
||||||
</dl>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
{/* Extension */}
|
|
||||||
<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--zip-file-bold-duotone] w-5 h-5"></i>
|
|
||||||
</span>
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-2">
|
||||||
|
{/* Slots */}
|
||||||
|
<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--settings-minimalistic-bold-duotone] w-5 h-5"></i>
|
||||||
|
</span>
|
||||||
|
|
||||||
<span className="text-md text-slate-500 dark:text-slate-900">
|
<span className="text-md text-slate-500 dark:text-slate-900">
|
||||||
{type.str}
|
{slots.total} slots; {slots.free} free
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</td>
|
||||||
</td>
|
<td className="px-2">
|
||||||
<td className="px-2">
|
<button
|
||||||
{/* Slots */}
|
className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
|
||||||
<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">
|
onClick={() =>
|
||||||
<span className="pr-1 pt-1">
|
download(
|
||||||
<i className="icon-[solar--settings-minimalistic-bold-duotone] w-5 h-5"></i>
|
airDCPPSearchInstance.id,
|
||||||
</span>
|
id,
|
||||||
|
comicObjectId,
|
||||||
<span className="text-md text-slate-500 dark:text-slate-900">
|
name,
|
||||||
{slots.total} slots; {slots.free} free
|
size,
|
||||||
</span>
|
type,
|
||||||
</span>
|
{
|
||||||
</td>
|
protocol: `ws`,
|
||||||
<td className="px-2">
|
hostname: `localhost:5600`,
|
||||||
<button
|
username: `user`,
|
||||||
className="flex space-x-1 sm:mt-0 sm:flex-row sm:items-center rounded-lg border border-green-400 dark:border-green-200 bg-green-200 px-3 py-1 text-gray-500 hover:bg-transparent hover:text-green-600 focus:outline-none focus:ring active:text-indigo-500"
|
password: `pass`,
|
||||||
onClick={() =>
|
},
|
||||||
download(
|
)
|
||||||
airDCPPSearchInstance.id,
|
}
|
||||||
id,
|
>
|
||||||
comicObjectId,
|
<span className="text-xs">Download</span>
|
||||||
name,
|
<span className="w-5 h-5">
|
||||||
size,
|
<i className="h-5 w-5 icon-[solar--download-bold-duotone]"></i>
|
||||||
type,
|
</span>
|
||||||
{
|
</button>
|
||||||
protocol: `ws`,
|
</td>
|
||||||
hostname: `localhost:5600`,
|
</tr>
|
||||||
username: `user`,
|
);
|
||||||
password: `pass`,
|
},
|
||||||
},
|
)}
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<span className="text-xs">Download</span>
|
|
||||||
<span className="w-5 h-5">
|
|
||||||
<i className="h-5 w-5 icon-[solar--download-bold-duotone]"></i>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -83,7 +83,7 @@ const renderCard = (props: ICardProps): ReactElement => {
|
|||||||
|
|
||||||
case "vertical-2":
|
case "vertical-2":
|
||||||
return (
|
return (
|
||||||
<div className="block rounded-md w-64 h-fit shadow-md shadow-white-400 bg-gray-200 dark:bg-slate-500">
|
<div className="block rounded-md max-w-64 h-fit shadow-md shadow-white-400 bg-gray-200 dark:bg-slate-500">
|
||||||
<img
|
<img
|
||||||
alt="Home"
|
alt="Home"
|
||||||
src={props.imageUrl}
|
src={props.imageUrl}
|
||||||
|
|||||||
Reference in New Issue
Block a user