diff --git a/constants.js b/constants.js
index a1e60ad0..155ca4f1 100644
--- a/constants.js
+++ b/constants.js
@@ -1,5 +1,6 @@
const API_BASE_URL = 'https://api.realdevsquad.com';
-const REPO_SYNC_API_URL ='https://staging-sync.staging-realdevsquad-com.workers.dev';
+const REPO_SYNC_API_URL =
+ 'https://staging-sync.staging-realdevsquad-com.workers.dev';
const USER_MANAGEMENT_LINK = 'user-management-link';
const EXTENSION_REQUESTS_LINK = 'extension-requests-link';
const SYNC_USERS_STATUS = 'sync-users-status';
diff --git a/index.html b/index.html
index 671c90a3..56bd4fb3 100644
--- a/index.html
+++ b/index.html
@@ -45,15 +45,15 @@
+
+
diff --git a/script.js b/script.js
index fe568f90..e7c72b7c 100644
--- a/script.js
+++ b/script.js
@@ -24,7 +24,7 @@ function getCurrentTimestamp() {
export async function showSuperUserOptions(...privateBtns) {
try {
- const isSuperUser = true;//await checkUserIsSuperUser();
+ const isSuperUser = true; //await checkUserIsSuperUser();
if (isSuperUser) {
privateBtns.forEach((btn) =>
btn.classList.remove('element-display-remove'),
@@ -43,8 +43,7 @@ export async function showSuperUserOptions(...privateBtns) {
'Synced Data Not Available'
}`;
repoSyncStatusUpdate.textContent = `Last Sync: ${
- localStorage.getItem('lastSyncRepo') ||
- 'Synced Data Not Available'
+ localStorage.getItem('lastSyncRepo') || 'Synced Data Not Available'
}`;
}
} catch (err) {
@@ -70,7 +69,6 @@ if (params.get('dev') === 'true') {
repoSyncDiv.classList.remove('element-display-remove');
}
-
function addClickEventListener(
button,
endpoint,
@@ -128,27 +126,25 @@ async function handleSync(
}
}
-
function showToast(message, type) {
- if(typeof message === String){
+ if (typeof message === String) {
toast.innerHTML = `${message}
`;
}
toast.classList.remove('hidden');
-
if (type === 'success') {
- for(let i=0;i${text}`;
}
}
- toast.classList.add('success');
- toast.classList.remove('failure');
+ toast.classList.add('success');
+ toast.classList.remove('failure');
} else if (type === 'failure') {
- toast.classList.add('failure');
- toast.classList.remove('success');
+ toast.classList.add('failure');
+ toast.classList.remove('success');
}
const progressBar = document.createElement('div');
@@ -157,36 +153,45 @@ function showToast(message, type) {
toast.appendChild(progressBar);
setTimeout(() => {
- toast.classList.add('hidden');
- toast.innerHTML = ''; // Clear any appended elements (progress bar)
+ toast.classList.add('hidden');
+ toast.innerHTML = ''; // Clear any appended elements (progress bar)
}, 5000);
-
}
-const repoSyncHandler = async () => {
- try{
- const response = await fetch(REPO_SYNC_API_URL,
- { mode: 'no-cors' });
+const repoSyncHandler = async (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(REPO_SYNC_API_URL, { mode: 'no-cors' });
console.log(response);
if (response.ok) {
repoSyncStatusUpdate.textContent = SYNC_SUCCESSFUL;
showToast(response.body, 'success');
} else {
- console.log("hi");
repoSyncStatusUpdate.textContent = SYNC_FAILED;
showToast('API response not as expected', 'failure');
}
- }catch(err){
- console.log("error");
- console.error("Error while fetching repo sync data");
+ } catch (err) {
+ console.error('Error while fetching repo sync data');
repoSyncStatusUpdate.textContent = SYNC_FAILED;
showToast('Something unexpected happened!', 'failure');
+ } finally {
+ spinner.style.display = 'none';
+ button.classList.remove(DISABLED);
+ button.disabled = false;
}
-}
+};
repoSyncButton.addEventListener('click', repoSyncHandler);
-
// Attach (button,API,cookie name,div element of status,HTTP method of API
addClickEventListener(
syncUsersStatusButton,
diff --git a/style.css b/style.css
index a1987440..2a5a5517 100644
--- a/style.css
+++ b/style.css
@@ -156,8 +156,6 @@ footer {
margin-top: auto;
}
-
-
.action-button {
color: var(--black-color);
font-weight: 500;
@@ -252,7 +250,7 @@ footer {
}
.failure {
- color: #F44336;
+ color: #f44336;
}
.hidden {
@@ -267,7 +265,7 @@ footer {
}
.success .progress-bar {
- background-color: #4CAF50;
+ background-color: #4caf50;
}
.failure .progress-bar {
@@ -287,4 +285,4 @@ footer {
.element-display-remove {
display: none !important;
-}
\ No newline at end of file
+}