[PATCH Website v2 1/2] feat: Add local storage caching for org members and user info

[Memet Zx <zxce3@gnuweeb.org>]

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 <zxce3@gnuweeb.org>
---
 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