apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-25 00:36:31 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #1168 from SohamBhattacharjee2003/fix/debounce-logs-message-filter

Browse source 
fix: debounce logs message filter
This commit is contained in:
Rohan Verma 2026-04-07 23:37:34 -07:00 • committed by GitHub
commit d26b986125
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 16 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

21
surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
View file

@ -44,8 +44,9 @@ import {
import { AnimatePresence, motion, type Variants } from "motion/react";
import { useParams } from "next/navigation";
import { useTranslations } from "next-intl";
import React, { useCallback, useContext, useId, useMemo, useRef, useState } from "react";
import React, { useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
import { toast } from "sonner";
import { useDebouncedValue } from "@/hooks/use-debounced-value";
import {
createLogMutationAtom,
deleteLogMutationAtom,
@ -706,6 +707,15 @@ function LogsFilters({
id: string;
}) {
const t = useTranslations("logs");
const [filterInput, setFilterInput] = useState(
(table.getColumn("message")?.getFilterValue() ?? "") as string
);
const debouncedFilter = useDebouncedValue(filterInput, 300);
useEffect(() => {
table.getColumn("message")?.setFilterValue(debouncedFilter || undefined);
}, [debouncedFilter, table]);
return (
<motion.div
className="flex flex-wrap items-center justify-start gap-3 w-full"
@ -720,22 +730,23 @@ function LogsFilters({
ref={inputRef}
className={cn(
"peer w-full sm:min-w-60 ps-9",
Boolean(table.getColumn("message")?.getFilterValue()) && "pe-9"
Boolean(filterInput) && "pe-9"
)}
value={(table.getColumn("message")?.getFilterValue() ?? "") as string}
onChange={(e) => table.getColumn("message")?.setFilterValue(e.target.value)}
value={filterInput}
onChange={(e) => setFilterInput(e.target.value)}
placeholder={t("filter_by_message")}
type="text"
/>
<div className="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80">
<ListFilter size={16} strokeWidth={2} />
</div>
{Boolean(table.getColumn("message")?.getFilterValue()) && (
{Boolean(filterInput) && (
<Button
className="absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-lg text-muted-foreground/80 hover:text-foreground"
variant="ghost"
size="icon"
onClick={() => {
setFilterInput("");
table.getColumn("message")?.setFilterValue("");
inputRef.current?.focus();
}}