diff --git a/js/popup.js b/js/popup.js index 9ea0f1e..650d139 100644 --- a/js/popup.js +++ b/js/popup.js @@ -614,7 +614,7 @@ function sortThemes(method) { }); current_page_num = 1; displayThemeList(0); - cache = {}; + //cache = {}; } // shuffle function for the score sorting so theres no order bias @@ -761,44 +761,74 @@ function createThemeLikeBtn(location, initial, score) { return likeBtn; } +let likeThemeTimeout = false; + async function likeTheme(location, code, score) { + if (likeThemeTimeout === true) return; + const sync = await chrome.storage.sync.get("id"); const local = await chrome.storage.local.get("liked_themes"); + const setLikeStatus = (direction) => { + + let output = local; + + if (direction === -1) { + const index = local["liked_themes"].indexOf(code); + location.classList.remove("theme-liked"); + location.querySelector(".theme-button-like-amount").textContent = shortScore(score); + if (index !== -1) output = local["liked_themes"].filter(x => x !== code); + } else if (direction === 1) { + location.classList += (" theme-liked animate-like"); + location.querySelector(".theme-button-like-amount").textContent = shortScore(score + 1); + output = [...local["liked_themes"], code]; + } + + return output; + } + + // show the updated like status immediately + setLikeStatus(location.classList.contains("theme-liked") ? -1 : 1); + const res = await fetch(`${apiurl}/api/themes/theme/${code}/like`, { "method": "POST", - "body": JSON.stringify({"id": "2hkJkfJhwffc7cCC4os49vGfss2"}), + "body": JSON.stringify({ "id": sync["id"] }), "headers": { "Content-Type": "application/json" }, }); const data = await res.json(); - const direction = parseInt(data.message); - const likeBtn = location; - let output; - - if (data.errors === true) { - - } else if (direction === -1) { - const index = local["liked_themes"].indexOf(code); - likeBtn.classList.remove("theme-liked"); - likeBtn.querySelector(".theme-button-like-amount").textContent = shortScore(score); - if (index !== -1) output = local["liked_themes"].filter(x => x !== code); - } else if (direction === 1) { - likeBtn.classList += (" theme-liked animate-like"); - likeBtn.querySelector(".theme-button-like-amount").textContent = shortScore(score + 1); - output = [...local["liked_themes"], code]; + if (data.errors === false) { + const direction = parseInt(data.message); + // update the like status just in case there is some disagreement with the server + chrome.storage.local.set({ "liked_themes": setLikeStatus(direction) }); + } + + + if (likeThemeTimeout === false) { + likeThemeTimeout = true; + setTimeout(() => { + likeThemeTimeout = false; + }, 1000); } - chrome.storage.local.set({ "liked_themes": output }); } async function getAndLoadTheme(code) { - const res = await fetch(`${apiurl}/api/themes/theme/${code}`); - const data = await res.json(); - importTheme(JSON.parse(data.message.exports)); + const key = `themes/${code}`; + let output = {}; + if (cache[key]) { + output = cache[key]; + console.log("got this theme from the cache."); + } else { + const res = await fetch(`${apiurl}/api/themes/theme/${code}`); + const data = await res.json(); + output = JSON.parse(data.message.exports); + cache[key] = output; + } + importTheme(output); } async function displayThemeListNew(direction) { diff --git a/manifest.json b/manifest.json index 2a58613..56e9ffe 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "manifest_version": 3, "name": "Better Canvas", "description": "Feature packed extension for Canvas.", - "version": "5.12.0", + "version": "5.12.1", "icons": { "16": "icon/icon-16.png", "32": "icon/icon-32.png",