🔧 Fixes for DOMNesting issues on the Downloads page

Signed-off-by: Rishi Ghan <rishi.ghan@gmail.com>
This commit is contained in:
2023-03-02 00:20:23 -05:00
parent 145a5be9dc
commit dd4bf31612

View File

@@ -3,7 +3,6 @@ import { getTransfers } from "../../actions/airdcpp.actions";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
import { AirDCPPSocketContext } from "../../context/AirDCPPSocket"; import { AirDCPPSocketContext } from "../../context/AirDCPPSocket";
import { isEmpty, isNil, isUndefined } from "lodash"; import { isEmpty, isNil, isUndefined } from "lodash";
import { searchIssue } from "../../actions/fileops.actions";
import { determineCoverFile } from "../../shared/utils/metadata.utils"; import { determineCoverFile } from "../../shared/utils/metadata.utils";
import MetadataPanel from "../shared/MetadataPanel"; import MetadataPanel from "../shared/MetadataPanel";
@@ -47,7 +46,6 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
}) })
setBundles(foo); setBundles(foo);
} }
}, [issueBundles]) }, [issueBundles])
return !isNil(bundles) ? return !isNil(bundles) ?
@@ -56,9 +54,9 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
<h1 className="title">Downloads</h1> <h1 className="title">Downloads</h1>
<div className="columns"> <div className="columns">
<div className="column is-half"> <div className="column is-half">
{bundles.map(bundle => { {bundles.map((bundle, idx) => {
console.log(bundle); console.log(bundle);
return <> return <div key={idx}>
<MetadataPanel <MetadataPanel
data={bundle} data={bundle}
imageStyle={{ maxWidth: 80 }} imageStyle={{ maxWidth: 80 }}
@@ -70,30 +68,33 @@ export const Downloads = (props: IDownloadsProps): ReactElement => {
margin: "0 0 8px 0", margin: "0 0 8px 0",
}} /> }} />
<table className="table is-size-7"> <table className="table is-size-7">
<thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Size</th> <th>Size</th>
<th>Type</th> <th>Type</th>
<th>Bundle ID</th> <th>Bundle ID</th>
</tr> </tr>
</thead>
{bundle.acquisition.directconnect.downloads.map((bundle) => { <tbody>
return(<tr> {bundle.acquisition.directconnect.downloads.map((bundle, idx) => {
return (<tr key={idx}>
<td>{bundle.name}</td> <td>{bundle.name}</td>
<td>{bundle.size}</td> <td>{bundle.size}</td>
<td>{bundle.type.str}</td> <td>{bundle.type.str}</td>
<td><span className="tag is-warning">{bundle.bundleId}</span></td> <td><span className="tag is-warning">{bundle.bundleId}</span></td>
</tr>) </tr>)
})} })}
</table> </tbody>
</table>
{/* <pre>{JSON.stringify(bundle.acquisition.directconnect.downloads, null, 2)}</pre> */} {/* <pre>{JSON.stringify(bundle.acquisition.directconnect.downloads, null, 2)}</pre> */}
</> </div>
})} })}
</div> </div>
</div> </div>
</section> </section>
</div> : <div>asd</div>; </div> : <div>There are no downloads.</div>;
}; };
export default Downloads; export default Downloads;