Components

This directory contains the refactored components from the original monolithic App.tsx file.

Component Structure

App.tsx (Main Component)

  • Main application container
  • Manages global state (url, metadata, error, history visibility)
  • Orchestrates communication between child components
  • Handles form submission and API calls

URLForm.tsx

  • Handles URL input form
  • Manages form submission
  • Integrates with history dropdown
  • Props: url, onUrlChange, onSubmit, history-related props

MetadataTable.tsx

  • Displays metadata results in a table format
  • Handles copy-to-clipboard functionality for individual values
  • Formats JSON values with proper syntax highlighting
  • Props: metadata

ErrorMessage.tsx

  • Simple component for displaying error messages
  • Conditionally renders based on error state
  • Props: error

HistoryDropdown.tsx

  • Dropdown component for URL history
  • Handles history item selection and clearing
  • Props: isOpen, urlHistory, onHistoryItemClick, onClearHistory

Utilities

utils.ts

  • formatJSON(): Formats JSON strings/objects for display
  • copyToClipboard(): Handles copying values to clipboard

useUrlHistory.ts

  • Custom hook for managing URL history
  • Handles localStorage persistence
  • Provides addToHistory and clearHistory functions
  • Returns: { urlHistory, addToHistory, clearHistory }

Benefits of This Structure

  1. Separation of Concerns: Each component has a single responsibility
  2. Reusability: Components can be easily reused or tested independently
  3. Maintainability: Easier to modify individual features without affecting others
  4. Readability: Smaller, focused components are easier to understand
  5. Testing: Individual components can be unit tested more easily
  6. Performance: Smaller components can be optimized independently