jimmy/events (#6)

Co-authored-by: Jimmy Vargo <james@ayo.tokyo>
Reviewed-on: ayo/website#6

home/src/blog_entry.jsx

@@ -0,0 +1,73 @@
+`use strict`
+import { Component } from 'inferno'
+import { connect } from 'inferno-redux'
+
+import { fetchBlogList, fetchBlogEntry } from './actions'
+
+import './blog_entry.scss'
+
+
+class BlogEntryComponent extends Component
+{
+	constructor(props) {
+		super(props)
+		this.entry_date = this.props.match.params.entry_date
+		this.entry_name = this.props.match.params.entry_name
+	}
+
+	componentDidMount()
+	{
+		if(this.props.blog_list.length === 0)
+		{
+			this.props.fetchBlogList()
+		}
+		if(this.props.blog_entry_name !== this.entry_name)
+		{
+			this.props.fetchBlogEntry(this.entry_date, this.entry_name)
+		}
+	}
+
+	render()
+	{
+		return [
+			<div className="blog-entry"
+				dangerouslySetInnerHTML={this.props.blog_entry_name === this.entry_name ?
+					{__html: this.props.blog_entry} : null}>
+			</div>,
+			<div id="image-container" onclick={() => close_image()}>
+				<img id="image-view"/>
+			</div>,
+			<script>
+				{`
+				function open_image(src)
+				{
+					document.getElementById("image-view").src = src
+					document.getElementById("image-container").style.display = 'flex'
+				}
+
+				function close_image()
+				{
+					document.getElementById("image-container").style.display = 'none'
+				}`}
+			</script>
+		]
+	}
+}
+
+
+const mapStateToProps = state => ({
+	strings: state.lang.strings,
+	blog_list: state.blog.list,
+	blog_entry: state.blog.entry,
+	blog_entry_name: state.blog.entry_name
+})
+
+const mapDispatchToProps = dispatch => ({
+	fetchBlogList: () => dispatch(fetchBlogList()),
+	fetchBlogEntry: (entry_date, entry_name) => dispatch(fetchBlogEntry(entry_date, entry_name))
+})
+
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(BlogEntryComponent)