Merge pull request #839 from Real-Dev-Squad/develop

Dev to main sync
Real-Dev-Squad · Sep 25, 2024 · 54d230b · 54d230b
2 parents 5159bc7 + d0419b8
commit 54d230b
Show file tree

Hide file tree

Showing 5 changed files with 150 additions and 74 deletions.
diff --git a/applications/index.html b/applications/index.html
@@ -77,8 +77,18 @@ <h2>Status</h2>
         </button>
         <div class="application-details-main"></div>
         <div class="application-details-actions">
-          <button class="application-details-accept">Accept</button>
-          <p class="application-details-reject">Reject</p>
+          <button
+            class="application-details-accept"
+            aria-label="Accept Application"
+          >
+            Accept
+          </button>
+          <button
+            class="application-details-reject"
+            aria-label="Reject Application"
+          >
+            Reject
+          </button>
         </div>
       </div>
       <main class="application-container"></main>

diff --git a/applications/style.css b/applications/style.css
@@ -2,6 +2,7 @@
   font-family: 'Inter', sans-serif;
   --color-primary: #1d1283;
   --color-primary-hover: #11085c;
+  --color-button-hover: #2c1bc6;
   --white: #fff;
   --color-gray: #666;
   --black-color: black;
@@ -48,7 +49,7 @@ body {
 .container {
   max-width: 1100px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 1rem;
   overflow-y: auto;
 }
 
@@ -145,7 +146,6 @@ body {
 .application-container {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
   padding-bottom: 10px;
   padding-top: 32px;
   gap: 25px;
@@ -159,7 +159,10 @@ body {
   border-radius: 15px;
   box-shadow: var(--elevation-1);
   padding: 24px;
-  width: 44%;
+  width: 85%;
+  max-width: 800px;
+  box-sizing: border-box;
+  margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -364,16 +367,57 @@ body {
 
 .application-details .application-details-actions .application-details-reject {
   color: var(--red-color);
-  height: auto;
   background-color: white;
-  margin-left: auto;
-  margin-right: auto;
-  text-decoration: underline;
+  margin: 0 auto;
+  width: 40%;
+  border: 2px solid var(--red-color);
+}
+
+.application-details
+  .application-details-actions
+  .application-details-reject:is(:hover, :active, :focus-visible) {
+  background: var(--red-color);
+  color: var(--white);
+  transition: transform 0.2s ease;
+  will-change: transform;
+}
+
+.application-details
+  .application-details-actions
+  .application-details-reject:hover {
+  transform: scale(1.05);
+}
+
+.application-details
+  .application-details-actions
+  .application-details-reject:active {
+  animation: bounceBackAnimation 0.4s ease forwards;
 }
 
 .application-details .application-details-actions .application-details-accept {
   background: var(--color-primary);
-  width: 50%;
+  margin: 0 auto;
+  width: 40%;
+}
+
+.application-details
+  .application-details-actions
+  .application-details-accept:is(:hover, :active, :focus-visible) {
+  background: var(--color-button-hover);
+  transition: transform 0.2s ease;
+  will-change: transform;
+}
+
+.application-details
+  .application-details-actions
+  .application-details-accept:hover {
+  transform: scale(1.05);
+}
+
+.application-details
+  .application-details-actions
+  .application-details-accept:active {
+  animation: bounceBackAnimation 0.4s ease forwards;
 }
 
 .application-details-actions .hidden {
@@ -442,6 +486,28 @@ body {
   opacity: 0.2;
 }
 
+@keyframes bounceBackAnimation {
+  0% {
+    transform: scale(1);
+  }
+
+  25% {
+    transform: scale(0.9);
+  }
+
+  55% {
+    transform: scale(1.1);
+  }
+
+  75% {
+    transform: scale(0.9);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
 @keyframes slideIn {
   from {
     right: -300px;
@@ -463,10 +529,6 @@ body {
 }
 
 @media screen and (max-width: 850px) {
-  .application-card {
-    width: 100%;
-  }
-
   .container {
     padding: 1rem;
   }
@@ -478,4 +540,8 @@ body {
     height: 100%;
     border-radius: 0;
   }
+
+  .application-card {
+    width: 90%;
+  }
 }
diff --git a/identity-service-logs/index.html b/identity-service-logs/index.html
@@ -45,9 +45,9 @@ <h1>Identity Service Logs</h1>
         Developers Left: <span id="developersLeft" class="stats-value"></span>
       </div>
     </div>
-
+    <div class="wrapperDiv"></div>
     <p id="loader">Loading...</p>
-
+    <div id="page_bottom_element"></div>
     <footer id="footer">
       <p class="info-repo">
         The contents of this website are deployed from this

diff --git a/identity-service-logs/script.js b/identity-service-logs/script.js
@@ -3,11 +3,13 @@ import {
   getIsSuperUser,
   fillData,
   getUserCount,
+  addIntersectionObserver,
 } from './utils.js';
 
 const { isSuperUser } = await getIsSuperUser();
+const params = new URLSearchParams(window.location.search);
 
-if (isSuperUser) {
+if (isSuperUser && params.has('dev') && params.get('dev') === 'true') {
   const {
     verifiedUsersCount,
     blockedUsersCount,
@@ -25,10 +27,11 @@ if (isSuperUser) {
     blockedDeveloperCount;
   document.getElementById('developersLeft').innerText =
     developersLeftToVerifyCount;
-  const { identityLogs, next, prev } = await getIdentityLogs(
+  const { identityLogs, next } = await getIdentityLogs(
     '/logs?dev=true&type=PROFILE_BLOCKED,PROFILE_VERIFIED,PROFILE_DIFF_REJECTED,PROFILE_DIFF_APPROVED,PROFILE_DIFF_STORED&size=10',
   );
-  fillData(identityLogs, next, prev);
+  fillData(identityLogs, next);
+  addIntersectionObserver();
 } else {
   document.getElementById('loader').innerHTML = 'You are not authorized !';
 }
diff --git a/identity-service-logs/utils.js b/identity-service-logs/utils.js
@@ -266,18 +266,54 @@ async function getUser(userId) {
   return user;
 }
 
-async function fillData(identityLogs, next, prev) {
+let isLoading = false;
+let nextLink = null;
+
+async function loadMoreLogs() {
+  if (!nextLink || isLoading) {
+    return;
+  }
+  const footer = document.querySelector('footer');
+
+  if (footer) {
+    footer.style.display = 'none';
+  }
+  isLoading = true;
+
+  try {
+    document.getElementById('loader').style.display = 'block';
+    const { identityLogs, next } = await getIdentityLogs(nextLink);
+    await fillData(identityLogs, next);
+  } catch (error) {
+    console.error('Error loading logs:', error);
+  } finally {
+    document.getElementById('loader').style.display = 'none';
+    isLoading = false;
+
+    if (footer) {
+      footer.style.display = 'block';
+    }
+  }
+}
+
+const addIntersectionObserver = () => {
+  const lastElementContainer = document.getElementById('page_bottom_element');
+  const intersectionObserver = new IntersectionObserver(async (entries) => {
+    if (entries[0].isIntersecting && !isLoading) {
+      await loadMoreLogs();
+    }
+  });
+  intersectionObserver.observe(lastElementContainer);
+};
+
+async function fillData(identityLogs, next) {
   if (identityLogs === undefined || identityLogs.length === 0) {
     document.getElementById('loader').innerHTML =
       'No Identity Service Logs found !!!';
   } else {
-    const wrapper = createCardComponent({
-      tagName: 'div',
-      className: 'wrapperDiv',
-    });
-
-    const footerDiv = document.querySelector('#footer');
-    document.body.insertBefore(wrapper, footerDiv);
+    const wrapper = document.querySelector('.wrapperDiv');
+    const loader = document.querySelector('#loader');
+    document.body.insertBefore(wrapper, loader);
     document.getElementById('loader').style.display = 'none';
 
     for (const identityLog of identityLogs) {
@@ -297,53 +333,14 @@ async function fillData(identityLogs, next, prev) {
         );
       }
     }
-
-    const buttonContainer = createCardComponent({
-      tagName: 'div',
-      className: 'buttonContainer',
-      parent: wrapper,
-    });
-
-    if (prev) {
-      const prevButton = createCardComponent({
-        tagName: 'button',
-        className: 'navigation-button',
-        parent: buttonContainer,
-        innerText: 'Prev',
-      });
-
-      prevButton.onclick = async () => {
-        wrapper.remove();
-        document.getElementById('loader').style.display = 'block';
-        const {
-          identityLogs,
-          next,
-          prev: prevLink,
-        } = await getIdentityLogs(prev);
-        fillData(identityLogs, next, prevLink);
-      };
-    }
-
-    if (next) {
-      const nextButton = createCardComponent({
-        tagName: 'button',
-        className: 'navigation-button',
-        parent: buttonContainer,
-        innerText: 'Next',
-      });
-
-      nextButton.onclick = async () => {
-        wrapper.remove();
-        document.getElementById('loader').style.display = 'block';
-        const {
-          identityLogs,
-          next: nextLink,
-          prev,
-        } = await getIdentityLogs(next);
-        fillData(identityLogs, nextLink, prev);
-      };
-    }
+    nextLink = next;
   }
 }
 
-export { getIdentityLogs, getIsSuperUser, fillData, getUserCount };
+export {
+  getIdentityLogs,
+  getIsSuperUser,
+  fillData,
+  getUserCount,
+  addIntersectionObserver,
+};