feat(release): publish minimal self-contained Magent source
This commit is contained in:
Magent release tooling
@@ -0,0 +1,391 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { authFetch, clearToken, getApiBase, getEventStreamToken, getToken } from "./lib/auth";
|
||||
import {
|
||||
normalizeRecentResults,
|
||||
normalizeSearchResults,
|
||||
type RecentRequest,
|
||||
type RequestSearchResult,
|
||||
} from "./lib/request-results";
|
||||
import { useEffectiveRole } from "./lib/viewMode";
|
||||
import PageHeading from "./ui/PageHeading";
|
||||
import RequestStageFilter, { type RequestStage } from "./ui/RequestStageFilter";
|
||||
|
||||
export default function HomePage() {
|
||||
const router = useRouter();
|
||||
const [query, setQuery] = useState("");
|
||||
const [recent, setRecent] = useState<RecentRequest[]>([]);
|
||||
const [recentError, setRecentError] = useState<string | null>(null);
|
||||
const [recentLoading, setRecentLoading] = useState(false);
|
||||
const [searchResults, setSearchResults] = useState<RequestSearchResult[]>([]);
|
||||
const [searchError, setSearchError] = useState<string | null>(null);
|
||||
const [role, setRole] = useState<string | null>(null);
|
||||
const effectiveRole = useEffectiveRole(role);
|
||||
const isAdmin = effectiveRole === "admin";
|
||||
const [recentDays, setRecentDays] = useState(90);
|
||||
const [recentStage, setRecentStage] = useState<RequestStage>("all");
|
||||
const [authReady, setAuthReady] = useState(false);
|
||||
|
||||
const submit = (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
const trimmed = query.trim();
|
||||
if (!trimmed) return;
|
||||
if (/^\d+$/.test(trimmed)) {
|
||||
router.push(`/requests/${encodeURIComponent(trimmed)}`);
|
||||
return;
|
||||
}
|
||||
void runSearch(trimmed);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!getToken()) {
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
let cancelled = false;
|
||||
const load = async () => {
|
||||
setRecentLoading(true);
|
||||
setRecentError(null);
|
||||
try {
|
||||
const baseUrl = getApiBase();
|
||||
const meResponse = await authFetch(`${baseUrl}/auth/me`);
|
||||
if (!meResponse.ok) {
|
||||
if (meResponse.status === 401) {
|
||||
clearToken();
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
throw new Error(`Auth failed: ${meResponse.status}`);
|
||||
}
|
||||
const me = await meResponse.json();
|
||||
if (cancelled) return;
|
||||
const userRole = me?.role ?? null;
|
||||
setRole(userRole);
|
||||
setAuthReady(true);
|
||||
const take = isAdmin ? 50 : 6;
|
||||
const params = new URLSearchParams({
|
||||
take: String(take),
|
||||
days: String(recentDays),
|
||||
});
|
||||
if (recentStage !== "all") {
|
||||
params.set("stage", recentStage);
|
||||
}
|
||||
const response = await authFetch(`${baseUrl}/requests/recent?${params.toString()}`);
|
||||
if (!response.ok) {
|
||||
if (response.status === 401) {
|
||||
clearToken();
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
throw new Error(`Recent requests failed: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
if (cancelled) return;
|
||||
if (Array.isArray(data?.results)) {
|
||||
setRecent(normalizeRecentResults(data.results));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
if (!cancelled) setRecentError("Recent requests are not available right now.");
|
||||
} finally {
|
||||
if (!cancelled) setRecentLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
void load();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [isAdmin, recentDays, recentStage, router]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!authReady) {
|
||||
return;
|
||||
}
|
||||
if (!getToken()) {
|
||||
return;
|
||||
}
|
||||
const baseUrl = getApiBase();
|
||||
let closed = false;
|
||||
let source: EventSource | null = null;
|
||||
|
||||
const connect = async () => {
|
||||
try {
|
||||
const streamToken = await getEventStreamToken();
|
||||
if (closed) return;
|
||||
const params = new URLSearchParams({
|
||||
stream_token: streamToken,
|
||||
recent_days: String(recentDays),
|
||||
});
|
||||
if (recentStage !== "all") {
|
||||
params.set("recent_stage", recentStage);
|
||||
}
|
||||
const streamUrl = `${baseUrl}/events/stream?${params.toString()}`;
|
||||
source = new EventSource(streamUrl);
|
||||
|
||||
source.onmessage = (event) => {
|
||||
if (closed) return;
|
||||
try {
|
||||
const payload = JSON.parse(event.data);
|
||||
if (!payload || typeof payload !== "object") {
|
||||
return;
|
||||
}
|
||||
if (payload.type === "home_recent") {
|
||||
if (Array.isArray(payload.results)) {
|
||||
setRecent(normalizeRecentResults(payload.results));
|
||||
setRecentError(null);
|
||||
setRecentLoading(false);
|
||||
} else if (typeof payload.error === "string" && payload.error.trim()) {
|
||||
setRecentError("Recent requests are not available right now.");
|
||||
setRecentLoading(false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
} catch (error) {
|
||||
if (closed) return;
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
void connect();
|
||||
|
||||
return () => {
|
||||
closed = true;
|
||||
source?.close();
|
||||
};
|
||||
}, [authReady, recentDays, recentStage]);
|
||||
|
||||
const runSearch = async (term: string) => {
|
||||
try {
|
||||
const baseUrl = getApiBase();
|
||||
const response = await authFetch(`${baseUrl}/requests/search?query=${encodeURIComponent(term)}`);
|
||||
if (!response.ok) {
|
||||
if (response.status === 401) {
|
||||
clearToken();
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
throw new Error(`Search failed: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
if (Array.isArray(data?.results)) {
|
||||
setSearchResults(normalizeSearchResults(data.results));
|
||||
setSearchError(null);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setSearchError("Search failed. Try a request ID instead.");
|
||||
setSearchResults([]);
|
||||
}
|
||||
};
|
||||
|
||||
const resolveArtworkUrl = (url?: string | null) => {
|
||||
if (!url) return null;
|
||||
return url.startsWith("http") ? url : `${getApiBase()}${url}`;
|
||||
};
|
||||
|
||||
const formatRequestTime = (value?: string | null) => {
|
||||
if (!value) return null;
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.valueOf())) return value;
|
||||
return date.toLocaleString();
|
||||
};
|
||||
|
||||
const activeRecentCount = recent.filter((item) => {
|
||||
const label = String(item.statusLabel ?? "").toLowerCase();
|
||||
return !label.includes("ready") && !label.includes("available") && !label.includes("declined");
|
||||
}).length;
|
||||
const readyRecentCount = recent.filter((item) => {
|
||||
const label = String(item.statusLabel ?? "").toLowerCase();
|
||||
return label.includes("ready") || label.includes("available");
|
||||
}).length;
|
||||
|
||||
const requestCardState = (value?: string) => {
|
||||
const label = String(value ?? "").toLowerCase();
|
||||
if (label.includes("partial")) return { key: "attention", label: value || "Partially ready", progress: 65 };
|
||||
if (!/not |unavailable|waiting/.test(label) && (label.includes("ready") || label.includes("available")))
|
||||
return { key: "ready", label: value || "Ready", progress: 100 };
|
||||
if (label.includes("declined") || label.includes("failed") || label.includes("error"))
|
||||
return { key: "attention", label: value || "Needs attention", progress: 12 };
|
||||
if (label.includes("working") || label.includes("progress") || label.includes("download"))
|
||||
return { key: "processing", label: value || "In progress", progress: 58 };
|
||||
return { key: "waiting", label: value || "Waiting", progress: 4 };
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="card home-page">
|
||||
<PageHeading
|
||||
title="My requests"
|
||||
description="Follow your requests from collection to ready to watch."
|
||||
actions={
|
||||
<form onSubmit={submit} className="home-search">
|
||||
<label htmlFor="request-search">Title, year, or request number</label>
|
||||
<div className="home-search-row">
|
||||
<input
|
||||
id="request-search"
|
||||
value={query}
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder="Dune 2021 or 1289"
|
||||
/>
|
||||
<button type="submit">Find request</button>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
/>
|
||||
|
||||
{(searchError || searchResults.length > 0) && (
|
||||
<section className="home-search-results" aria-live="polite">
|
||||
<div className="home-section-heading">
|
||||
<div>
|
||||
<span className="section-kicker">Search results</span>
|
||||
<h2>
|
||||
{searchError
|
||||
? "Search unavailable"
|
||||
: `${searchResults.length} match${searchResults.length === 1 ? "" : "es"} found`}
|
||||
</h2>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="ghost-button"
|
||||
onClick={() => {
|
||||
setSearchResults([]);
|
||||
setSearchError(null);
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
{searchError ? (
|
||||
<div className="error-banner">{searchError}</div>
|
||||
) : (
|
||||
<div className="home-result-grid">
|
||||
{searchResults.map((item, index) => (
|
||||
<button
|
||||
key={`${item.title || "Untitled"}-${index}`}
|
||||
type="button"
|
||||
className="home-result-card"
|
||||
disabled={!item.requestId}
|
||||
onClick={() => item.requestId && router.push(`/requests/${item.requestId}`)}
|
||||
>
|
||||
<span>
|
||||
<strong>
|
||||
{item.title || "Untitled"}
|
||||
{item.year ? ` (${item.year})` : ""}
|
||||
</strong>
|
||||
<small>{item.type?.toUpperCase() || "MEDIA"}</small>
|
||||
</span>
|
||||
<span>{!item.requestId ? "Not requested" : item.statusLabel || "Already requested"}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="home-metric-strip" aria-label="Request summary">
|
||||
<div>
|
||||
<span>In view</span>
|
||||
<strong>{recent.length}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>In progress</span>
|
||||
<strong>{activeRecentCount}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Ready</span>
|
||||
<strong>{readyRecentCount}</strong>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="recent home-recent">
|
||||
<div className="recent-header home-section-heading">
|
||||
<div>
|
||||
<span className="section-kicker">Request activity</span>
|
||||
<h2>{isAdmin ? "Recent requests" : "My recent requests"}</h2>
|
||||
</div>
|
||||
{authReady && (
|
||||
<div className="recent-filter-group">
|
||||
<label className="recent-filter">
|
||||
<span>Period</span>
|
||||
<select value={recentDays} onChange={(event) => setRecentDays(Number(event.target.value))}>
|
||||
<option value={0}>All time</option>
|
||||
<option value={30}>30 days</option>
|
||||
<option value={60}>60 days</option>
|
||||
<option value={90}>90 days</option>
|
||||
<option value={180}>180 days</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{authReady && <RequestStageFilter value={recentStage} onChange={setRecentStage} />}
|
||||
<div className="recent-grid home-recent-grid">
|
||||
{recentLoading ? (
|
||||
<div className="loading-center">
|
||||
<div className="spinner" aria-hidden="true" />
|
||||
<span className="loading-text">Loading recent requests...</span>
|
||||
</div>
|
||||
) : recentError ? (
|
||||
<div className="error-banner">{recentError}</div>
|
||||
) : recent.length === 0 ? (
|
||||
<div className="home-empty-state">
|
||||
<strong>No requests match these filters</strong>
|
||||
<span>Try a wider period or a different stage.</span>
|
||||
</div>
|
||||
) : (
|
||||
(isAdmin ? recent : recent.slice(0, 6)).map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
onClick={() => router.push(`/requests/${item.id}`)}
|
||||
className={`recent-card is-${requestCardState(item.statusLabel).key}`}
|
||||
>
|
||||
{item.artwork?.poster_url ? (
|
||||
<img
|
||||
className="recent-poster"
|
||||
src={resolveArtworkUrl(item.artwork.poster_url) ?? ""}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<span className="recent-poster recent-poster-placeholder" aria-hidden="true">
|
||||
#{item.id}
|
||||
</span>
|
||||
)}
|
||||
<span className="recent-info">
|
||||
<span className="recent-title">
|
||||
{item.title || "Untitled"}
|
||||
{item.year ? ` (${item.year})` : ""}
|
||||
</span>
|
||||
<span className="recent-status-badge">
|
||||
<span aria-hidden="true">
|
||||
{
|
||||
{ ready: "✓", processing: "↻", attention: "!", waiting: "◷" }[
|
||||
requestCardState(item.statusLabel).key
|
||||
]
|
||||
}
|
||||
</span>
|
||||
{item.statusLabel || "Status not available yet"}
|
||||
</span>
|
||||
<span className="recent-meta">
|
||||
Request {item.id}
|
||||
{item.createdAt ? ` · ${formatRequestTime(item.createdAt)}` : ""}
|
||||
</span>
|
||||
</span>
|
||||
<span className="recent-open-cue" aria-hidden="true">
|
||||
Open
|
||||
</span>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user