feat(search-history): Letzte 10 Sucheinträge des Users persistieren (localStorage) [tsc:fail]
This commit is contained in:
parent
29b744f08d
commit
739e957d8d
@ -1,8 +1,9 @@
|
||||
{
|
||||
"completed_features": [],
|
||||
"current_feature": "rate-limiting-stub",
|
||||
"current_feature": "search-history",
|
||||
"started_at": "2026-05-23T07:42:47.919364",
|
||||
"attempted_features": [
|
||||
"invitation-flow"
|
||||
"invitation-flow",
|
||||
"rate-limiting-stub"
|
||||
]
|
||||
}
|
||||
@ -2292,3 +2292,20 @@ src/index.ts(27,25): error TS2769: No overload matches this call.
|
||||
Overload 2 of 3, '(plugin: FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
|
||||
Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
|
||||
Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTy
|
||||
- `07:45:33` **INFO** Committed feature rate-limiting-stub
|
||||
- `07:45:33` **INFO** Pushed: rc=0
|
||||
|
||||
## Phase-3 Feature: search-history (2026-05-23 07:45:33)
|
||||
|
||||
- `07:45:33` **INFO** Description: Letzte 10 Sucheinträge des Users persistieren (localStorage)
|
||||
- `07:45:33` **INFO** Generating apps/web/src/components/SearchBar.tsx (ERWEITERT — behalte bestehende SearchBar. Persistiere bei jedem Search…)
|
||||
- `07:46:28` **INFO** wrote 6439 chars in 54.9s (attempt 1)
|
||||
- `07:46:28` **INFO** Running tsc --noEmit on api…
|
||||
- `07:46:30` **WARN** tsc errors:
|
||||
src/index.ts(27,25): error TS2769: No overload matches this call.
|
||||
Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
|
||||
Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
|
||||
Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTypeProvider>, opts: { ...; }, done: (err?: Error | undefined) => void): void'.
|
||||
Overload 2 of 3, '(plugin: FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
|
||||
Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
|
||||
Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTy
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate } from '@tanstack/react-router';
|
||||
import { Search, User, Folder, Clock, X } from 'lucide-react';
|
||||
import { Search, User, Folder, Clock, X, History } from 'lucide-react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { api } from '../lib/api';
|
||||
|
||||
@ -14,11 +14,35 @@ interface SearchResult {
|
||||
export default function SearchBar() {
|
||||
const [query, setQuery] = useState('');
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [history, setHistory] = useState<string[]>([]);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
const saved = localStorage.getItem('search_history');
|
||||
if (saved) {
|
||||
try {
|
||||
setHistory(JSON.parse(saved));
|
||||
} catch (e) {
|
||||
console.error('Failed to parse search history');
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
const addToHistory = (term: string) => {
|
||||
if (!term.trim()) return;
|
||||
const updated = [term, ...history.filter((item) => item !== term)].slice(0, 10);
|
||||
setHistory(updated);
|
||||
localStorage.setItem('search_history', JSON.stringify(updated));
|
||||
};
|
||||
|
||||
const { data: results, isLoading } = useQuery({
|
||||
queryKey: ['search', query],
|
||||
queryFn: () => api.search(query),
|
||||
queryFn: async () => {
|
||||
if (query.length >= 2) {
|
||||
addToHistory(query);
|
||||
}
|
||||
return api.search(query);
|
||||
},
|
||||
enabled: query.length >= 2,
|
||||
});
|
||||
|
||||
@ -41,6 +65,11 @@ export default function SearchBar() {
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
const handleHistoryClick = (term: string) => {
|
||||
setQuery(term);
|
||||
setIsOpen(true);
|
||||
};
|
||||
|
||||
const getIcon = (type: SearchResult['type']) => {
|
||||
switch (type) {
|
||||
case 'customer': return <User className="w-4 h-4 text-purple-500" />;
|
||||
@ -74,13 +103,33 @@ export default function SearchBar() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isOpen && (query.length >= 2 || (results && results.length > 0)) && (
|
||||
{isOpen && (
|
||||
<div className="absolute top-full left-0 right-0 mt-2 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg shadow-xl z-50 overflow-hidden">
|
||||
{isLoading ? (
|
||||
{query.length === 0 ? (
|
||||
<div className="p-1">
|
||||
<div className="px-2 py-1 text-[10px] font-bold uppercase tracking-wider text-zinc-400 dark:text-zinc-500 flex items-center gap-1">
|
||||
<History className="w-3 h-3" /> Recent Searches
|
||||
</div>
|
||||
{history.length > 0 ? (
|
||||
history.map((term) => (
|
||||
<button
|
||||
key={term}
|
||||
onClick={() => handleHistoryClick(term)}
|
||||
className="w-full flex items-center gap-3 px-2 py-2 text-left text-sm rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors group"
|
||||
>
|
||||
<Search className="w-3 h-3 text-zinc-400" />
|
||||
<span className="text-zinc-600 dark:text-zinc-300">{term}</span>
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<div className="p-4 text-center text-xs text-zinc-500">No recent searches</div>
|
||||
)}
|
||||
</div>
|
||||
) : isLoading ? (
|
||||
<div className="p-4 text-center text-xs text-zinc-500">Searching...</div>
|
||||
) : results && results.length > 0 ? (
|
||||
<div className="max-h-96 overflow-y-auto p-1">
|
||||
{['customer', 'project', 'time-entry'].map((type) => {
|
||||
{(['customer', 'project', 'time-entry'] as const).map((type) => {
|
||||
const filtered = results.filter((r: SearchResult) => r.type === type);
|
||||
if (filtered.length === 0) return null;
|
||||
|
||||
@ -97,10 +146,8 @@ export default function SearchBar() {
|
||||
>
|
||||
{getIcon(result.type)}
|
||||
<div className="flex flex-col overflow-hidden">
|
||||
<span className="text-zinc-900 dark:text-zinc-100 truncate">{result.label}</span>
|
||||
{result.subtitle && (
|
||||
<span className="text-xs text-zinc-500 truncate">{result.subtitle}</span>
|
||||
)}
|
||||
<span className="text-zinc-700 dark:text-zinc-200 truncate">{result.label}</span>
|
||||
{result.subtitle && <span className="text-[11px] text-zinc-500 truncate">{result.subtitle}</span>}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
@ -109,7 +156,7 @@ export default function SearchBar() {
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-4 text-center text-sm text-zinc-500">No results found</div>
|
||||
<div className="p-4 text-center text-xs text-zinc-500">No results found</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user