answer/ui/src/pages/Search/index.tsx at 34bbd5713bbfd6cc103e4b7589ee3789d3332f50 · apache/answer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import { Row, Col, ListGroup } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import { useSearchParams } from 'react-router-dom';
import { useEffect, useState } from 'react';

import { usePageTags, useCaptchaModal } from '@/hooks';
import { Pagination } from '@/components';
import { getSearchResult } from '@/services';
import type { SearchParams, SearchRes } from '@/common/interface';

import {
  Head,
  SearchHead,
  SearchItem,
  Tips,
  Empty,
  ListLoader,
} from './components';

const Index = () => {
  const { t } = useTranslation('translation');
  const [searchParams] = useSearchParams();
  const page = searchParams.get('page') || 1;
  const q = searchParams.get('q') || '';
  const order = searchParams.get('order') || 'active';
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState<SearchRes>({
    count: 0,
    list: [],
    extra: null,
  });
  const { count = 0, list = [], extra = null } = data || {};

  const searchCaptcha = useCaptchaModal('search');

  const doSearch = () => {
    setIsLoading(true);
    const params: SearchParams = {
      q,
      order,
      page: Number(page),
      size: 20,
    };

    const captcha = searchCaptcha.getCaptcha();
    if (captcha?.verify) {
      params.captcha_id = captcha.captcha_id;
      params.captcha_code = captcha.captcha_code;
    }

    getSearchResult(params)
      .then(async (resp) => {
        await searchCaptcha.close();
        setData(resp);
      })
      .catch((err) => {
        if (err.isError) {
          searchCaptcha.handleCaptchaError(err.list);
        }
      })
      .finally(() => {
        setIsLoading(false);
      });
  };

  useEffect(() => {
    searchCaptcha.check(() => {
      doSearch();
    });
  }, [q, order, page]);

  let pageTitle = t('search', { keyPrefix: 'page_title' });
  if (q) {
    pageTitle = `${t('posts_containing', { keyPrefix: 'page_title' })} '${q}'`;
  }
  usePageTags({
    title: pageTitle,
  });

  return (
    <Row className="pt-4 mb-5">
      <Col className="answer_search-result-list page-main flex-auto">
        <Head data={extra} />
        <SearchHead sort={order} count={count} />
        <ListGroup className="rounded-0 mb-5">
          {isLoading ? (
            <ListLoader />
          ) : (
            list?.map((item) => {
              return <SearchItem key={item.object.id} data={item} />;
            })
          )}
        </ListGroup>

        {!isLoading && !list?.length && <Empty />}

        <div className="d-flex justify-content-center">
          <Pagination
            currentPage={Number(page)}
            pageSize={20}
            totalSize={count}
          />
        </div>
      </Col>
      <Col className="page-right-side mt-4 mt-xl-0">
        <Tips />
      </Col>
    </Row>
  );
};

export default Index;