https://pressthink.org/j/rosen-archive/frontend/components/RecordView.js?v=3.8.36

1import { html } from '../html.js?v=3.8.36';
2import RecordModal from './RecordModal.js?v=3.8.36';
3import { deriveNavFlags } from '../utils/modalNav.js?v=3.8.36';
4
5/**
6 * Single owner for "render the selected record."
7 *
8 * App.js used to carry two byte-identical <RecordModal> call sites on separate
9 * routes, each with the same 13-prop spread and the same inline derivations
10 * (which record is selected,
11 * its index in the filtered list, and the resulting prev/next nav flags).
12 * RecordView holds that knowledge in one place, so adding or changing a modal
13 * prop is a one-site edit instead of a two-site edit that can drift.
14 *
15 * It takes the raw inputs (all records, the filtered subset, the selected id,
16 * and App's handlers) and derives the record + nav flags itself. Behaviour is
17 * identical to the two call sites it replaces. Part of #134 (Step B).
18 */
19export default function RecordView({
20  records,
21  filteredRecords,
22  selectedRecordId,
23  onClose,
24  onNext,
25  onPrev,
26  onSelectRecord,
27  onSelectEntity,
28  onFilterCategory,
29  onFilterSearch,
30  onReportProblem,
31  nestedDialogOpen,
32}) {
33  const record = records.find(r => r.id === selectedRecordId) || null;
34  const { index, total, hasPrev, hasNext } = deriveNavFlags(filteredRecords, selectedRecordId);
35  // isOpen tracks the selected id, not !!record. A deep link to an id with no
36  // matching record (?record=BADID) still counts as "open" — RecordModal then
37  // returns null because record is null (RecordModal.js: `if (!isOpen ||
38  // !record) return null`). Deriving this from !!record would change that
39  // deep-link behaviour, and no test covers the id-set-but-record-missing
40  // state, so the regression would pass CI silently.
41  const isOpen = !!selectedRecordId;
42
43  return html`
44    <${RecordModal}
45      record=${record}
46      allRecords=${records}
47      isOpen=${isOpen}
48      onClose=${onClose}
49      onNext=${onNext}
50      onPrev=${onPrev}
51      onSelectRecord=${onSelectRecord}
52      onSelectEntity=${onSelectEntity}
53      onFilterCategory=${onFilterCategory}
54      onFilterSearch=${onFilterSearch}
55      onReportProblem=${onReportProblem}
56      nestedDialogOpen=${nestedDialogOpen}
57      hasPrev=${hasPrev}
58      hasNext=${hasNext}
59      currentIndex=${index}
60      total=${total}
61    />
62  `;
63}