Load image data in the OneImage component

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 (
         <div className="card">
@@ -13,8 +26,8 @@ class OneImage extends React.Component {
             </div>
 
             <div className="card-image">
-              <figure className="image">
-                <img src={this.props.img} alt="" ref={(img) => { this.foo = img; }}/>
+              <figure className={ classnames('image', { loading: !this.state.imageData }) }>
+                <img src={this.state.imageData || 'img/loading.gif'} alt="" ref={(img) => { this.foo = img; }}/>
               </figure>
             </div>
 
@@ -27,15 +40,13 @@ class OneImage extends React.Component {
                 <time>11:09 PM - 1 Jan 2016</time>
             </div>
             </div>
-
-
         </div>
         );
 
     }
 
     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 (<div className="imagewall">
-            { this.props.images.map((image, index) => {
-                return (<OneImage  key={index} img={image} />);
+        const style = this.props.show ? {} : { display: 'None'};
+        return (<div className="imagewall" style={style}>
+            { this.props.imageInfos.map((imageInfo, index) => {
+                return (<OneImage  key={`${imageInfo.path}-${imageInfo.username}`} path={imageInfo.path} username={imageInfo.username} />);
             })} 
         </div>)
     }
-}
+}

frontend/css/main.scss

@@ -30,3 +30,8 @@ nav.navbar {
     display: flex;
   }
 }
+
+.image.loading img {
+    width: auto;
+    margin: 1em auto;
+}

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 {
 
 		  <div className="column is-two-thirds">
 
-		  
+
       <div className="tabs is-boxed">
         <ul>
           <li className={ this.state.tab === 'my' ? "is-active" : ''}>
@@ -262,39 +251,33 @@ class App extends React.Component {
           </li>
         </ul>
       </div>
-        { this.state.tab === 'my' ?
-          <div className="container">
-            <ImageWall images={this.state.images} />
-          </div> :
           <div className="container">
-            <ImageWall images={this.state.imageFeed.map(imageData => imageData.image)} />
+            <ImageWall imageInfos={this.state.index.images} show={this.state.tab=='my'}/>
+            <ImageWall imageInfos={this.state.imageFeed} show={this.state.tab=='friends'}/>
           </div>
-        }
 	</div>
 
           <div className="column">
 				<div className="container">
 					<Uploader updateIndexAndImages={this.updateIndexAndImages.bind(this)}/>
 				</div>
-				<div className="container">				
+				<div className="container">
 					<h3>Start again with a fresh wall</h3>
 					<ResetButton />
 				</div>
-		      
+
 			  <div className="container">
           { this.state.loggedIn ? <Subscribers
             addSubscriber={this.addSubscriber.bind(this)}
             removeAllSubscribers={this.removeAllSubscribers.bind(this)}
             subscribers={this.state.subscribers}
             updateFeed={this.updateFeed.bind(this)}/> : '' }
 			  </div>
-	  
+
 	              Made with 💙 and 🍕 in Berlin. 
             Thanks to <a href="https://blockstack.org/">blockstack</a>!
           </div>
-
 
-
         </div>
       </div>
     </section>

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",