Add search functionality to find articles and media outlets
Implements a search feature by adding a search modal, API endpoint, and storage logic for querying articles and media outlets. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/gVirbWH
This commit is contained in:
kimjaehyeon0101
220
client/src/components/SearchModal.tsx
Normal file
220
client/src/components/SearchModal.tsx
Normal file
@ -0,0 +1,220 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Search, X } from "lucide-react";
|
||||
import { Link } from "wouter";
|
||||
import type { MediaOutlet, Article } from "@shared/schema";
|
||||
|
||||
interface SearchModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
interface SearchResults {
|
||||
outlets: MediaOutlet[];
|
||||
articles: Article[];
|
||||
}
|
||||
|
||||
export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [debouncedQuery, setDebouncedQuery] = useState("");
|
||||
|
||||
console.log("SearchModal rendered with isOpen:", isOpen);
|
||||
|
||||
// Debounce search query
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedQuery(searchQuery);
|
||||
}, 300);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchQuery]);
|
||||
|
||||
const { data: searchResults, isLoading } = useQuery<SearchResults>({
|
||||
queryKey: ["/api/search", debouncedQuery],
|
||||
queryFn: async () => {
|
||||
if (!debouncedQuery.trim()) {
|
||||
return { outlets: [], articles: [] };
|
||||
}
|
||||
const res = await fetch(`/api/search?q=${encodeURIComponent(debouncedQuery)}`);
|
||||
if (!res.ok) {
|
||||
throw new Error(`${res.status}: ${res.statusText}`);
|
||||
}
|
||||
return res.json();
|
||||
},
|
||||
enabled: !!debouncedQuery.trim(),
|
||||
});
|
||||
|
||||
const totalResults = (searchResults?.outlets.length || 0) + (searchResults?.articles.length || 0);
|
||||
|
||||
const handleClose = () => {
|
||||
setSearchQuery("");
|
||||
setDebouncedQuery("");
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleLinkClick = () => {
|
||||
handleClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={handleClose}>
|
||||
<DialogContent className="max-w-2xl max-h-[80vh] p-0 overflow-hidden">
|
||||
<DialogTitle className="sr-only">Search Articles and Media Outlets</DialogTitle>
|
||||
{/* Search Header */}
|
||||
<div className="flex items-center p-4 border-b">
|
||||
<div className="relative flex-1 mr-4">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search articles..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-10 pr-4 border-2 border-blue-200 focus:border-blue-400"
|
||||
data-testid="search-modal-input"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="p-2 hover:bg-gray-100 rounded-full"
|
||||
data-testid="search-modal-close"
|
||||
>
|
||||
<X className="h-5 w-5 text-gray-500" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search Results */}
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
{!debouncedQuery.trim() ? (
|
||||
/* Empty State */
|
||||
<div className="text-center py-12 text-gray-500">
|
||||
<p>Start typing to search articles and outlets</p>
|
||||
</div>
|
||||
) : isLoading ? (
|
||||
/* Loading State */
|
||||
<div className="space-y-4">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="animate-pulse">
|
||||
<div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
|
||||
<div className="h-3 bg-gray-200 rounded w-1/2"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : totalResults === 0 ? (
|
||||
/* No Results */
|
||||
<div className="text-center py-12 text-gray-500">
|
||||
<p>No results found for "{debouncedQuery}"</p>
|
||||
<p className="text-sm mt-2">Try a different search term</p>
|
||||
</div>
|
||||
) : (
|
||||
/* Search Results */
|
||||
<>
|
||||
<div className="mb-4 text-sm text-gray-500">
|
||||
{totalResults} results found
|
||||
</div>
|
||||
|
||||
{/* Outlets Section */}
|
||||
{searchResults && searchResults.outlets.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<h3 className="text-sm font-semibold text-gray-700 mb-3">
|
||||
Outlets ({searchResults.outlets.length})
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{searchResults.outlets.map((outlet) => (
|
||||
<Link
|
||||
key={outlet.id}
|
||||
href={`/media/${outlet.slug}`}
|
||||
onClick={handleLinkClick}
|
||||
data-testid={`search-outlet-${outlet.id}`}
|
||||
>
|
||||
<div className="flex items-center space-x-3 p-3 hover:bg-gray-50 rounded-lg border cursor-pointer">
|
||||
<div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden">
|
||||
{outlet.imageUrl ? (
|
||||
<img
|
||||
src={outlet.imageUrl}
|
||||
alt={outlet.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<span className="text-gray-600 font-medium text-sm">
|
||||
{outlet.name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center space-x-2 mb-1">
|
||||
<h4 className="font-medium text-gray-900 truncate">
|
||||
{outlet.name}
|
||||
</h4>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{outlet.category}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 truncate">
|
||||
{outlet.description || "Media Outlet"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Articles Section */}
|
||||
{searchResults && searchResults.articles.length > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-700 mb-3">
|
||||
Articles ({searchResults.articles.length})
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{searchResults.articles.map((article) => (
|
||||
<Link
|
||||
key={article.id}
|
||||
href={`/articles/${article.slug}`}
|
||||
onClick={handleLinkClick}
|
||||
data-testid={`search-article-${article.id}`}
|
||||
>
|
||||
<div className="flex items-start space-x-3 p-3 hover:bg-gray-50 rounded-lg border cursor-pointer">
|
||||
{article.imageUrl && (
|
||||
<div className="w-16 h-12 rounded bg-gray-100 overflow-hidden flex-shrink-0">
|
||||
<img
|
||||
src={article.imageUrl}
|
||||
alt={article.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="font-medium text-gray-900 line-clamp-2 mb-1">
|
||||
{article.title}
|
||||
</h4>
|
||||
<p className="text-sm text-gray-500 line-clamp-2">
|
||||
{article.excerpt || ""}
|
||||
</p>
|
||||
{article.publishedAt && (
|
||||
<p className="text-xs text-gray-400 mt-1">
|
||||
{new Date(article.publishedAt).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@ -5,12 +5,14 @@ import { Search, Settings, User, LogOut } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import MainContent from "@/components/MainContent";
|
||||
import LoginModal from "@/components/LoginModal";
|
||||
import SearchModal from "@/components/SearchModal";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { queryClient } from "@/lib/queryClient";
|
||||
|
||||
export default function Home() {
|
||||
const { user, isAuthenticated } = useAuth();
|
||||
const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
|
||||
const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
|
||||
const { toast } = useToast();
|
||||
|
||||
const handleLogout = async () => {
|
||||
@ -58,13 +60,25 @@ export default function Home() {
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||||
<div
|
||||
className="relative cursor-pointer"
|
||||
onClick={() => {
|
||||
console.log("Search div clicked, opening modal...");
|
||||
setIsSearchModalOpen(true);
|
||||
}}
|
||||
data-testid="search-container"
|
||||
>
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search the website"
|
||||
className="w-80 pl-10 bg-gray-50 border-gray-200"
|
||||
className="w-80 pl-10 bg-gray-50 border-gray-200 cursor-pointer"
|
||||
data-testid="input-search"
|
||||
readOnly
|
||||
onClick={() => {
|
||||
console.log("Search input clicked, opening modal...");
|
||||
setIsSearchModalOpen(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -126,6 +140,12 @@ export default function Home() {
|
||||
isOpen={isLoginModalOpen}
|
||||
onClose={() => setIsLoginModalOpen(false)}
|
||||
/>
|
||||
|
||||
{/* Search Modal */}
|
||||
<SearchModal
|
||||
isOpen={isSearchModalOpen}
|
||||
onClose={() => setIsSearchModalOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user