Search field

'use client';

import { useEffect, useRef, useState } from 'react';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { SearchField } from '@snapshot-ui/react';

export function TransactionSearch() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const q = searchParams.get('q') ?? '';
  const [text, setText] = useState(q);
  // The query the field last took from the URL, or last wrote to it.
  const [seen, setSeen] = useState(q);
  const pause = useRef<ReturnType<typeof setTimeout>>(undefined);

  // The URL changed under the field, by Back, Forward or a link: show its query.
  if (q !== seen) {
    setSeen(q);
    setText(q);
  }

  useEffect(() => () => clearTimeout(pause.current), []);

  return (
    <SearchField
      aria-label="Search transactions"
      placeholder="Search transactions"
      value={text}
      onChange={(next) => {
        setText(next);
        clearTimeout(pause.current);
        pause.current = setTimeout(() => {
          // The parameters as they are now, not as they were at the keystroke.
          const params = new URLSearchParams(window.location.search);
          if (next) params.set('q', next);
          else params.delete('q');
          const query = params.toString();
          setSeen(next);
          router.replace(query ? `${pathname}?${query}` : pathname);
        }, 300);
      }}
    />
  );
}

export function TransactionSearchOnEnter() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const q = searchParams.get('q') ?? '';
  const [text, setText] = useState(q);
  const [seen, setSeen] = useState(q);

  if (q !== seen) {
    setSeen(q);
    setText(q);
  }

  const search = (next: string) => {
    const params = new URLSearchParams(searchParams);
    if (next) params.set('q', next);
    else params.delete('q');
    const query = params.toString();
    router.push(query ? `${pathname}?${query}` : pathname);
  };

  return (
    <SearchField
      aria-label="Search transactions"
      placeholder="Search transactions"
      value={text}
      onChange={setText}
      onSubmit={search}
      onClear={() => search('')}
    />
  );
}