patch.diff

diff --git a/src/App.js b/src/App.js
index 0fd59e4..70073f5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -25,56 +25,56 @@ class App extends Component {
             "Description":"Painting, 35.4 H x 23.6 W x 0.8 in",
             "ImageUrl":"https://i.pinimg.com/originals/26/2d/a4/262da433a20602c80382fea94a8c1c26.jpg",
             "Category":"Painting",
-            "Autor":""
+            "Autor":"andre@aol.com.br"
           },
           {
             "Name":"Portrait",
             "Description":"Painting, 23.6 H x 19.7 W x 0.8 in",
             "ImageUrl":"http://www.goddessofegypt.com/wp-content/uploads/2017/06/Abstract-Painting.jpg",
             "Category":"Painting",
-            "Autor":""
+            "Autor":"andre@aol.com.br"
           },
           {
             "Name":"Impeccability of white",
             "Description":"Painting, 31.5 H x 31.5 W x 0.8 in",
             "ImageUrl": "https://twistedsifter.files.wordpress.com/2014/06/fine-art-finger-paintings-by-iris-scott-3.jpg?w=800&h=800",
             "Category":"Painting",
-            "Autor":""
+            "Autor":"j@aol.com"
           },
           {
             "Name":"Afterglow",
             "Description":"Painting, 30 H x 24 W x 0.7 in",
             "ImageUrl": "https://images.fineartamerica.com/images-medium-large-5/blue-venice-dmitry-spiros.jpg",
             "Category":"Painting",
-            "Autor":""
+            "Autor":"j@aol.com"
           },
           {
             "Name":"Three Blue Vases",
             "Description":"Painting, 24 H x 30 W x 1.5 in",
             "ImageUrl": "https://images-na.ssl-images-amazon.com/images/I/91MzV6V79DL._SL1500_.jpg",
             "Category":"Painting",
-            "Autor":""
+            "Autor":"j@aol.com"
           },
           {
             "Name":"The One With Sprinkes",
             "Description":"Painting, 31.5 H x 31.5 W x 0.8 in",
             "ImageUrl": "http://poststudioarts.com/wp-content/uploads/2016/05/art-painting-vangoghrhonecom14.jpg",
             "Category":"Painting",
-            "Autor":""
+            "Autor":"j@aol.com"
           },
           {
             "Name":"Boating blues 2",
             "Description":"Painting, 24 H x 30 W x 1.5 in",
             "ImageUrl": "https://afremov.com/image.php?type=P&id=19255",
             "Category":"Painting",
-            "Autor":""
+            "Autor":"andre@aol.com.br"
           },
           {
             "Name":"Woodland Creature III",
             "Description":"Painting, 30 H x 24 W x 0.7 in",
             "ImageUrl": "https://affordableartfair.com/media/cache/1/marketplace/17f82f742ffe127f42dca9de82fb58b1/fair/2/58d3eac4e5b4c.jpg",
             "Category":"Painting",
-            "Autor":""
+            "Autor":"andre@aol.com.br"
           }
         ],
         users: [
@@ -83,6 +83,12 @@ class App extends Component {
             "LastName":"Maria",
             "Email": "andre@aol.com.br",
             "Password": "123"
+          },
+          {
+            "FirstName":"Joao",
+            "LastName":"Carlos",
+            "Email": "j@aol.com",
+            "Password": "qwerty"
           }
         ]
     }
@@ -99,7 +105,7 @@ class App extends Component {
           <Route path='/signup' render={(props) => (<Register users={this.state.users}
             updateUsers={(newUser) => this.setState({ users: this.state.users.concat(newUser) })}/> )}/>
           <Route path='/account' render={(props) => ( <Account currentUser={this.state.currentUser}
-            updateArt={(newArt) => this.setState({ users: this.state.articles.concat(newArt) })} />)}/>
+            updateArt={(newArticle) => this.setState({ articles: this.state.articles.concat(newArticle) })} />)}/>
           <Route path='/article' render={(props) => (<ArticleDetails id="1" />)}/>
         </Switch>
 
@@ -416,7 +422,18 @@ class Account extends React.Component{
       autor:this.props.currentUser.Email}
     
   }
+  
+
     render() {  
+      let {imageUrl} = this.state;
+      let $imagePreview = null;
+      if (imageUrl) {
+        $imagePreview = (<img src={imageUrl} />);
+      } else {
+        $imagePreview = (<div className="previewText">Please select an Image for Preview</div>);
+      }
+
+
       return (
         <MuiThemeProvider>
         <div className="container">
@@ -446,6 +463,19 @@ class Account extends React.Component{
            
            <br/>
             </div>
+            <div>
+              <div className="previewComponent">
+              <form onSubmit={(event)=>this._handleSubmit(event)}>
+               <input className="fileInput" 
+                type="file" 
+                onChange={(event)=>this._handleImageChange(event)} />
+                <RaisedButton label="Submit" primary={true} style={style} onClick={(event) => this.handleClick(event)}/>
+          </form>
+        <div className="imgPreview">
+          {$imagePreview}
+        </div>
+      </div>
+              </div>
        <ul>
         <li>
           <DashboardListItem></DashboardListItem>
@@ -456,15 +486,50 @@ class Account extends React.Component{
         <li>
           <DashboardListItem></DashboardListItem>
         </li>
-        <li>
-          <ImageUpload/>
-        </li>
       </ul>
             
         </div>
         </MuiThemeProvider>
       );
   }
+
+  handleClick(event){
+    console.log("State",this.state);
+    //To be done:check for empty values before hitting submit
+    event.preventDefault();
+    console.log('handle uploading-', this.state.file);
+
+    var newArticle = { 
+      "Name":this.state.artName,
+      "Description":this.state.artDescription,
+      "ImageUrl": this.state.imageUrl,
+      "Category": this.state.category,
+      "Autor":this.state.autor
+    }
+
+    this.props.updateArt(newArticle);
+
+   //console.log('newArticle',newArticle);
+   
+  }
+
+
+  _handleImageChange(event) {
+    event.preventDefault();
+
+    let reader = new FileReader();
+    let file = event.target.files[0];
+
+    reader.onloadend = () => {
+      this.setState({
+        file: file,
+        imageUrl: reader.result
+      });
+    }
+
+    reader.readAsDataURL(file)
+
+  }
 }