app/javascript/src/currently_inked/cards/CurrentlyInkedCard.jsx
import React from "react";
import { Card } from "../../components/Card";
import { UsageButton } from "../components/UsageButton";
import { RelativeDate } from "../../components/RelativeDate";
import "./currently-inked-card.scss";
/**
* @param {{
* hiddenFields: string[];
* id: string;
* archived: boolean;
* archived_on?: string | null;
* comment?: string;
* daily_usage?: number;
* ink_name: string;
* ink_color?: string;
* inked_on: string;
* last_used_on?: string | null;
* pen_name: string;
* refillable: boolean;
* unarchivable?: boolean;
* used_today: boolean;
* collected_ink: {
* archived?: boolean;
* brand_name?: string;
* color: string;
* id: string;
* ink_name?: string;
* line_name?: string;
* };
* collected_pen: {
* archived?: boolean;
* brand?: string;
* color?: string;
* id: string;
* model?: string;
* nib?: string;
* };
* }} props
*/
export const CurrentlyInkedCard = (props) => {
const {
hiddenFields,
id,
comment,
ink_name,
inked_on,
last_used_on,
daily_usage,
pen_name,
refillable,
used_today,
collected_ink: { color }
} = props;
const isVisible = (field) => props[field] && !hiddenFields.includes(field);
return (
<Card className="fpc-currently-inked-card">
<Card.Image
className="fpc-currently-inked-card__swab"
style={{ "--swab-color": color }}
/>
<Card.Body>
<Card.Title>{ink_name}</Card.Title>
{isVisible("comment") ? <Card.Text>{comment}</Card.Text> : null}
{isVisible("pen_name") ? (
<>
<div className="small text-secondary">Pen</div>
<Card.Text>{pen_name}</Card.Text>
</>
) : null}
{isVisible("inked_on") ? (
<>
<div className="small text-secondary">Inked</div>
<Card.Text>
<RelativeDate date={inked_on} relativeAsDefault={false} />
</Card.Text>
</>
) : null}
{isVisible("last_used_on") ? (
<>
<div className="small text-secondary">Last used</div>
<Card.Text>
<RelativeDate date={last_used_on} />
</Card.Text>
</>
) : null}
{isVisible("daily_usage") ? (
<>
<div className="small text-secondary">Usage</div>
<Card.Text>{daily_usage}</Card.Text>
</>
) : null}
<div className="fpc-currently-inked-card__footer">
<div className="fpc-currently-inked-card__actions">
<UsageButton id={id} used={used_today} />
{refillable && (
<a
className="btn btn-secondary ms-2"
title="Refill this pen"
href={`/currently_inked/${id}/refill`}
data-method="post"
data-confirm={`Really refill ${ink_name}?`}
>
<i className="fa fa-rotate-right"></i>
</a>
)}
<a
className="btn btn-secondary ms-2"
title="edit"
href={`/currently_inked/${id}/edit`}
>
<i className="fa fa-pencil" />
</a>
<a
className="btn btn-secondary ms-2"
title="archive"
href={`/currently_inked/${id}/archive`}
data-method="post"
>
<i className="fa fa-archive" />
</a>
</div>
</div>
</Card.Body>
</Card>
);
};