126 lines
3.5 KiB
TypeScript
126 lines
3.5 KiB
TypeScript
import { useCallback } from "react";
|
|
import { Send } from "lucide-react";
|
|
import { Link } from "react-router";
|
|
import {
|
|
DashboardWidgetList,
|
|
DismissibleAlert,
|
|
LoadingFrame,
|
|
StatusBadge,
|
|
useDashboardWidgetData,
|
|
type ApiSettings,
|
|
type CampaignListItem,
|
|
type DashboardWidgetConfiguration
|
|
} from "@govoplan/core-webui";
|
|
import { listCampaigns } from "../../api/campaigns";
|
|
|
|
const TERMINAL_STATUSES = new Set([
|
|
"sent",
|
|
"cancelled",
|
|
"archived",
|
|
"deleted"
|
|
]);
|
|
|
|
export default function CampaignActivityWidget({
|
|
settings,
|
|
refreshKey,
|
|
configuration
|
|
}: {
|
|
settings: ApiSettings;
|
|
refreshKey: number;
|
|
configuration: DashboardWidgetConfiguration;
|
|
}) {
|
|
const maxItems = numberSetting(configuration.maxItems, 5, 1, 12);
|
|
const showCompleted = configuration.showCompleted === true;
|
|
const load = useCallback(async () => {
|
|
const campaigns = await listCampaigns(settings);
|
|
return campaigns
|
|
.filter(
|
|
(campaign) =>
|
|
showCompleted || !TERMINAL_STATUSES.has(campaign.status)
|
|
)
|
|
.sort(compareCampaigns)
|
|
.slice(0, maxItems);
|
|
}, [maxItems, settings, showCompleted]);
|
|
const { data: campaigns, loading, error } = useDashboardWidgetData(
|
|
load,
|
|
refreshKey
|
|
);
|
|
|
|
return (
|
|
<LoadingFrame loading={loading} label="Loading campaign activity">
|
|
{error && (
|
|
<DismissibleAlert tone="warning" resetKey={error}>
|
|
{error}
|
|
</DismissibleAlert>
|
|
)}
|
|
<DashboardWidgetList
|
|
emptyText="No active campaigns."
|
|
items={(campaigns ?? []).map((campaign) => ({
|
|
id: campaign.id,
|
|
title: campaign.name,
|
|
detail: campaignProgress(campaign),
|
|
meta: updatedLabel(campaign),
|
|
leading: <Send size={17} aria-hidden="true" />,
|
|
trailing: (
|
|
<StatusBadge status={campaign.status} label={statusLabel(campaign.status)} />
|
|
),
|
|
to: `/campaigns/${encodeURIComponent(campaign.id)}`
|
|
}))}
|
|
/>
|
|
<div className="dashboard-contribution-footer">
|
|
<Link className="btn btn-secondary" to="/campaigns">
|
|
Open campaigns
|
|
</Link>
|
|
</div>
|
|
</LoadingFrame>
|
|
);
|
|
}
|
|
|
|
function compareCampaigns(
|
|
left: CampaignListItem,
|
|
right: CampaignListItem
|
|
): number {
|
|
return timestamp(right) - timestamp(left);
|
|
}
|
|
|
|
function timestamp(campaign: CampaignListItem): number {
|
|
const value = campaign.updated_at ?? campaign.updatedAt ?? campaign.created_at;
|
|
return value ? new Date(value).getTime() : 0;
|
|
}
|
|
|
|
function updatedLabel(campaign: CampaignListItem): string {
|
|
const value = campaign.updated_at ?? campaign.updatedAt ?? campaign.created_at;
|
|
return value
|
|
? new Intl.DateTimeFormat(undefined, {
|
|
day: "2-digit",
|
|
month: "short"
|
|
}).format(new Date(value))
|
|
: "";
|
|
}
|
|
|
|
function campaignProgress(campaign: CampaignListItem): string {
|
|
const parts = [
|
|
campaign.sent ? `${campaign.sent} sent` : "",
|
|
campaign.failed ? `${campaign.failed} failed` : "",
|
|
campaign.blocked ? `${campaign.blocked} blocked` : "",
|
|
campaign.warnings ? `${campaign.warnings} warnings` : ""
|
|
].filter(Boolean);
|
|
return parts.join(" · ") || campaign.description || "No delivery totals yet";
|
|
}
|
|
|
|
function statusLabel(status: string): string {
|
|
return status.replaceAll("_", " ");
|
|
}
|
|
|
|
function numberSetting(
|
|
value: unknown,
|
|
fallback: number,
|
|
minimum: number,
|
|
maximum: number
|
|
): number {
|
|
const numeric = typeof value === "number" ? value : Number(value);
|
|
return Number.isFinite(numeric)
|
|
? Math.max(minimum, Math.min(maximum, Math.floor(numeric)))
|
|
: fallback;
|
|
}
|