Merge pull request #60 from rtCamp/fix/storage-access-api

Fix: Make callbacks consistent for storage access api
rtCamp · Mar 13, 2024 · 15dec24 · 15dec24
2 parents 675b489 + 458a54a
commit 15dec24
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 87 deletions.
diff --git a/src/demos/storage-access-api/personalization.ejs b/src/demos/storage-access-api/personalization.ejs
@@ -1,96 +1,126 @@
-document.addEventListener('DOMContentLoaded', () => {
-    const baseURL = '<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/personalization';
-    const pageContainer = document.getElementById('theme-container');
-    const themeSwitcher = document.getElementById('dark-mode-switch');
-    const errorMessages = document.getElementById('status-message');
-    const loadButton    = document.getElementById('load-button');
-    const toggleContainer = document.querySelector('.dark-mode-toggle');
-    const isIframe = window.self !== window.top;
-    const containerClass = isIframe ? 'h-screen flex items-center justify-center' : 'flex items-center justify-center';
-    let hasStorageAccess = false;
-
-    document.hasStorageAccess().then(result => {
-        hasStorageAccess = result;
-        if ( hasStorageAccess ) {
-            updateUserPreference();
-        }
-    })
-
-    async function updateUserPreference() {
-        if ( hasStorageAccess ) {
-            fetchAndApplyTheme();
-        } else {
-            try {
-                await document.requestStorageAccess();
-                toggleContainer.classList.remove('hidden');
-                loadButton.classList.add('hidden');
-                fetchAndApplyTheme();
-            } catch (error) {
-                errorMessages.textContent = error?.message;
-            }
-        }   
+(() => {
+  let baseURL,
+    pageContainer,
+    themeSwitcher,
+    errorMessages,
+    loadButton,
+    toggleContainer,
+    isIframe,
+    containerClass,
+    hasStorageAccess;
+
+  async function fetchAndApplyTheme() {
+    try {
+      const response = await fetch(`${baseURL}/get-personalization`, {
+        method: 'GET',
+        credentials: 'include',
+    });
+
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+        errorMessages.textContent = `Network response was not ok ${response.status} - ${response.statusText}`;
+      }
+
+      const data = await response.json();
+      pageContainer.className = `${containerClass} ${data.theme}`;
+      if (data.theme === 'dark') {
+        themeSwitcher.checked = true;
+      }
+    } catch (error) {
+      errorMessages.textContent = error?.message;
+    }
+  }
+
+  async function updateUserPreference() {
+    errorMessages.textContent = '';
+    if (hasStorageAccess) {
+      fetchAndApplyTheme();
+      return;
+    }
+
+    try {
+      await document.requestStorageAccess();
+      hasStorageAccess = await document.hasStorageAccess();
+
+      if (!hasStorageAccess) {
+        errorMessages.textContent = 'User denied storage access';
+        return;
+      }
+
+      toggleContainer.classList.remove('hidden');
+      loadButton.classList.add('hidden');
+
+      fetchAndApplyTheme();
+    } catch (error) {
+      errorMessages.textContent = error?.message;
     }
+  }
+
+  async function fetchSetPersonalization() {
+    try {
+      const response = await fetch(`${baseURL}/set-personalization`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          theme: themeSwitcher?.checked ? 'dark' : 'light',
+        }),
+      });
+      const data = await response.json();
 
-    function fetchAndApplyTheme() {
-        fetch(`${baseURL}/get-personalization`, {
-                method: 'GET',
-                credentials: 'include'
-            })
-                .then(response => {
-                    if (!response.ok) {
-                        throw new Error('Network response was not ok');
-                        errorMessages.textContent = `Network response was not ok ${response.status} - ${response.statusText}`;
-                    }
-                    return response.json();
-                })
-                .then(data => {
-                    const theme = data.theme;
-                    pageContainer.className = `${containerClass} ${data.theme}`
-                    if (theme === 'dark') {
-                        themeSwitcher.checked = true;
-                    }
-                })
-                .catch(error => {
-                    errorMessages.textContent = error?.message;
-                });
+      pageContainer.className = `${containerClass} ${data.theme}`;
+    } catch (error) {
+      errorMessages.textContent = error?.message;
     }
+  }
+
+  async function toggleTheme() {
+    errorMessages.textContent = '';
 
-    function fetchSetPersonalization() {
-        fetch( `${baseURL}/set-personalization`, {
-            method: 'POST',
-            credentials: 'include',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ theme: themeSwitcher?.checked ? 'dark' : 'light' })
-        })
-        .then(response => response.json())
-        .then(data => {
-            pageContainer.className = `${containerClass} ${data.theme}`;
-        });
+    if (hasStorageAccess) {
+      fetchSetPersonalization();
+      return;
     }
 
-    async function toggleTheme() {
-        hasStorageAccess = await document.hasStorageAccess();
-
-        if( hasStorageAccess ) {
-            fetchSetPersonalization();
-        } else {
-            try {
-                await document.requestStorageAccess();
-                if ( await document.hasStorageAccess() ) {
-                    fetchSetPersonalization();
-                } else {
-                    errorMessages.textContent = 'User denied storage access';
-                }
-            } catch (error) {
-                errorMessages.textContent = `The request to storage access API was denied because the user never interacted with the top-level site context or the permission wasn't grant by the user`;
-            }
-        } 
+    try {
+      await document.requestStorageAccess();
+      hasStorageAccess = await document.hasStorageAccess();
+
+      if (!hasStorageAccess) {
+        errorMessages.textContent = 'User denied storage access';
+        return;
+      }
+
+      fetchSetPersonalization();
+    } catch (error) {
+      errorMessages.textContent = error?.message;
     }
-
+  }
+
+  // Main start point
+  document.addEventListener('DOMContentLoaded', async () => {
+    baseURL =
+      '<%= protocol %>://<%= domainC %><% if (isPortPresent) { %>:<%= port %><% } %>/personalization';
+    pageContainer = document.getElementById('theme-container');
+    themeSwitcher = document.getElementById('dark-mode-switch');
+    errorMessages = document.getElementById('status-message');
+    loadButton = document.getElementById('load-button');
+    toggleContainer = document.querySelector('.dark-mode-toggle');
+    isIframe = window.self !== window.top;
+    containerClass = isIframe
+      ? 'h-screen flex items-center justify-center'
+      : 'flex items-center justify-center';
+    let hasStorageAccess = await document.hasStorageAccess();
+
+    if (hasStorageAccess) {
+      updateUserPreference();
+    }
+
     window.toggleTheme = toggleTheme;
     if (isIframe && !hasStorageAccess) {
-        toggleContainer.classList.add('hidden');
-        loadButton.classList.remove('hidden');
-        loadButton.addEventListener('click', updateUserPreference);
+      toggleContainer.classList.add('hidden');
+      loadButton.classList.remove('hidden');
+      loadButton.addEventListener('click', updateUserPreference);
     }
-});
+  });
+})();
diff --git a/src/demos/storage-access-api/theme-selection.ejs b/src/demos/storage-access-api/theme-selection.ejs
@@ -2,7 +2,7 @@
     <div id="theme-container" class="flex items-center justify-center">
     <%- include(commonPath + '/internal-page/header.ejs', {containerType: 'sm'}) %>
         <div class="text-red-500 p-4 text-sm" id="status-message"></div>
-        <button id="load-button" class="hidden px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300" onclick="toggleTheme()">
+        <button id="load-button" class="hidden px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300">
             Load user preferences
         </button>
         <div class="dark-mode-toggle">