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
|
import { useRouter } from 'next/router';
import { type FC, useCallback } from 'react';
import { useIntl } from 'react-intl';
import { ROUTES } from '../../../utils/constants';
import { SearchForm, type SearchFormSubmit } from '../forms';
/**
* NoResults component
*
* Renders a no results text with a search form.
*/
export const NoResults: FC = () => {
const intl = useIntl();
const router = useRouter();
const searchSubmitHandler: SearchFormSubmit = useCallback(
({ query }) => {
if (!query)
return {
messages: {
error: intl.formatMessage({
defaultMessage: 'Query must be longer than one character.',
description: 'NoResults: invalid query message',
id: 'VkfO7t',
}),
},
validator: (value) => value.query.length > 1,
};
router.push({ pathname: ROUTES.SEARCH, query: { s: query } });
return undefined;
},
[intl, router]
);
return (
<>
<p>
{intl.formatMessage({
defaultMessage: 'No results found.',
description: 'NoResults: no results',
id: '5O2vpy',
})}
</p>
<p>
{intl.formatMessage({
defaultMessage: 'Would you like to try a new search?',
description: 'NoResults: try a new search message',
id: 'DVBwfu',
})}
</p>
<SearchForm isLabelHidden onSubmit={searchSubmitHandler} />
</>
);
};
|
