From 681dd80d3b7d6daf528fc42cb232fd5ac25d4906 Mon Sep 17 00:00:00 2001 From: Dan Head Date: Sun, 1 Oct 2017 18:31:35 +0100 Subject: [PATCH] Bump React version Start Albums component --- package-lock.json | 87 +++++++++++++++++++++++-------- package.json | 4 +- src/App.js | 59 ++++++++++++++------- src/components/Albums.js | 23 ++++++++ src/components/BackgroundImage.js | 2 +- 5 files changed, 129 insertions(+), 46 deletions(-) create mode 100644 src/components/Albums.js diff --git a/package-lock.json b/package-lock.json index c0be45e..98ad5a9 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/react/-/react-15.6.1.tgz", - "integrity": "sha1-uqhDTsZ4C96ZfNw4C3nNM7ljk98=", + "version": "16.0.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.0.0.tgz", + "integrity": "sha1-zn348ZQbA28Cssyp29DLHw6FXi0=", "requires": { - "create-react-class": "15.6.0", - "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-dev-utils": { @@ -8797,14 +8812,40 @@ } }, "react-dom": { - "version": "15.6.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-15.6.1.tgz", - "integrity": "sha1-LLDtQZEDjlPCCes6eaI+Kkz5lHA=", + "version": "16.0.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.0.0.tgz", + "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-dom": "15.6.1", + "react": "16.0.0", + "react-dom": "16.0.0", "settle-promise": "1.0.0", "source-map": "0.5.6" }, diff --git a/package.json b/package.json index a82a2a8..603edf8 100644 --- a/package.json +++ b/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-dom": "^15.6.1", + "react": "^16.0.0", + "react-dom": "^16.0.0", "react-router-dom": "^4.2.2", "react-scripts": "1.0.13", "styled-components": "^2.1.2" diff --git a/src/App.js b/src/App.js index 5b1f0ca..a7c32ec 100644 --- a/src/App.js +++ b/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 (
- -
- {this.state.user.uid && this.state.user.data.approved - ? '' - : - } - {this.state.user.data.isAdmin - ? - : '' - } -
- - { this.state.user.uid - ? - : } + +
- ); + ) + } + + render + + render() { + if (this.state.user.uid) { + return ( +
+ + { + return + }} /> + + +
+ ) + } else { + return ( +
+ + +
+ ) + } } } export default App; + diff --git a/src/components/Albums.js b/src/components/Albums.js new file mode 100644 index 0000000..ca90009 --- /dev/null +++ b/src/components/Albums.js @@ -0,0 +1,23 @@ +import React from 'react'; + +class Albums extends React.Component { + + renderCard = (key) => { + return ( +
+ Card - {key} +
+ ) + } + + render() { + console.log(this.props.albums); + return ( +
+ {Object.keys(this.props.albums).map(this.renderCard)} +
+ ) + } +} + +export default Albums; diff --git a/src/components/BackgroundImage.js b/src/components/BackgroundImage.js index f90de62..50fef46 100644 --- a/src/components/BackgroundImage.js +++ b/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); `;