blob: 0a325031e01cfe9d406807967cd0a5bafb7eb846 (
plain) (
blame)
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
|
import InfoTooltip from "@/components/ui/info-tooltip";
import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
import { TextAndMatcher } from "@hoarder/shared/searchQueryParser";
import { Matcher } from "@hoarder/shared/types/search";
export default function QueryExplainerTooltip({
parsedSearchQuery,
className,
}: {
parsedSearchQuery: TextAndMatcher & { result: string };
className?: string;
}) {
if (parsedSearchQuery.result == "invalid") {
return null;
}
const MatcherComp = ({ matcher }: { matcher: Matcher }) => {
switch (matcher.type) {
case "tagName":
return (
<TableRow>
<TableCell>
{matcher.inverse ? "Doesn't have" : "Has"} Tag
</TableCell>
<TableCell>{matcher.tagName}</TableCell>
</TableRow>
);
case "listName":
return (
<TableRow>
<TableCell>
{matcher.inverse ? "Is not in" : "Is in "} List
</TableCell>
<TableCell>{matcher.listName}</TableCell>
</TableRow>
);
case "dateAfter":
return (
<TableRow>
<TableCell>{matcher.inverse ? "Not" : ""} Created After</TableCell>
<TableCell>{matcher.dateAfter.toDateString()}</TableCell>
</TableRow>
);
case "dateBefore":
return (
<TableRow>
<TableCell>{matcher.inverse ? "Not" : ""} Created Before</TableCell>
<TableCell>{matcher.dateBefore.toDateString()}</TableCell>
</TableRow>
);
case "favourited":
return (
<TableRow>
<TableCell>Favourited</TableCell>
<TableCell>{matcher.favourited.toString()}</TableCell>
</TableRow>
);
case "archived":
return (
<TableRow>
<TableCell>Archived</TableCell>
<TableCell>{matcher.archived.toString()}</TableCell>
</TableRow>
);
case "and":
case "or":
return (
<TableRow>
<TableCell className="capitalize">{matcher.type}</TableCell>
<TableCell>
<Table>
<TableBody>
{matcher.matchers.map((m, i) => (
<MatcherComp key={i} matcher={m} />
))}
</TableBody>
</Table>
</TableCell>
</TableRow>
);
}
};
return (
<InfoTooltip className={className}>
<Table>
<TableBody>
{parsedSearchQuery.text && (
<TableRow>
<TableCell>Text</TableCell>
<TableCell>{parsedSearchQuery.text}</TableCell>
</TableRow>
)}
{parsedSearchQuery.matcher && (
<MatcherComp matcher={parsedSearchQuery.matcher} />
)}
</TableBody>
</Table>
</InfoTooltip>
);
}
|
