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

Dev to main sync
Real-Dev-Squad · Jul 26, 2023 · 00cfdff · 00cfdff
2 parents 74a3f3b + ad1c4f8
commit 00cfdff
Show file tree

Hide file tree

Showing 5 changed files with 214 additions and 7 deletions.
diff --git a/constants.js b/constants.js
@@ -1,6 +1,17 @@
 const API_BASE_URL = 'https://api.realdevsquad.com';
 const USER_MANAGEMENT_LINK = 'user-management-link';
 const EXTENSION_REQUESTS_LINK = 'extension-requests-link';
+const SYNC_USERS_STATUS = 'sync-users-status';
+const SYNC_EXTERNAL_ACCOUNTS = 'sync-external-accounts';
+const SYNC_UNVERIFIED_USERS = 'sync-unverified-users';
+const SYNC_USERS_STATUS_UPDATE = 'sync-users-status-update';
+const SYNC_EXTERNAL_ACCOUNTS_UPDATE = 'sync-external-accounts-update';
+const SYNC_UNVERIFIED_USERS_UPDATE = 'sync-unverified-users-update';
+const SYNC_IN_PROGRESS = 'Last Sync: In progress';
+const SYNC_SUCCESSFUL = 'Last Sync: Successful';
+const SYNC_FAILED = 'Last Sync: Failed';
+const DISABLED = 'disabled';
+
 const dummyPicture =
   'https://dashboard.realdevsquad.com/users/images/avatar.png';
 const USER_MANAGEMENT_URL =

diff --git a/index.html b/index.html
@@ -18,6 +18,32 @@
       <a id="createTask" class="nav-link"> Tasks </a>
     </nav>
 
+    <section id="sync-buttons" class="element-display-remove">
+      <div class="button-container">
+        <button class="action-button" id="sync-users-status">
+          <span class="spinner"></span>
+          Sync Users Status
+        </button>
+        <div class="status" id="sync-users-status-update"></div>
+      </div>
+
+      <div class="button-container">
+        <button class="action-button" id="sync-external-accounts">
+          <span class="spinner"></span>
+          Sync External Accounts
+        </button>
+        <div class="status" id="sync-external-accounts-update"></div>
+      </div>
+
+      <div class="button-container">
+        <button class="action-button" id="sync-unverified-users">
+          <span class="spinner"></span>
+          Sync Unverified Users
+        </button>
+        <div class="status" id="sync-unverified-users-update"></div>
+      </div>
+    </section>
+
     <section class="buttonSection">
       <a
         class="action-button element-display-remove"

diff --git a/script.js b/script.js
@@ -1,5 +1,24 @@
 const userManagementLink = document.getElementById(USER_MANAGEMENT_LINK);
 const extensionRequestsLink = document.getElementById(EXTENSION_REQUESTS_LINK);
+const syncUsersStatusButton = document.getElementById(SYNC_USERS_STATUS);
+const syncExternalAccountsButton = document.getElementById(
+  SYNC_EXTERNAL_ACCOUNTS,
+);
+const syncUnverifiedUsersButton = document.getElementById(
+  SYNC_UNVERIFIED_USERS,
+);
+const syncUsersStatusUpdate = document.getElementById(SYNC_USERS_STATUS_UPDATE);
+const syncExternalAccountsUpdate = document.getElementById(
+  SYNC_EXTERNAL_ACCOUNTS_UPDATE,
+);
+const syncUnverifiedUsersUpdate = document.getElementById(
+  SYNC_UNVERIFIED_USERS_UPDATE,
+);
+const buttonSection = document.getElementById('sync-buttons');
+
+function getCurrentTimestamp() {
+  return new Date().toLocaleString();
+}
 
 export async function showSuperUserOptions(...privateBtns) {
   try {
@@ -8,6 +27,19 @@ export async function showSuperUserOptions(...privateBtns) {
       privateBtns.forEach((btn) =>
         btn.classList.remove('element-display-remove'),
       );
+      buttonSection.classList.remove('element-display-remove');
+      syncUsersStatusUpdate.textContent = `Last Sync: ${
+        localStorage.getItem('lastSyncUsersStatus') ||
+        'Synced Data Not Available'
+      }`;
+      syncExternalAccountsUpdate.textContent = `Last Sync: ${
+        localStorage.getItem('lastSyncExternalAccounts') ||
+        'Synced Data Not Available'
+      }`;
+      syncUnverifiedUsersUpdate.textContent = `Last Sync: ${
+        localStorage.getItem('lastSyncUnverifiedUsers') ||
+        'Synced Data Not Available'
+      }`;
     }
   } catch (err) {
     console.log(err);
@@ -28,4 +60,82 @@ if (params.get('dev') === 'true') {
   createGoalButton.classList.remove('element-display-remove');
 }
 
-showUserManagementButton();
+function addClickEventListener(
+  button,
+  endpoint,
+  localStorageKey,
+  lastSyncElement,
+  method,
+) {
+  button.addEventListener('click', async (event) => {
+    await handleSync(endpoint, localStorageKey, lastSyncElement, method, event);
+  });
+}
+
+async function handleSync(
+  endpoint,
+  localStorageKey,
+  lastSyncElement,
+  method,
+  event,
+) {
+  const button = event.target;
+  const wrapper = button.parentElement;
+  const spinner = wrapper.querySelector('.spinner');
+  const status = wrapper.querySelector('.status');
+
+  button.disabled = true;
+  button.classList.add(DISABLED);
+  spinner.style.display = 'inline-block';
+  status.textContent = SYNC_IN_PROGRESS;
+
+  try {
+    const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+      method: method,
+      credentials: 'include',
+    });
+
+    if (response.ok) {
+      status.textContent = SYNC_SUCCESSFUL;
+      const lastSyncTimestamp = getCurrentTimestamp();
+
+      localStorage.setItem(localStorageKey, lastSyncTimestamp);
+
+      if (lastSyncElement) {
+        lastSyncElement.textContent = `Last Sync: ${lastSyncTimestamp}`;
+      }
+    } else {
+      status.textContent = SYNC_FAILED;
+    }
+  } catch (err) {
+    console.error(err);
+    status.textContent = SYNC_FAILED;
+  } finally {
+    spinner.style.display = 'none';
+    button.classList.remove(DISABLED);
+    button.disabled = false;
+  }
+}
+
+// Attach (button,API,cookie name,div element of status,HTTP method of API
+addClickEventListener(
+  syncUsersStatusButton,
+  '/users/status/update',
+  'lastSyncUsersStatus',
+  syncUsersStatusUpdate,
+  'PATCH',
+);
+addClickEventListener(
+  syncExternalAccountsButton,
+  '/external-accounts/discord-sync',
+  'lastSyncExternalAccounts',
+  syncExternalAccountsUpdate,
+  'PATCH',
+);
+addClickEventListener(
+  syncUnverifiedUsersButton,
+  '/users/',
+  'lastSyncUnverifiedUsers',
+  syncUnverifiedUsersUpdate,
+  'POST',
+);
diff --git a/style.css b/style.css
@@ -44,6 +44,7 @@ body {
 button {
   width: 250px;
   cursor: pointer;
+  position: relative;
 }
 
 .create-task-btn {
@@ -179,3 +180,62 @@ footer {
   background-color: var(--blue-color);
   border: none;
 }
+
+#sync-buttons.element-display-remove {
+  display: none;
+}
+
+#sync-buttons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  margin-top: 50px;
+  margin-bottom: 20px;
+  padding: 0 100px;
+  flex-wrap: wrap;
+}
+
+#sync-buttons .button-container {
+  flex: 1 1 100%;
+  max-width: 250px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+#sync-buttons .spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: none;
+  width: 20px;
+  height: 20px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #1d1283;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+#sync-buttons .status {
+  font-weight: bold;
+  margin-top: 10px;
+  text-align: center;
+  max-height: 20px;
+}
+
+.action-button.disabled {
+  opacity: 0.5;
+  background-color: #1d1283;
+  color: #f3f3f3;
+  pointer-events: none;
+}
+
+@keyframes spin {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
diff --git a/yarn.lock b/yarn.lock
@@ -2965,9 +2965,9 @@ to-regex-range@^5.0.1:
     is-number "^7.0.0"
 
 tough-cookie@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.2.tgz#e53e84b85f24e0b65dd526f46628db6c85f6b874"
-  integrity sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf"
+  integrity sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==
   dependencies:
     psl "^1.1.33"
     punycode "^2.1.1"
@@ -3146,9 +3146,9 @@ which@^2.0.1:
     isexe "^2.0.0"
 
 word-wrap@~1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
-  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.4.tgz#cb4b50ec9aca570abd1f52f33cd45b6c61739a9f"
+  integrity sha512-2V81OA4ugVo5pRo46hAoD2ivUJx8jXmWXfUkY4KFNw0hEptvN0QfH3K4nHiwzGeKl5rFKedV48QVoqYavy4YpA==
 
 wrap-ansi@^7.0.0:
   version "7.0.0"