Added a new Current Tenure page #220
Conversation
|
@Kr-Utkarsh-01 is attempting to deploy a commit to the openlake's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughIntroduces a new tenure display feature: backend endpoint Changes
Sequence DiagramsequenceDiagram
participant User as User
participant TenurePage as TenurePage Component
participant API as Backend API
participant DB as Database
User->>TenurePage: Opens /tenure page
TenurePage->>TenurePage: Mount component, set loading state
TenurePage->>API: GET /api/por/current
API->>DB: Query active PositionHolder records
DB-->>API: Return records
API->>API: Populate user, position, unit details
API->>API: Validate nested fields & group by unit
API-->>TenurePage: Return grouped tenure data
TenurePage->>TenurePage: Store data in state, set loading false
TenurePage->>User: Render organizations & member cards
User->>TenurePage: Enter search query
TenurePage->>TenurePage: Filter data (org name/member/position)
TenurePage->>User: Update display with filtered results
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@frontend/src/pages/TenurePage.jsx`:
- Line 138: The list item uses an unstable key fallback (key={member.holder_id
|| Math.random()}), which causes remounts; replace the Math.random() fallback
with a stable identifier such as a deterministic property on the member object
(e.g., member.id or member.uuid) or derive a stable key from existing fields
(e.g., `${member.holder_id}-${member.someOtherField}`), ensuring the key for
each rendered element in the TenurePage list is constant across renders and
referencing the member.holder_id usage to locate the change.
🧹 Nitpick comments (7)
backend/routes/por.js (3)
7-20: Consider adding pagination for scalability.The query fetches all active position holders without pagination. As the dataset grows, this could impact response times and memory usage.
♻️ Suggested approach with pagination
-router.get("/current", async (req, res) => { +router.get("/current", async (req, res) => { + const page = parseInt(req.query.page) || 1; + const limit = parseInt(req.query.limit) || 100; + const skip = (page - 1) * limit; + try { const activeHolders = await PositionHolder.find({ status: "active" }) + .skip(skip) + .limit(limit) .populate({
33-41: Potential grouping collision if two units share the same name.Using
unit.nameas the grouping key could merge members from different units if they have identical names. Consider usingunit._id.toString()as the key and including the name inunit_info.♻️ Suggested fix
const unit = holder.position_id.unit_id; - const unitName = unit.name; + const unitKey = unit._id.toString(); - if (!groupedData[unitName]) { - groupedData[unitName] = { + if (!groupedData[unitKey]) { + groupedData[unitKey] = { unit_info: unit, members: [], }; } - groupedData[unitName].members.push({ + groupedData[unitKey].members.push({
54-54: Avoid leaking internal error details in production.Exposing
error.messagein the API response could reveal sensitive information about the server's internal state or database structure.♻️ Suggested fix
- res.status(500).json({ message: "Server Error", error: error.message }); + res.status(500).json({ message: "Server Error" });frontend/src/pages/TenurePage.jsx (3)
15-17: Remove console.log statements before merging.Debug logging on lines 15, 17, and 27 should be removed or replaced with a conditional debug flag for production builds.
♻️ Suggested fix
const fetchTenureData = async () => { try { - console.log("TenurePage: Fetching tenure data..."); const response = await api.get("/api/por/current"); - console.log("TenurePage: API Response:", response); if (response.data) {} catch (err) { - console.error("TenurePage: Error fetching tenure data:", err); const msg =Also applies to: 27-27
45-71: Consider memoizing the filtered data.The
filteredDatacalculation runs on every render. WithuseMemo, it only recalculates whensafeDataorsearchTermchanges.♻️ Suggested optimization
+import React, { useEffect, useState, useMemo } from "react"; -import React, { useEffect, useState } from "react";- const filteredData = Object.entries(safeData).reduce( + const filteredData = useMemo(() => Object.entries(safeData).reduce( (acc, [orgName, data]) => { // ... existing logic }, {}, - ); + ), [safeData, searchTerm]);
103-108: Consider a softer retry mechanism.Using
window.location.reload()triggers a full page reload. A cleaner approach would re-invoke the fetch function without losing other page state.♻️ Suggested approach
+ const fetchTenureData = async () => { + setLoading(true); + setError(null); + try { + const response = await api.get("/api/por/current"); + setTenureData(response.data || {}); + } catch (err) { + const msg = err.response?.data?.message || err.message || "Failed to load tenure data."; + setError(`${msg}. Please ensure the backend server is running on the correct port.`); + } finally { + setLoading(false); + } + }; + + useEffect(() => { + fetchTenureData(); + }, []);Then use
onClick={fetchTenureData}for the retry button.frontend/src/config/navbarConfig.js (1)
27-27: Consider using a distinct icon for Tenure.The "Tenure" navigation item uses the same
Usersicon as "Clubs" (organization), which could cause visual confusion. Consider usingBriefcase(already used in TenurePage.jsx) for consistency and distinction.♻️ Suggested change
Update the import:
import { Home, Users, Calendar, Trophy, ClipboardList, Star, User, MessageSquare, UserPlus, Plus, Award, Megaphone, + Briefcase, } from "lucide-react";Then update each tenure entry:
- { key: "tenure", label: "Tenure", icon: Users }, + { key: "tenure", label: "Tenure", icon: Briefcase },Also applies to: 42-42, 61-61, 77-77
| {data.members && data.members.length > 0 ? ( | ||
| data.members.map((member) => ( | ||
| <div | ||
| key={member.holder_id || Math.random()} |
There was a problem hiding this comment.
Avoid using Math.random() as a React key.
Using Math.random() as a fallback key causes React to remount the component on every render, breaking reconciliation and potentially causing performance issues or state loss. Use a stable identifier instead.
♻️ Suggested fix
data.members.map((member) => (
<div
- key={member.holder_id || Math.random()}
+ key={member.holder_id || `${orgName}-${member.position_title}-${member.user?.personal_info?.name}`}
className="flex flex-col items-center p-4 bg-white rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition-shadow duration-200"
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| key={member.holder_id || Math.random()} | |
| key={member.holder_id || `${orgName}-${member.position_title}-${member.user?.personal_info?.name}`} |
🤖 Prompt for AI Agents
In `@frontend/src/pages/TenurePage.jsx` at line 138, The list item uses an
unstable key fallback (key={member.holder_id || Math.random()}), which causes
remounts; replace the Math.random() fallback with a stable identifier such as a
deterministic property on the member object (e.g., member.id or member.uuid) or
derive a stable key from existing fields (e.g.,
`${member.holder_id}-${member.someOtherField}`), ensuring the key for each
rendered element in the TenurePage list is constant across renders and
referencing the member.holder_id usage to locate the change.
1 participant
name: " Pull Request"
about: Propose and submit changes to the project for review
title: "PR: [Added a new Current Tenure page to track the tenure of current POR holders]"
Related Issue
Changes Introduced
Why This Change?
Screenshots / Video (if applicable)
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.