Data fetching / routing (#6)

harvard-lil · Jan 18, 2024 · 3c20a26 · 3c20a26
1 parent e9c0554
commit 3c20a26
Show file tree

Hide file tree

Showing 8 changed files with 427 additions and 6 deletions.
diff --git a/src/caselaw/index.html b/src/caselaw/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>Caselaw Access Project</title>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="robots" content="noindex" />
+		<meta name="author" content="Your name" />
+		<meta name="description" content="Explore American Caselaw" />
+		<meta property="og:title" content="Caselaw Access Project" />
+		<meta property="og:description" content="Explore American Caselaw" />
+		<meta property="og:url" content="https://case.law/" />
+		<meta property="og:type" content="article" />
+		<meta property="og:site_name" content="Caselaw Access Projects" />
+
+		<link href="/css/global.css" rel="stylesheet" />
+		<script type="module" src="/components/cap-content-router.js"></script>
+		<script type="module" src="/components/cap-footer.js"></script>
+		<script type="module" src="/components/cap-nav.js"></script>
+		<script>
+			window.BUCKET_ROOT = "https://cap-redacted-demo.s3.us-west-2.amazonaws.com";	
+		</script>
+	</head>
+	<body>
+		<cap-nav></cap-nav>
+		<main id="main">
+	        <cap-content-router></cap-content-router>
+			<cap-footer></cap-footer>
+		</main>
+	</body>
+</html>
diff --git a/src/components/cap-case.js b/src/components/cap-case.js
@@ -0,0 +1,52 @@
+import { LitElement, html, css, unsafeHTML } from "../lib/lit.js";
+
+import { fetchCaselawBody } from "../lib/data.js";
+
+export default class CapCase extends LitElement {
+	static properties = {
+		caseBody: { attribute: false },
+		reporter: { type: String },
+		volume: { type: String },
+		case: { type: String },
+	};
+
+	constructor() {
+		super();
+		this.caseBody = "";
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		fetchCaselawBody(
+			this.reporter,
+			this.volume,
+			this.case,
+			(data) => (this.caseBody = data)
+		);
+	}
+
+	render() {
+		/*
+		This render method uses requestAnimationFrame to alter the links in
+		the shadow DOM once it's been rendered to change the logical links
+		to cited cases in the archived html to links to the presentation
+		layer version of the case.
+		*/
+
+		// Skip the first frame which is the shadow DOM render
+		const doNothing = () => {};
+		// Rewrite the links on the second frame
+		const rewriteLinks = () => {
+			this.shadowRoot.querySelectorAll("a").forEach((a) => {
+				const oldLink = a.getAttribute("href");
+				//todo we need to fix this when ENG-523 happens
+				a.href = oldLink + "#todo";
+			});
+		};
+		window.requestAnimationFrame(doNothing);
+		window.requestAnimationFrame(rewriteLinks);
+		return html`${unsafeHTML(this.caseBody)}`;
+	}
+}
+
+customElements.define("cap-case", CapCase);
diff --git a/src/components/cap-content-router.js b/src/components/cap-content-router.js
@@ -0,0 +1,38 @@
+import { html, LitElement } from "../lib/lit.js";
+
+import "./cap-volume.js";
+import "./cap-case.js";
+import "./cap-jurisdictions.js";
+import "./cap-reporter.js";
+
+export default class CapContentRouter extends LitElement {
+	render() {
+		const searchParams = new URLSearchParams(window.location.search);
+		const reporter = searchParams.get("reporter");
+		const volume = searchParams.get("volume");
+		const caseName = searchParams.get("case");
+
+		if (!!caseName && !!volume && !!reporter) {
+			return html`<cap-case
+				reporter=${reporter}
+				volume=${volume}
+				case=${caseName}
+			></cap-case>`;
+		}
+
+		if (!!volume && !!reporter) {
+			return html`<cap-volume
+				reporter=${reporter}
+				volume=${volume}
+			></cap-volume>`;
+		}
+
+		if (!!reporter) {
+			return html`<cap-reporter reporter=${reporter}></cap-reporter>`;
+		}
+
+		return html`<cap-jurisdictions></cap-jurisdictions>`;
+	}
+}
+
+customElements.define("cap-content-router", CapContentRouter);
diff --git a/src/components/cap-jurisdictions.js b/src/components/cap-jurisdictions.js
@@ -0,0 +1,43 @@
+import { LitElement, html, css } from "../lib/lit.js";
+import { fetchJurisdictionsData } from "../lib/data.js";
+
+export default class CapJurisdictions extends LitElement {
+	static properties = {
+		jurisdictionsData: { attribute: false },
+	};
+
+	constructor() {
+		super();
+		this.jurisdictionsData = [];
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		fetchJurisdictionsData((data) => (this.jurisdictionsData = data));
+	}
+
+	render() {
+		return html`
+			${Object.keys(this.jurisdictionsData)
+				.sort()
+				.map(
+					(jurisdiction) =>
+						html`<article>
+							<h2>${jurisdiction}</h2>
+							<ul>
+								${this.jurisdictionsData[jurisdiction].map(
+									(reporter) => html`<li>
+										<a href="/caselaw/?reporter=${reporter.slug}"
+											>${reporter.short_name}</a
+										>: ${reporter.full_name}
+										(${reporter.start_year}-${reporter.end_year})
+									</li>`
+								)}
+							</ul>
+						</article>`
+				)}
+		`;
+	}
+}
+
+customElements.define("cap-jurisdictions", CapJurisdictions);
diff --git a/src/components/cap-reporter.js b/src/components/cap-reporter.js
@@ -0,0 +1,49 @@
+import { LitElement, html, css } from "../lib/lit.js";
+import { fetchVolumesData, fetchReporterData } from "../lib/data.js";
+
+export default class CapReporter extends LitElement {
+	static properties = {
+		volumesData: { attribute: false },
+		reporterData: { attribute: false },
+		reporter: { type: String },
+	};
+
+	constructor() {
+		super();
+		this.volumesData = [];
+		this.reporterData = {};
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		fetchVolumesData(this.reporter, (data) => (this.volumesData = data));
+		fetchReporterData(this.reporter, (data) => (this.reporterData = data));
+	}
+
+	render() {
+		return html`
+			<h1>${this.reporterData.short_name}</h1>
+			<h2>
+				${this.reporterData.full_name}
+				(${this.reporterData.start_year}-${this.reporterData.end_year})
+			</h2>
+			Volume number:
+			<ul>
+				${this.volumesData
+					.sort((a, b) => a.volume_number - b.volume_number)
+					.map(
+						(v) =>
+							html`<li>
+								<a
+									href="/caselaw/?reporter=${this
+										.reporter}&volume=${v.volume_number}"
+									>${v.volume_number}</a
+								>
+							</li>`
+					)}
+			</ul>
+		`;
+	}
+}
+
+customElements.define("cap-reporter", CapReporter);
diff --git a/src/components/cap-volume.js b/src/components/cap-volume.js
@@ -0,0 +1,67 @@
+import { LitElement, html, css } from "../lib/lit.js";
+import {
+	fetchCasesList,
+	fetchReporterData,
+	fetchVolumeData,
+} from "../lib/data.js";
+
+export default class CapVolume extends LitElement {
+	static properties = {
+		casesData: { attribute: false },
+		reporterData: { attribute: false },
+		volumeData: { attribute: false },
+		reporter: { type: String },
+		volume: { type: String },
+	};
+
+	constructor() {
+		super();
+		this.casesData = [];
+		this.reporterData = {};
+		this.volumeData = {};
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		fetchCasesList(
+			this.reporter,
+			this.volume,
+			(data) => (this.casesData = data)
+		);
+		fetchReporterData(this.reporter, (data) => (this.reporterData = data));
+		fetchVolumeData(
+			this.reporter,
+			this.volume,
+			(data) => (this.volumeData = data)
+		);
+	}
+
+	render() {
+		//todo this will need to be updated to deal with multiple cases on the same page
+		return html`
+			<h1>${this.volume} ${this.reporterData.short_name}</h1>
+			<h2>
+				${this.reporterData.full_name}
+				(${this.reporterData.start_year}-${this.reporterData.end_year}) volume
+				${this.volume}
+			</h2>
+			<ul>
+				${this.casesData.map(
+					(c) =>
+						html`<li>
+							<a
+								href="/caselaw/?reporter=${this.reporter}&volume=${this
+									.volume}&case=${String(c.first_page).padStart(4, "0")}"
+							>
+								${c.name_abbreviation},
+								${c.citations.filter((c) => c.type == "official")[0].cite}
+								(${c.decision_date.substring(0, 4)})
+							</a>
+						</li>`
+				)}
+			</ul>
+		`;
+	}
+}
+
+customElements.define("cap-volume", CapVolume);
diff --git a/src/lib/data.js b/src/lib/data.js
@@ -0,0 +1,50 @@
+export const fetchJurisdictionsData = async (callback) => {
+	const url = `${window.BUCKET_ROOT}/ReportersMetadata.json`;
+	const data = await fetchJson(url);
+	const jurisdictions = {};
+	data.forEach((element) => {
+		const jurisdiction = element.jurisdictions[0].name;
+		if (!jurisdictions[jurisdiction]) {
+			jurisdictions[jurisdiction] = [];
+		}
+		jurisdictions[jurisdiction].push(element);
+	});
+	callback(jurisdictions);
+};
+
+export const fetchReporterData = async (reporter, callback) => {
+	const url = `${window.BUCKET_ROOT}/${reporter}/ReporterMetadata.json`;
+	callback(await fetchJson(url));
+};
+
+export const fetchVolumesData = async (reporter, callback) => {
+	const url = `${window.BUCKET_ROOT}/${reporter}/VolumesMetadata.json`;
+	callback(await fetchJson(url));
+};
+
+export const fetchVolumeData = async (reporter, volume, callback) => {
+	const url = `${window.BUCKET_ROOT}/${reporter}/${volume}/VolumeMetadata.json`;
+	const response = await fetch(url);
+	callback(await response.json());
+};
+
+export const fetchCasesList = async (reporter, volume, callback) => {
+	const url = `${window.BUCKET_ROOT}/${reporter}/${volume}/CasesMetadata.json`;
+	callback(await fetchJson(url));
+};
+
+export const fetchCaselawBody = async (
+	reporter,
+	volume,
+	caseName,
+	callback
+) => {
+	const url = `${window.BUCKET_ROOT}/${reporter}/${volume}/html/${caseName}-01.html`;
+	const response = await fetch(url);
+	callback(await response.text());
+};
+
+const fetchJson = async (url) => {
+	const response = await fetch(url);
+	return await response.json();
+};