aimond/sapiens-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add search functionality to find articles and media outlets

Browse Source 
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
2025-09-29 20:12:12 +00:00
parent 463f042f64
commit a80520b85f
6 changed files with 308 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
client/src/pages/Home.tsx
View File

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