chore: standardize security and quality foundations

frontend/app/MyRequests.tsx

@@ -1,298 +1,261 @@
-'use client'
+"use client";
 
-import PageHeading from './ui/PageHeading'
+import PageHeading from "./ui/PageHeading";
 
-import { useRouter } from 'next/navigation'
-import { useEffect, useState } from 'react'
-import { authFetch, getApiBase, getToken, clearToken, getEventStreamToken } from './lib/auth'
-
-const normalizeRecentResults = (items: any[]) =>
-  items
-    .filter((item: any) => item?.id)
-    .map((item: any) => {
-      const id = item.id
-      const rawTitle = item.title
-      const placeholder =
-        typeof rawTitle === 'string' && rawTitle.trim().toLowerCase() === `request ${id}`
-      return {
-        id,
-        title: !rawTitle || placeholder ? `Request #${id}` : rawTitle,
-        year: item.year,
-        type: item.type,
-        statusLabel: item.statusLabel,
-        artwork: item.artwork,
-        createdAt: item.createdAt ?? null,
-      }
-    })
-
-const REQUEST_STAGE_OPTIONS = [
-  { value: 'all', label: 'All stages' },
-  { value: 'pending', label: 'Waiting' },
-  { value: 'approved', label: 'Approved' },
-  { value: 'in_progress', label: 'In progress' },
-  { value: 'working', label: 'Working' },
-  { value: 'partial', label: 'Partial' },
-  { value: 'ready', label: 'Ready' },
-  { value: 'declined', label: 'Declined' },
-]
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { authFetch, getApiBase, getToken, clearToken, getEventStreamToken } from "./lib/auth";
+import {
+  normalizeRecentResults,
+  normalizeSearchResults,
+  type RecentRequest,
+  type RequestSearchResult,
+} from "./lib/request-results";
+import RequestStageFilter, { type RequestStage } from "./ui/RequestStageFilter";
 
 export default function HomePage() {
-  const router = useRouter()
-  const [query, setQuery] = useState('')
-  const [recent, setRecent] = useState<
-    {
-      id: number
-      title: string
-      year?: number
-      type?: string
-      statusLabel?: string
-      artwork?: { poster_url?: string; backdrop_url?: string }
-      createdAt?: string | null
-    }[]
-  >([])
-  const [recentError, setRecentError] = useState<string | null>(null)
-  const [recentLoading, setRecentLoading] = useState(false)
-  const [searchResults, setSearchResults] = useState<
-    {
-      title: string
-      year?: number
-      type?: string
-      requestId?: number
-      statusLabel?: string
-      requestedBy?: string | null
-      accessible?: boolean
-    }[]
-  >([])
-  const [searchError, setSearchError] = useState<string | null>(null)
-  const [role, setRole] = useState<string | null>(null)
-  const [recentDays, setRecentDays] = useState(90)
-  const [recentStage, setRecentStage] = useState('all')
-  const [authReady, setAuthReady] = useState(false)
+  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 [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
+    event.preventDefault();
+    const trimmed = query.trim();
+    if (!trimmed) return;
     if (/^\d+$/.test(trimmed)) {
-      router.push(`/requests/${encodeURIComponent(trimmed)}`)
-      return
+      router.push(`/requests/${encodeURIComponent(trimmed)}`);
+      return;
     }
-    void runSearch(trimmed)
-  }
+    void runSearch(trimmed);
+  };
 
   useEffect(() => {
     if (!getToken()) {
-      router.push('/login')
-      return
+      router.push("/login");
+      return;
     }
-    let cancelled = false
+    let cancelled = false;
     const load = async () => {
-      setRecentLoading(true)
-      setRecentError(null)
+      setRecentLoading(true);
+      setRecentError(null);
       try {
-        const baseUrl = getApiBase()
-        const meResponse = await authFetch(`${baseUrl}/auth/me`)
+        const baseUrl = getApiBase();
+        const meResponse = await authFetch(`${baseUrl}/auth/me`);
         if (!meResponse.ok) {
           if (meResponse.status === 401) {
-            clearToken()
-            router.push('/login')
-            return
+            clearToken();
+            router.push("/login");
+            return;
           }
-          throw new Error(`Auth failed: ${meResponse.status}`)
+          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 = userRole === 'admin' ? 50 : 6
+        const me = await meResponse.json();
+        if (cancelled) return;
+        const userRole = me?.role ?? null;
+        setRole(userRole);
+        setAuthReady(true);
+        const take = userRole === "admin" ? 50 : 6;
         const params = new URLSearchParams({
           take: String(take),
           days: String(recentDays),
-        })
-        if (recentStage !== 'all') {
-          params.set('stage', recentStage)
+        });
+        if (recentStage !== "all") {
+          params.set("stage", recentStage);
         }
-        const response = await authFetch(`${baseUrl}/requests/recent?${params.toString()}`)
+        const response = await authFetch(`${baseUrl}/requests/recent?${params.toString()}`);
         if (!response.ok) {
           if (response.status === 401) {
-            clearToken()
-            router.push('/login')
-            return
+            clearToken();
+            router.push("/login");
+            return;
           }
-          throw new Error(`Recent requests failed: ${response.status}`)
+          throw new Error(`Recent requests failed: ${response.status}`);
         }
-        const data = await response.json()
-        if (cancelled) return
+        const data = await response.json();
+        if (cancelled) return;
         if (Array.isArray(data?.results)) {
-          setRecent(normalizeRecentResults(data.results))
+          setRecent(normalizeRecentResults(data.results));
         }
       } catch (error) {
-        console.error(error)
-        if (!cancelled) setRecentError('Recent requests are not available right now.')
+        console.error(error);
+        if (!cancelled) setRecentError("Recent requests are not available right now.");
       } finally {
-        if (!cancelled) setRecentLoading(false)
+        if (!cancelled) setRecentLoading(false);
       }
-    }
+    };
 
-    void load()
-    return () => { cancelled = true }
-  }, [recentDays, recentStage])
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [recentDays, recentStage, router]);
 
   useEffect(() => {
     if (!authReady) {
-      return
+      return;
     }
     if (!getToken()) {
-      return
+      return;
     }
-    const baseUrl = getApiBase()
-    let closed = false
-    let source: EventSource | null = null
+    const baseUrl = getApiBase();
+    let closed = false;
+    let source: EventSource | null = null;
 
     const connect = async () => {
       try {
-        const streamToken = await getEventStreamToken()
-        if (closed) return
+        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)
+        });
+        if (recentStage !== "all") {
+          params.set("recent_stage", recentStage);
         }
-        const streamUrl = `${baseUrl}/events/stream?${params.toString()}`
-        source = new EventSource(streamUrl)
+        const streamUrl = `${baseUrl}/events/stream?${params.toString()}`;
+        source = new EventSource(streamUrl);
 
         source.onmessage = (event) => {
-          if (closed) return
+          if (closed) return;
           try {
-            const payload = JSON.parse(event.data)
-            if (!payload || typeof payload !== 'object') {
-              return
+            const payload = JSON.parse(event.data);
+            if (!payload || typeof payload !== "object") {
+              return;
             }
-            if (payload.type === 'home_recent') {
+            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)
+                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
+              return;
             }
           } catch (error) {
-            console.error(error)
+            console.error(error);
           }
-        }
-
+        };
       } catch (error) {
-        if (closed) return
-        console.error(error)
+        if (closed) return;
+        console.error(error);
       }
-    }
+    };
 
-    void connect()
+    void connect();
 
     return () => {
-      closed = true
-      source?.close()
-    }
-  }, [authReady, recentDays, recentStage])
+      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)}`)
+      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
+          clearToken();
+          router.push("/login");
+          return;
         }
-        throw new Error(`Search failed: ${response.status}`)
+        throw new Error(`Search failed: ${response.status}`);
       }
-      const data = await response.json()
+      const data = await response.json();
       if (Array.isArray(data?.results)) {
-        setSearchResults(
-            data.results.map((item: any) => ({
-              title: item.title,
-              year: item.year,
-              type: item.type,
-              requestId: item.requestId,
-              statusLabel: item.statusLabel,
-              requestedBy: item.requestedBy ?? null,
-              accessible: Boolean(item.accessible),
-            }))
-          )
-        setSearchError(null)
+        setSearchResults(normalizeSearchResults(data.results));
+        setSearchError(null);
       }
     } catch (error) {
-      console.error(error)
-      setSearchError('Search failed. Try a request ID instead.')
-      setSearchResults([])
+      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}`
-  }
+    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()
-  }
+    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 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 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 }
-  }
+    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>
-      } />
+      <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>
+              <h2>
+                {searchError
+                  ? "Search unavailable"
+                  : `${searchResults.length} match${searchResults.length === 1 ? "" : "es"} found`}
+              </h2>
             </div>
-            <button type="button" className="ghost-button" onClick={() => {
-              setSearchResults([])
-              setSearchError(null)
-            }}>
+            <button
+              type="button"
+              className="ghost-button"
+              onClick={() => {
+                setSearchResults([]);
+                setSearchError(null);
+              }}
+            >
               Clear
             </button>
           </div>
@@ -302,17 +265,20 @@ export default function HomePage() {
             <div className="home-result-grid">
               {searchResults.map((item, index) => (
                 <button
-                  key={`${item.title || 'Untitled'}-${index}`}
+                  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>
+                    <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>
+                  <span>{!item.requestId ? "Not requested" : item.statusLabel || "Already requested"}</span>
                 </button>
               ))}
             </div>
@@ -321,16 +287,25 @@ export default function HomePage() {
       )}
 
       <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>
+        <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>{role === 'admin' ? 'Recent requests' : 'My recent requests'}</h2>
+            <h2>{role === "admin" ? "Recent requests" : "My recent requests"}</h2>
           </div>
           {authReady && (
             <div className="recent-filter-group">
@@ -347,21 +322,7 @@ export default function HomePage() {
             </div>
           )}
         </div>
-        {authReady && (
-          <div className="request-filter-chips" aria-label="Filter requests by stage">
-            {REQUEST_STAGE_OPTIONS.filter((option) => ['all', 'pending', 'in_progress', 'working', 'ready'].includes(option.value)).map((option) => (
-              <button
-                type="button"
-                key={option.value}
-                className={recentStage === option.value ? 'is-active' : undefined}
-                onClick={() => setRecentStage(option.value)}
-              >
-                {option.value === 'working' ? <i aria-hidden="true" /> : null}
-                {option.value === 'all' ? 'All' : option.label}
-              </button>
-            ))}
-          </div>
-        )}
+        {authReady && <RequestStageFilter value={recentStage} onChange={setRecentStage} />}
         <div className="recent-grid home-recent-grid">
           {recentLoading ? (
             <div className="loading-center">
@@ -386,30 +347,43 @@ export default function HomePage() {
                 {item.artwork?.poster_url ? (
                   <img
                     className="recent-poster"
-                    src={resolveArtworkUrl(item.artwork.poster_url) ?? ''}
+                    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-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-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 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)}` : ''}
+                    {item.createdAt ? ` · ${formatRequestTime(item.createdAt)}` : ""}
                   </span>
                 </span>
-                <span className="recent-open-cue" aria-hidden="true">Open</span>
+                <span className="recent-open-cue" aria-hidden="true">
+                  Open
+                </span>
               </button>
             ))
           )}
         </div>
       </section>
     </main>
-  )
+  );
 }