From c6a8d7b3c39aa38dc847ac28b332c89c43b727e4 Mon Sep 17 00:00:00 2001
From: Depayan Mondal <depayan008@gmail.com>
Date: Sun, 9 Feb 2025 03:30:50 +0530
Subject: [PATCH 1/3] added lazy loading to groups page

---
 groups/index.html     |  3 ++-
 groups/lazyLoading.js | 63 +++++++++++++++++++++++++++++++++++++++++++
 groups/render.js      | 22 +++++++++++++++
 groups/script.js      | 11 +++++---
 groups/utils.js       | 28 +++++++++++++++++++
 5 files changed, 122 insertions(+), 5 deletions(-)
 create mode 100644 groups/lazyLoading.js

diff --git a/groups/index.html b/groups/index.html
index a2e188ab..ccafd495 100644
--- a/groups/index.html
+++ b/groups/index.html
@@ -12,6 +12,7 @@
     <script src="/constants.js"></script>
     <script src="../utils.js" defer></script>
     <script type="module" src="/groups/script.js" defer></script>
+    <script type="module" src="/groups/lazyLoading.js" defer></script>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
@@ -34,7 +35,7 @@
       <section class="group-header">
         <div class="search">
           <img class="search__icon" src="assets/search.svg" alt="search" />
-          <input class="search__input" placeholder="Serach for group" />
+          <input class="search__input" placeholder="Search for group" />
         </div>
         <div class="create-group">
           <button class="button">
diff --git a/groups/lazyLoading.js b/groups/lazyLoading.js
new file mode 100644
index 00000000..0c0e245b
--- /dev/null
+++ b/groups/lazyLoading.js
@@ -0,0 +1,63 @@
+import { getDiscordGroupsPaginated } from './utils.js';
+import { renderLoader, removeLoader, renderMoreGroups } from './render.js';
+import { getParamValueFromURL } from './utils.js';
+import { groupCardOnAction } from './script.js';
+
+const isDevMode = getParamValueFromURL('dev') === 'true';
+
+let currentPage = null;
+let isFetching = false;
+let hasNextPage = true;
+
+if (isDevMode) {
+  document.addEventListener('DOMContentLoaded', () => {
+    bindLazyLoading();
+    loadMoreGroups();
+  });
+}
+
+async function loadMoreGroups() {
+  if (isFetching || !hasNextPage) return;
+  isFetching = true;
+  renderLoader();
+
+  try {
+    const { groups, nextPageUrl } =
+      currentPage === null
+        ? await getDiscordGroupsPaginated()
+        : await getDiscordGroupsPaginated(currentPage, 10);
+
+    console.log('Fetched groups:', groups);
+
+    if (!groups || groups.length === 0) {
+      hasNextPage = false;
+      removeLoader();
+      return;
+    }
+
+    renderMoreGroups({ groups, cardOnClick: groupCardOnAction });
+
+    currentPage = nextPageUrl
+      ? currentPage === null
+        ? 1
+        : currentPage + 1
+      : null;
+    hasNextPage = !!nextPageUrl;
+  } catch (error) {
+    console.error('Error fetching more groups:', error);
+  } finally {
+    removeLoader();
+    isFetching = false;
+  }
+}
+
+function bindLazyLoading() {
+  window.addEventListener('scroll', () => {
+    if (
+      window.innerHeight + window.scrollY >= document.body.offsetHeight - 500 &&
+      !isFetching
+    ) {
+      loadMoreGroups();
+    }
+  });
+}
diff --git a/groups/render.js b/groups/render.js
index 8077f48c..54ae9f59 100644
--- a/groups/render.js
+++ b/groups/render.js
@@ -124,6 +124,27 @@ const renderGroupById = ({
   }
 };
 
+const renderMoreGroups = ({
+  groups,
+  cardOnClick = () => {},
+  isSuperUser = false,
+}) => {
+  const mainContainer = document.querySelector('.group-container');
+  console.log('Rendering groups:', groups);
+
+  groups.forEach((group) => {
+    if (!document.getElementById(`group-${group.id}`)) {
+      const card = createCard(
+        group,
+        () => cardOnClick(group.id),
+        () => {},
+        isSuperUser,
+      );
+      mainContainer.appendChild(card);
+    }
+  });
+};
+
 const renderNoGroupFound = () => {
   const mainContainer = document.querySelector('.group-container');
   const noGroupContainer = document.createElement('div');
@@ -166,6 +187,7 @@ export {
   renderLoadingCards,
   removeLoadingCards,
   renderGroupById,
+  renderMoreGroups,
   renderNoGroupFound,
   renderDeleteConfirmationModal,
   removeDeleteConfirmationModal,
diff --git a/groups/script.js b/groups/script.js
index b5569b3e..0f58bb60 100644
--- a/groups/script.js
+++ b/groups/script.js
@@ -29,6 +29,7 @@ import {
   setParamValueInURL,
   deleteDiscordGroupRole,
 } from './utils.js';
+const isDevMode = getParamValueFromURL('dev') === 'true';
 
 const QUERY_PARAM_KEY = {
   DEV_FEATURE_FLAG: 'dev',
@@ -169,10 +170,14 @@ const onCreate = () => {
   bindSearchFocus();
   bindGroupCreationButton();
 };
+
 const afterAuthentication = async () => {
   renderNavbarProfile({ profile: dataStore.userSelf });
   dataStore.isSuperUser = await checkUserIsSuperUser();
 
+  if (isDevMode) {
+    return;
+  }
   await Promise.all([getDiscordGroups(), getUserGroupRoles()]).then(
     ([groups, roleData]) => {
       const nonDeletedGroups = groups.filter((group) => !group.isDeleted);
@@ -199,9 +204,7 @@ const afterAuthentication = async () => {
         dataStore.search,
       );
       dataStore.discordId = roleData.userId;
-      renderAllGroups({
-        cardOnClick: groupCardOnAction,
-      });
+      renderAllGroups({ cardOnClick: groupCardOnAction });
     },
   );
 };
@@ -254,7 +257,7 @@ function updateGroup(id, group) {
   };
 }
 
-function groupCardOnAction(id) {
+export function groupCardOnAction(id) {
   const group = dataStore.groups[id];
   updateGroup(id, { isUpdating: true });
   if (group.isMember) {
diff --git a/groups/utils.js b/groups/utils.js
index f97112f4..fabaa435 100644
--- a/groups/utils.js
+++ b/groups/utils.js
@@ -58,6 +58,33 @@ async function getDiscordGroups() {
     return err;
   }
 }
+
+async function getDiscordGroupsPaginated(page = null, size = 10) {
+  try {
+    const url =
+      page === null
+        ? `${BASE_URL}/discord-actions/groups?dev=true`
+        : `${BASE_URL}/discord-actions/groups?page=${page}&size=${size}&dev=true`;
+
+    const res = await fetch(url, {
+      method: 'GET',
+      credentials: 'include',
+      headers: { 'Content-type': 'application/json' },
+    });
+
+    if (!res.ok) {
+      const error = await res.json();
+      throw new Error(error.message || 'Failed to fetch groups');
+    }
+
+    const { groups, links } = await res.json();
+    return { groups, nextPageUrl: links?.next || null };
+  } catch (err) {
+    console.error('Error fetching paginated groups:', err);
+    throw err;
+  }
+}
+
 async function createDiscordGroupRole(groupRoleBody) {
   try {
     const res = await fetch(`${BASE_URL}/discord-actions/groups`, {
@@ -183,6 +210,7 @@ export {
   getMembers,
   getUserSelf,
   getDiscordGroups,
+  getDiscordGroupsPaginated,
   createDiscordGroupRole,
   addGroupRoleToMember,
   removeRoleFromMember,

From 75d2afb1100dd42e49a616bca003b2b6cfa577ed Mon Sep 17 00:00:00 2001
From: Depayan Mondal <depayan008@gmail.com>
Date: Mon, 10 Feb 2025 00:35:33 +0530
Subject: [PATCH 2/3] fixed card header loading issue and white overlay on page
 load

---
 groups/lazyLoading.js | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/groups/lazyLoading.js b/groups/lazyLoading.js
index 0c0e245b..b1582f6d 100644
--- a/groups/lazyLoading.js
+++ b/groups/lazyLoading.js
@@ -19,14 +19,28 @@ if (isDevMode) {
 async function loadMoreGroups() {
   if (isFetching || !hasNextPage) return;
   isFetching = true;
-  renderLoader();
+
+  // Only show loader for subsequent loads (not initial)
+  if (currentPage !== null) {
+    renderLoader();
+  }
 
   try {
-    const { groups, nextPageUrl } =
+    const { groups: rawGroups, nextPageUrl } =
       currentPage === null
         ? await getDiscordGroupsPaginated()
         : await getDiscordGroupsPaginated(currentPage, 10);
 
+    // Process titles for paginated groups (same as non-paginated logic)
+    const groups = rawGroups.map((group) => ({
+      ...group,
+      title: group.rolename
+        .replace('group-', '')
+        .split('-')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' '),
+    }));
+
     console.log('Fetched groups:', groups);
 
     if (!groups || groups.length === 0) {

From c3339dd93d55a5a44ca25bf0a78424167ccf2202 Mon Sep 17 00:00:00 2001
From: Depayan Mondal <depayan008@gmail.com>
Date: Mon, 10 Feb 2025 01:26:23 +0530
Subject: [PATCH 3/3] fixed group delete button, member counter, remove me
 button and circular loading screen aimation

---
 groups/createElements.js |  7 +++---
 groups/lazyLoading.js    | 49 ++++++++++++++++++++++++++++------------
 groups/script.js         |  8 +++++++
 3 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/groups/createElements.js b/groups/createElements.js
index 18c7c8e6..b963d0c6 100644
--- a/groups/createElements.js
+++ b/groups/createElements.js
@@ -6,6 +6,7 @@ const createCard = (
 ) => {
   const group = {
     ...rawGroup,
+    count: rawGroup.count || 0,
     description:
       rawGroup.description ||
       'Please ask the role creator or admin to update this group description.',
@@ -24,7 +25,7 @@ const createCard = (
               <img class="delete-group__icon" src="assets/delete.svg" alt="Delete" />
             </button>`
               : ''
-          }  
+          }
         </div>
         <p class="card__description"></p>
         <div class="card__action">
@@ -169,7 +170,7 @@ const createGroupCreationModal = (onClose = () => {}, onSubmit = () => {}) => {
                 <textarea
                   class="input__field"
                   name="description"
-                  placeholder="This group is for..." 
+                  placeholder="This group is for..."
                 ></textarea>
               </div>
             </div>
@@ -257,7 +258,7 @@ const createDeleteConfirmationModal = (
     <div class="delete-modal__content">
       <p class="delete-modal__msg"> Are you sure you want to delete this group? </p>
     </div>
-    
+
     <div class="delete-modal__buttons">
       <button class="delete-modal-button button--secondary" id="cancel-delete">Cancel</button>
       <button class="delete-modal-button button--danger" id="confirm-delete">Delete</button>
diff --git a/groups/lazyLoading.js b/groups/lazyLoading.js
index b1582f6d..45db5d52 100644
--- a/groups/lazyLoading.js
+++ b/groups/lazyLoading.js
@@ -1,7 +1,13 @@
 import { getDiscordGroupsPaginated } from './utils.js';
-import { renderLoader, removeLoader, renderMoreGroups } from './render.js';
+import {
+  renderLoader,
+  removeLoader,
+  renderMoreGroups,
+  renderLoadingCards,
+  removeLoadingCards,
+} from './render.js';
 import { getParamValueFromURL } from './utils.js';
-import { groupCardOnAction } from './script.js';
+import { groupCardOnAction, dataStore } from './script.js';
 
 const isDevMode = getParamValueFromURL('dev') === 'true';
 
@@ -20,10 +26,7 @@ async function loadMoreGroups() {
   if (isFetching || !hasNextPage) return;
   isFetching = true;
 
-  // Only show loader for subsequent loads (not initial)
-  if (currentPage !== null) {
-    renderLoader();
-  }
+  renderLoadingCards(); // ✅ Show shimmer instead of white screen
 
   try {
     const { groups: rawGroups, nextPageUrl } =
@@ -31,8 +34,13 @@ async function loadMoreGroups() {
         ? await getDiscordGroupsPaginated()
         : await getDiscordGroupsPaginated(currentPage, 10);
 
-    // Process titles for paginated groups (same as non-paginated logic)
-    const groups = rawGroups.map((group) => ({
+    if (!rawGroups || rawGroups.length === 0) {
+      hasNextPage = false;
+      removeLoader();
+      return;
+    }
+
+    const formattedGroups = rawGroups.map((group) => ({
       ...group,
       title: group.rolename
         .replace('group-', '')
@@ -41,15 +49,25 @@ async function loadMoreGroups() {
         .join(' '),
     }));
 
-    console.log('Fetched groups:', groups);
-
-    if (!groups || groups.length === 0) {
-      hasNextPage = false;
-      removeLoader();
-      return;
+    if (!dataStore.groups) {
+      dataStore.groups = {};
     }
 
-    renderMoreGroups({ groups, cardOnClick: groupCardOnAction });
+    formattedGroups.forEach((group) => {
+      dataStore.groups[group.id] = {
+        ...group,
+        count: group.memberCount,
+        isMember: group.isMember,
+        isUpdating: false,
+      };
+    });
+
+    dataStore.filteredGroupsIds = Object.keys(dataStore.groups);
+
+    renderMoreGroups({
+      groups: formattedGroups,
+      cardOnClick: groupCardOnAction,
+    });
 
     currentPage = nextPageUrl
       ? currentPage === null
@@ -60,6 +78,7 @@ async function loadMoreGroups() {
   } catch (error) {
     console.error('Error fetching more groups:', error);
   } finally {
+    removeLoadingCards();
     removeLoader();
     isFetching = false;
   }
diff --git a/groups/script.js b/groups/script.js
index 0f58bb60..b51e0ced 100644
--- a/groups/script.js
+++ b/groups/script.js
@@ -178,6 +178,7 @@ const afterAuthentication = async () => {
   if (isDevMode) {
     return;
   }
+
   await Promise.all([getDiscordGroups(), getUserGroupRoles()]).then(
     ([groups, roleData]) => {
       const nonDeletedGroups = groups.filter((group) => !group.isDeleted);
@@ -258,8 +259,13 @@ function updateGroup(id, group) {
 }
 
 export function groupCardOnAction(id) {
+  if (!dataStore.groups) return;
+
   const group = dataStore.groups[id];
+  if (!group) return;
+
   updateGroup(id, { isUpdating: true });
+
   if (group.isMember) {
     removeRoleFromMember(group.roleId, dataStore.discordId)
       .then(() => updateGroup(id, { isMember: false, count: group.count - 1 }))
@@ -329,3 +335,5 @@ function showDeleteModal(groupId) {
 }
 
 onCreate();
+
+export { dataStore };