+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 | + + + + +9x +9x +9x +9x + +9x +1x +1x + + +1x +1x + + + + + +1x +1x + + + +9x + + + + + + + + + + + + + + + + +3x + + + + + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + | import React, { useState } from 'react';
+import './App.css';
+import SearchBar from './components/SearchBar';
+
+function App() {
+ const [searchResults, setSearchResults] = useState([]);
+ const [isSearching, setIsSearching] = useState(false);
+ const [hasSearched, setHasSearched] = useState(false);
+ const [featureNotification, setFeatureNotification] = useState('');
+
+ const handleSearch = (searchTerm) => {
+ setIsSearching(true);
+ setHasSearched(true);
+
+ // Simulating an API call with setTimeout
+ setTimeout(() => {
+ const mockResults = [
+ { id: 1, title: `${searchTerm} X`, price: "$499.99", site: "Alibaba" },
+ { id: 2, title: `${searchTerm} X`, price: "$475.50", site: "eBay" },
+ { id: 3, title: `${searchTerm} X`, price: "$510.00", site: "AliExpress" }
+ ];
+
+ setSearchResults(mockResults);
+ setIsSearching(false);
+ }, 1000);
+ };
+
+ return (
+ <div className="App">
+ <h1>Cheaper</h1>
+ <p>Why Pay More? Let Cheaper Score!</p>
+
+ <SearchBar onSearch={handleSearch} />
+
+ {isSearching && (
+ <div className="loading">Searching for the best prices...</div>
+ )}
+
+ {!isSearching && hasSearched && (
+ <div className="results-container">
+ <h2>Search Results</h2>
+
+ {searchResults.length > 0 ? (
+ searchResults.map(result => (
+ <div key={result.id} className="result-item">
+ <div>
+ <div className="result-title">{result.title}</div>
+ <div className="result-site">{result.site}</div>
+ </div>
+ <div className="result-price">{result.price}</div>
+ </div>
+ ))
+ ) : (
+ <div className="no-results">No results found. Try another search term.</div>
+ )}
+ </div>
+ )}
+
+ <button
+ onClick={() => setFeatureNotification('Comparison feature coming in our next update!')}
+ aria-live="polite"
+ >
+ Compare Across More Sites
+ </button>
+
+ {featureNotification && (
+ <div className="feature-notification">
+ {featureNotification}
+ <button
+ onClick={() => setFeatureNotification('')}
+ aria-label="Close notification"
+ >
+ ×
+ </button>
+ </div>
+ )}
+ </div>
+ );
+}
+
+export default App; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| App.js | +
+
+ |
+ 93.33% | +14/15 | +88.88% | +8/9 | +83.33% | +5/6 | +93.33% | +14/15 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 | + + + + +4x +4x +4x + +4x + + + + + + + + + + + + + + + + + +4x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import React, { useState } from 'react';
+import './App.css';
+import SearchBar from './components/SearchBar';
+
+function App() {
+ const [searchResults, setSearchResults] = useState([]);
+ const [isSearching, setIsSearching] = useState(false);
+ const [hasSearched, setHasSearched] = useState(false);
+
+ const handleSearch = (searchTerm) => {
+ setIsSearching(true);
+ setHasSearched(true);
+
+ // Simulating an API call with setTimeout
+ setTimeout(() => {
+ // Mock data - in a real app, this would come from your API
+ const mockResults = [
+ { id: 1, title: "Smartphone X", price: "$499.99", site: "Alibaba" },
+ { id: 2, title: "Smartphone X", price: "$475.50", site: "eBay" },
+ { id: 3, title: "Smartphone X", price: "$510.00", site: "Aliexpress" }
+ ];
+
+ setSearchResults(mockResults);
+ setIsSearching(false);
+ }, 1000);
+ };
+
+ return (
+ <div className="App">
+ <h1>Cheaper</h1>
+ <p>Why Pay More? Let Cheaper Score!</p>
+
+ <SearchBar onSearch={handleSearch} />
+
+ {isSearching && (
+ <div className="loading">Searching for the best prices...</div>
+ )}
+
+ {!isSearching && hasSearched && (
+ <div className="results-container">
+ <h2>Search Results</h2>
+
+ {searchResults.length > 0 ? (
+ searchResults.map(result => (
+ <div key={result.id} className="result-item">
+ <div>
+ <div className="result-title">{result.title}</div>
+ <div className="result-site">{result.site}</div>
+ </div>
+ <div className="result-price">{result.price}</div>
+ </div>
+ ))
+ ) : (
+ <div className="no-results">No results found. Try another search term.</div>
+ )}
+ </div>
+ )}
+
+ <button onClick={() => alert('Feature coming soon!')}>
+ Compare Across More Sites
+ </button>
+ </div>
+ );
+}
+
+export default App; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| background.js | +
+
+ |
+ 0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 | + + +9x + +9x +2x +2x +1x + + + +9x + + + + + + + +1x + + + + + + + + + + | import React, { useState } from 'react';
+
+function SearchBar({ onSearch }) {
+ const [searchTerm, setSearchTerm] = useState('');
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ if (searchTerm.trim()) {
+ onSearch(searchTerm);
+ }
+ };
+
+ return (
+ <div className="search-container">
+ <form onSubmit={handleSubmit}>
+ <input
+ type="text"
+ className="search-input"
+ placeholder="Search for products..."
+ value={searchTerm}
+ onChange={(e) => setSearchTerm(e.target.value)}
+ />
+ <button type="submit" className="search-button">
+ Search
+ </button>
+ </form>
+ </div>
+ );
+}
+
+export default SearchBar; |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| SearchBar.js | +
+
+ |
+ 100% | +7/7 | +100% | +2/2 | +100% | +3/3 | +100% | +7/7 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| content.js | +
+
+ |
+ 0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| App.js | +
+
+ |
+ 38.46% | +5/13 | +42.85% | +3/7 | +20% | +1/5 | +38.46% | +5/13 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| popup.js | +
+
+ |
+ 0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 |
Find the best prices across websites!
- +Why Pay More? Let Cheaper Score! 😎
+ +Sign in to your account
++ Don't have an account?{" "} + +
+Sign up for a new account
++ Have an account?{' '} + +
+{error}
} +