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

🪑 Cleaned up the DC++ search results table

Browse Source
This commit is contained in:
Rishi Ghan
2023-12-26 00:51:53 -05:00
parent 8f42afe560
commit d647feff4d
2 changed files with 108 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -262,7 +262,7 @@ export const AcquisitionPanel = (
); );
return ( return (
<> <>
<div className="comic-detail columns"> <div className="mt-5">
{!isEmpty(airDCPPSocketInstance) ? ( {!isEmpty(airDCPPSocketInstance) ? (
<Form <Form
onSubmit={getDCPPSearchResults} onSubmit={getDCPPSearchResults}
@@ -270,44 +270,40 @@ export const AcquisitionPanel = (
issueName, issueName,
}} }}
render={({ handleSubmit, form, submitting, pristine, values }) => ( render={({ handleSubmit, form, submitting, pristine, values }) => (
<form <form onSubmit={handleSubmit}>
onSubmit={handleSubmit} <Field name="issueName">
className="column is-three-quarters" {({ input, meta }) => {
> return (
<div className="box search"> <div className="max-w-fit">
<div className="columns"> <div className="flex flex-row bg-slate-300 dark:bg-slate-400 rounded-l-lg">
<Field name="issueName"> <div className="w-10 pl-2 pt-1 text-gray-400 dark:text-gray-200">
{({ input, meta }) => { <i className="icon-[solar--magnifer-bold-duotone] h-7 w-7" />
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"></span>
</div> </div>
); <input
}} {...input}
</Field> className="dark:bg-slate-400 bg-slate-300 py-2 px-2 rounded-l-md border-gray-300 h-10 min-w-full dark:text-slate-800 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
placeholder="Type an issue/volume name"
/>
<div className="column"> <button
<button className="sm:mt-0 min-w-fit rounded-r-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"
type="submit" type="submit"
className={ >
airDCPPSearchStatus <div className="flex flex-row">
? "button is-loading is-warning" Search DC++
: "button is-success is-light" <div className="h-5 w-5 ml-2">
} <img
> src="/src/client/assets/img/airdcpp_logo.svg"
<span className="icon is-small"> className="h-5 w-5"
<img src="/src/client/assets/img/airdcpp_logo.svg" /> />
</span> </div>
<span className="airdcpp-text">Search on AirDC++</span> </div>
</button> </button>
</div> </div>
</div> </div>
</div> );
}}
</Field>
</form> </form>
)} )}
/> />
@@ -380,26 +376,34 @@ export const AcquisitionPanel = (
{/* AirDC++ results */} {/* AirDC++ results */}
<div className="columns"> <div className="columns">
{!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? ( {!isNil(airDCPPSearchResults) && !isEmpty(airDCPPSearchResults) ? (
<div className="column"> <div className="overflow-x-auto w-fit mt-4 rounded-lg border border-gray-200">
<table className="table"> <table className="min-w-full divide-y-2 divide-gray-200 dark:divide-gray-200 text-md">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th className="whitespace-nowrap px-2 py-2 font-medium text-gray-900 dark:text-slate-200">
<th>Type</th> Name
<th>Slots</th> </th>
<th>Actions</th> <th className="whitespace-nowrap py-2 font-medium text-gray-900 dark:text-slate-200">
Type
</th>
<th className="whitespace-nowrap py-2 font-medium text-gray-900 dark:text-slate-200">
Slots
</th>
<th className="whitespace-nowrap py-2 font-medium text-gray-900 dark:text-slate-200">
Actions
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody className="divide-y divide-slate-500">
{map(airDCPPSearchResults, ({ result }, idx) => { {map(airDCPPSearchResults, ({ result }, idx) => {
return ( return (
<tr <tr
key={idx} key={idx}
className={ className={
!isNil(result.dupe) ? "dupe-search-result" : "" !isNil(result.dupe) ? "bg-purple-50" : "w-fit text-sm"
} }
> >
<td> <td className="whitespace-nowrap px-3 py-3 text-gray-700 dark:text-slate-300">
<p className="mb-2"> <p className="mb-2">
{result.type.id === "directory" ? ( {result.type.id === "directory" ? (
<i className="fas fa-folder"></i> <i className="fas fa-folder"></i>
@@ -409,16 +413,31 @@ export const AcquisitionPanel = (
<dl> <dl>
<dd> <dd>
<div className="tags"> <div className="inline-flex flex-row gap-2">
{!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">
{result.users.user.nicks} {/* 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="pr-1 pt-1">
<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">
{result.users.user.nicks}
</span>
</span> </span>
{/* Flags */}
{result.users.user.flags.map((flag, idx) => ( {result.users.user.flags.map((flag, idx) => (
<span className="tag is-light" key={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">
{flag} <span className="pr-1 pt-1">
<i className="icon-[solar--tag-horizontal-bold-duotone] w-5 h-5"></i>
</span>
<span className="text-md text-slate-500 dark:text-slate-900">
{flag}
</span>
</span> </span>
))} ))}
</div> </div>
@@ -426,21 +445,28 @@ export const AcquisitionPanel = (
</dl> </dl>
</td> </td>
<td> <td>
<span className="tag is-light is-info"> {/* Extension */}
{result.type.id === "directory" <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">
? "directory" <span className="pr-1 pt-1">
: result.type.str} <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">
{result.type.str}
</span>
</span> </span>
</td> </td>
<td> <td className="px-2">
<div className="tags has-addons"> {/* Slots */}
<span className="tag is-success"> <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">
{result.slots.free} free <span className="pr-1 pt-1">
<i className="icon-[solar--settings-minimalistic-bold-duotone] w-5 h-5"></i>
</span> </span>
<span className="tag is-light">
{result.slots.total} <span className="text-md text-slate-500 dark:text-slate-900">
{result.slots.total} slots; {result.slots.free} free
</span> </span>
</div> </span>
</td> </td>
<td> <td>
<button <button
@@ -470,25 +496,28 @@ export const AcquisitionPanel = (
</table> </table>
</div> </div>
) : ( ) : (
<div className="column is-three-fifths"> <div className="">
<article className="message is-info"> <article
<div className="message-body is-size-6 is-family-secondary"> role="alert"
<p> className="mt-4 rounded-lg text-sm max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
The default search term is an auto-detected title; you may >
need to change it to get better matches if the auto-detected <div>
one doesn't work. The default search term is an auto-detected title; you may need
</p> to change it to get better matches if the auto-detected one
doesn't work.
</div> </div>
</article> </article>
<article className="message is-warning"> <article
<div className="message-body is-size-6 is-family-secondary"> role="alert"
<p className="content"> className="mt-4 rounded-lg text-sm max-w-screen-md border-s-4 border-blue-500 bg-blue-50 p-4 dark:border-s-4 dark:border-blue-600 dark:bg-blue-300 dark:text-slate-600"
Searching via <strong>AirDC++</strong> is still in >
<strong>alpha</strong>. Some searches may take arbitrarily <div>
long, or may not work at all. Searches from <code>ADCS</code> Searching via <strong>AirDC++</strong> is still in{" "}
hubs are more reliable than <code>NMDCS</code> ones. <strong>alpha</strong>. Some searches may take arbitrarily long,
</p> or may not work at all. Searches from{" "}
<code className="font-hasklig">ADCS</code> hubs are more
reliable than <code className="font-hasklig">NMDCS</code> ones.
</div> </div>
</article> </article>
</div> </div>

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

@@ -1,5 +1,4 @@
import React, { useEffect, useContext, ReactElement, useState } from "react"; import React, { useEffect, useContext, ReactElement, useState } from "react";
import { getBundlesForComic } from "../../actions/airdcpp.actions";
import { RootState } from "threetwo-ui-typings"; import { RootState } from "threetwo-ui-typings";
import { isArray, isEmpty, isNil, isUndefined, map } from "lodash"; import { isArray, isEmpty, isNil, isUndefined, map } from "lodash";
import prettyBytes from "pretty-bytes"; import prettyBytes from "pretty-bytes";
@@ -19,13 +18,6 @@ interface IDownloadsPanelProps {
export const DownloadsPanel = ( export const DownloadsPanel = (
props: IDownloadsPanelProps, props: IDownloadsPanelProps,
): ReactElement | null => { ): ReactElement | null => {
// const bundles = useSelector((state: RootState) => {
// return state.airdcpp.bundles;
// });
//
// // AirDCPP Socket initialization
// const userSettings = useSelector((state: RootState) => state.settings.data);
// const airDCPPConfiguration = useContext(AirDCPPSocketContext);
const { comicObjectId } = useParams<{ comicObjectId: string }>(); const { comicObjectId } = useParams<{ comicObjectId: string }>();
const [bundles, setBundles] = useState([]); const [bundles, setBundles] = useState([]);
const { airDCPPSocketInstance } = useStore( const { airDCPPSocketInstance } = useStore(
@@ -66,7 +58,7 @@ export const DownloadsPanel = (
getBundles(comicObject).then((result) => { getBundles(comicObject).then((result) => {
setBundles(result); setBundles(result);
}); });
}, [isSuccess]); }, [comicObject]);
const Bundles = (props) => { const Bundles = (props) => {
console.log("asdas", props); console.log("asdas", props);