Skip to content

Commit 437215b

Browse files
kevish-is-learningkevish-is-learning
committed
working on userListing
1 parent 6d71de0 commit 437215b

2 files changed

Lines changed: 85 additions & 156 deletions

File tree

‎src/pages/Users/UsersListing.jsx‎

Lines changed: 84 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,10 @@ export default function UsersListing() {
2929
totalPages,
3030
loading,
3131
error,
32-
searchLoading,
33-
filterLoading,
3432
searchQuery,
3533
sortBy,
3634
sortOrder,
3735
filters,
38-
setSearchQuery,
39-
setSortBy,
40-
setSortOrder,
41-
setFilter,
4236
clearFilters,
4337
fetchUsers,
4438
goToPage,
@@ -56,7 +50,7 @@ export default function UsersListing() {
5650

5751
// Local UI state
5852
const [localSearchQuery, setLocalSearchQuery] = useState("");
59-
const [headerRef, headerControls] = useScrollAnimation(0.1);
53+
const [headerRef, headerControls] = useScrollAnimation(0.8);
6054

6155
// Sync localSearchQuery with store searchQuery
6256
useEffect(() => {
@@ -106,8 +100,8 @@ export default function UsersListing() {
106100
bulkUpdate({
107101
filters: {
108102
...filters,
109-
[key]: value
110-
}
103+
[key]: value,
104+
},
111105
});
112106
},
113107
[filters, bulkUpdate]
@@ -117,7 +111,7 @@ export default function UsersListing() {
117111
(e) => {
118112
e.preventDefault();
119113
bulkUpdate({
120-
searchQuery: localSearchQuery
114+
searchQuery: localSearchQuery,
121115
});
122116
},
123117
[localSearchQuery, bulkUpdate]
@@ -224,8 +218,6 @@ export default function UsersListing() {
224218
() => [
225219
{ value: "createdAt", label: "Join Date" },
226220
{ value: "name", label: "Name (A-Z)" },
227-
{ value: "location", label: "Location" },
228-
{ value: "github_username", label: "GitHub Username" },
229221
],
230222
[]
231223
);
@@ -246,8 +238,9 @@ export default function UsersListing() {
246238
animate="visible"
247239
variants={containerVariants}
248240
>
249-
{/* Header */}
241+
{console.log("user----", users)}
250242
<div>
243+
{/* Header */}
251244
<motion.div className="mb-6" variants={itemVariants}>
252245
<div className="flex items-center justify-between">
253246
<motion.div
@@ -336,9 +329,9 @@ export default function UsersListing() {
336329
onClick={handleSortOrderToggle}
337330
disabled={loading}
338331
className={`flex items-center gap-1 transition-colors ${
339-
loading
340-
? 'text-[#666] cursor-not-allowed'
341-
: 'text-[#A1A1AA] hover:text-white'
332+
loading
333+
? "text-[#666] cursor-not-allowed"
334+
: "text-[#A1A1AA] hover:text-white"
342335
}`}
343336
>
344337
{sortOrder === "asc" ? (
@@ -479,22 +472,43 @@ export default function UsersListing() {
479472
{/* Pagination */}
480473
{totalPages > 1 && (
481474
<motion.div
482-
className="flex items-center justify-center gap-2"
475+
className="flex items-center justify-center gap-4 mt-8 mb-4"
483476
initial={{ opacity: 0, y: 20 }}
484477
animate={{ opacity: 1, y: 0 }}
485478
transition={{ delay: 0.5, duration: 0.5 }}
486479
>
480+
{/* Previous Button */}
487481
<motion.button
488482
onClick={() => prevPage()}
489-
disabled={!stats.hasPrevPage}
490-
className="px-4 py-2 bg-[#23252B] text-white rounded-lg hover:bg-[#2A2A2A] disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
491-
whileHover={stats.hasPrevPage ? { scale: 1.05 } : {}}
492-
whileTap={stats.hasPrevPage ? { scale: 0.95 } : {}}
483+
disabled={currentPage <= 1}
484+
className={`flex items-center gap-2 px-6 py-3 rounded-lg font-medium transition-all duration-200 ${
485+
currentPage > 1
486+
? "bg-[#23252B] text-white hover:bg-[#2A2A2A] hover:shadow-lg"
487+
: "bg-[#1A1A1A] text-[#666] cursor-not-allowed"
488+
}`}
489+
whileHover={
490+
currentPage > 1 ? { scale: 1.05, x: -2 } : {}
491+
}
492+
whileTap={currentPage > 1 ? { scale: 0.95 } : {}}
493493
>
494+
<svg
495+
className="w-4 h-4"
496+
fill="none"
497+
stroke="currentColor"
498+
viewBox="0 0 24 24"
499+
>
500+
<path
501+
strokeLinecap="round"
502+
strokeLinejoin="round"
503+
strokeWidth={2}
504+
d="M15 19l-7-7 7-7"
505+
/>
506+
</svg>
494507
Previous
495508
</motion.button>
496509

497-
<div className="flex items-center gap-1">
510+
{/* Page Numbers */}
511+
<div className="flex items-center gap-2 px-4">
498512
{Array.from(
499513
{ length: Math.min(totalPages, 5) },
500514
(_, i) => {
@@ -506,9 +520,9 @@ export default function UsersListing() {
506520
<motion.button
507521
key={pageNum}
508522
onClick={() => goToPage(pageNum)}
509-
className={`px-3 py-2 rounded-lg transition-colors ${
523+
className={`min-w-[40px] h-10 rounded-lg font-medium transition-all duration-200 ${
510524
currentPage === pageNum
511-
? "bg-[#C6FF3D] text-black"
525+
? "bg-[#C6FF3D] text-black shadow-lg"
512526
: "bg-[#23252B] text-white hover:bg-[#2A2A2A]"
513527
}`}
514528
whileHover={{ scale: 1.1 }}
@@ -519,16 +533,53 @@ export default function UsersListing() {
519533
);
520534
}
521535
)}
536+
537+
{/* Show ellipsis and last page if needed */}
538+
{totalPages > 5 && currentPage < totalPages - 2 && (
539+
<>
540+
<span className="text-[#666] px-2">...</span>
541+
<motion.button
542+
onClick={() => goToPage(totalPages)}
543+
className="min-w-[40px] h-10 rounded-lg font-medium bg-[#23252B] text-white hover:bg-[#2A2A2A] transition-all duration-200"
544+
whileHover={{ scale: 1.1 }}
545+
whileTap={{ scale: 0.9 }}
546+
>
547+
{totalPages}
548+
</motion.button>
549+
</>
550+
)}
522551
</div>
523552

553+
{/* Next Button */}
524554
<motion.button
525555
onClick={() => nextPage()}
526-
disabled={!stats.hasNextPage}
527-
className="px-4 py-2 bg-[#23252B] text-white rounded-lg hover:bg-[#2A2A2A] disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
528-
whileHover={stats.hasNextPage ? { scale: 1.05 } : {}}
529-
whileTap={stats.hasNextPage ? { scale: 0.95 } : {}}
556+
disabled={currentPage >= totalPages}
557+
className={`flex items-center gap-2 px-6 py-3 rounded-lg font-medium transition-all duration-200 ${
558+
currentPage < totalPages
559+
? "bg-[#23252B] text-white hover:bg-[#2A2A2A] hover:shadow-lg"
560+
: "bg-[#1A1A1A] text-[#666] cursor-not-allowed"
561+
}`}
562+
whileHover={
563+
currentPage < totalPages ? { scale: 1.05, x: 2 } : {}
564+
}
565+
whileTap={
566+
currentPage < totalPages ? { scale: 0.95 } : {}
567+
}
530568
>
531569
Next
570+
<svg
571+
className="w-4 h-4"
572+
fill="none"
573+
stroke="currentColor"
574+
viewBox="0 0 24 24"
575+
>
576+
<path
577+
strokeLinecap="round"
578+
strokeLinejoin="round"
579+
strokeWidth={2}
580+
d="M9 5l7 7-7 7"
581+
/>
582+
</svg>
532583
</motion.button>
533584
</motion.div>
534585
)}
@@ -573,17 +624,13 @@ const UserCard = ({ user, onClick }) => {
573624
className="w-14 h-14 rounded-full object-cover border-2 border-[#2A2A2A] transition-colors"
574625
/>
575626
{user.github_username && (
576-
<motion.div
577-
className="absolute -bottom-1 -right-1 bg-[#C6FF3D] rounded-full p-1"
578-
>
627+
<motion.div className="absolute -bottom-1 -right-1 bg-[#C6FF3D] rounded-full p-1">
579628
<Github className="text-black" size={12} />
580629
</motion.div>
581630
)}
582631
</div>
583632
<div className="flex-1 min-w-0">
584-
<motion.h3
585-
className="text-white font-semibold text-lg truncate transition-colors"
586-
>
633+
<motion.h3 className="text-white font-semibold text-lg truncate transition-colors">
587634
{user.name}
588635
</motion.h3>
589636
<p className="text-[#A1A1AA] text-sm truncate">
@@ -602,18 +649,14 @@ const UserCard = ({ user, onClick }) => {
602649
{/* Key Info - Simplified layout */}
603650
<div className="space-y-2 mb-4">
604651
{user.location && (
605-
<motion.div
606-
className="flex items-center gap-2 text-[#A1A1AA] text-sm"
607-
>
652+
<motion.div className="flex items-center gap-2 text-[#A1A1AA] text-sm">
608653
<MapPin size={14} className="flex-shrink-0" />
609654
<span className="truncate">{user.location}</span>
610655
</motion.div>
611656
)}
612657

613658
{user.collegeInfo?.name && (
614-
<motion.div
615-
className="flex items-center gap-2 text-[#A1A1AA] text-sm"
616-
>
659+
<motion.div className="flex items-center gap-2 text-[#A1A1AA] text-sm">
617660
<GraduationCap size={14} className="flex-shrink-0" />
618661
<span className="truncate">
619662
{user.collegeInfo.name}
@@ -630,9 +673,7 @@ const UserCard = ({ user, onClick }) => {
630673
<Calendar size={12} />
631674
<span>Joined {joinedDate}</span>
632675
</div>
633-
<motion.div
634-
className="text-[#C6FF3D] text-xs font-medium opacity-0 group-hover:opacity-100 transition-opacity"
635-
>
676+
<motion.div className="text-[#C6FF3D] text-xs font-medium opacity-0 group-hover:opacity-100 transition-opacity">
636677
View Profile →
637678
</motion.div>
638679
</div>

0 commit comments

Comments
 (0)