diff --git a/src/Components/AddToCanvasInput/AddToCanvasInput.tsx b/src/Components/AddToCanvasInput/AddToCanvasInput.tsx index 3849f9b..2c684c5 100644 --- a/src/Components/AddToCanvasInput/AddToCanvasInput.tsx +++ b/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 { @@ -19,7 +20,6 @@ export class AddToCanvasInput extends React.Component { - 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) { this.setState({ textInputValue: ev.target.value @@ -98,7 +79,7 @@ export class AddToCanvasInput extends React.ComponentImages
    { - this.state.imageURLs.map((imgURL) => { + this.props.imageURLs.map((imgURL) => { return (
  • { 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 (
    - +
    ); diff --git a/src/Components/Sidebar/Sidebar.tsx b/src/Components/Sidebar/Sidebar.tsx index 9c317ce..f241be5 100644 --- a/src/Components/Sidebar/Sidebar.tsx +++ b/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 { render() { return (
    - - + +
    ); diff --git a/src/Components/UploadResourcesInput/UploadResourcesInput.tsx b/src/Components/UploadResourcesInput/UploadResourcesInput.tsx index fcfc318..5e913ff 100644 --- a/src/Components/UploadResourcesInput/UploadResourcesInput.tsx +++ b/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,11 +40,12 @@ export class UploadResourcesInput extends React.Component { // tslint:disable-next-line:no-console if (responseJson.file) { - + this.props.notifyImageUploadSuccess(); + // tslint:disable-next-line:no-console console.log('File uploaded: ' + responseJson.file);