refactor/Tweak variable names and add comments

package.json

@@ -1,6 +1,6 @@
 {
   "name": "api-explorer",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "private": true,
   "scripts": {
     "dev": "vite & ts-node server/app.ts",

src/main.ts

@@ -52,30 +52,38 @@ import '@fontsource/roboto/700.css'
 
 async function setupData(app: App<Element>, worker: Worker) {
   try {
-    const resourceDocsCache = await caches.open('obp-resource-docs-cache')
-    const resourceDocsCacheResponse = await resourceDocsCache.match('/')
-    const messageDocsCache = await caches.open('obp-message-docs-cache')
-    const messageDocsCacheResponse = await messageDocsCache.match('/')
+    // 'open': Returns a Promise that resolves to the Cache object matching the cacheName(obp-resource-docs-cache) (a new cache is created if it doesn't already exist.)
+    const cacheStorageOfResourceDocs = await caches.open('obp-resource-docs-cache') // Please note: The global 'caches' read-only property returns the 'CacheStorage' object associated with the current context.
+    // 'match': Checks if a given Request is a key in any of the Cache objects that the CacheStorage object tracks, and returns a Promise that resolves to that match.
+    const cachedResponseOfResourceDocs = await cacheStorageOfResourceDocs.match('/')
+    // 'open': Returns a Promise that resolves to the Cache object matching the cacheName(obp-message-docs-cache) (a new cache is created if it doesn't already exist.)
+    const cacheStorageOfMessageDocs = await caches.open('obp-message-docs-cache') // Please note: The global 'caches' read-only property returns the 'CacheStorage' object associated with the current context.
+    // 'match': Checks if a given Request is a key in any of the Cache objects that the CacheStorage object tracks, and returns a Promise that resolves to that match.
+    const cachedResponseOfMessageDocs = await cacheStorageOfMessageDocs.match('/')
 
-    //Listen to Web worker
+    // Listen to Web worker
     worker.onmessage = async (event) => {
-      //Update cache docs data in the background
+      // Update cache docs data in the background
       if (event.data === 'update-resource-docs') {
-        await cacheResourceDocsDoc(resourceDocsCache)
+        await cacheResourceDocsDoc(cacheStorageOfResourceDocs)
         console.log('Resource Docs cache was updated.')
       }
       if (event.data === 'update-message-docs') {
-        await cacheMessageDocsDoc(messageDocsCache)
+        await cacheMessageDocsDoc(cacheStorageOfMessageDocs)
         console.log('Message Docs cache was updated.')
       }
     }
 
     const { resourceDocs, groupedDocs } = await cacheResourceDocs(
-      resourceDocsCache,
-      resourceDocsCacheResponse,
+      cacheStorageOfResourceDocs,
+      cachedResponseOfResourceDocs,
+      worker
+    )
+    const messageDocs = await cacheMessageDocs(
+      cacheStorageOfMessageDocs,
+      cachedResponseOfMessageDocs,
       worker
     )
-    const messageDocs = await cacheMessageDocs(messageDocsCache, messageDocsCacheResponse, worker)
 
     app.provide('OBP-ResourceDocs', resourceDocs)
     app.provide('OBP-APIActiveVersions', Object.keys(resourceDocs).sort())

src/obp/common-functions.ts

@@ -20,7 +20,9 @@ export function updateServerStatus() {
   serverStatus()
     .then((body) => {
       if (oElem) {
-        Object.values(body).every(i => i === true) ? (oElem.className = 'server-is-online') : (oElem.className = 'server-is-offline')
+        Object.values(body).every((i) => i === true)
+          ? (oElem.className = 'server-is-online')
+          : (oElem.className = 'server-is-offline')
       }
     })
     .catch((error) => {
@@ -29,4 +31,14 @@ export function updateServerStatus() {
         oElem.className = 'server-is-offline'
       }
     })
+  updateCacheSizeStatus()
+}
+
+export function updateCacheSizeStatus() {
+  navigator.storage.estimate().then((estimate) => {
+    const percent = ((estimate.usage / estimate.quota) * 100).toFixed(2)
+    const quota = (estimate.quota / 1024 / 1024).toFixed(2) + 'MB'
+    const message = `You're currently using about ${percent}% of your estimated storage quota ${quota}`
+    console.log(message)
+  })
 }

src/obp/message-docs.ts

@@ -24,7 +24,7 @@ export function getGroupedMessageDocs(docs: any): Promise<any> {
   }, {})
 }
 
-export async function cacheDoc(messageDocsCache: any): Promise<any> {
+export async function cacheDoc(cacheStorageOfMessageDocs: any): Promise<any> {
   const messageDocs = await connectors.reduce(async (agroup: any, connector: any) => {
     const logMessage = `Caching message docs { connector: ${connector} }`
     console.log(logMessage)
@@ -36,27 +36,27 @@ export async function cacheDoc(messageDocsCache: any): Promise<any> {
     }
     return group
   }, Promise.resolve({}))
-  await messageDocsCache.put('/', new Response(JSON.stringify(messageDocs)))
+  await cacheStorageOfMessageDocs.put('/', new Response(JSON.stringify(messageDocs)))
   return messageDocs
 }
 
-async function getCacheDoc(messageDocsCache: any): Promise<any> {
-  return await cacheDoc(messageDocsCache)
+async function getCacheDoc(cacheStorageOfMessageDocs: any): Promise<any> {
+  return await cacheDoc(cacheStorageOfMessageDocs)
 }
 
 export async function cache(
-  messageDocsCache: any,
-  messageDocsCacheResponse: any,
+  cacheStorage: any,
+  cachedResponse: any,
   worker: any
 ): Promise<any> {
   try {
     worker.postMessage('update-message-docs')
-    return await messageDocsCacheResponse.json()
+    return await cachedResponse.json()
   } catch (error) {
     console.warn('No message docs cache or malformed cache.')
     console.log('Caching message docs...')
     const isServerActive = await isServerUp()
     if (!isServerActive) throw new Error('API Server is not responding.')
-    return await getCacheDoc(messageDocsCache)
+    return await getCacheDoc(cacheStorage)
   }
 }

src/obp/resource-docs.ts

@@ -24,7 +24,7 @@ export function getOperationDetails(version: string, operation_id: string, docs:
   return docs[version].resource_docs.filter((doc: any) => doc.operation_id === operation_id)[0]
 }
 
-export async function cacheDoc(resourceDocsCache: any): Promise<any> {
+export async function cacheDoc(cacheStorageOfResourceDocs: any): Promise<any> {
   const apiVersions = await getOBPAPIVersions()
   if (apiVersions) {
     const scannedAPIVersions = apiVersions.scanned_api_versions
@@ -40,35 +40,35 @@ export async function cacheDoc(resourceDocsCache: any): Promise<any> {
       }
       updateLoadingInfoMessage(logMessage)
     }
-    await resourceDocsCache.put('/', new Response(JSON.stringify(resourceDocsMapping)))
+    await cacheStorageOfResourceDocs.put('/', new Response(JSON.stringify(resourceDocsMapping)))
     return resourceDocsMapping
   } else {
     const resourceDocs = { ['OBP' + configVersion]: await getOBPResourceDocs(configVersion) }
-    await resourceDocsCache.put('/', new Response(JSON.stringify(resourceDocs)))
+    await cacheStorageOfResourceDocs.put('/', new Response(JSON.stringify(resourceDocs)))
     return resourceDocs
   }
 }
 
-async function getCacheDoc(resourceDocsCache: any): Promise<any> {
-  return await cacheDoc(resourceDocsCache)
+async function getCacheDoc(cacheStorageOfResourceDocs: any): Promise<any> {
+  return await cacheDoc(cacheStorageOfResourceDocs)
 }
 
 export async function cache(
-  resourceDocsCache: any,
-  resourceDocsCacheResponse: any,
+  cachedStorage: any,
+  cachedResponse: any,
   worker: any
 ): Promise<any> {
   try {
     worker.postMessage('update-resource-docs')
-    const resourceDocs = await resourceDocsCacheResponse.json()
-    const groupedDocs = getGroupedResourceDocs('OBP' + configVersion, resourceDocs)
-    return { resourceDocs, groupedDocs }
+    const resourceDocs = await cachedResponse.json()
+    const groupedResourceDocs = getGroupedResourceDocs('OBP' + configVersion, resourceDocs)
+    return { resourceDocs, groupedDocs: groupedResourceDocs }
   } catch (error) {
     console.warn('No resource docs cache or malformed cache.')
     console.log('Caching resource docs...')
     const isServerActive = await isServerUp()
     if (!isServerActive) throw new Error('API Server is not responding.')
-    const resourceDocs = await getCacheDoc(resourceDocsCache)
+    const resourceDocs = await getCacheDoc(cachedStorage)
     const groupedDocs = getGroupedResourceDocs('OBP' + configVersion, resourceDocs)
     return { resourceDocs, groupedDocs }
   }