Search function

[levilevente]

This pull request adds a new NASA Image and Video Library search feature, including a search bar in the navigation, search results dropdown, and a dedicated detail page for selected items. It introduces new API integration, React hooks, and components for displaying and sanitizing fetched content. Supporting types and styles are also included.

New NASA Image and Video Library Search Feature

• Added a search bar to the navigation bar, enabling users to search the NASA Image and Video Library and view results in a dropdown. Selecting a result navigates to a new detail page for that item. [1] [2] [3] [4] [5] [6]

API Integration and Types

• Created src/api/nasaImageAndVideoLibrary.api.ts to handle searching, fetching assets, and metadata from the NASA Image and Video Library API.
• Defined new TypeScript types in src/types/NasaImageAndVideoLibraryType.ts for consistent handling of API responses.

Detail Page and Data Handling

• Added a new route and page component SearchItem for displaying detailed information and images for a selected NASA library item, using a custom React hook for data fetching (useNasaItem). [1] [2] [3] [4]

Content Sanitization and Styling

• Introduced SafeHtml component using dompurify to safely render HTML content from the NASA API, with associated CSS for formatting. [1] [2] [3] [4]
• Added new CSS modules for styling the search results dropdown and the item detail page. [1] [2]

Other Minor Improvements

• Cleaned up unused code in src/api/nasaEpic.api.ts and made a minor CSS adjustment to the navigation bar logo. [1] [2]
  Realted Issue: Search function #20

[levilevente]

Important that no url retrieves info based on nasa_id but it can be filtered from the search result. Now the question is how to solve that properly. from metadata endpoint maybe there can be retreieved..

[Copilot]

Pull request overview

This PR implements a search functionality that allows users to search NASA's Image and Video Library. The implementation integrates search capabilities into the navigation bar with autocomplete-style results, and provides a detailed view page for individual search items. The changes include new API integrations, custom hooks for data fetching, sanitized HTML rendering, and responsive UI components.

Key changes:

• Adds NASA Image and Video Library API integration with search, metadata, and asset retrieval endpoints
• Implements search UI in navigation bar with dropdown results display
• Creates detailed item view page with image display and sanitized HTML description rendering
• Adds DOMPurify dependency for XSS protection when rendering external HTML content

Reviewed changes

Copilot reviewed 14 out of 15 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
package.json	Adds dompurify runtime dependency and @types/dompurify dev dependency
yarn.lock	Locks dompurify@3.3.1, @types/dompurify@3.2.0, and @types/trusted-types@2.0.7
src/types/NasaImageAndVideoLibraryType.ts	Defines TypeScript interfaces for NASA Image and Video Library API response types
src/api/nasaImageAndVideoLibrary.api.ts	Creates new API module with search, asset, and metadata retrieval functions
src/hooks/useNasaItem.ts	Implements custom hook for fetching and managing NASA item data with image filtering
src/components/search/SafeHtml.tsx	Creates component to safely render HTML content using DOMPurify sanitization
src/components/search/SafeHtml.module.css	Styles for formatted HTML content with responsive link handling
src/components/search/SearchResults.tsx	Implements dropdown search results component with keyboard navigation support
src/components/search/SearchResults.module.css	Styles for search results dropdown with hover states
src/components/NavigationBar.tsx	Adds search form state management and result handling to navigation bar
src/components/NavigationBar.module.css	Adds relative positioning to search form for dropdown placement
src/pages/SearchItem.tsx	Creates detail page for displaying individual NASA library items
src/pages/SearchItem.module.css	Responsive layout styles for search item detail page
src/Root.tsx	Adds route for search item detail page
src/api/nasaEpic.api.ts	Removes commented-out code

Comments suppressed due to low confidence (2)

src/pages/SearchItem.tsx:29

• This use of variable 'loading' always evaluates to false.

                {loading ? <p>Loading...</p> : null}

src/pages/SearchItem.tsx:30

• This negation always evaluates to true.

                {!loading && image ? (

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.