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

.replit

@@ -22,6 +22,10 @@ externalPort = 3002
 localPort = 37531
 externalPort = 3001
 
+[[ports]]
+localPort = 42459
+externalPort = 3003
+
 [[ports]]
 localPort = 43349
 externalPort = 3000

client/src/components/SearchModal.tsx

@@ -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>
+  );
+}

client/src/pages/Home.tsx

@@ -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>
   );
 }

server/routes.ts

@@ -354,6 +354,23 @@ export async function registerRoutes(app: Express): Promise<Server> {
     }
   });
 
+  // Search routes
+  app.get('/api/search', async (req, res) => {
+    try {
+      const { q } = req.query;
+      
+      if (!q || typeof q !== 'string' || q.trim().length === 0) {
+        return res.json({ outlets: [], articles: [] });
+      }
+
+      const results = await storage.search(q.trim());
+      res.json(results);
+    } catch (error) {
+      console.error("Error performing search:", error);
+      res.status(500).json({ message: "Failed to perform search" });
+    }
+  });
+
   const httpServer = createServer(app);
   return httpServer;
 }

server/storage.ts

@@ -82,6 +82,12 @@ export interface IStorage {
     liveAuctions: number;
     totalRevenue: number;
   }>;
+  
+  // Search operations
+  search(query: string): Promise<{
+    outlets: MediaOutlet[];
+    articles: Article[];
+  }>;
 }
 
 export class DatabaseStorage implements IStorage {
@@ -381,6 +387,44 @@ export class DatabaseStorage implements IStorage {
       totalRevenue: revenueSum.sum
     };
   }
+
+  // Search operations
+  async search(query: string): Promise<{
+    outlets: MediaOutlet[];
+    articles: Article[];
+  }> {
+    const searchTerm = query.toLowerCase();
+    
+    // Search media outlets
+    const foundOutlets = await db
+      .select()
+      .from(mediaOutlets)
+      .where(eq(mediaOutlets.isActive, true))
+      .limit(50);
+    
+    const filteredOutlets = foundOutlets.filter(outlet => 
+      outlet.name.toLowerCase().includes(searchTerm) ||
+      (outlet.description && outlet.description.toLowerCase().includes(searchTerm))
+    ).slice(0, 10);
+    
+    // Search articles  
+    const foundArticles = await db
+      .select()
+      .from(articles)
+      .orderBy(desc(articles.publishedAt))
+      .limit(100);
+    
+    const filteredArticles = foundArticles.filter(article => 
+      article.title.toLowerCase().includes(searchTerm) ||
+      (article.content && article.content.toLowerCase().includes(searchTerm)) ||
+      (article.excerpt && article.excerpt.toLowerCase().includes(searchTerm))
+    ).slice(0, 20);
+    
+    return {
+      outlets: filteredOutlets,
+      articles: filteredArticles
+    };
+  }
 }
 
 export const storage = new DatabaseStorage();