Skip to content

Commit

Permalink
refactor code and add local storage cookie
Browse files Browse the repository at this point in the history
  • Loading branch information
@MayurLund
MayurLund committed Jul 23, 2023
1 parent 13c3080 commit 5c3e4b6
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 110 deletions.
38 changes: 7 additions & 31 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,53 +18,29 @@
<a id="createTask" class="nav-link"> Tasks </a>
</nav>

<section class="sync-button-section">
<section id="sync-buttons" class="element-display-remove">
<div class="button-container">
<button
class="action-button element-display-remove"
id="sync-users-status"
>
<button class="action-button" id="sync-users-status">
<span class="spinner"></span>
Sync Users Status
</button>
<div
class="status element-display-remove"
id="sync-users-status-update"
>
Last Sync:
</div>
<div class="status" id="sync-users-status-update"></div>
</div>

<div class="button-container">
<button
class="action-button element-display-remove"
id="sync-external-accounts"
>
<button class="action-button" id="sync-external-accounts">
<span class="spinner"></span>
Sync External Accounts
</button>
<div
class="status element-display-remove"
id="sync-external-accounts-update"
>
Last Sync:
</div>
<div class="status" id="sync-external-accounts-update"></div>
</div>

<div class="button-container">
<button
class="action-button element-display-remove"
id="sync-unverified-users"
>
<button class="action-button" id="sync-unverified-users">
<span class="spinner"></span>
Sync Unverified Users
</button>
<div
class="status element-display-remove"
id="sync-unverified-users-update"
>
Last Sync:
</div>
<div class="status" id="sync-unverified-users-update"></div>
</div>
</section>

Expand Down
144 changes: 71 additions & 73 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ const syncExternalAccountsUpdate = document.getElementById(
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 {
Expand All @@ -22,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);
Expand All @@ -34,28 +52,33 @@ export async function showSuperUserOptions(...privateBtns) {
* Then get the node from the DOM into a variable and pass that variable in the
* function below.
*/
showSuperUserOptions(
userManagementLink,
extensionRequestsLink,
syncUsersStatusButton,
syncExternalAccountsButton,
syncUsersStatusUpdate,
syncExternalAccountsUpdate,
syncUnverifiedUsersButton,
syncUnverifiedUsersUpdate,
);
showSuperUserOptions(userManagementLink, extensionRequestsLink);

const createGoalButton = document.getElementById('create-goal');
const params = new URLSearchParams(window.location.search);
if (params.get('dev') === 'true') {
createGoalButton.classList.remove('element-display-remove');
}

syncUsersStatusButton.addEventListener('click', syncUsersStatus);
syncExternalAccountsButton.addEventListener('click', syncExternalAccounts);
syncUnverifiedUsersButton.addEventListener('click', syncUnverifiedUsers);
function addClickEventListener(
button,
endpoint,
localStorageKey,
lastSyncElement,
method,
) {
button.addEventListener('click', async (event) => {
await handleSync(endpoint, localStorageKey, lastSyncElement, method, event);
});
}

async function syncUsersStatus(event) {
async function handleSync(
endpoint,
localStorageKey,
lastSyncElement,
method,
event,
) {
const button = event.target;
const wrapper = button.parentElement;
const spinner = wrapper.querySelector('.spinner');
Expand All @@ -67,69 +90,23 @@ async function syncUsersStatus(event) {
status.textContent = SYNC_IN_PROGRESS;

try {
const response = await fetch(`${API_BASE_URL}/users/status/update`, {
method: 'PATCH',
const response = await fetch(`${API_BASE_URL}${endpoint}`, {
method: method,
credentials: 'include',
});
status.textContent = response.ok ? SYNC_SUCCESSFUL : SYNC_FAILED;
} catch (err) {
console.error(err);
status.textContent = SYNC_FAILED;
} finally {
spinner.style.display = 'none';
button.classList.remove(DISABLED);
button.disabled = false;
}
}

//for external accounts
async function syncExternalAccounts(event) {
const button = event.target;
const wrapper = button.parentElement;
const spinner = wrapper.querySelector('.spinner');
const status = wrapper.querySelector('.status');
if (response.ok) {
status.textContent = SYNC_SUCCESSFUL;
const lastSyncTimestamp = getCurrentTimestamp();

button.disabled = true;
button.classList.add(DISABLED);
spinner.style.display = 'inline-block';
status.textContent = SYNC_IN_PROGRESS;
localStorage.setItem(localStorageKey, lastSyncTimestamp);

try {
const response = await fetch(
`${API_BASE_URL}/external-accounts/discord-sync`,
{
method: 'PATCH',
credentials: 'include',
},
);
status.textContent = response.ok ? SYNC_SUCCESSFUL : SYNC_FAILED;
} catch (err) {
console.error(err);
status.textContent = SYNC_FAILED;
} finally {
spinner.style.display = 'none';
button.classList.remove(DISABLED);
button.disabled = false;
}
}

async function syncUnverifiedUsers(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}/users/`, {
method: 'POST',
credentials: 'include',
});
status.textContent = response.ok ? SYNC_SUCCESSFUL : SYNC_FAILED;
if (lastSyncElement) {
lastSyncElement.textContent = `Last Sync: ${lastSyncTimestamp}`;
}
} else {
status.textContent = SYNC_FAILED;
}
} catch (err) {
console.error(err);
status.textContent = SYNC_FAILED;
Expand All @@ -140,4 +117,25 @@ async function syncUnverifiedUsers(event) {
}
}

//showUserManagementButton();
// 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',
);
19 changes: 13 additions & 6 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,31 +175,35 @@ footer {
color: var(--black-color);
}

.action-button:hover,
.sync-button:hover {
.action-button:hover {
color: var(--white-color);
background-color: var(--blue-color);
border: none;
}

.sync-button-section {
#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-button-section .button-container {
#sync-buttons .button-container {
flex: 1 1 100%;
max-width: 250px;
display: flex;
flex-direction: column;
align-items: center;
}
.sync-button-section .spinner {
#sync-buttons .spinner {
position: absolute;
top: 50%;
left: 50%;
Expand All @@ -213,14 +217,17 @@ footer {
animation: spin 1s linear infinite;
}

.sync-button-section .status {
#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;
}

Expand Down

0 comments on commit 5c3e4b6

Please sign in to comment.