* [PATCH Website v2 1/2] feat: Add local storage caching for org members and user info
2023-09-30 20:34 [PATCH Website v2 0/2] API Local Storage and Scrollbars Memet Zx
@ 2023-09-30 20:35 ` Memet Zx
2023-09-30 20:35 ` [PATCH Website v2 2/2] style: Add custom styling for scrollbars in chat interface Memet Zx
2023-10-02 1:06 ` [PATCH Website v2 0/2] API Local Storage and Scrollbars Muhammad Rizki
2 siblings, 0 replies; 7+ messages in thread
From: Memet Zx @ 2023-09-30 20:35 UTC (permalink / raw)
To: Ammar Faizi
Cc: Memet Zx, Muhammad Rizki, Alviro Iskandar Setiawan,
GNU/Weeb Mailing List, Irvan Malik Azantha
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 <[email protected]>
---
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
^ permalink raw reply related [flat|nested] 7+ messages in thread* Re: [PATCH Website v2 0/2] API Local Storage and Scrollbars
2023-09-30 20:34 [PATCH Website v2 0/2] API Local Storage and Scrollbars Memet Zx
2023-09-30 20:35 ` [PATCH Website v2 1/2] feat: Add local storage caching for org members and user info Memet Zx
2023-09-30 20:35 ` [PATCH Website v2 2/2] style: Add custom styling for scrollbars in chat interface Memet Zx
@ 2023-10-02 1:06 ` Muhammad Rizki
2023-10-02 1:25 ` Memet Zx
2 siblings, 1 reply; 7+ messages in thread
From: Muhammad Rizki @ 2023-10-02 1:06 UTC (permalink / raw)
To: Memet Zx, Ammar Faizi
Cc: Alviro Iskandar Setiawan, GNU/Weeb Mailing List,
Irvan Malik Azantha
On 01/10/2023 03.34, Memet Zx wrote:
> Hello,
>
> This is PATCH v2. I apologize for the oversight in the v1 cover letter.
> I neglected to provide an explanation of the changes, so I will address
> them in detail here:
>
> [1] Local Storage Caching for Org Members and User Info
>
> Implemented local storage caching to store org members' data and user
> info. This change was prompted by limitations experienced while
> requesting data from the GitHub API, ensuring smoother performance.
>
> [2] Custom Styling for Scrollbars
>
> Added custom styles for scrollbars interface, enhancing the visual
> appeal and providing a more refined user experience.
>
> Thank you.
>
I tried to migrate this project to svelte-kit framework, would you make
that changes later if Ammar agreed for the migration and applied the
changes?
>
> Memet Zx (2):
> feat: Add local storage caching for org members and user info
> style: Add custom styling for scrollbars in chat interface
>
> index.html | 86 ++++++++++++++++++++++++++++++++++++++++--------------
> style.css | 11 +++++++
> 2 files changed, 75 insertions(+), 22 deletions(-)
>
>
> base-commit: 470d43b7b80e5db207616200e069135c20b3d5ee
> --
> Memet Zx
^ permalink raw reply [flat|nested] 7+ messages in thread