[PATCH Website v2 0/2] API Local Storage and Scrollbars

[PATCH Website v2 0/2] API Local Storage and Scrollbars

[Memet Zx]

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.


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

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

[Memet Zx]

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

[PATCH Website v2 2/2] style: Add custom styling for scrollbars in chat interface

[Memet Zx]

This commit introduces custom styling for scrollbars using CSS. The
scrollbars now have a width of 6px, a dark background color for the
thumb (#718096), and a light background color for the track (#CBD5E0).
This enhances the visual appearance of the interface.

Signed-off-by: Memet Zx <zxce3@gnuweeb.org>
---
 style.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/style.css b/style.css
index 19d1659..2bf4cea 100644
--- a/style.css
+++ b/style.css
@@ -3,6 +3,17 @@
 @tailwind utilities;
 
 
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #718096;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #CBD5E0;
+}
 .chat {
   @apply grid gap-x-3 py-1
 }
-- 
Memet Zx

Re: [PATCH Website v2 0/2] API Local Storage and Scrollbars

[Muhammad Rizki]

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

Re: [PATCH Website v2 0/2] API Local Storage and Scrollbars

[Memet Zx]

On 2023-10-02 08:06, Muhammad Rizki wrote:
> 
> 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?
> 

It's oke, just do it, right now i'm working on svelte projects too, so 
i'll be waiting for your patch.

Good luck!

-- 
Memet Zx

PS: Sorry i forgot to 'reply-to-all'

Re: [PATCH Website v2 0/2] API Local Storage and Scrollbars

[Muhammad Rizki]

On 02/10/2023 08.25, Memet Zx wrote:
> On 2023-10-02 08:06, Muhammad Rizki wrote:
>>
>> 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?
>>
> 
> It's oke, just do it, right now i'm working on svelte projects too, so 
> i'll be waiting for your patch.
> 
> Good luck!
> 

Thanks, glad to hear that!

Re: [PATCH Website v2 0/2] API Local Storage and Scrollbars

[Memet Zx]

On 2023-10-02 08:26, Muhammad Rizki wrote:
> 
> Thanks, glad to hear that!
> 

Keep up the good work!
-- 
Memet Zx

PS: sorry for the previous message I forgot to 'reply-to-all'