-
Notifications
You must be signed in to change notification settings - Fork 18
/
Project.jsx
51 lines (46 loc) · 1.3 KB
/
Project.jsx
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
import React, {Component} from 'react'
import GeoPattern from 'geopattern'
import Tag from '../Tag/Tag'
import styles from './Project.css'
import ProjectLinks from '../ProjectLinks/ProjectLinks'
import store from '../../lib/state'
export default class Project extends Component {
constructor(props) {
super(props);
this.desClick = this.desClick.bind(this);
}
componentDidMount() {
let pattern = GeoPattern.generate(this.props.name, {
baseColor: '#d2f9a8' // #f0fab8
});
document.getElementsByClassName(this.props.id)[0].style.backgroundImage = pattern.toDataUrl();
}
desClick(event) {
let query = document.getElementById('search').value;
store.dispatch({type: 'PUT', data: {
search: query
}});
window.location.href = '#/' + this.props.id;
}
render() {
// tags
let tagsDOM = this.props.tags.map((t) =>
<Tag key={t} name={t}/>
);
return (
<div className={[styles.project, this.props.id].join(' ')}>
<div className={styles.projectTitle}>
{this.props.name}
<ProjectLinks {...this.props}/>
</div>
{this.props.date &&
<div className={styles.projectDate}>
{this.props.date}
</div>
}
<div className={styles.projectDesc} onClick={this.desClick}>{this.props.desc}</div>
<div className={styles.projectTags}>{tagsDOM}</div>
</div>
)
}
}