forked from xivanalysis/xivanalysis
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ReportSearch.tsx
72 lines (63 loc) · 1.93 KB
/
ReportSearch.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
import {t} from '@lingui/macro'
import {Trans} from '@lingui/react'
import NormalisedMessage from 'components/ui/NormalisedMessage'
import {action, observable} from 'mobx'
import {observer} from 'mobx-react'
import React from 'react'
import {RouteComponentProps, withRouter, Redirect} from 'react-router-dom'
import {SearchHandlerResult} from 'reportSources'
import {Button, Input, InputOnChangeData} from 'semantic-ui-react'
import {parseInput} from './parseInput'
import styles from './ReportSearch.module.css'
const DEFAULT_REASON = t('core.home.report-search.unknown-query-error')`An unknown error occured when parsing the provided query.`
@observer
class ReportSearch extends React.Component<RouteComponentProps> {
@observable.ref private value = ''
@observable.ref private result: SearchHandlerResult = {valid: false}
@action.bound
private onChange(event: React.ChangeEvent, data: InputOnChangeData) {
this.value = data.value
// 'aint nobody got time to click a button.
this.onSearch()
}
@action.bound
private onSearch() {
this.result = parseInput(this.value)
}
override render() {
if (this.result.valid) {
return <Redirect to={this.result.path}/>
}
const hasErrors = !this.result.valid && this.value !== ''
const reason = this.result.valid
? undefined
: this.result.reason
return <>
<strong>
{hasErrors ? (
<span className="text-error">
<NormalisedMessage message={reason ?? DEFAULT_REASON}/>
</span>
) : (
<Trans id="core.home.paste-url">
Paste your log URL to get started
</Trans>
)}
</strong>
<Input
type="text"
placeholder="https://www.fflogs.com/reports/..."
action={(
<Button onClick={this.onSearch} negative={hasErrors}>
<Trans id="core.home.analyse">Analyse</Trans>
</Button>
)}
onChange={this.onChange}
className={styles.input}
inverted
error={hasErrors}
/>
</>
}
}
export default withRouter(ReportSearch)