197 lines
7.8 KiB
TypeScript
197 lines
7.8 KiB
TypeScript
import { useQuery } from "@tanstack/react-query";
|
|
import { useState, useEffect, useRef } from "react";
|
|
import { Link, useSearch, useLocation } from "wouter";
|
|
import { Search, Play, FileText, ArrowLeft } from "lucide-react";
|
|
import { usePageMeta } from "@/hooks/use-page-meta";
|
|
import Header from "@/components/header";
|
|
|
|
interface SearchResult {
|
|
articles: {
|
|
id: number;
|
|
title: string;
|
|
slug: string;
|
|
excerpt: string;
|
|
coverImage: string;
|
|
category: string;
|
|
author: string;
|
|
publishedAt: string;
|
|
}[];
|
|
videos: {
|
|
guid: string;
|
|
title: string;
|
|
description: string;
|
|
thumbnail: string;
|
|
embedUrl: string;
|
|
}[];
|
|
}
|
|
|
|
export default function SearchPage() {
|
|
usePageMeta("Suche - Volksmusik & Schlager", "Durchsuchen Sie FOLX TV nach Volksmusik- und Schlager-Inhalten.");
|
|
const searchString = useSearch();
|
|
const initialQuery = new URLSearchParams(searchString).get("q") || "";
|
|
const [query, setQuery] = useState(initialQuery);
|
|
const [searchTerm, setSearchTerm] = useState(initialQuery);
|
|
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
|
|
useEffect(() => {
|
|
const q = new URLSearchParams(searchString).get("q") || "";
|
|
if (q && q !== searchTerm) {
|
|
setQuery(q);
|
|
setSearchTerm(q);
|
|
}
|
|
}, [searchString]);
|
|
|
|
const handleQueryChange = (val: string) => {
|
|
setQuery(val);
|
|
if (debounceRef.current) clearTimeout(debounceRef.current);
|
|
debounceRef.current = setTimeout(() => {
|
|
if (val.trim().length >= 2) {
|
|
setSearchTerm(val.trim());
|
|
}
|
|
}, 500);
|
|
};
|
|
|
|
const { data, isLoading } = useQuery<SearchResult>({
|
|
queryKey: ["/api/search", searchTerm],
|
|
queryFn: async () => {
|
|
if (!searchTerm || searchTerm.length < 2) return { articles: [], videos: [] };
|
|
const resp = await fetch(`/api/search?q=${encodeURIComponent(searchTerm)}`);
|
|
return resp.json();
|
|
},
|
|
enabled: searchTerm.length >= 2,
|
|
});
|
|
|
|
const [, navigate] = useLocation();
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (debounceRef.current) clearTimeout(debounceRef.current);
|
|
if (query.trim().length >= 2) {
|
|
setSearchTerm(query.trim());
|
|
}
|
|
};
|
|
|
|
const totalResults = (data?.articles?.length || 0) + (data?.videos?.length || 0);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background" data-testid="page-search">
|
|
<Header />
|
|
<main className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<Link href="/">
|
|
<button className="flex items-center gap-1 text-muted-foreground hover:text-foreground text-sm mb-4 transition-colors" data-testid="link-back-home">
|
|
<ArrowLeft className="w-4 h-4" />
|
|
Zurück
|
|
</button>
|
|
</Link>
|
|
|
|
<form onSubmit={handleSubmit} className="mb-6" data-testid="form-search">
|
|
<div className="relative">
|
|
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
|
|
<input
|
|
type="text"
|
|
value={query}
|
|
onChange={(e) => handleQueryChange(e.target.value)}
|
|
placeholder="Artikel, Videos, Künstler suchen..."
|
|
className="w-full pl-12 pr-4 py-3 bg-card border border-card-border rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary text-base"
|
|
autoFocus
|
|
data-testid="input-search"
|
|
/>
|
|
</div>
|
|
</form>
|
|
|
|
{searchTerm.length >= 2 && (
|
|
<p className="text-muted-foreground text-sm mb-4" data-testid="text-result-count">
|
|
{isLoading ? "Suche läuft..." : `${totalResults} Ergebnis${totalResults !== 1 ? "se" : ""} für "${searchTerm}"`}
|
|
</p>
|
|
)}
|
|
|
|
{isLoading && (
|
|
<div className="space-y-3">
|
|
{Array.from({ length: 4 }).map((_, i) => (
|
|
<div key={i} className="h-24 bg-card rounded-lg animate-pulse" />
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{data && data.articles.length > 0 && (
|
|
<div className="mb-8">
|
|
<h2 className="text-lg font-bold text-foreground mb-3 flex items-center gap-2" data-testid="heading-articles">
|
|
<FileText className="w-5 h-5 text-primary" />
|
|
Artikel ({data.articles.length})
|
|
</h2>
|
|
<div className="space-y-3">
|
|
{data.articles.map((article) => (
|
|
<Link key={article.id} href={`/article/${article.slug}`}>
|
|
<div className="flex gap-4 bg-card border border-card-border rounded-lg p-3 hover:border-primary/50 transition-colors cursor-pointer" data-testid={`search-article-${article.id}`}>
|
|
{article.coverImage && (
|
|
<img
|
|
src={article.coverImage}
|
|
alt={article.title}
|
|
className="w-24 h-24 sm:w-32 sm:h-20 object-cover rounded-md flex-shrink-0"
|
|
/>
|
|
)}
|
|
<div className="flex-1 min-w-0">
|
|
<span className="text-xs text-primary font-medium">{article.category}</span>
|
|
<h3 className="text-sm font-bold text-card-foreground line-clamp-2 mt-0.5">{article.title}</h3>
|
|
<p className="text-xs text-muted-foreground line-clamp-2 mt-1">{article.excerpt}</p>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{data && data.videos.length > 0 && (
|
|
<div className="mb-8">
|
|
<h2 className="text-lg font-bold text-foreground mb-3 flex items-center gap-2" data-testid="heading-videos">
|
|
<Play className="w-5 h-5 text-primary" />
|
|
Videos ({data.videos.length})
|
|
</h2>
|
|
<div className="space-y-3">
|
|
{data.videos.map((video) => (
|
|
<a
|
|
key={video.guid}
|
|
href={video.embedUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex gap-4 bg-card border border-card-border rounded-lg p-3 hover:border-primary/50 transition-colors cursor-pointer"
|
|
data-testid={`search-video-${video.guid}`}
|
|
>
|
|
<div className="relative w-24 h-24 sm:w-32 sm:h-20 flex-shrink-0">
|
|
<img
|
|
src={video.thumbnail}
|
|
alt={video.title}
|
|
className="w-full h-full object-cover rounded-md"
|
|
/>
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="w-8 h-8 rounded-full bg-primary/80 flex items-center justify-center">
|
|
<Play className="w-4 h-4 text-white fill-white" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<span className="text-xs text-primary font-medium">Video</span>
|
|
<h3 className="text-sm font-bold text-card-foreground line-clamp-2 mt-0.5">{video.title}</h3>
|
|
{video.description && (
|
|
<p className="text-xs text-muted-foreground line-clamp-2 mt-1">{video.description}</p>
|
|
)}
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{data && totalResults === 0 && searchTerm.length >= 2 && !isLoading && (
|
|
<div className="text-center py-12" data-testid="text-no-results">
|
|
<Search className="w-12 h-12 text-muted-foreground mx-auto mb-3" />
|
|
<p className="text-muted-foreground">Keine Ergebnisse für "{searchTerm}" gefunden.</p>
|
|
<p className="text-muted-foreground text-sm mt-1">Versuchen Sie einen anderen Suchbegriff.</p>
|
|
</div>
|
|
)}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|