import React from 'react';

import GreetingMaster from './GreetingMaster';
import GreetingDetail from './GreetingDetail';

const BACKEND_URL = 'http://localhost:7000/greetings';
const MODE_MASTER = 'MODE_MASTER';
const MODE_DETAIL = 'MODE_DETAIL';

export default class GreetingController extends React.Component {
    render() {
        const {mode, greetings} = this.state;
        return (
            <div>
                {mode === MODE_MASTER ?
                    <GreetingMaster greetings={greetings}
                                    onAdd={() => this.setState({mode: MODE_DETAIL})}
                    /> :
                    <GreetingDetail onSave={(greeting) => this.saveGreeting(greeting)}/>
                }
            </div>);
    }

    constructor(props) {
        super(props);
        this.state = {
            greetings: [],
            mode: MODE_MASTER
        };
    }

    componentDidMount() {
        this.loadGreetings();
    }

    loadGreetings() {
        (async () => {
            try {
                const response = await fetch(BACKEND_URL);
                const json = await response.json();
                this.setState({greetings: json});
            } catch (err) {
                console.error('LOADING GREETINGS FAILED:', err);
            }
        })();
    }

    // should work, but cause error in browser

    // async loadGreetings() {
    //     try {
    //         const response = await fetch(BACKEND_URL);
    //         const json = await response.json();
    //         this.setState({greetings: json});
    //         return json;
    //     } catch (err) {
    //         console.error('LOADING GREETINGS FAILED:', err);
    //     }
    // }

    saveGreeting(greetingToBeAdded) {
        (async () => {
            try {
                const response = await fetch(BACKEND_URL, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(greetingToBeAdded)
                });
                if (response.status !== 201) {
                    throw new Error('Invalid status code: ' + response.status);
                }
                const json = await response.json();
                // the server responded with the id of the new Greeting
                const newGreetingId = json.id;
                // create a new Greeting object that contains the received id
                // (create a new object for immutability)
                const newGreeting = {...greetingToBeAdded, id: newGreetingId};
                // add the new greetings to the list of all greetings
                // (create a new array for immutability)
                const newGreetings = [...this.state.greetings, newGreeting];

                // set the new list of greetings as our new state
                // also set 'MODE_MASTER' to make sure the master-View is
                // displayed now
                this.setState({
                    greetings: newGreetings,
                    mode: MODE_MASTER
                });
            } catch (err) {
                console.error('LOADING GREETINGS FAILED:', err);
            }
        })();
    }
}


@@ -1,12 +1,40 @@
+require(%22babel-polyfill%22);%0A%0A
 import React
@@ -48,17 +48,16 @@
 react';%0A
-%0A
 import G
@@ -990,410 +990,8 @@
     
-loadGreetings() %7B%0A        (async () =%3E %7B%0A            try %7B%0A                const response = await fetch(BACKEND_URL);%0A                const json = await response.json();%0A                this.setState(%7Bgreetings: json%7D);%0A            %7D catch (err) %7B%0A                console.error('LOADING GREETINGS FAILED:', err);%0A            %7D%0A        %7D)();%0A    %7D%0A%0A    // should work, but cause error in browser%0A%0A    //
  asy
@@ -1011,26 +1011,24 @@
 ngs() %7B%0A    
-//
      try %7B%0A 
@@ -1026,26 +1026,24 @@
   try %7B%0A    
-//
          con
@@ -1082,26 +1082,24 @@
 D_URL);%0A    
-//
          con
@@ -1131,26 +1131,24 @@
 json();%0A    
-//
          thi
@@ -1178,26 +1178,24 @@
 json%7D);%0A    
-//
          ret
@@ -1204,26 +1204,24 @@
 n json;%0A    
-//
      %7D catch
@@ -1229,26 +1229,24 @@
 (err) %7B%0A    
-//
          con
@@ -1295,18 +1295,16 @@
 r);%0A    
-//
      %7D%0A 
@@ -1306,18 +1306,16 @@
   %7D%0A    
-//
  %7D%0A%0A    

Make "better" async example work