import React, { FC, useEffect } from "react" import styled from "styled-components" import { useHistory } from "react-router-dom" import ArticleTagTreeLayout from "../../component/layout/ArticleTagTreeLayout" import { usePage, useQuery } from "../../common/Hooks" import { useRequestSearchArticles } from "../../apis/ArticleApi" import ArticleList from "../../component/article/ArticleList" import { toast } from "react-hot-toast" import CommandPalette from "./CommandPalette" const SearchPage: FC = () => { const keyword = useQuery().get('q') || '' const page = usePage() // eslint-disable-next-line @typescript-eslint/no-unused-vars const [ fetching, searchArticles, _, articles, pagination] = useRequestSearchArticles() const history = useHistory() useEffect(() => { if (keyword.length <= 1) { toast.error('keyword should be more than 2 characters') return } searchArticles(keyword, page) }, [keyword, page, searchArticles]) const onReload = () => searchArticles(keyword, page) return ( <ArticleTagTreeLayout loading={fetching}> <Keyword>Keyword: {keyword}</Keyword> <ArticleList articles={articles} pagination={pagination} onSelectPage={page => history.push(`/articles/search?q=${encodeURIComponent(keyword)}&page=${page}`)} onReload={onReload} /> <CommandPalette keyword={keyword} page={page} /> </ArticleTagTreeLayout> ) } const Keyword = styled.h1` font-size: 24px; ` export default SearchPage