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=1696102114; bh=ZewnlLXlLWI8OgQv2XImSdVOL4dyav4psiU+DobbVBA=; h=From:To:Cc:Subject:Date; b=ngBk74+u5jkJdsPnWH4qN2+xfvCjWqgv89R7/X+jzMKyIOZX3mO6aQpIwLYlNy7dE jK4lTBWVxF2ef/UsgwravjVXOvy5FGFvcfOMxy+ZRpmPJ5/y1veepTEZ7bIgux+wPi sxvbOpBzjR3yc10V4K/bf+ZzuLUnsqildi20LmndLC9BlZFhIONLrEdS9Cmp8KQNul ovsYK5brH+CqYZcuUN82Yi7RBtg9SpFuApnwL2U6Yk+XZppp7DacoTeAlM/6uDR7uO lX+sAGWm6pOFt00KJW0ctw9Zpyms3jLPifkMjOVox2AyNC0ZDsEDi6bhowwV8sjcpU RSBo7+0HccP/g== Received: from localhost.localdomain (unknown [68.183.184.174]) by gnuweeb.org (Postfix) with ESMTPSA id 608C324B85D; Sun, 1 Oct 2023 02:28:30 +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 1/2] feat: Add local storage caching for org members and user info Date: Sun, 1 Oct 2023 02:28:07 +0700 Message-Id: <20230930192809.56266-1-zxce3@gnuweeb.org> X-Mailer: git-send-email 2.34.1 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() { base-commit: 470d43b7b80e5db207616200e069135c20b3d5ee -- Memet Zx