-
Notifications
You must be signed in to change notification settings - Fork 6
/
ResultList.tsx
111 lines (98 loc) · 2.85 KB
/
ResultList.tsx
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
import {FunctionComponent, useContext, useEffect, useState} from 'react';
import List from '@material-ui/core/List';
import {ListItem, Box, Typography, ListItemProps} from '@material-ui/core';
import {
buildResultList,
Result,
buildResultTemplatesManager,
ResultTemplatesManager,
ResultList as HeadlessResultList,
} from '@coveo/headless';
import EngineContext from '../common/engineContext';
type Template = (result: Result) => React.ReactNode;
interface FieldValueInterface {
value: string;
caption: string;
}
interface ResultListProps {
controller: HeadlessResultList;
}
function ListItemLink(props: ListItemProps<'a'>) {
return (
<ListItem {...props} button component="a">
<Typography variant="body1" color="primary">
{props.title}
</Typography>
</ListItem>
);
}
function FieldValue(props: FieldValueInterface) {
return (
<Box>
<Typography
color="textSecondary"
style={{fontWeight: 'bold'}}
variant="caption"
>
{props.caption}:
</Typography>
<Typography color="textSecondary" variant="caption">
{props.value}
</Typography>
</Box>
);
}
const ResultListRenderer: FunctionComponent<ResultListProps> = (props) => {
const {controller} = props;
const engine = useContext(EngineContext)!;
const [state, setState] = useState(controller.state);
const headlessResultTemplateManager: ResultTemplatesManager<Template> =
buildResultTemplatesManager(engine);
headlessResultTemplateManager.registerTemplates({
conditions: [],
content: (result: Result) => (
<ListItem disableGutters key={result.uniqueId}>
<Box my={2}>
<Box pb={1}>
<ListItemLink
disableGutters
title={result.title}
href={result.clickUri}
/>
</Box>
{result.excerpt && (
<Box pb={1}>
<Typography color="textPrimary" variant="body2">
{result.excerpt}
</Typography>
</Box>
)}
{result.raw.source && (
<FieldValue caption="Source" value={result.raw.source} />
)}
{result.raw.objecttype && (
<FieldValue caption="Object Type" value={result.raw.objecttype} />
)}
</Box>
</ListItem>
),
});
useEffect(
() => controller.subscribe(() => setState(controller.state)),
[controller]
);
return (
<List>
{state.results.map((result: Result) => {
const template = headlessResultTemplateManager.selectTemplate(result);
return template ? template(result) : null;
})}
</List>
);
};
const ResultList = () => {
const engine = useContext(EngineContext)!;
const controller = buildResultList(engine);
return <ResultListRenderer controller={controller} />;
};
export default ResultList;