Feature: News Section
Relevant source files
The following files were used as context for generating this wiki page:
The News Section is a client-side feature responsible for fetching and displaying financial news articles. It exists in two primary forms: a ticker-specific version that shows news related to a particular stock, and a general version that displays the latest market-wide news. The feature is designed to provide users with timely and relevant information, handling loading and error states gracefully. It integrates with the Polygon.io API for its data.
This feature is prominently used on the individual stock quote page (/quote/[ticker]) to provide context for a specific asset and on the main market overview portal (/portal) to give a broad view of the latest financial news.
Sources: client/src/components/NewsSection/index.tsx, client/src/app/quote/[ticker]/page.tsx:11,173, client/src/app/portal/page.tsx:14,233
Architecture and Components
The news feature is primarily implemented through the NewsSection React component and a similar data-fetching logic on the portal page.
NewsSection Component
The NewsSection component is a self-contained module that fetches and renders news for a specific stock ticker.
- Props: It accepts a single prop,
ticker, to specify which stock's news to fetch. - State Management: The component manages its own state for loading status, errors, and the fetched news articles using
useStatehooks. - Data Fetching: An asynchronous
fetchNewsfunction is triggered by auseEffecthook whenever thetickerprop changes. - UI: It renders a list of news articles using the
Cardcomponent. It also displays aSpinnerduring data fetching or an error message if the fetch fails.
Sources: client/src/components/NewsSection/index.tsx:28-95
Portal Page News
The /portal page implements a similar news-fetching mechanism directly within the page component. It fetches general news articles (not tied to a specific ticker) and displays them in a list format.
- Data Fetching: The
fetchNewsArticlesfunction on this page calls the Polygon API without atickerparameter to get general news. - State Management: Like
NewsSection, it usesloadingNewsanderrorstates to control the UI. - UI: It maps over the
newsArticlesstate to render each article within aCard, linking to the external article URL.
Sources: client/src/app/portal/page.tsx:49-65, 233-264
Component State Flow
The diagram below illustrates the different states of the NewsSection component.
This diagram shows the lifecycle of the news components, starting from a loading state and branching to display news, a "no news" message, or an error.
Sources: client/src/components/NewsSection/index.tsx:30-32, 63-94
Data Flow and API Integration
The feature relies on the Polygon.io REST API to fetch news data.
API Endpoint
The component constructs a request to the following Polygon API endpoint:
| Method | URL | Description |
|---|---|---|
GET | https://api.polygon.io/v2/reference/news | Fetches news articles. Can be filtered by ticker. |
The API key is retrieved from environment variables (process.env.NEXT_PUBLIC_POLYGON_API_KEY).
Sources: client/src/components/NewsSection/index.tsx:38-39, client/src/app/portal/page.tsx:51-52
Data Fetching Sequence
The following sequence diagram shows the data flow when the NewsSection component loads.
This diagram details the interaction between the component and the external API, including state updates for loading and error handling.
Sources: client/src/components/NewsSection/index.tsx:34-55
Data Structures
The feature uses specific TypeScript interfaces to type the data received from the Polygon API.
NewsArticle Interface
This interface defines the structure of a single news article object.
| Field | Type | Description |
|---|---|---|
id | string | Unique identifier for the article. |
title | string | The headline of the article. |
article_url | string | URL to the original article. |
published_utc | string | The publication timestamp in UTC. |
author | string | The author of the article. |
description | string | A short summary or description of the article. |
image_url | string | URL for a relevant image. |
publisher | object | An object containing details about the publisher. |
Sources: client/src/components/NewsSection/index.tsx:8-20, client/src/app/portal/page.tsx:16-22
NewsResponse Interface
This interface defines the top-level structure of the API response.
| Field | Type | Description |
|---|---|---|
results | NewsArticle[] | An array of news article objects. |
status | string | The status of the response (e.g., "OK"). |
error | string (optional) | An error message if the request was not successful. |
Sources: client/src/components/NewsSection/index.tsx:22-26
UI and Rendering
The news articles are rendered as a list of Card components.
Ticker-Specific News (NewsSection)
On the /quote/[ticker] page, each news card displays:
- Author and formatted publication date.
- Article title.
- Article description.
- A thumbnail image, if available.
The entire card is a hyperlink to the original article. The publication date is formatted using toLocaleString. The styling uses utility classes from Tailwind CSS, with hover effects to improve user experience.
Sources: client/src/app/quote/[ticker]/page.tsx:173, client/src/components/NewsSection/index.tsx:70-91
General News (/portal)
On the /portal page, the layout is similar but simplified:
- Article title, styled with a highlight color (
#D4FF00). - Formatted publication date, using the
date-fnslibrary. - A two-line clamped description of the article.
Sources: client/src/app/portal/page.tsx:242-258, client/package.json:13
Summary
The News Section feature is a crucial part of the Greenline application, providing users with essential, up-to-date financial news. Through the NewsSection component and a similar implementation on the portal page, it fetches data from the Polygon.io API and presents it in a clean, readable format. The feature is robust, with clear state management for loading and error conditions, ensuring a smooth user experience.