From 76b47ba5c489ce718b5a72aa81f51e40136d6e5f Mon Sep 17 00:00:00 2001
From: Sohee Lim <limsohee1002@gmail.com>
Date: Wed, 6 Nov 2024 11:49:46 -0500
Subject: [PATCH] feat: add localstorage cacheing

---
 assets/shared-bundle.js     | 37 +++++++++++++++++++++++--------------
 assets/tailwind-output.css  |  4 ----
 src/modules/side-nav/api.ts | 18 ++++++++++++++++++
 src/utils/localStorage.ts   | 31 +++++++++++++++++++++++++++++++
 4 files changed, 72 insertions(+), 18 deletions(-)
 create mode 100644 src/utils/localStorage.ts

diff --git a/assets/shared-bundle.js b/assets/shared-bundle.js
index 079ceab78..7a0ff7f4d 100644
--- a/assets/shared-bundle.js
+++ b/assets/shared-bundle.js
@@ -19850,20 +19850,29 @@ var getIntrinsic = function GetIntrinsic(name, allowMissing) {
 
 var callBind$3 = {exports: {}};
 
-var GetIntrinsic$3 = getIntrinsic;
+var esDefineProperty;
+var hasRequiredEsDefineProperty;
 
-/** @type {import('.')} */
-var $defineProperty$2 = GetIntrinsic$3('%Object.defineProperty%', true) || false;
-if ($defineProperty$2) {
-	try {
-		$defineProperty$2({}, 'a', { value: 1 });
-	} catch (e) {
-		// IE 8 has a broken defineProperty
-		$defineProperty$2 = false;
+function requireEsDefineProperty () {
+	if (hasRequiredEsDefineProperty) return esDefineProperty;
+	hasRequiredEsDefineProperty = 1;
+
+	var GetIntrinsic = getIntrinsic;
+
+	/** @type {import('.')} */
+	var $defineProperty = GetIntrinsic('%Object.defineProperty%', true) || false;
+	if ($defineProperty) {
+		try {
+			$defineProperty({}, 'a', { value: 1 });
+		} catch (e) {
+			// IE 8 has a broken defineProperty
+			$defineProperty = false;
+		}
 	}
-}
 
-var esDefineProperty = $defineProperty$2;
+	esDefineProperty = $defineProperty;
+	return esDefineProperty;
+}
 
 var GetIntrinsic$2 = getIntrinsic;
 
@@ -19880,7 +19889,7 @@ if ($gOPD$1) {
 
 var gopd$1 = $gOPD$1;
 
-var $defineProperty$1 = esDefineProperty;
+var $defineProperty$1 = requireEsDefineProperty();
 
 var $SyntaxError = syntax;
 var $TypeError$3 = type;
@@ -19935,7 +19944,7 @@ var defineDataProperty$1 = function defineDataProperty(
 	}
 };
 
-var $defineProperty = esDefineProperty;
+var $defineProperty = requireEsDefineProperty();
 
 var hasPropertyDescriptors = function hasPropertyDescriptors() {
 	return !!$defineProperty;
@@ -20010,7 +20019,7 @@ callBind$3.exports;
 	var $call = GetIntrinsic('%Function.prototype.call%');
 	var $reflectApply = GetIntrinsic('%Reflect.apply%', true) || bind.call($call, $apply);
 
-	var $defineProperty = esDefineProperty;
+	var $defineProperty = requireEsDefineProperty();
 	var $max = GetIntrinsic('%Math.max%');
 
 	module.exports = function callBind(originalFunction) {
diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css
index 5b823a714..2d65dda14 100644
--- a/assets/tailwind-output.css
+++ b/assets/tailwind-output.css
@@ -1215,10 +1215,6 @@ video {
   border-width: 1px;
 }
 
-.border-2 {
-  border-width: 2px;
-}
-
 .border-b {
   border-bottom-width: 1px;
 }
diff --git a/src/modules/side-nav/api.ts b/src/modules/side-nav/api.ts
index a8bc870af..eeae6b2cb 100644
--- a/src/modules/side-nav/api.ts
+++ b/src/modules/side-nav/api.ts
@@ -1,4 +1,5 @@
 import { SideNavData } from '../../lib/types';
+import { SideNavDataManager } from '../../utils/localStorage';
 
 const makeArrayToHaveUniqueValues = (array: { id: number }[]) => {
   return array.filter((value, index, self) => self.findIndex((v) => v.id === value.id) === index);
@@ -77,6 +78,15 @@ const sanitizeResponse = (response: SideNavApiResponse): SideNavData => {
 
 export const sideNav = {
   get: async (): Promise<SideNavData> => {
+    const storedSideNavData = SideNavDataManager.get();
+    const expriresAt = storedSideNavData?.expriresAt;
+
+    if (expriresAt && expriresAt > Date.now() && storedSideNavData.data) {
+      return storedSideNavData.data;
+    } else {
+      SideNavDataManager.clear();
+    }
+
     const url = `${window.location.origin}/api/v2/help_center/en-us/articles.json?include=categories,sections&per_page=100`;
 
     try {
@@ -121,6 +131,14 @@ export const sideNav = {
       };
       const sanitizedResponse = sanitizeResponse(allPagesResponseData);
 
+      // we cache the response for 24 hours
+      const millisecondsIn24Hours = 24 * 60 * 60 * 1000;
+
+      SideNavDataManager.set({
+        expriresAt: Date.now() + millisecondsIn24Hours,
+        data: sanitizedResponse,
+      });
+
       return sanitizedResponse;
     } catch (error) {
       console.error(error);
diff --git a/src/utils/localStorage.ts b/src/utils/localStorage.ts
new file mode 100644
index 000000000..a755cc40e
--- /dev/null
+++ b/src/utils/localStorage.ts
@@ -0,0 +1,31 @@
+import { SideNavData } from '../lib/types';
+
+export class LocalStorageManager<T> {
+  key: string;
+
+  constructor(key: string) {
+    this.key = key;
+  }
+
+  set(value: T): void {
+    const valueToSet = typeof value === 'string' ? value : JSON.stringify(value);
+    localStorage.setItem(this.key, valueToSet);
+  }
+
+  get(): T | undefined {
+    const value = localStorage.getItem(this.key);
+    if (value) {
+      return JSON.parse(value);
+    }
+    return undefined;
+  }
+
+  clear(): void {
+    localStorage.removeItem(this.key);
+  }
+}
+
+export const SideNavDataManager = new LocalStorageManager<{
+  expriresAt: number;
+  data: SideNavData;
+}>('SIDE_NAV_DATA');