Bump React version

Start Albums component

package-lock.json

@@ -2060,16 +2060,6 @@
         "sha.js": "2.4.8"
       }
     },
-    "create-react-class": {
-      "version": "15.6.0",
-      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.0.tgz",
-      "integrity": "sha1-q0SEl8JlZuHilBPogyB9V8/nvtQ=",
-      "requires": {
-        "fbjs": "0.8.15",
-        "loose-envify": "1.3.1",
-        "object-assign": "4.1.1"
-      }
-    },
     "cross-spawn": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
@@ -8702,15 +8692,40 @@
       }
     },
     "react": {
-      "version": "15.6.1",
+      "version": "16.0.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-15.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.0.0.tgz",
-      "integrity": "sha1-uqhDTsZ4C96ZfNw4C3nNM7ljk98=",
+      "integrity": "sha1-zn348ZQbA28Cssyp29DLHw6FXi0=",
       "requires": {
-        "create-react-class": "15.6.0",
+        "fbjs": "0.8.16",
-        "fbjs": "0.8.15",
         "loose-envify": "1.3.1",
         "object-assign": "4.1.1",
-        "prop-types": "15.5.10"
+        "prop-types": "15.6.0"
+      },
+      "dependencies": {
+        "fbjs": {
+          "version": "0.8.16",
+          "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz",
+          "integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=",
+          "requires": {
+            "core-js": "1.2.7",
+            "isomorphic-fetch": "2.2.1",
+            "loose-envify": "1.3.1",
+            "object-assign": "4.1.1",
+            "promise": "7.3.1",
+            "setimmediate": "1.0.5",
+            "ua-parser-js": "0.7.14"
+          }
+        },
+        "prop-types": {
+          "version": "15.6.0",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz",
+          "integrity": "sha1-zq8IMCL8RrSjX2nhPvda7Q1jmFY=",
+          "requires": {
+            "fbjs": "0.8.16",
+            "loose-envify": "1.3.1",
+            "object-assign": "4.1.1"
+          }
+        }
       }
     },
     "react-dev-utils": {
@@ -8797,14 +8812,40 @@
       }
     },
     "react-dom": {
-      "version": "15.6.1",
+      "version": "16.0.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.0.0.tgz",
-      "integrity": "sha1-LLDtQZEDjlPCCes6eaI+Kkz5lHA=",
+      "integrity": "sha1-nMMHnD3NcNTG4BuEqrKn40wwP1g=",
       "requires": {
-        "fbjs": "0.8.15",
+        "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
         "object-assign": "4.1.1",
-        "prop-types": "15.5.10"
+        "prop-types": "15.6.0"
+      },
+      "dependencies": {
+        "fbjs": {
+          "version": "0.8.16",
+          "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz",
+          "integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=",
+          "requires": {
+            "core-js": "1.2.7",
+            "isomorphic-fetch": "2.2.1",
+            "loose-envify": "1.3.1",
+            "object-assign": "4.1.1",
+            "promise": "7.3.1",
+            "setimmediate": "1.0.5",
+            "ua-parser-js": "0.7.14"
+          }
+        },
+        "prop-types": {
+          "version": "15.6.0",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz",
+          "integrity": "sha1-zq8IMCL8RrSjX2nhPvda7Q1jmFY=",
+          "requires": {
+            "fbjs": "0.8.16",
+            "loose-envify": "1.3.1",
+            "object-assign": "4.1.1"
+          }
+        }
       }
     },
     "react-error-overlay": {
@@ -8816,8 +8857,8 @@
         "babel-code-frame": "6.22.0",
         "babel-runtime": "6.26.0",
         "html-entities": "1.2.1",
-        "react": "15.6.1",
+        "react": "16.0.0",
-        "react-dom": "15.6.1",
+        "react-dom": "16.0.0",
         "settle-promise": "1.0.0",
         "source-map": "0.5.6"
       },

package.json

@@ -11,8 +11,8 @@
     "firebase-admin": "^5.2.1",
     "oauth": "^0.9.15",
     "re-base": "^3.0.3",
-    "react": "^15.6.1",
+    "react": "^16.0.0",
-    "react-dom": "^15.6.1",
+    "react-dom": "^16.0.0",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.0.13",
     "styled-components": "^2.1.2"

src/App.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter, Route } from 'react-router-dom';
 
 import BackgroundImage from './components/BackgroundImage';
 import Menu from './components/Menu';
 import Login from './components/Login';
-import Admin from './routes/Admin';
+import Albums from './components/Albums';
 
 import { auth, bucket, db } from './rebase';
 
@@ -23,8 +23,8 @@ class App extends Component {
     this.state = {
       bgImgUrl: null,
       user: {...emptyUser},
+      albums: {},
     }
-    this.authStateEvents = {};
   }
 
   componentWillMount() {
@@ -43,8 +43,15 @@ class App extends Component {
             state: 'user.data',
           });
         }
+        if(!this.albumDataBinding) {
+          this.albumDataBinding = db.bindToState('albums', {
+            context: this,
+            state: 'albums',
+          });
+        }
       } else if (this.userStateBinding) {
         db.removeBinding(this.userStateBinding);
+        db.removeBinding(this.albumDataBinding);
         this.setState({
           user: {...emptyUser},
         });
@@ -57,27 +64,39 @@ class App extends Component {
     });
   }
 
-  render() {
+  renderLogin = () => {
     return (
       <div>
-        <BrowserRouter>
+        <Login user={this.state.user} />
-          <div>
+        <BackgroundImage url={this.state.bgImgUrl} />
-            {this.state.user.uid && this.state.user.data.approved
-              ? ''
-              : <Login user={this.state.user} />
-            }
-            {this.state.user.data.isAdmin
-              ? <Admin user={this.state.user} />
-              : ''
-            }
-          </div>
-        </BrowserRouter>
-        { this.state.user.uid
-          ? <Menu user={this.state.user} />
-          : <BackgroundImage url={this.state.bgImgUrl} /> }
       </div>
-    );
+    )
+  }
+
+  render
+
+  render() {
+    if (this.state.user.uid) {
+      return (
+        <div>
+          <BrowserRouter>
+            <Route path="/" exact render={() => {
+              return <Albums albums={this.state.albums} />
+            }} />
+          </BrowserRouter>
+          <Menu user={this.state.user} />
+        </div>
+      )
+    } else {
+      return (
+        <div>
+          <Login user={this.state.user} />
+          <BackgroundImage url={this.state.bgImgUrl} />
+        </div>
+      )
+    }
   }
 }
 
 export default App;
+

src/components/Albums.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+class Albums extends React.Component {
+
+  renderCard = (key) => {
+    return (
+      <div>
+        Card - {key}
+      </div>
+    )
+  }
+
+  render() {
+    console.log(this.props.albums);
+    return (
+      <div className="hello">
+      {Object.keys(this.props.albums).map(this.renderCard)}
+      </div>
+    )
+  }
+}
+
+export default Albums;

src/components/BackgroundImage.js

@@ -16,7 +16,7 @@ const BackgroundImg = styled.div`
   right: 0;
   bottom: 0;
   left: 0;
-  background: ${props => props.url ? `url(${props.url}) no-repeat center center` : ''};
+  background: ${props => props.url ? `url(${props.url}) no-repeat center top` : ''};
   background-size: cover;
   filter: blur(5px);
 `;