Implement contributor data fetching and display#63
Implement contributor data fetching and display#63himanshujha05 wants to merge 2 commits intoReduxISU:ReduxAPI_GUIfrom
Conversation
Added contributor data fetching and dynamic rendering of contributor names with links.
There was a problem hiding this comment.
Pull request overview
Adds contributor profile fetching and updates the About Us page to render contributor names as clickable links.
Changes:
- Added client-side fetching of contributor profile metadata from the backend on page load
- Added state to store fetched contributor profile data
- Updated the contributor list UI to render each contributor name as a Next.js link
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
pages/aboutus/index.js
Outdated
| {contributors.map((name, index) => { | ||
| const data = contributorData[name]; | ||
| const nameSlug = name.replace(/\s+/g, '-').toLowerCase(); |
There was a problem hiding this comment.
contributorData is fetched and stored, but the only read is const data = contributorData[name]; and data is never used. This results in extra network traffic and state updates with no UI impact. Either use the fetched data to drive rendering (e.g., link target/label) or remove the fetch/state entirely.
pages/aboutus/index.js
Outdated
| • <Link href={`/contributor/${nameSlug}`} legacyBehavior> | ||
| <a | ||
| style={{ color: "#f47920", textDecoration: "underline", cursor: "pointer" }} | ||
| > | ||
| {name} | ||
| </a> | ||
| </Link> |
There was a problem hiding this comment.
This Link points to /contributor/${nameSlug}, but there is no pages/contributor/* route in the current codebase, so these links will 404. Either add the corresponding Next.js page route (e.g., a dynamic contributor page) or change the link to an existing route/URL.
pages/aboutus/index.js
Outdated
| }; | ||
|
|
||
| fetchAllContributorData(); | ||
| }, []); |
There was a problem hiding this comment.
The effect depends on contributors but the dependency array is empty. With next/core-web-vitals, this typically raises a react-hooks/exhaustive-deps warning and can become a real bug if the contributors list ever changes. Consider moving contributors outside the component or including it in the dependency array.
pages/aboutus/index.js
Outdated
| import ResponsiveAppBar from "../../components/widgets/ResponsiveAppBar"; | ||
| import { createTheme, ThemeProvider, Container, Box } from "@mui/material"; | ||
| import "bootstrap/dist/css/bootstrap.min.css"; | ||
| import { createTheme, ThemeProvider, Container, Box, Button, Collapse } from "@mui/material"; |
There was a problem hiding this comment.
Button and Collapse are imported from @mui/material but not used in this file, which can trigger lint failures during next build and adds noise. Remove the unused imports or use them in the JSX.
| import { createTheme, ThemeProvider, Container, Box, Button, Collapse } from "@mui/material"; | |
| import { createTheme, ThemeProvider, Container, Box } from "@mui/material"; |
pages/aboutus/index.js
Outdated
| const encodedName = encodeURIComponent(name); | ||
| const response = await fetch(`https://api.redux.portneuf.cose.isu.edu/Navigation/ContributorProfile/${encodedName}`); | ||
| if (response.ok) { |
There was a problem hiding this comment.
This fetch hard-codes the production API host. The repo already defines NEXT_PUBLIC_REDUX_BASE_URL (see pages/index.js:42 and .env.*), so use that base URL here to avoid breaking local/dev/staging environments and to keep configuration centralized.
pages/aboutus/index.js
Outdated
| for (const name of contributors) { | ||
| try { | ||
| const encodedName = encodeURIComponent(name); | ||
| const response = await fetch(`https://api.redux.portneuf.cose.isu.edu/Navigation/ContributorProfile/${encodedName}`); | ||
| if (response.ok) { | ||
| const data = await response.json(); | ||
| dataMap[name] = data; | ||
| } | ||
| } catch (error) { | ||
| console.warn(`Failed to fetch data for ${name}:`, error); | ||
| } | ||
| } |
There was a problem hiding this comment.
Contributor profiles are fetched sequentially inside a for...of with await, which will make page load time grow linearly with the number of contributors. Consider issuing requests concurrently (e.g., build an array of promises and await them together) or adding a backend batch endpoint.
Refactor contributor data fetching and modal handling. Update publication titles for clarity and add Dialog component for contributor profiles.
1 participant
Added contributor data fetching and dynamic rendering of contributor names with links.