From b4ebb9812bce744f7d3a2302893180bdc94f333f Mon Sep 17 00:00:00 2001 From: Ali Salman Date: Mon, 27 Nov 2023 10:20:45 +0500 Subject: [PATCH] fix: leaderboard JS fixes --- lms/static/js/dashboard/leaderboard.js | 159 +++++++++++++------------ lms/templates/dashboard.html | 3 +- 2 files changed, 81 insertions(+), 81 deletions(-) diff --git a/lms/static/js/dashboard/leaderboard.js b/lms/static/js/dashboard/leaderboard.js index d069e4cab835..9df03155de64 100644 --- a/lms/static/js/dashboard/leaderboard.js +++ b/lms/static/js/dashboard/leaderboard.js @@ -1,85 +1,86 @@ -// Function to fetch data from the API -async function fetchData(url) { - try { - const response = await fetch(url); - const data = await response.json(); - return data; // Assuming the API response is in JSON format - } catch (error) { - console.error('Error fetching data:', error); - } -} - -// Function to render a single user item -function renderUserListItem(data) { - const listItem = document.createElement('li'); - listItem.className = 'user-item'; - - const avatarDiv = document.createElement('div'); - avatarDiv.className = 'avatar'; - const avatarImg = document.createElement('img'); - avatarImg.src = data.user.profile_image_url; - avatarImg.alt = 'User Avatar'; - avatarDiv.appendChild(avatarImg); - - const userInfoDiv = document.createElement('div'); - userInfoDiv.className = 'user-info'; - const userNameDiv = document.createElement('div'); - userNameDiv.className = 'user-name'; - userNameDiv.textContent = data.user.name; - userInfoDiv.appendChild(userNameDiv); - - const userScoreDiv = document.createElement('div'); - userScoreDiv.className = 'user-score'; - userScoreDiv.textContent = data.score; - - listItem.appendChild(avatarDiv); - listItem.appendChild(userInfoDiv); - listItem.appendChild(userScoreDiv); - - return listItem; -} - -// Function to render user list -async function renderUserList() { - const userListElement = document.getElementById('userList'); - let nextPageUrl = '/api/badges/v1/leaderboard/'; - - // Variable to track if data is currently being fetched to avoid multiple simultaneous requests - let fetchingData = false; - - async function fetchAndRenderNextPage() { - fetchingData = true; - - // Fetch the next set of data - if (nextPageUrl){ - const nextPageData = await fetchData(nextPageUrl); - - if (nextPageData.results && Array.isArray(nextPageData.results)) { - nextPageData.results.forEach(user => { - // Create and append list items for the next set of data - const listItem = renderUserListItem(user); - userListElement.appendChild(listItem); +var edx = edx || {}; + +(function ($) { + 'use strict'; + + edx.dashboard = edx.dashboard || {}; + edx.dashboard.leaderboard = {}; + + edx.dashboard.leaderboard.fetchData = function (url) { + return new Promise(function (resolve, reject) { + fetch(url) + .then(function (response) { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .then(function (data) { + resolve(data); + }) + .catch(function (error) { + reject(error); }); + }); + }; + + edx.dashboard.leaderboard.renderUserListItem = function (data) { + var listItem = $('
  • ').addClass('user-item'); + + var avatarDiv = $('
    ').addClass('avatar'); + var avatarImg = $('').attr('src', data.user.profile_image_url).attr('alt', 'User Avatar'); + avatarDiv.append(avatarImg); + + var userInfoDiv = $('
    ').addClass('user-info'); + var userNameDiv = $('
    ').addClass('user-name').text(data.user.name); + userInfoDiv.append(userNameDiv); + + var userScoreDiv = $('
    ').addClass('user-score').text(data.score); + + listItem.append(avatarDiv, userInfoDiv, userScoreDiv); + + return listItem; + }; + + edx.dashboard.leaderboard.renderUserList = function () { + var userListElement = $('#userList'); + var nextPageUrl = '/api/badges/v1/leaderboard/'; + var fetchingData = false; + + var fetchAndRenderNextPage = function () { + if (nextPageUrl && !fetchingData) { + fetchingData = true; + edx.dashboard.leaderboard.fetchData(nextPageUrl) + .then(function (nextPageData) { + if (nextPageData.results && Array.isArray(nextPageData.results)) { + nextPageData.results.forEach(function (user) { + var listItem = edx.dashboard.leaderboard.renderUserListItem(user); + userListElement.append(listItem); + }); + + nextPageUrl = nextPageData.next; + } + }) + .catch(function (error) { + console.error('Error fetching and rendering data:', error); + }) + .finally(function () { + fetchingData = false; + }); + } + }; - // Update the next page URL - nextPageUrl = nextPageData.next; + userListElement.scroll(function() { + if ($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight - 1000 && !fetchingData) { + fetchAndRenderNextPage(); } + }); + + fetchAndRenderNextPage(); + }; - fetchingData = false; - } + edx.dashboard.leaderboard.init = function() { + edx.dashboard.leaderboard.renderUserList(); } - // Initial rendering - await fetchAndRenderNextPage(); - - // Add event listener to window scroll - window.addEventListener('scroll', async () => { - // Check if user has scrolled to the bottom - if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 1000 && !fetchingData) { - await fetchAndRenderNextPage(); - } - }); -} - -// Call the function to render the initial user list when the page loads -document.addEventListener('DOMContentLoaded', renderUserList); +}(jQuery)); diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html index 0711cc8c7e71..2963cfc46799 100644 --- a/lms/templates/dashboard.html +++ b/lms/templates/dashboard.html @@ -44,6 +44,7 @@ <%static:js group='dashboard'/> - <%include file="dashboard/_dashboard_entitlement_unenrollment_modal.html"/>