-
-
Notifications
You must be signed in to change notification settings - Fork 34
/
GlossaryPage.js
63 lines (53 loc) · 2.05 KB
/
GlossaryPage.js
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
import React, {Component} from "react";
import "./GlossaryPage.css"
import { Search } from "../common/index";
import { Link } from "react-router-dom";
import glossarioLogo from '../../../assets/images/glossario-logo.svg';
import terms from '../../lib/data';
import SearchResults from "./results/SearchResults";
const DayPhrase = ({ entry }) => {
return (
<span className={"glossary__day-phrase"}>
Você sabe o que é <Link className="emphasis pointer-hover light-accent lighter-hover" to={`/${entry}`}>{ entry }</Link>?
</span>)
};
class GlossaryPage extends Component {
constructor(props) {
super(props);
}
handleAcronymChange = (selected) => {
this.props.history.push(`/${selected}`);
};
getRandomEntry = () => {
const entries = Object.keys(terms);
const index = Math.floor(Math.random() * entries.length);
return entries[index];
};
getTerm = () => this.props.match.params.term;
isSearchEmpty = () => {
return this.getTerm() === undefined;
};
render() {
const randomEntry = this.getRandomEntry();
const glossaryContainerClass = this.isSearchEmpty() ? "glossary__container--has-not-search" : "glossary__container--has-search";
return (
<div className={`glossary__container ${glossaryContainerClass}`}>
<div className={"glossary__search-tools"}>
<Link to={""} className={"glossary__logo"}>
<img src={glossarioLogo} />
</Link>
<Search className={"glossary__search"}
items={Object.keys(terms).sort()}
handleSelect={this.handleAcronymChange}/>
{this.isSearchEmpty() && (
<DayPhrase entry={randomEntry}/>
)}
</div>
{!this.isSearchEmpty() && (
<SearchResults term={this.getTerm()}/>
)}
</div>
);
}
}
export default GlossaryPage;