Rishi Ghan
8bebffd95e
* 🌊 qBittorrent settings scaffold * 🔧 Added scaffold for the qBittorrent connection form * 🔧 Some refactoring * 🔧 Cleaned up folder structure * 🔧 Fixed broken paths * 🔧 Cleaned up Search and Import component hierarchy * 🔧 More path fixes * 🔧 Tooling changes * 📝 Qbittorrent form scaffold * ⬆️ Bumped @dnd-kit deps * 🧑🏼🔧 Fixed the hostname regex * 🏗️ Adding fields to the settings form * 🔧 Formatting and more layout changes * 🔧 Added Prowlarr settings items in JSON * 📝 Purified Card Component * 📝 Abstracted connection form into a component * 🏗️ Reorganized tabs * Migrating from Redux to RTK-query * ⬇️ Fetched qBittorrent settings * 🏗️ Trying out react-query * 🧩 Added react-query query to qBittorrentSettings page * 📝 qbittorrent form RU actions first draft * 🏗️ Added loading state check * 🏗 Added error check state * 🏗️ Refactored AirDCPP context using react-query * 🏗️ Refactoring AirDCPP Settings Form with react-query * 🔧 Removed context * 🔧 Removing context from AirDCPP settings page * 🔧 Fixed early init error on the store * 🐛 Debugging AirDCPP Settings Form page * 🧸 Zustand-ified AirDCPP Form * ❌ AirDCPP code cleaned up from App.tsx * ➕ Re-added yarn.lock
71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import * as React from "react";
|
|
import { IExtractedComicBookCoverFile } from "threetwo-ui-typings";
|
|
import {
|
|
removeLeadingPeriod,
|
|
escapePoundSymbol,
|
|
} from "../shared/utils/formatting.utils";
|
|
import { isUndefined, isEmpty, isNil } from "lodash";
|
|
import { Link } from "react-router-dom";
|
|
import { LIBRARY_SERVICE_HOST } from "../constants/endpoints";
|
|
import ellipsize from "ellipsize";
|
|
|
|
interface IProps {
|
|
comicBookCoversMetadata?: IExtractedComicBookCoverFile;
|
|
mongoObjId?: number;
|
|
hasTitle: boolean;
|
|
title?: string;
|
|
isHorizontal: boolean;
|
|
}
|
|
interface IState {}
|
|
|
|
class Card extends React.Component<IProps, IState> {
|
|
constructor(props: IProps) {
|
|
super(props);
|
|
}
|
|
|
|
public drawCoverCard = (
|
|
metadata: IExtractedComicBookCoverFile,
|
|
): JSX.Element => {
|
|
const encodedFilePath = encodeURI(
|
|
`${LIBRARY_SERVICE_HOST}` + removeLeadingPeriod(metadata.path),
|
|
);
|
|
const filePath = escapePoundSymbol(encodedFilePath);
|
|
return (
|
|
<div>
|
|
<div className="card generic-card">
|
|
<div className={this.props.isHorizontal ? "is-horizontal" : ""}>
|
|
<div className="card-image">
|
|
<figure className="image">
|
|
<img src={filePath} alt="Placeholder image" />
|
|
</figure>
|
|
</div>
|
|
{this.props.hasTitle && (
|
|
<div className="card-content">
|
|
<ul>
|
|
<Link to={"/comic/details/" + this.props.mongoObjId}>
|
|
<li className="has-text-weight-semibold">
|
|
{ellipsize(metadata.name, 18)}
|
|
</li>
|
|
</Link>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
public render() {
|
|
return (
|
|
<>
|
|
{!isUndefined(this.props.comicBookCoversMetadata) &&
|
|
!isEmpty(this.props.comicBookCoversMetadata) &&
|
|
this.drawCoverCard(this.props.comicBookCoversMetadata)}
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Card;
|