Add API call to app

Author: razor-x

README.md

@@ -91,7 +91,7 @@ with custom values to setup a completely independent project:
 
    aws ssm put-parameter --type "String" \
      --name "/app/aws-lambda-edge/experimental/appConfig" \
-     --value '{"title":"Lambda@Edge Immutable Web App (Experimental)","reportUri":"https://httpbin.org/post"}'
+     --value '{"title":"Lambda@Edge Immutable Web App (Experimental)","reportUri":"https://httpbin.org/post","api":"https://httpbin.org"}'
    ```
 5. Build and deploy the initial version with
    ```
@@ -118,7 +118,7 @@ with custom values to setup a completely independent project:
 
    aws ssm put-parameter --type "String" \
      --name "/app/aws-lambda-edge/live/appConfig" \
-     --value '{"title":"Lambda@Edge Immutable Web App","reportUri":"https://httpbin.org/post"}'
+     --value '{"title":"Lambda@Edge Immutable Web App","reportUri":"https://httpbin.org/post","api":"https://httpbin.org"}'
 
    npm run build
    npm run deploy:assets

src/app.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import Data from './data'
+
+import './main.css'
+
+const App = ({ title, api }) => (
+  <main>
+    <h1>{title}</h1>
+    <div className='logo' />
+    <Data api={api} />
+  </main>
+)
+
+export default App

src/data.js

@@ -0,0 +1,25 @@
+/* global fetch */
+
+import React, { Component } from 'react'
+
+class Data extends Component {
+  constructor (...args) {
+    super(...args)
+    this.state = { data: null }
+  }
+
+  componentWillMount () {
+    loadData(this.props.api)
+      .then(data => { this.setState({ data }) })
+      .catch(console.error)
+  }
+
+  render () {
+    if (this.state.data === null) return null
+    return <p>{this.state.data.uuid}</p>
+  }
+}
+
+const loadData = api => fetch(`${api}/uuid`).then(d => d.json())
+
+export default Data

src/index.js

@@ -1,21 +1,22 @@
 import React from 'react'
 import { render } from 'react-dom'
 
-import './main.css'
+import App from './app'
+
+const rootElementId = 'root'
 
 const defaultAppConfig = {
-  title: 'Lambda@Edge Immutable Web App'
+  title: 'Lambda@Edge Immutable Web App',
+  api: 'https://httpbin.org'
 }
 
-const { title } = window.config || defaultAppConfig
-
-const App = ({ title }) => (
-  <main>
-    <h1>{title}</h1>
-    <div className='logo' />
-  </main>
-)
-const renderApp = () => render(<App title={title} />, document.getElementById('root'))
+const renderApp = () => {
+  const config = window.config || defaultAppConfig
+  render(
+    <App {...config} />,
+    document.getElementById(rootElementId)
+  )
+}
 
 if ('addEventListener' in document) {
   document.addEventListener('DOMContentLoaded', renderApp)