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;
|