diff --git a/src/components/blog/index.js b/src/components/blog/index.js
index 981f3c2..ec2188e 100644
--- a/src/components/blog/index.js
+++ b/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 = {
diff --git a/src/components/index.js b/src/components/index.js
index 42c239c..88a9d45 100644
--- a/src/components/index.js
+++ b/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 {
Games
Software
{/* Shop */}
+ Videos
Blog
About
{this.state.currentUser != null ? Sign Out : Sign In}
@@ -82,6 +84,7 @@ export default class App extends Component {
{/* */}
+
diff --git a/src/components/videos/index.js b/src/components/videos/index.js
new file mode 100644
index 0000000..492f15a
--- /dev/null
+++ b/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 (
+ Loading...
+ );
+ } else {
+ return (
+
+ {this.state.categories.map((category) =>
+
+ )}
+
+ );
+ }
+ }
+}
+
+class Category extends Component {
+ constructor (props) {
+ super(props);
+ this.state = {
+ loading: true
+ };
+ }
+
+ componentDidMount () {
+ this.setState({
+ loading: false
+ });
+ }
+
+ render () {
+ if (this.state.loading) {
+ return (
+ Loading...
+ );
+ } else {
+ return (
+
+
{this.props.category.name}
+
+ {this.props.category.channels.map((channel) =>
+
+ )}
+
+
+ )
+ }
+ }
+}
+
+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 (
+ Loading...
+ );
+ } else {
+ return (
+
+ )
+ }
+ }
+}
\ No newline at end of file