Add cache support with feature flag

Fixes #9

package.json

@@ -33,6 +33,7 @@
 	},
 	"dependencies": {
 		"@octokit/core": "^6.1.2",
+		"lodash": "^4.17.21",
 		"octokit": "^4.1.1",
 		"webext-base-css": "^2.0.1",
 		"webext-options-sync": "^4.2.3",
@@ -44,6 +45,7 @@
 		"@parcel/resolver-default": "^2.13.0",
 		"@parcel/transformer-typescript-tsc": "^2.13.0",
 		"@types/chrome": "^0.0.308",
+		"@types/lodash": "^4.17.16",
 		"@types/webextension-polyfill": "^0.12.1",
 		"npm-run-all2": "^7.0.1",
 		"parcel": "^2.13.0",

source/api.ts

@@ -39,7 +39,6 @@ export type Results = {
 	ancestorPrs: PrInfo[];
 	descendantPrs: PrInfo[];
 	siblingPrs: PrInfo[];
-	requestedPr: any;
 };
 
 async function getPr(
@@ -159,13 +158,20 @@ export async function generateResults(
 	]);
 
 	return {
-		ancestorPrs: ancestorPrs.map((x) => getInfo(x)),
-		descendantPrs: descendantPrs.map((x) => getInfo(x)),
-		siblingPrs: siblingPrs.map((x) => getInfo(x)),
-		requestedPr,
+		ancestorPrs: getResults(ancestorPrs),
+		descendantPrs: getResults(descendantPrs),
+		siblingPrs: getResults(siblingPrs),
 	};
 }
 
+// Convert to prinfos and then sort by number because we want them to be consistent when loading
+// them from storage for comparison purposes
+function getResults(prResponseData: PrResponseData[]): PrInfo[] {
+	return prResponseData
+		.map((x) => getInfo(x))
+		.sort((a, b) => a.number - b.number);
+}
+
 async function fetchAndFilterSibilingPrs(
 	octokit: OctokitType,
 	options: Options,

source/content.ts

@@ -1,7 +1,13 @@
 import browser from 'webextension-polyfill';
+import isEqual from 'lodash/isEqual';
 import {optionsStorage, type Options} from './options-storage.js';
-import {generateResults, getOctokit, type Results} from './api.js';
-import {renderInDiv} from './render.js';
+import {
+	generateResults,
+	getOctokit,
+	type Results,
+	type PrIdentifier,
+} from './api.js';
+import {renderInDiv, showUpdateButton} from './render.js';
 
 console.log('💈 Content script loaded for', browser.runtime.getManifest().name);
 
@@ -38,9 +44,45 @@ async function addContent(url: string, parentDiv: HTMLDivElement) {
 		return;
 	}
 
-	generateResults(octokit, options, {owner, repo, number: pullNumber})
+	const prIdentifier: PrIdentifier = {owner, repo, number: pullNumber};
+
+	let cachedData: Results | undefined;
+	if (options.enableCache) {
+		cachedData = load(prIdentifier);
+		if (cachedData !== undefined) {
+			renderInDiv(options, resultDiv, cachedData);
+		}
+	}
+
+	generateResults(octokit, options, prIdentifier)
 		.then((data: Results) => {
-			renderInDiv(options, resultDiv, data);
+			if (cachedData === undefined) {
+				console.log('no cached data, rendering the fresh data');
+				if (options.enableCache) {
+					store(prIdentifier, data);
+				}
+
+				renderInDiv(options, resultDiv, data);
+				return;
+			}
+
+			if (options.enableCache && !isEqual(data, cachedData)) {
+				console.log(
+					'data has changed, storing and showing update button',
+					data,
+					'vs',
+					cachedData,
+				);
+				store(prIdentifier, data);
+
+				showUpdateButton(resultDiv, data)
+					.then(() => {
+						console.log('update button shown');
+					})
+					.catch((error: unknown) => {
+						console.error(error);
+					});
+			}
 		})
 		.catch((error: unknown) => {
 			console.error(error);
@@ -68,6 +110,21 @@ function prepopulateTheResultDiv(
 	return resultDiv;
 }
 
+function store(prIdentifier: PrIdentifier, data: Results) {
+	console.log('storing data for', prIdentifier, 'with data', data);
+	localStorage.setItem(getLocalStorageKey(prIdentifier), JSON.stringify(data));
+}
+
+function load(prIdentifier: PrIdentifier): Results | undefined {
+	console.log('loading data for', prIdentifier);
+	const data = localStorage.getItem(getLocalStorageKey(prIdentifier));
+	return data ? (JSON.parse(data) as Results) : undefined;
+}
+
+function getLocalStorageKey(prIdentifier: PrIdentifier): string {
+	return `chainlink-${prIdentifier.owner}/${prIdentifier.repo}/${prIdentifier.number}`;
+}
+
 type ObserverListener<ExpectedElement extends HTMLDivElement> = (
 	element: ExpectedElement,
 ) => void;

source/options-storage.ts

@@ -9,13 +9,15 @@ export type Options = {
 	token: string;
 	showSiblingPrs: boolean;
 	subsectionSortingMethod: SubsectionSortingMethod;
+	enableCache: boolean;
 };
 
 export const optionsStorage = new OptionsSync({
 	defaults: {
 		token: 'Enter your token here',
 		showSiblingPrs: true,
 		subsectionSortingMethod: SubsectionSortingMethod.Descending,
+		enableCache: true,
 	},
 	migrations: [OptionsSync.migrations.removeUnused],
 	logging: true,

source/options.css

@@ -1,6 +1,6 @@
 .block {
-    display: block;
-    margin-bottom: 10px; /* Optional: Adds space between elements */
+	display: block;
+	margin-bottom: 10px; /* Optional: Adds space between elements */
 }
 
 html {

source/options.html

@@ -59,6 +59,14 @@ <h2>Feature Checkboxes</h2>
 					<option value="Ascending">Ascending</option>
 				</select>
 			</div>
+			<div class="block">
+				<span>Enable Cache:</span>
+				<input
+					type="checkbox"
+					name="enableCache"
+					checked
+				>
+			</div>
 		</label>
 	</div>
 </form>

source/render.ts

@@ -1,11 +1,37 @@
-import {type Options, SubsectionSortingMethod} from './options-storage.js';
+import cloneDeep from 'lodash/cloneDeep';
+import {
+	type Options,
+	SubsectionSortingMethod,
+	optionsStorage,
+} from './options-storage.js';
 import {type Results, type PrInfo, State, stateOrder} from './api.js';
 
+export async function showUpdateButton(
+	resultDiv: HTMLDivElement,
+	results: Results,
+) {
+	const updateButton = document.createElement('button');
+	updateButton.textContent = 'Update Chainlink';
+	updateButton.addEventListener('click', async () => {
+		const options = await optionsStorage.getAll();
+		renderInDiv(options, resultDiv, results);
+	});
+
+	updateButton.style.height = '40px';
+
+	resultDiv.append(updateButton);
+}
+
+const numberSections = 3;
+
 export function renderInDiv(
 	options: Options,
 	resultDiv: HTMLDivElement,
 	results: Results,
 ) {
+	// Make a copy because rendering shouldn't affect the original data
+	results = cloneDeep(results);
+
 	if (resultDiv) {
 		// Clear out div
 		while (resultDiv.firstChild) {
@@ -15,18 +41,25 @@ export function renderInDiv(
 			}
 		}
 
+		let fullWidthPercentage = 100;
+		if (options.enableCache) {
+			fullWidthPercentage -= 10;
+		}
+
+		const widthPerSection = fullWidthPercentage / numberSections + '%';
+
 		resultDiv.style.display = 'flex';
 
 		const ancestorDiv = document.createElement('div');
-		ancestorDiv.style.width = '33.3%';
+		ancestorDiv.style.width = widthPerSection;
 
 		renderHeader(ancestorDiv, 'Ancestor PRs');
 		renderList(options, ancestorDiv, results.ancestorPrs);
 
 		resultDiv.append(ancestorDiv);
 
 		const siblingDiv = document.createElement('div');
-		siblingDiv.style.width = '33.3%';
+		siblingDiv.style.width = widthPerSection;
 
 		if (options.showSiblingPrs) {
 			renderHeader(siblingDiv, 'Sibling PRs');
@@ -36,7 +69,7 @@ export function renderInDiv(
 		resultDiv.append(siblingDiv);
 
 		const descendantDiv = document.createElement('div');
-		descendantDiv.style.width = '33.3%';
+		descendantDiv.style.width = widthPerSection;
 
 		renderHeader(descendantDiv, 'Descendant PRs');
 		renderList(options, descendantDiv, results.descendantPrs);

tsconfig.json

@@ -9,7 +9,7 @@
       "sourceMap": true,
       "skipLibCheck": true
     },
-    "types": ["@types/webextension-polyfill", "@octokit/types"],
+    "types": ["@types/webextension-polyfill", "@octokit/types", "@types/lodash"],
     "include": ["source/**/*.ts"],
     "exclude": ["node_modules", "distribution"]
   }