Skip to content

Commit 32c2b79

Browse files
codewithyuvicodewithyuvi
committed
FIX: null roommate listing render
1 parent 218786d commit 32c2b79

File tree

1 file changed

+136
-134
lines changed

1 file changed

+136
-134
lines changed

‎client/src/Components/TabBar/NavTabs.jsx‎

Lines changed: 136 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -214,20 +214,18 @@ function DisplayRoommateCard() {
214214
Promise.all(roommatePostsWithUserDetailsPromises),
215215
Promise.all(roomPostsWithUserDetailsPromises),
216216
]);
217-
218-
setRoommatePosts(roommatePostsWithUserDetails);
219-
setRoomPosts(roomPostsWithUserDetails);
217+
console.log("Roommate posts:", roommatePostsWithUserDetails);
218+
setRoommatePosts(roommatePostsWithUserDetails.filter(Boolean));
219+
setRoomPosts(roomPostsWithUserDetails.filter(Boolean));
220220

221221
setroomLengthPosts(roomLengthPosts);
222222
setroommateLengthPosts(roommateLengthPosts);
223-
setIsLoading(false);
224223
setTotalPages(Math.ceil(roomLengthPosts.length / perPage));
225224
setTotalPagesroommate(Math.ceil(roommateLengthPosts.length / perPage));
226225
console.log(totalPages);
227226
console.log("current:", page);
228227
} catch (error) {
229228
console.error(error);
230-
setIsLoading(false);
231229
} finally {
232230
setIsLoading(false); // Set loading back to false when all posts are fetched
233231
}
@@ -455,78 +453,80 @@ function DisplayRoommateCard() {
455453
</p>
456454
</div>
457455
) : (
458-
roommatePosts.map((post) => (
459-
<div className="each-card" key={post?.id}>
460-
<span className="cards">
461-
<div className="main-card">
462-
<div
463-
className="card-img"
464-
style={{
465-
backgroundImage: `url(${boysListingImg})`,
466-
backgroundSize: "cover",
467-
backgroundPosition: "center",
468-
}}
469-
></div>
470-
<div className="card-info">
471-
<div className="card-informatios">
472-
<div className="card-name">
473-
{post?.userDetails?.firstname }{" "}
474-
{post?.userDetails?.lastname }
456+
roommatePosts
457+
.filter(post => post && post.userDetails)
458+
.map((post) => (
459+
<div className="each-card" key={post?._id}>
460+
<span className="cards">
461+
<div className="main-card">
462+
<div
463+
className="card-img"
464+
style={{
465+
backgroundImage: `url(${boysListingImg})`,
466+
backgroundSize: "cover",
467+
backgroundPosition: "center",
468+
}}
469+
></div>
470+
<div className="card-info">
471+
<div className="card-informatios">
472+
<div className="card-name">
473+
{post?.userDetails?.firstname}{" "}
474+
{post?.userDetails?.lastname}
475+
</div>
476+
{userGender && (
477+
<div
478+
className="card-add"
479+
onClick={() =>
480+
likeRoommate(post?._id, post?.gender)
481+
}
482+
>
483+
{following.includes(post?._id) ? (
484+
<i className="fa-solid fa-heart" style={{ color: "#d98548", fontSize: "14px" }}></i>
485+
) : (
486+
<i className="fa-regular fa-heart" style={{ color: "#d98548", fontSize: "14px" }}></i>
487+
)}
488+
</div>
489+
)}
490+
</div>
491+
<div className="card-preference">
492+
<div>
493+
<div className="card-preference-title">Rank</div>
494+
<div className="card-preference-content">{post?.rank}</div>
495+
</div>
496+
<div>
497+
<div className="card-preference-title">Preferred Bed</div>
498+
<div className="card-preference-content">{post?.preferredBed}</div>
499+
</div>
500+
<div>
501+
<div className="card-preference-title">Year</div>
502+
<div className="card-preference-content">{post?.year}</div>
503+
</div>
504+
<div>
505+
<div className="card-preference-title">Preferred Blocks</div>
506+
<div className="card-preference-content">{post?.preferredBlock}</div>
507+
</div>
508+
<div>
509+
<div className="card-preference-title">Vacancy</div>
510+
<div className="card-preference-content">{post?.remaining}</div>
511+
</div>
475512
</div>
476-
{userGender && (
513+
<div className="card-habits-section">
477514
<div
478-
className="card-add"
479-
onClick={() =>
480-
likeRoommate(post?._id, post?.gender)
481-
}
515+
className="card-habit-details"
516+
onClick={() => {
517+
selectRoommateDetail(post?.desc);
518+
selectRoommatePhone(post?.phone);
519+
selectRoommateEmail(post?.username);
520+
}}
482521
>
483-
{following.includes(post?._id) ? (
484-
<i className="fa-solid fa-heart" style={{ color: "#d98548", fontSize: "14px" }}></i>
485-
) : (
486-
<i className="fa-regular fa-heart" style={{ color: "#d98548", fontSize: "14px" }}></i>
487-
)}
522+
<i className="fa-regular fa-message"></i> Description
488523
</div>
489-
)}
490-
</div>
491-
<div className="card-preference">
492-
<div>
493-
<div className="card-preference-title">Rank</div>
494-
<div className="card-preference-content">{post?.rank}</div>
495-
</div>
496-
<div>
497-
<div className="card-preference-title">Preferred Bed</div>
498-
<div className="card-preference-content">{post?.preferredBed}</div>
499-
</div>
500-
<div>
501-
<div className="card-preference-title">Year</div>
502-
<div className="card-preference-content">{post?.year}</div>
503-
</div>
504-
<div>
505-
<div className="card-preference-title">Preferred Blocks</div>
506-
<div className="card-preference-content">{post?.preferredBlock }</div>
507-
</div>
508-
<div>
509-
<div className="card-preference-title">Vacancy</div>
510-
<div className="card-preference-content">{post?.remaining}</div>
511-
</div>
512-
</div>
513-
<div className="card-habits-section">
514-
<div
515-
className="card-habit-details"
516-
onClick={() => {
517-
selectRoommateDetail(post?.desc);
518-
selectRoommatePhone(post?.phone);
519-
selectRoommateEmail(post?.username);
520-
}}
521-
>
522-
<i className="fa-regular fa-message"></i> Description
523524
</div>
524525
</div>
525526
</div>
526-
</div>
527-
</span>
528-
</div>
529-
))
527+
</span>
528+
</div>
529+
))
530530
)}
531531
</div>
532532
<div
@@ -612,77 +612,79 @@ function DisplayRoommateCard() {
612612
</p>
613613
</div>
614614
) : (
615-
roomPosts.map((post) => (
616-
<div className="each-card" key={post?.id}>
617-
<span className="cards">
618-
<div className="main-card">
619-
<div
620-
className="card-img"
621-
style={{
622-
backgroundImage: `url(${boysListingImg})`,
623-
backgroundSize: "cover",
624-
backgroundPosition: "center",
625-
}}
626-
></div>
627-
<div className="card-info">
628-
<div className="card-informatios">
629-
<div className="card-name">
630-
Rank: {post?.rank} - {post?.preferredBlock} Block
631-
</div>
632-
<div
633-
className="card-add"
634-
onClick={() =>
635-
RoomLiking(post?._id, post?.gender)
636-
}
637-
>
638-
{likeRoom.includes(post?._id) ? (
639-
<i className="fa-solid fa-heart" style={{ color: "#d98548", fontSize: "14px" }}></i>
640-
) : (
641-
<i className="fa-regular fa-heart" style={{ color: "#d98548", fontSize: "14px" }}></i>
642-
)}
615+
roomPosts
616+
.filter(post => post && post.userDetails)
617+
.map((post) => (
618+
<div className="each-card" key={post?._id}>
619+
<span className="cards">
620+
<div className="main-card">
621+
<div
622+
className="card-img"
623+
style={{
624+
backgroundImage: `url(${boysListingImg})`,
625+
backgroundSize: "cover",
626+
backgroundPosition: "center",
627+
}}
628+
></div>
629+
<div className="card-info">
630+
<div className="card-informatios">
631+
<div className="card-name">
632+
Rank: {post?.rank} - {post?.preferredBlock} Block
633+
</div>
634+
<div
635+
className="card-add"
636+
onClick={() =>
637+
RoomLiking(post?._id, post?.gender)
638+
}
639+
>
640+
{likeRoom.includes(post?._id) ? (
641+
<i className="fa-solid fa-heart" style={{ color: "#d98548", fontSize: "14px" }}></i>
642+
) : (
643+
<i className="fa-regular fa-heart" style={{ color: "#d98548", fontSize: "14px" }}></i>
644+
)}
645+
</div>
643646
</div>
644-
</div>
645647

646-
<div className="card-preference">
647-
<div>
648-
<div className="card-preference-title">Rank</div>
649-
<div className="card-preference-content">{post?.rank || 'N/A'}</div>
650-
</div>
651-
<div>
652-
<div className="card-preference-title">Preferred Bed</div>
653-
<div className="card-preference-content">{post?.preferredBed}</div>
654-
</div>
655-
<div>
656-
<div className="card-preference-title">Block</div>
657-
<div className="card-preference-content">{post?.preferredBlock}</div>
658-
</div>
659-
<div>
660-
<div className="card-preference-title">Year</div>
661-
<div className="card-preference-content">{post?.year}</div>
662-
</div>
663-
<div>
664-
<div className="card-preference-title">Gender</div>
665-
<div className="card-preference-content">{post?.gender}</div>
648+
<div className="card-preference">
649+
<div>
650+
<div className="card-preference-title">Rank</div>
651+
<div className="card-preference-content">{post?.rank || 'N/A'}</div>
652+
</div>
653+
<div>
654+
<div className="card-preference-title">Preferred Bed</div>
655+
<div className="card-preference-content">{post?.preferredBed}</div>
656+
</div>
657+
<div>
658+
<div className="card-preference-title">Block</div>
659+
<div className="card-preference-content">{post?.preferredBlock}</div>
660+
</div>
661+
<div>
662+
<div className="card-preference-title">Year</div>
663+
<div className="card-preference-content">{post?.year}</div>
664+
</div>
665+
<div>
666+
<div className="card-preference-title">Gender</div>
667+
<div className="card-preference-content">{post?.gender}</div>
668+
</div>
666669
</div>
667-
</div>
668670

669-
<div className="card-habits-section">
670-
<div
671-
className="card-habit-details"
672-
onClick={() => {
673-
selectRoomDetail(post?.desc);
674-
selectRoomPhone(post?.phone);
675-
selectRoomEmail(post?.username);
676-
}}
677-
>
678-
<i className="fa-regular fa-message"></i> Description
671+
<div className="card-habits-section">
672+
<div
673+
className="card-habit-details"
674+
onClick={() => {
675+
selectRoomDetail(post?.desc);
676+
selectRoomPhone(post?.phone);
677+
selectRoomEmail(post?.username);
678+
}}
679+
>
680+
<i className="fa-regular fa-message"></i> Description
681+
</div>
679682
</div>
680683
</div>
681684
</div>
682-
</div>
683-
</span>
684-
</div>
685-
))
685+
</span>
686+
</div>
687+
))
686688
)}
687689
</div>
688690
<div

0 commit comments

Comments
 (0)