replace /members with /users

__tests__/tasks/profile-picture.test.js

@@ -1,6 +1,6 @@
 const puppeteer = require('puppeteer');
 const API_BASE_URL = 'https://staging-api.realdevsquad.com';
-const { members } = require('../../mock-data/members');
+const { allUsersData } = require('../../mock-data/users');
 
 describe('Task Page - Assignee Profile Pic', () => {
   let browser;
@@ -20,7 +20,7 @@ describe('Task Page - Assignee Profile Pic', () => {
     page.on('request', (interceptedRequest) => {
       const url = interceptedRequest.url();
 
-      if (url === `${API_BASE_URL}/members`) {
+      if (url === `${API_BASE_URL}/users`) {
         interceptedRequest.respond({
           status: 200,
           contentType: 'application/json',
@@ -29,7 +29,7 @@ describe('Task Page - Assignee Profile Pic', () => {
             'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
             'Access-Control-Allow-Headers': 'Content-Type, Authorization',
           },
-          body: JSON.stringify(members),
+          body: JSON.stringify(allUsersData),
         });
       } else {
         interceptedRequest.continue();
@@ -52,7 +52,7 @@ describe('Task Page - Assignee Profile Pic', () => {
 
   it('Profile picture with url', async () => {
     const inputElement = await page.$('input#assignee');
-    const name = 'satyam';
+    const name = 'Arpit_02';
 
     //Trigger the input event manually
     for (let i = 0; i < name.length; i++) {
@@ -64,7 +64,7 @@ describe('Task Page - Assignee Profile Pic', () => {
     await page.waitForTimeout(2000);
     const imgSrc = await page.$eval('#list-items img', (img) => img.src);
     const expectedImageFilename =
-      'https://res.cloudinary.com/imgprc/image/upload/v1688145505/profile/tu4zVmwFX91e9oEuSWLg/woqilcqdbp0cudcexkem.jpg';
+      'https://res.cloudinary.com/realdevsquad/image/upload/v1679878917/profile/54vObOfoscwiIVNMSqnN/askdcanhcehukqrdugge.jpg';
     expect(imgSrc.endsWith(expectedImageFilename)).toBe(true);
   });
 
@@ -75,7 +75,7 @@ describe('Task Page - Assignee Profile Pic', () => {
     await page.keyboard.press('Backspace');
     await new Promise((resolve) => setTimeout(resolve, 500));
 
-    const name = 'sumit';
+    const name = '19sriram';
     for (let i = 0; i < name.length; i++) {
       await inputElement.type(name[i], { delay: 100 });
     }

__tests__/tasks/task-dependency.test.js

@@ -33,7 +33,7 @@ describe('Input box', () => {
           },
           body: JSON.stringify(levels),
         });
-      } else if (url === `${API_BASE_URL}/members`) {
+      } else if (url === `${API_BASE_URL}/users`) {
         interceptedRequest.respond({
           status: 200,
           contentType: 'application/json',

online-members/constants.js

@@ -1,27 +1,24 @@
 'use strict';
 
-// Members Constants
-const MEMBERS_CLASS = 'members';
-const MEMBERS_CLASS_LIST = [MEMBERS_CLASS];
-const MEMBERS_UL_CLASS_LIST = ['members-list'];
-const MEMBERS_LIST_ID = 'members-list';
-const MEMBERS_CONTAINER_CLASS_LIST = ['members-container'];
-const MEMBERS_CONTAINER_ID = 'members-container';
-const MEMBERS_ONLINE_CLASS = 'members-online';
-const MEMBERS_ONLINE_HIDDEN_CLASS = 'members-online-hidden';
-const MEMBERS_ONLINE_CLASS_LIST = [
-  MEMBERS_ONLINE_CLASS,
-  MEMBERS_ONLINE_HIDDEN_CLASS,
-];
-
-const PROFILE_NAME_CLASS = 'members-profile-and-name';
+// Users Constants
+const USERS_CLASS = 'users';
+const USERS_CLASS_LIST = [USERS_CLASS];
+const USERS_UL_CLASS_LIST = ['users-list'];
+const USERS_LIST_ID = 'users-list';
+const USERS_CONTAINER_CLASS_LIST = ['users-container'];
+const USERS_CONTAINER_ID = 'users-container';
+const USERS_ONLINE_CLASS = 'users-online';
+const USERS_ONLINE_HIDDEN_CLASS = 'users-online-hidden';
+const USERS_ONLINE_CLASS_LIST = [USERS_ONLINE_CLASS, USERS_ONLINE_HIDDEN_CLASS];
+
+const PROFILE_NAME_CLASS = 'users-profile-and-name';
 const PROFILE_NAME_CLASS_LIST = [PROFILE_NAME_CLASS];
 
-// Members Search Constants
-const MEMBERS_SEARCH_CLASS_LIST = ['members-search'];
-const MEMBERS_SEARCH_INPUT_CLASS_LIST = ['members-search-input'];
-const MEMBERS_SEARCH_ID = 'search-members';
-const MEMBERS_SEARCH_PLACEHOLDER = 'Search for members';
+// Users Search Constants
+const USERS_SEARCH_CLASS_LIST = ['users-search'];
+const USERS_SEARCH_INPUT_CLASS_LIST = ['users-search-input'];
+const USERS_SEARCH_ID = 'search-users';
+const USERS_SEARCH_PLACEHOLDER = 'Search for users';
 
 // Task Constants
 const TASKS_CONTAINER_ID = 'task-container';
@@ -31,7 +28,7 @@ const TASKS_CLASS_LIST = ['task'];
 const TASKS_CONTAINER_CLASS_LIST = ['tasks-container'];
 
 // RDS Api Constants
-const RDS_API_MEMBERS = API_BASE_URL + '/members';
+const RDS_API_USERS = API_BASE_URL + '/users';
 const RDS_API_TASKS_USERS = API_BASE_URL + '/tasks';
 const RDS_CLOUDINARY_CLOUD_URL = `https://res.cloudinary.com/realdevsquad/image/upload`;
 
@@ -41,7 +38,7 @@ const RDS_SSE_ONLINE_URL = 'https://online.realdevsquad.com/online-members';
 const RDS_PROFILE_IMAGE_SIZE = 'w_40,h_40';
 const RDS_PROFILE_DEFAULT_IMAGE = '';
 
-const PROFILE_IMAGE_CLASS = 'members-profile';
+const PROFILE_IMAGE_CLASS = 'users-profile';
 const PROFILE_IMAGE_CLASS_LIST = [PROFILE_IMAGE_CLASS];
 
 /* MESSAGES CONSTANTS */

online-members/online-members.css

@@ -35,7 +35,7 @@
   width: 100%;
 }
 
-.members-container {
+.users-container {
   margin: 10px;
   border: 2px solid black;
   border-radius: 5px;
@@ -44,11 +44,11 @@
   min-width: 260px;
 }
 
-.members-list {
+.users-list {
   overflow: hidden;
 }
 
-.members {
+.users {
   margin: 10px;
   padding: 0 5px;
   border: 2px solid black;
@@ -62,32 +62,32 @@
   background: #8abbcd;
 }
 
-.members:hover {
+.users:hover {
   background: #5992a7;
 }
 
-.members.dragging {
+.users.dragging {
   background: transparent;
   color: transparent;
   border: transparent;
 }
 
-.members-online {
+.users-online {
   width: 10px;
   height: 10px;
   background-color: rgb(58, 247, 58);
   border-radius: 50%;
 }
 
-.members-online-hidden {
+.users-online-hidden {
   display: none;
 }
 
-.members.scale {
+.users.scale {
   transform: scale(1.1);
 }
 
-.members-search {
+.users-search {
   margin: 10px;
   height: 4rem;
   width: 15rem;
@@ -98,18 +98,18 @@
   align-items: center;
 }
 
-.members-search-input {
+.users-search-input {
   height: 2rem;
   width: 15rem;
 }
 
-.members-profile {
+.users-profile {
   border-radius: 50%;
   width: 25px;
   margin-right: 5px;
 }
 
-.members-profile-and-name {
+.users-profile-and-name {
   display: flex;
   align-items: center;
 }

online-members/online-members.html

@@ -21,7 +21,7 @@
       <!-- Task -->
       <div class="task-container" id="task-container"></div>
       <!-- Members -->
-      <div class="members-container" id="members-container"></div>
+      <div class="users-container" id="users-container"></div>
     </div>
     <footer>
       <p class="info-repo">

online-members/script.js

@@ -19,35 +19,35 @@ function createProfileImage(publicId = '', alt = '') {
     type: 'img',
     classList: PROFILE_IMAGE_CLASS_LIST,
   });
-  img.src = getMemberProfileImageLink(publicId);
+  img.src = getUserProfileImageLink(publicId);
   img.setAttribute('alt', alt);
   return img;
 }
 
-function createMemberNode(member) {
-  const memberDiv = createElement({
+function createUserNode(user) {
+  const userDiv = createElement({
     type: 'div',
-    classList: MEMBERS_CLASS_LIST,
+    classList: USERS_CLASS_LIST,
   });
-  memberDiv.dataset.username = member.username;
+  userDiv.dataset.username = user.username;
 
-  const memberOnlineDiv = createElement({
+  const userOnlineDiv = createElement({
     type: 'div',
-    classList: MEMBERS_ONLINE_CLASS_LIST,
+    classList: USERS_ONLINE_CLASS_LIST,
   });
 
-  const memberImage = createProfileImage(member?.picture?.publicId);
-  const usernameText = createTextNode(member.username);
+  const userImage = createProfileImage(user?.picture?.publicId);
+  const usernameText = createTextNode(user.username);
 
   const profileAndNameDiv = createElement({
     type: 'div',
     classList: PROFILE_NAME_CLASS_LIST,
   });
-  profileAndNameDiv.append(memberImage, usernameText);
+  profileAndNameDiv.append(userImage, usernameText);
 
-  memberDiv.append(profileAndNameDiv, memberOnlineDiv);
+  userDiv.append(profileAndNameDiv, userOnlineDiv);
 
-  return memberDiv;
+  return userDiv;
 }
 
 function createAnchorLinkNode(url, title) {
@@ -81,19 +81,19 @@ function createTaskNode(task) {
   return div;
 }
 
-function getMembersListContent(members, classList = []) {
+function getUsersListContent(users, classList = []) {
   const fragment = new DocumentFragment();
 
-  const membersList = Object.keys(members);
+  const usersList = Object.keys(users);
 
-  membersList.forEach((member) => {
+  usersList.forEach((user) => {
     const li = createElement({ type: 'li' });
-    li.append(createMemberNode(members[member]));
+    li.append(createUserNode(users[user]));
     fragment.append(li);
   });
 
-  const ul = createElement({ type: 'ul', classList: MEMBERS_UL_CLASS_LIST });
-  ul.id = MEMBERS_LIST_ID;
+  const ul = createElement({ type: 'ul', classList: USERS_UL_CLASS_LIST });
+  ul.id = USERS_LIST_ID;
   ul.appendChild(fragment);
 
   return ul;
@@ -137,12 +137,12 @@ function hideLoadingSpinner(selector) {
   }
 }
 
-async function generateMemberTaskData(username) {
+async function generateUserTaskData(username) {
   if (isTaskDataBeingFetched) {
     return;
   }
 
-  showLoadingSpinner(`#${TASKS_CONTAINER_ID}`);
+  showLoadingSpinner(`${TASKS_CONTAINER_ID}`);
 
   isTaskDataBeingFetched = true;
 
@@ -151,54 +151,54 @@ async function generateMemberTaskData(username) {
     tasksDiv.firstElementChild.remove();
   }
 
-  const memberTaskData = await getMemberTaskData(username);
+  const userTaskData = await getUserTaskData(username);
   isTaskDataBeingFetched = false;
   hideLoadingSpinner(`#${TASKS_CONTAINER_ID}`);
-  tasksDiv.appendChild(getTaskDataContent({ tasks: memberTaskData, username }));
+  tasksDiv.appendChild(getTaskDataContent({ tasks: userTaskData, username }));
 }
 
-async function generateMembersList() {
-  showLoadingSpinner(`#${MEMBERS_CONTAINER_ID}`);
-  members = await getMembersData();
-  hideLoadingSpinner(`#${MEMBERS_CONTAINER_ID}`);
-  const membersDiv = document.getElementById(MEMBERS_CONTAINER_ID);
+async function generateUsersList() {
+  showLoadingSpinner(`#${USERS_CONTAINER_ID}`);
+  let users = await getUsersData();
+  hideLoadingSpinner(`#${USERS_CONTAINER_ID}`);
+  const usersDiv = document.getElementById(USERS_CONTAINER_ID);
   const searchInputBox = generateSearchInputElement();
-  membersDiv.append(searchInputBox, getMembersListContent(members));
-  addEventListenerToMembersList();
+  usersDiv.append(searchInputBox, getUsersListContent(users));
+  addEventListenerToUsersList();
 }
 
-function addEventListenerToMembersList() {
-  const membersList = document.querySelector(`#${MEMBERS_CONTAINER_ID} > UL`);
-  membersList.addEventListener('click', (event) => {
-    const memberElement = event.target.closest(`.${MEMBERS_CLASS}`);
+function addEventListenerToUsersList() {
+  const usersList = document.querySelector(`#${USERS_CONTAINER_ID} > UL`);
+  usersList.addEventListener('click', (event) => {
+    const userElement = event.target.closest(`.${USERS_CLASS}`);
     document.getElementById(TASKS_CONTAINER_ID).style.display = 'block';
-    if (!memberElement) {
+    if (!userElement) {
       return;
     }
-    const username = memberElement.dataset.username;
+    const username = userElement.dataset.username;
     if (!username) {
       throw new Error('Some error occurred, please try again or contact admin');
     }
-    generateMemberTaskData(username);
+    generateUserTaskData(username);
   });
 }
 
 function generateSearchInputElement() {
   const searchInputField = createElement({
     type: 'input',
-    classList: MEMBERS_SEARCH_INPUT_CLASS_LIST,
+    classList: USERS_SEARCH_INPUT_CLASS_LIST,
   });
   searchInputField.type = 'text';
-  searchInputField.id = MEMBERS_SEARCH_ID;
+  searchInputField.id = USERS_SEARCH_ID;
   searchInputField.onkeyup = searchFunction;
-  searchInputField.placeholder = MEMBERS_SEARCH_PLACEHOLDER;
+  searchInputField.placeholder = USERS_SEARCH_PLACEHOLDER;
 
   const div = createElement({
     type: 'div',
-    classList: MEMBERS_SEARCH_CLASS_LIST,
+    classList: USERS_SEARCH_CLASS_LIST,
   });
   div.appendChild(searchInputField);
   return div;
 }
 
-generateMembersList();
+generateUsersList();