как сделать панель поиска reactjs

Question

У меня есть список статей, которые отображаются на карточках. Мне нужно реализовать панель поиска для поиска статей.

В коде я создаю карту в компоненте CardArticle, чтобы ее можно было визуализировать, когда серверная часть отправляет информацию.

В бэкэнде уже есть маршрут для поиска: /v1/articles?search=${search}

Когда пользователь заходит на страницу статьи, он отображает все статьи и только после того, как он нажмет на поиск, будет произведен поиск. И когда он удалит слова из строки поиска, он вернется к отображению всех статей.

код:

export default function Articles() {
  const { data: articles } = useSWR(`/v1/articles`, fetch);

  if (!articles) {
    return (
      <div style={{ paddingTop: 90 }}>
        <Loading />
      </div>
    );
  }

  return (
    <>
      <Search>
        <span>
          <IconSearch color={theme.colorsCommon.secundary} />
        </span>
        <input placeholder="Busque por autor ou artigos" />
      </Search>

      {articles.map(article => (
        <Link to={`/articles/${article.slug}`}>
          <CardArticle key={article.guid}>
            <Image>
              <img
                src={!article ? noPhoto : verifyPhoto(article.cover_photo)}
                alt={article.title}
              />
            </Image>

            <TopCard>
              <div className="categorys">
                {article.categories.map(category => (
                  <Category key={category.id}>{category.name}</Category>
                ))}
              </div>
            </TopCard>

            <DetailsArticle>
              <div className="title">
                <span>{article.title}</span>
              </div>
            </DetailsArticle>

            <BottomCard>
              <div className="author">
                <img
                  src={
                    !article.author
                      ? noPhoto
                      : verifyPhoto(article.author.photo)
                  }
                  alt={!article.author ? [] : article.author.name}
                />
                <span>{!article.author ? [] : article.author.name}</span>
              </div>
              <div className="createDate">{formatDate(article.created_at)}</div>
            </BottomCard>
          </CardArticle>
        </Link>
      ))}
    </>
  );
}

Answer 1

export default function Articles() {
  const [search, setSearch] = useState('');
  const [debounceSearch, setdebounceSearch] = useState('');
  const { data: articles } = useSWR(
    `/v1/articles${debounceSearch ? `?search=${debounceSearch}` : ''}`,
    fetch
  );
  
  const handleOnChange = useCallback(({ target: { value } }) => {
    setSearch(value);
  }, []);
  
  useEffect(() => {
    const timerId = setTimeout(() => {
      setdebounceSearch(search);
    }, 250);
    
    return () => {
      clearTimeout(timerId);
    };
  }, [search]);

  if (!articles) {
    return (
      <div style={{ paddingTop: 90 }}>
        <Loading />
      </div>
    );
  }

  return (
    <>
      <Search>
        <span>
          <IconSearch color={theme.colorsCommon.secundary} />
        </span>
        <input
          value={search}
          placeholder="Busque por autor ou artigos"
          onChange={handleOnChange}
        />
      </Search>

      {articles.map(article => (
        <Link to={`/articles/${article.slug}`}>
          <CardArticle key={article.guid}>
            <Image>
              <img
                src={!article ? noPhoto : verifyPhoto(article.cover_photo)}
                alt={article.title}
              />
            </Image>

            <TopCard>
              <div className="categorys">
                {article.categories.map(category => (
                  <Category key={category.id}>{category.name}</Category>
                ))}
              </div>
            </TopCard>

            <DetailsArticle>
              <div className="title">
                <span>{article.title}</span>
              </div>
            </DetailsArticle>

            <BottomCard>
              <div className="author">
                <img
                  src={
                    !article.author
                      ? noPhoto
                      : verifyPhoto(article.author.photo)
                  }
                  alt={!article.author ? [] : article.author.name}
                />
                <span>{!article.author ? [] : article.author.name}</span>
              </div>
              <div className="createDate">{formatDate(article.created_at)}</div>
            </BottomCard>
          </CardArticle>
        </Link>
      ))}
    </>
  );
}