-
Notifications
You must be signed in to change notification settings - Fork 148
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature/user data pagination #891
base: develop
Are you sure you want to change the base?
Changes from 15 commits
d101d41
efd2e88
4621abc
b8f8a20
4e8b4bf
f7883eb
e4e28f0
1bbfce5
e9ffa53
eb8e8fa
87ec1d9
458cb09
de294ea
9162eaa
31a8a1b
b3c7664
2155129
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,7 @@ | ||
import { TabsSection } from './components/TabsSection.js'; | ||
import { UsersSection } from './components/UsersSection.js'; | ||
import { UserDetailsSection } from './components/UserDetailsSection.js'; | ||
import { getUsers } from './utils/util.js'; | ||
import { getUsers, mockUsersData } from './utils/util.js'; | ||
import { NoUserFound } from './components/NoUserFound.js'; | ||
|
||
const { createElement, rerender } = react; | ||
|
@@ -17,9 +17,46 @@ export const usersData = { | |
const urlParams = new URLSearchParams(window.location.search); | ||
|
||
let activeTab = urlParams.get('tab') ?? 'in_discord'; | ||
|
||
const INITIAL_USERS = 10; | ||
let isLoading = false; | ||
let currentPage = 1; | ||
let showUser = 0; | ||
usersData[activeTab] = await getUsers(activeTab); | ||
|
||
// usersData[activeTab] = await getUsers(activeTab); | ||
|
||
export const fetchUsers = async (tabId, page = 1) => { | ||
if (isLoading) { | ||
return; | ||
} | ||
|
||
isLoading = true; | ||
|
||
try { | ||
const start = (page - 1) * INITIAL_USERS; | ||
const end = start + INITIAL_USERS; | ||
|
||
const newUsers = mockUsersData[tabId].slice(start, end); | ||
|
||
if (newUsers.length > 0) { | ||
if (page === 1) { | ||
usersData[tabId] = newUsers; // Initial load | ||
} else { | ||
const existingIds = new Set(usersData[tabId].map((user) => user.id)); | ||
const uniqueNewUsers = newUsers.filter( | ||
(user) => !existingIds.has(user.id), | ||
); | ||
usersData[tabId] = [...usersData[tabId], ...uniqueNewUsers]; | ||
} | ||
currentPage = page; | ||
} else { | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. why is else empty? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. fixed this |
||
} catch (error) { | ||
console.error('Error fetching users', error); | ||
} finally { | ||
isLoading = false; | ||
rerender(App(), document.getElementById('root')); | ||
} | ||
}; | ||
|
||
const handleTabNavigation = async (e) => { | ||
const selectedTabId = e.target.getAttribute('data_key'); | ||
|
@@ -60,6 +97,10 @@ export const App = () => { | |
users, | ||
showUser, | ||
handleUserSelected, | ||
fetchUsers, | ||
activeTab, | ||
currentPage, | ||
isLoading, | ||
}), | ||
UserDetailsSection({ user: users[showUser] ?? {} }), | ||
]); | ||
|
@@ -69,3 +110,5 @@ export const App = () => { | |
NoUserFound(), | ||
]); | ||
}; | ||
|
||
fetchUsers(activeTab, 1); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,45 @@ | ||
const { createElement } = react; | ||
|
||
export const UsersSection = ({ users, showUser, handleUserSelected }) => { | ||
export const UsersSection = ({ | ||
users, | ||
showUser, | ||
handleUserSelected, | ||
fetchUsers, | ||
activeTab, | ||
currentPage, | ||
isLoading, | ||
}) => { | ||
const debounce = (func, delay) => { | ||
let timeoutId; | ||
return function (...args) { | ||
clearTimeout(timeoutId); | ||
timeoutId = setTimeout(() => { | ||
func.apply(this, args); | ||
}, delay); | ||
}; | ||
}; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. can we move this into a separate file and export it and use here? this way if in future we need debounce in any other place, we can re-use There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. fixed this: removed this function as it is already defined globally in utils.js file in the root folder line:62 |
||
|
||
window.addEventListener( | ||
'scroll', | ||
debounce(() => { | ||
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) { | ||
fetchUsers(activeTab, currentPage + 1); | ||
} | ||
}, 200), | ||
); | ||
|
||
if (isLoading) { | ||
return createElement('aside', { class: 'users_section' }, [ | ||
createElement('div', { class: 'loading' }, ['Loading...']), | ||
]); | ||
Comment on lines
+23
to
+25
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. why not we create a common loader file? this can be re-used as well right? |
||
} | ||
|
||
return createElement( | ||
'aside', | ||
{ class: 'users_section', onclick: handleUserSelected }, | ||
{ | ||
class: 'users_section', | ||
onclick: handleUserSelected, | ||
}, | ||
users?.map((user) => { | ||
return createElement( | ||
'div', | ||
|
@@ -18,7 +54,10 @@ export const UsersSection = ({ users, showUser, handleUserSelected }) => { | |
src: user?.picture?.url ?? dummyPicture, | ||
class: 'user_image', | ||
}), | ||
createElement('span', {}, [user.first_name + ' ' + user.last_name]), | ||
// createElement('span', {}, [ | ||
// user.first_name + ' ' + user.last_name + user.username, | ||
// ]), | ||
Comment on lines
+48
to
+50
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. can we get rid of this if not needed? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same, this is being currently used with the actual data I have just replicated my version to test out the mock data. |
||
createElement('span', {}, [user.username]), | ||
], | ||
); | ||
}), | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
remove this if not needed
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Currently testing with mockdata and that function is still being used to fetch the actual data