import { useState, useEffect } from 'react'; // Fake API - simulates network delay const LANGUAGES = [ { id: 1, name: 'JavaScript', description: 'Dynamic programming language for web development' }, { id: 2, name: 'TypeScript', description: 'Typed superset of JavaScript' }, { id: 3, name: 'Python', description: 'General-purpose programming language' }, { id: 4, name: 'Java', description: 'Object-oriented programming language' }, { id: 5, name: 'Rust', description: 'Systems programming language focused on safety' }, { id: 6, name: 'Go', description: 'Statically typed language by Google' }, { id: 7, name: 'Ruby', description: 'Dynamic language focused on simplicity' }, { id: 8, name: 'Swift', description: 'Programming language for Apple platforms' }, { id: 9, name: 'Kotlin', description: 'Modern language for Android development' }, { id: 10, name: 'C++', description: 'High-performance systems language' }, ]; // Simulates API call with delay async function searchAPI(query, signal) { // Simulate network delay await new Promise((resolve, reject) => { const timeout = setTimeout(resolve, 500); signal?.addEventListener('abort', () => { clearTimeout(timeout); reject(new DOMException('Aborted', 'AbortError')); }); }); // Filter results const results = LANGUAGES.filter(lang => lang.name.toLowerCase().includes(query.toLowerCase()) || lang.description.toLowerCase().includes(query.toLowerCase()) ); return results; } export default function App() { const [query, setQuery] = useState(''); const [results, setResults] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); // TODO: Task 1 - Implement debounced search effect // Requirements: // - Only search when query has 2+ characters // - Debounce: wait 300ms after user stops typing // - Show loading state while searching // - Handle errors gracefully // - Use AbortController to cancel pending requests useEffect(() => { // If query is too short, clear results and return if (query.length < 2) { setResults([]); setError(null); return; } // TODO: Set up debounce timer and AbortController // Hint: Create AbortController for fetch cancellation // Hint: Use setTimeout for debouncing // Hint: Return cleanup function that clears timeout and aborts }, [query]); return (

Programming Language Search

Type to search (min 2 characters)

{/* TODO: Task 2 - Create controlled search input */}

{/* TODO: Task 3 - Show loading spinner when loading */} {loading && Searching...}

{/* Error display */} {error && (

Error: {error}

)} {/* TODO: Task 4 - Display search results */}

{/* Show message when no results */} {/* Map over results and display each */} {/* Highlight matching text in results */}

); } // TODO: Task 5 - Create SearchResult component // Props: result (object with name, description), query (string) // Should highlight the matching portion of text function SearchResult({ result, query }) { // Implement highlighting function const highlightMatch = (text, query) => { // TODO: Split text at query match and wrap match in // Hint: Use text.toLowerCase().indexOf(query.toLowerCase()) // Return array of text parts with around match return text; }; return (

{highlightMatch(result.name, query)}

{highlightMatch(result.description, query)}

); }