Add update image preview on image upload success

Moved imageURLs state higher one component

src/Components/AddToCanvasInput/AddToCanvasInput.tsx

@@ -4,13 +4,14 @@ import './AddToCanvasInput.css';
 import { CanvasTextNode, CanvasImageNode } from '../../Helpers';
 
 interface AddToCanvasInputProps {
+    imageURLs: string[];
+
     addTextNode(nodeId: string, textNode: CanvasTextNode): void;
     addImageNode(nodeId: string, imgNode: CanvasImageNode): void;
 }
 
 interface AddToCanvasInputState {
     textInputValue: string;
-    imageURLs: string[];
 }
 
 export class AddToCanvasInput extends React.Component<AddToCanvasInputProps, AddToCanvasInputState> {
@@ -19,7 +20,6 @@ export class AddToCanvasInput extends React.Component<AddToCanvasInputProps, Add
 
         this.state = {
             textInputValue: '',
-            imageURLs: []
         };
 
         this.updateInputText = this.updateInputText.bind(this);
@@ -27,25 +27,6 @@ export class AddToCanvasInput extends React.Component<AddToCanvasInputProps, Add
         this.addImageNodeOnSubmit = this.addImageNodeOnSubmit.bind(this);
     }
 
-    componentDidMount() {
-        this.fetchImages();
-    }
-
-    fetchImages() {
-        fetch('http://localhost:8000/images/')
-            .then((response: Response) => {
-                return response.json();
-            }).then((responseJSON: string[]) => {
-                this.setState({
-                    imageURLs: responseJSON
-                });
-            }).catch((error) => {
-                // tslint:disable-next-line:no-console
-                console.error('Error loading image info:', error);
-            });
-
-    }
-
     updateInputText(ev: React.ChangeEvent<HTMLInputElement>) {
         this.setState({
             textInputValue: ev.target.value
@@ -98,7 +79,7 @@ export class AddToCanvasInput extends React.Component<AddToCanvasInputProps, Add
                         <h4>Images</h4>
                         <ul className="list-unstyled">
                             {
-                                this.state.imageURLs.map((imgURL) => {
+                                this.props.imageURLs.map((imgURL) => {
                                     return (
                                         <li key={imgURL}>
                                             <img

src/Components/CreateEditorApp/CreateEditorApp.tsx

@@ -5,9 +5,12 @@ import { CanvasArea } from '../CanvasArea';
 import { deppCloneNaive, CanvasTextNode, CanvasImageNode } from '../../Helpers';
 
 interface CreateEditorAppState {
+  imageURLs: string[];
+
   text: {
     [nodeId: string]: CanvasTextNode;
   };
+
   image: {
     [nodeId: string]: CanvasImageNode;
   };
@@ -18,12 +21,37 @@ export class CreateEditorApp extends React.Component<{}, CreateEditorAppState> {
     super(props);
 
     this.state = {
+      imageURLs: [],
       text: {},
-      image: {}
+      image: {},
     };
 
     this.addOrUpdateTextNode = this.addOrUpdateTextNode.bind(this);
     this.addOrUpdateImageNode = this.addOrUpdateImageNode.bind(this);
+    this.onImageUploadSuccess = this.onImageUploadSuccess.bind(this);
+  }
+
+  componentDidMount() {
+    this.fetchImages();
+  }
+
+  onImageUploadSuccess() {
+    this.fetchImages();
+  }
+
+  fetchImages() {
+    fetch('http://localhost:8000/images/')
+      .then((response: Response) => {
+        return response.json();
+      }).then((responseJSON: string[]) => {
+        this.setState({
+          imageURLs: responseJSON
+        });
+      }).catch((error) => {
+        // tslint:disable-next-line:no-console
+        console.error('Error loading image info:', error);
+      });
+
   }
 
   addOrUpdateTextNode(nodeId: string, textNode: CanvasTextNode): void {
@@ -47,7 +75,12 @@ export class CreateEditorApp extends React.Component<{}, CreateEditorAppState> {
   render() {
     return (
       <div className="create-editor-app">
-        <Sidebar addTextNode={this.addOrUpdateTextNode} addImageNode={this.addOrUpdateImageNode} />
+        <Sidebar
+          imageURLs={this.state.imageURLs}
+          notifyImageUploadSuccess={this.onImageUploadSuccess}
+          addTextNode={this.addOrUpdateTextNode}
+          addImageNode={this.addOrUpdateImageNode}
+        />
         <CanvasArea nodes={this.state} />
       </div>
     );

src/Components/Sidebar/Sidebar.tsx

@@ -5,6 +5,9 @@ import { AddToCanvasInput } from '../AddToCanvasInput';
 import { CanvasTextNode, CanvasImageNode } from '../../Helpers';
 
 interface SidebarProps {
+    imageURLs: string[];
+
+    notifyImageUploadSuccess(): void;
     addTextNode(nodeId: string, textNode: CanvasTextNode): void;
     addImageNode(nodeId: string, imgNode: CanvasImageNode): void;
 }
@@ -20,8 +23,12 @@ export class Sidebar extends React.Component<SidebarProps, SidebarState> {
     render() {
         return (
             <div className="sidebar col-sm-2 col-md-2 col-lg-2">
-                <UploadResourcesInput />
+                <UploadResourcesInput notifyImageUploadSuccess={this.props.notifyImageUploadSuccess} />
-                <AddToCanvasInput addTextNode={this.props.addTextNode} addImageNode={this.props.addImageNode} />
+                <AddToCanvasInput
+                    imageURLs={this.props.imageURLs}
+                    addTextNode={this.props.addTextNode}
+                    addImageNode={this.props.addImageNode}
+                />
             </div>
 
         );

src/Components/UploadResourcesInput/UploadResourcesInput.tsx

@@ -2,8 +2,9 @@ import * as React from 'react';
 import './UploadResourcesInput.css';
 
 interface UploadResourcesInputProps {
-
+    notifyImageUploadSuccess(): void;
 }
+
 interface UploadResourcesInputState {
     file: File | undefined;
 }
@@ -39,10 +40,11 @@ export class UploadResourcesInput extends React.Component<UploadResourcesInputPr
 
                 return response.json();
 
-            }).then(function (responseJson: { message?: string, file?: string }) {
+            }).then((responseJson: { message?: string, file?: string }) => {
 
                 // tslint:disable-next-line:no-console
                 if (responseJson.file) {
+                    this.props.notifyImageUploadSuccess();
 
                     // tslint:disable-next-line:no-console
                     console.log('File uploaded: ' + responseJson.file);