64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import * as React from "react";
|
|
import { IExtractedComicBookCoverFile } from "../../server/interfaces/folder.interface";
|
|
import { removeLeadingPeriod } from "../shared/utils/formatting.utils";
|
|
import { isUndefined, isEmpty } from "lodash";
|
|
import { Link } from "react-router-dom";
|
|
|
|
interface IProps {
|
|
comicBookCoversMetadata: IExtractedComicBookCoverFile;
|
|
mongoObjId?: number;
|
|
}
|
|
interface IState {}
|
|
|
|
class Card extends React.Component<IProps, IState> {
|
|
constructor(props: IProps) {
|
|
super(props);
|
|
console.log(props);
|
|
}
|
|
|
|
public drawCoverCard = (
|
|
metadata: IExtractedComicBookCoverFile,
|
|
): JSX.Element => {
|
|
return (
|
|
<div>
|
|
<div className="card">
|
|
<div>
|
|
<div className="card-image">
|
|
<figure className="image">
|
|
<img
|
|
src={
|
|
"http://localhost:3000" +
|
|
removeLeadingPeriod(metadata.path) +
|
|
"/" +
|
|
metadata.name
|
|
}
|
|
alt="Placeholder image"
|
|
/>
|
|
</figure>
|
|
</div>
|
|
<div className="card-content">
|
|
<ul>
|
|
<Link to={"/comic/details/" + this.props.mongoObjId}>
|
|
<li className="has-text-weight-semibold">{metadata.name}</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;
|