diff --git a/README.md b/README.md index 8f55340..158b77c 100644 --- a/README.md +++ b/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 diff --git a/src/app.js b/src/app.js new file mode 100644 index 0000000..d08bcb3 --- /dev/null +++ b/src/app.js @@ -0,0 +1,15 @@ +import React from 'react' + +import Data from './data' + +import './main.css' + +const App = ({ title, api }) => ( +
+

{title}

+
+ +
+) + +export default App diff --git a/src/data.js b/src/data.js new file mode 100644 index 0000000..c804c44 --- /dev/null +++ b/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

{this.state.data.uuid}

+ } +} + +const loadData = api => fetch(`${api}/uuid`).then(d => d.json()) + +export default Data diff --git a/src/index.js b/src/index.js index 89da754..d738c9e 100644 --- a/src/index.js +++ b/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 }) => ( -
-

{title}

-
-
-) -const renderApp = () => render(, document.getElementById('root')) +const renderApp = () => { + const config = window.config || defaultAppConfig + render( + , + document.getElementById(rootElementId) + ) +} if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', renderApp)