feat: add localstorage cacheing

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);

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');