fixed #43

src/components/blog/index.js

@@ -0,0 +1,126 @@
+import React, { Component } from 'react'
+import { Firestore } from '../../api'
+
+const db = Firestore;
+
+export default class Games extends Component {
+    constructor (props) {
+        super(props);
+        this.state = {
+            loading: true,
+            posts: []
+        }
+    }
+
+    componentDidMount () {
+        let query = this.props.match.params.query !== undefined ? db.collection("blog").where("title", "==", this.props.match.params.query) : db.collection("blog");
+        query.get().then((querySnapshot) => {
+            var results = [];
+            querySnapshot.forEach((doc) => {
+                results.push(doc);
+            });
+            this.setState({
+                posts: results,
+                loading: false
+            });
+        });
+    }
+
+    render () {
+        if (this.state.loading) {
+            return (
+                <span>Loading...</span>
+            );
+        } else {
+            return (
+                <div>
+                    <ul>
+                        {this.state.posts.map((post) =>
+                            <Post key={post.id} post={post}/>
+                        )}
+                    </ul>
+                </div>
+            );
+        }
+    }
+}
+
+class Post extends Component {
+    constructor (props) {
+        super(props);
+        this.state = {
+            loading: true,
+            contents: []
+        };
+    }
+
+    componentDidMount () {
+        this.props.post.ref.collection('contents').get().then((querySnapshot) => {
+            var results = [];
+            querySnapshot.forEach((doc) => {
+                results.push(doc);
+            });
+            this.setState({
+                contents: results,
+                loading: false
+            });
+        });
+    }
+
+    render () {
+        if (this.state.loading) {
+            return (
+                <span>Loading...</span>
+            );
+        } else {
+            return (
+                <div>
+                    <h1><a style={{color: "#000000"}} href={"/blog/" + this.props.post.data()["title"]}>{this.props.post.data()["title"]}</a></h1>
+                    <div>
+                        {this.state.contents.map((content) =>
+                            <Content key={content.id} content={content}/>
+                        )}
+                    </div>
+                </div>
+            );
+        }
+    }
+}
+
+class Content extends Component {
+    constructor (props) {
+        super(props);
+        this.state = {
+            loading: true,
+            content: <span>Failed to load content</span>
+        };
+    }
+
+    componentDidMount () {
+        let data = this.props.content.data();
+        //console.log(data);
+        let type = data.type;
+        let result = <span>Failed to load content</span>;
+        if (type === "text") {
+            result = <span>{data.text}</span>;
+        } else if (type === "link") {
+            result = <a href={data.link}>{data.text}</a>;
+        }
+        this.setState({
+            content: result,
+            loading: false
+        });
+    }
+
+    render () {
+        if (this.state.loading) {
+            return (
+                <span>Loading...</span>
+            );
+        } else {
+            return (
+                this.state.content
+            );
+        }
+    }
+}

src/components/index.js

@@ -11,6 +11,7 @@ import Softwares from './software/'
 import Software from './software/Software'
 import SoftwareFrame from './software/SoftwareFrame'
 import Shop from './shop'
+import Blog from './blog'
 import About from './About'
 import SignIn from './auth/SignIn'
 import SignOut from './auth/SignOut'
@@ -61,6 +62,7 @@ export default class App extends Component {
                     <li><Link className="clickable" to="/games">Games</Link></li>
                     <li><Link className="clickable" to="/software">Software</Link></li>
                     {/* <li><Link className="clickable" to="/shop">Shop</Link></li> */}
+                    <li><Link className="clickable" to="/blog">Blog</Link></li>
                     <li><Link className="clickable" to="/about">About</Link></li>
                     <li>{this.state.currentUser != null ? <Link className="clickable" to="/signOut">Sign Out</Link> : <Link className="clickable" to="/signIn">Sign In</Link>}</li>
                     <li>{this.state.currentUser != null ? <Link className="clickable" to="/profile">Signed In as: {this.state.displayName}</Link> : null}</li>
@@ -80,6 +82,8 @@ export default class App extends Component {
                     <Route path="/software/:id/:platform/" exact component={SoftwareFrame}/>
                     <Route path="/software/:id/" exact component={Software}/>
                     {/* <Route path="/shop" exact component={Shop}/> */}
+                    <Route path="/blog" exact component={Blog}/>
+                    <Route path="/blog/:query" exact component={Blog}/>
                     <Route path="/about" exact component={About}/>
                     <Route path="/signIn" exact component={SignIn}/>
                     <Route path="/signOut" exact component={SignOut}/>