From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: X-Spam-Checker-Version: SpamAssassin 3.4.6 (2021-04-09) on gnuweeb.org X-Spam-Level: X-Spam-Status: No, score=-1.2 required=5.0 tests=ALL_TRUSTED,DKIM_SIGNED, DKIM_VALID,DKIM_VALID_AU,DKIM_VALID_EF,URIBL_BLOCKED, URIBL_DBL_BLOCKED_OPENDNS autolearn=ham autolearn_force=no version=3.4.6 DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/simple; d=gnuweeb.org; s=default; t=1696106121; bh=wmFYM5vvj/MQE+HO6REqJs5PuKuC+jMsp+GdNESCgf4=; h=From:To:Cc:Subject:Date:In-Reply-To:References; b=Itvvbqu9LKsM8M2jUHqo68IYrJ1hkzjafvnO4GJAiedxk6ex/eYDo5uJHN+PGS/Wi 8/ynVFdZmGAZvuyl3ga5tzwOhfB31W3j/yv1y1OwsK6rnePcCB2Uj37t7oRc5b/lJU AIfYELLQq7wxhB8dpS5YhjWYDV8bfMrlDNr1xrNxn9dsNbW62E1zdPy0iXtotiSrJ1 BVdiJCh6Am0qZB33IdByO/CBYCL/l3Em8rKSgmoSHW0VtZkUXF1wXE9EsGn03sY9Pm wOB2hiFsn2Ya89/+blXixTahgcrJubcCxXfMW1uGBsDue1DBAC351RjaWUWEtzqivC CseBgdc8joD+A== Received: from localhost.localdomain (unknown [68.183.184.174]) by gnuweeb.org (Postfix) with ESMTPSA id 1CB7E24B7B2; Sun, 1 Oct 2023 03:35:17 +0700 (WIB) From: Memet Zx To: Ammar Faizi Cc: Memet Zx , Muhammad Rizki , Alviro Iskandar Setiawan , GNU/Weeb Mailing List , Irvan Malik Azantha Subject: [PATCH Website v2 1/2] feat: Add local storage caching for org members and user info Date: Sun, 1 Oct 2023 03:35:00 +0700 Message-Id: <20230930203501.57609-2-zxce3@gnuweeb.org> X-Mailer: git-send-email 2.34.1 In-Reply-To: <20230930203501.57609-1-zxce3@gnuweeb.org> References: <20230930203501.57609-1-zxce3@gnuweeb.org> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit List-Id: This commit implements local storage caching for organization members and user information. This will improve performance by reducing the number of API calls required to fetch this data, providing a smoother user experience. Signed-off-by: Memet Zx --- index.html | 86 ++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 64 insertions(+), 22 deletions(-) diff --git a/index.html b/index.html index 5c6eef3..7527267 100644 --- a/index.html +++ b/index.html @@ -331,33 +331,75 @@ return 0; }); + localStorage.setItem('orgMembers', JSON.stringify(data)); return data; } + async function getUserInfo(login) { + const response = await fetch(`https://api.github.com/users/${login}`); + const data = await response.json(); + + localStorage.setItem(`userInfo_${login}`, JSON.stringify(data)); + + return data; + } + + function getCachedOrgMembers() { + const cachedData = localStorage.getItem('orgMembers'); + return cachedData ? JSON.parse(cachedData) : null; + } + + function getCachedUserInfo(login) { + const cachedData = localStorage.getItem(`userInfo_${login}`); + return cachedData ? JSON.parse(cachedData) : null; + } + async function renderMemberList() { - const membersData = await getOrgMembers(); - const memberList = document.getElementById("member-list"); - - membersData.forEach(e => { - const userAnchorEl = document.createElement("a"); - userAnchorEl.href = e.html_url; - userAnchorEl.classList.add( - "flex", "items-center", "space-x-3", - "p-1", "rounded-lg", "hover:bg-neutral-800" - ); + try { + let membersData = getCachedOrgMembers(); + if (!membersData) { + membersData = await getOrgMembers(); + } - const userImgEl = document.createElement("img"); - userImgEl.src = e.avatar_url; - userImgEl.alt = `${e.login} | Organization Member`; - userImgEl.classList.add("rounded-full", "w-10"); - - const usernameDivEl = document.createElement("div"); - usernameDivEl.classList.add("truncate", "text-sky-500"); - usernameDivEl.innerText = `@${e.login}`; - userAnchorEl.appendChild(userImgEl); - userAnchorEl.appendChild(usernameDivEl); - memberList.appendChild(userAnchorEl); - }); + const memberList = document.getElementById("member-list"); + + for (const member of membersData) { + const userInfo = getCachedUserInfo(member.login) || await getUserInfo(member.login); + + const userAnchorEl = document.createElement("a"); + userAnchorEl.href = userInfo.html_url; + userAnchorEl.classList.add( + "flex", "items-center", "space-x-3", + "p-1", "rounded-lg", "hover:bg-neutral-800" + ); + + const userImgEl = document.createElement("img"); + userImgEl.src = userInfo.avatar_url; + userImgEl.alt = `${userInfo.login} | Organization Member`; + userImgEl.classList.add("rounded-full", "w-10"); + + const infoContainer = document.createElement("div"); + infoContainer.classList.add("flex", "flex-col", "text-left"); + + const usernameDivEl = document.createElement("div"); + usernameDivEl.classList.add("truncate", "text-sky-500"); + usernameDivEl.innerText = `${userInfo.login}`; + + const nameDivEl = document.createElement("div"); + nameDivEl.classList.add("text-gray-500"); + nameDivEl.innerText = userInfo.name || ""; // Display name if available + + infoContainer.appendChild(usernameDivEl); + infoContainer.appendChild(nameDivEl); + + userAnchorEl.appendChild(userImgEl); + userAnchorEl.appendChild(infoContainer); + + memberList.appendChild(userAnchorEl); + } + } catch (error) { + console.error(error); + } } async function getRecentMessages() { -- Memet Zx