Feature/media page filters #738
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit enhances the Media Page by adding functionality to filter media items by type and year, and to search by keywords. Key improvements include: - Added filter dropdowns for 'Media Type' and 'Year' to `src/pages/media.tsx`. - Implemented a search input field for keyword searching across title, description, and publication. - Developed client-side logic to filter media items based on the selected criteria. - Dynamically populates filter dropdown options from the available media items, with years sorted descending and media types sorted alphabetically. - Added a 'Reset' button to clear all active filters and search terms. - Refined the styling of the filter controls section for better visual grouping and user experience, ensuring theme consistency. - Included comprehensive tests in `__tests__/pages/media.tests.tsx` to cover the new filtering and searching capabilities, ensuring robustness and easier maintenance. These enhancements significantly improve the usability of the Media Page, allowing users to more easily find specific media mentions.
…date media data structure
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds a new Media section, complete with data fetching, UI, and tests to display and filter media items.
- Defines an
IMediatype andgetAllMediaPostsutility to load front-matter from MDX files. - Implements
MediaPagewith dropdown filters, search, reset functionality, andMediaCardUI component. - Adds sample MDX media posts, updates navigation menu, and introduces comprehensive filtering tests.
Reviewed Changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils/types.ts | Introduced IMedia interface for media item shape |
| src/lib/mdx-pages.ts | Added getAllMediaPosts to read media front-matter |
| src/pages/media.tsx | Created MediaPage with filter/search UI and getStaticProps |
| src/components/media-card/index.tsx | Built MediaCard component for rendering individual items |
| src/data/menu.ts | Added “Media” link to site navigation |
| src/data/media/*.mdx | Sample media posts for Podcast and Article entries |
| tests/pages/media.tests.tsx | Tests covering filtering by type, year, search, and reset button |
Comments suppressed due to low confidence (4)
src/pages/media.tsx:177
getStaticPropsreturns alayoutprop, butTPropsforMediaPagedoesn’t definelayout. Add a layout type toTPropsor remove it to align with the component signature.
layout: { headerShadow: true, headerFluid: false, footerMode: "light" },
src/components/media-card/index.tsx:42
- [nitpick] For consistency, consider using the imported
Anchorcomponent for the title link instead of a raw<a>, to unify link styling and behavior.
<a href={url} target="_blank" rel="noopener noreferrer" className="hover:tw-text-primary">
tests/pages/media.tests.tsx:30
- The test mocks
getallPostsbut the module exportsgetAllMediaPosts. The mock won’t override the correct function; update the mock key togetAllMediaPosts.
jest.mock("@lib/mdx-pages", () => ({ getallPosts: () => mockGetAllPosts(), }));
src/lib/mdx-pages.ts:22
- The file list isn’t sorted, which can lead to non-deterministic ordering of media items. Consider sorting
files(e.g., alphabetically or by date) before mapping.
const files = fs.readdirSync(directory)
| }; | ||
| description?: string; | ||
| // any other fields that might come from frontmatter | ||
| [key: string]: any; // To allow for other frontmatter fields |
There was a problem hiding this comment.
The index signature using any undermines type safety. Consider using unknown or a more specific type instead of any.
Suggested change
| [key: string]: any; // To allow for other frontmatter fields | |
| [key: string]: unknown; // To allow for other frontmatter fields |
Copilot uses AI. Check for mistakes.
| type="text" | ||
| id="searchTerm" | ||
| name="searchTerm" | ||
| className="appearance-none h-12 py-3 text-base tw-mt-1 tw-block tw-w-full tw-rounded-md tw-border-gray-300 tw-py-3 tw-pl-3 tw-pr-10 focus:tw-border-primary focus:tw-outline-none focus:tw-ring-primary sm:tw-text-sm" |
There was a problem hiding this comment.
The className includes both py-3 and tw-py-3, likely a typo. Remove the unprefixed py-3 to avoid inconsistent styling.
Suggested change
| className="appearance-none h-12 py-3 text-base tw-mt-1 tw-block tw-w-full tw-rounded-md tw-border-gray-300 tw-py-3 tw-pl-3 tw-pr-10 focus:tw-border-primary focus:tw-outline-none focus:tw-ring-primary sm:tw-text-sm" | |
| className="appearance-none h-12 text-base tw-mt-1 tw-block tw-w-full tw-rounded-md tw-border-gray-300 tw-py-3 tw-pl-3 tw-pr-10 focus:tw-border-primary focus:tw-outline-none focus:tw-ring-primary sm:tw-text-sm" |
Copilot uses AI. Check for mistakes.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request introduces a new "Media" section to the application, including backend data handling, a new component for displaying media items, and comprehensive test coverage. The most important changes are grouped into the following themes:
Media Functionality Implementation:
MediaCardcomponent (src/components/media-card/index.tsx) to display individual media items with details like title, media type, publication, and date. The component supports external links and includes hover effects.getAllMediaPostsutility function insrc/lib/mdx-pages.tsto fetch and process media data from thesrc/data/mediadirectory.Media Data and Content:
vwc-bridging-the-gap-huffpost.mdxandvwc-tech-forward-podcast-2021.mdx, to thesrc/data/mediadirectory, providing sample media items for the "Media" section. [1] [2].gitkeepfile insrc/data/media/to ensure the directory is tracked by Git.Navigation and Routing:
src/data/menu.tsto add a "Media" link to the navigation menu, ensuring users can access the new section.Testing:
MediaPagein__tests__/pages/media.tests.tsx, covering functionality like filtering by media type, year, and search term, as well as resetting filters.