frontend2/src/components/logs/LogList.tsx

import React, { useContext, useEffect } from "react";

import LogListContext from "../../hooks/LogListContext";

export default function LogList() {
  const {headers, filter, updateFilter} = useContext(LogListContext);

  useEffect(() => {
    const timeout = setTimeout(() => {
      updateFilter({...filter, limit: 10});
    }, 3000);

    return () => clearTimeout(timeout);
  }, [updateFilter]);

  return (
    <>
      <ol>
        {headers.map(l => <li key={l.shortId}>{l.title || `${l.channelName} — ${l.date}`}</li>)}
      </ol>
      <pre>{JSON.stringify(filter, null, 4)}</pre>
    </>
  );
}