diff --git a/frontend/comp/ImageWall.jsx b/frontend/comp/ImageWall.jsx index 0e7d5f9..beb545a 100644 --- a/frontend/comp/ImageWall.jsx +++ b/frontend/comp/ImageWall.jsx @@ -1,8 +1,21 @@ import React from 'react'; +import classnames from 'classnames'; +const blockstack = require( 'blockstack' ); class OneImage extends React.Component { - + + constructor() { + super(); + this.state = { imageData: null }; + } + + componentWillMount() { + blockstack.getFile(this.props.path, { username: this.props.username }).then((imageData) => { + this.setState({ imageData }); + }) + } + render() { return (
@@ -13,8 +26,8 @@ class OneImage extends React.Component {
-
- { this.foo = img; }}/> +
+ { this.foo = img; }}/>
@@ -27,15 +40,13 @@ class OneImage extends React.Component { - - ); } componentDidMount() { - this.foo.onload = () => { + this.foo.onload = () => { console.log( this.foo.width + ", " + this.foo.height ); }; } @@ -44,10 +55,11 @@ class OneImage extends React.Component { export class ImageWall extends React.Component { render() { - return (
- { this.props.images.map((image, index) => { - return (); + const style = this.props.show ? {} : { display: 'None'}; + return (
+ { this.props.imageInfos.map((imageInfo, index) => { + return (); })}
) } -} \ No newline at end of file +} diff --git a/frontend/css/main.scss b/frontend/css/main.scss index 87648c8..6447d55 100644 --- a/frontend/css/main.scss +++ b/frontend/css/main.scss @@ -30,3 +30,8 @@ nav.navbar { display: flex; } } + +.image.loading img { + width: auto; + margin: 1em auto; +} diff --git a/frontend/img/loading.gif b/frontend/img/loading.gif new file mode 100644 index 0000000..0424aa4 Binary files /dev/null and b/frontend/img/loading.gif differ diff --git a/frontend/index.jsx b/frontend/index.jsx index 6ff0df7..2a73bef 100644 --- a/frontend/index.jsx +++ b/frontend/index.jsx @@ -73,18 +73,9 @@ class App extends React.Component { this.setState({index: indexJson}); } }) - .then(() => { - let promises = this.state.index.images.map((image) => { - return this.fetchFile(image.path) - }) - return Promise.all(promises) - }) - .then((images) => { - this.setState({ images: images }) - }) - .catch((e) => { - console.error(e) - }) + .catch((e) => { + console.error(e) + }) } loadAESKey() { @@ -195,9 +186,7 @@ class App extends React.Component { console.log('Subscribers indexData is', indexData); data.images.forEach((indexEntry) => { if (!this.subscriberImageLoaded({...indexEntry, username})) { - blockstack.getFile(indexEntry.path, {username}).then((imageData) => { - this.updateFeed({path: indexEntry.path, username: username, image: imageData, created: indexEntry.created}); - }) + this.updateFeed({path: indexEntry.path, username: username, created: indexEntry.created}); } }) }).catch(err => { @@ -245,7 +234,7 @@ class App extends React.Component {
- +
  • @@ -262,25 +251,21 @@ class App extends React.Component {
- { this.state.tab === 'my' ? -
- -
:
- imageData.image)} /> + +
- }
-
+

Start again with a fresh wall

- +
{ this.state.loggedIn ? : '' }
- + Made with 💙 and 🍕 in Berlin. Thanks to blockstack!
- -
diff --git a/package-lock.json b/package-lock.json index 1a42918..b280845 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1793,6 +1793,11 @@ } } }, + "classnames": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz", + "integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0=" + }, "clean-css": { "version": "4.1.9", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.9.tgz", diff --git a/package.json b/package.json index 5e30847..a7a7bfc 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "blockstack": "^0.15.1", "bulma": "^0.6.2", "cash-dom": "^1.3.5", + "classnames": "^2.2.5", "copy-webpack-plugin": "^4.5.0", "handlebars": "^4.0.10", "handlebars-template-loader": "^0.8.0",