worked on #31

src/components/blog/index.js

@@ -3,7 +3,7 @@ import { Firestore } from '../../api'
 
 const db = Firestore;
 
-export default class Games extends Component {
+export default class Blog extends Component {
     constructor (props) {
         super(props);
         this.state = {

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 Videos from './videos'
 import Blog from './blog'
 import About from './About'
 import SignIn from './auth/SignIn'
@@ -62,6 +63,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="/videos">Videos</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>
@@ -82,6 +84,7 @@ 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="/videos" exact component={Videos}/>
                     <Route path="/blog" exact component={Blog}/>
                     <Route path="/blog/:query" exact component={Blog}/>
                     <Route path="/about" exact component={About}/>

src/components/videos/index.js

@@ -0,0 +1,118 @@
+import React, { Component } from 'react'
+import { Firestore } from '../../api'
+
+const db = Firestore;
+
+export default class Videos extends Component {
+    constructor (props) {
+        super(props);
+        this.state = {
+            loading: true,
+            categories: []
+        }
+    }
+
+    componentDidMount () {
+        db.collection("videos").get().then((querySnapshot) => {
+            let categories = {};
+            querySnapshot.forEach((doc) => {
+                let data = doc.data();
+                if (categories[data.category] === undefined) {
+                    categories[data.category] = {};
+                    categories[data.category].channels = [];
+                    categories[data.category].name = data.category;
+                }
+                categories[data.category].channels.push(data);
+            });
+            let _categories = [];
+            for (var category in categories) {
+                _categories.push(categories[category]);
+            }
+            console.log(_categories);
+            this.setState({
+                categories: _categories,
+                loading: false
+            });
+        });
+    }
+
+    render () {
+        if (this.state.loading) {
+            return (
+                <span>Loading...</span>
+            );
+        } else {
+            return (
+                <div>
+                    {this.state.categories.map((category) =>
+                        <Category key={category.name} category={category}/>
+                    )}
+                </div>
+            );
+        }
+    }
+}
+
+class Category extends Component {
+    constructor (props) {
+        super(props);
+        this.state = {
+            loading: true
+        };
+    }
+
+    componentDidMount () {
+        this.setState({
+            loading: false
+        });
+    }
+
+    render () {
+        if (this.state.loading) {
+            return (
+                <span>Loading...</span>
+            );
+        } else {
+            return (
+                <div>
+                    <h1>{this.props.category.name}</h1>
+                    <ul>
+                        {this.props.category.channels.map((channel) =>
+                            <Channel key={channel.name} channel={channel}/>
+                        )}
+                    </ul>
+                </div>
+            )
+        }
+    }
+}
+
+class Channel extends Component {
+    constructor (props) {
+        super(props);
+        this.state = {
+            loading: true
+        };
+    }
+
+    componentDidMount () {
+        this.setState({
+            loading: false
+        });
+    }
+
+    render () {
+        let channel = this.props.channel;
+        if (this.state.loading) {
+            return (
+                <span>Loading...</span>
+            );
+        } else {
+            return (
+                <div>
+                    <a href={channel.url}>{channel.name}</a>
+                </div>
+            )
+        }
+    }
+}