fetch and add new target urls

assets/js/actions/targets.js

@@ -0,0 +1,63 @@
+'use strict'
+
+import Ajax from '../lib/Ajax'
+
+const ACTIONS = {
+  set_working: 'set_working',
+  add_url: 'add_url',
+  edit_url: 'edit_url',
+  delete_url: 'delete_url',
+  list_url: 'list_url',
+  error: 'error'
+}
+
+export default ACTIONS
+
+export const setWorking = working => ({
+  type: ACTIONS.set_working,
+  data: working
+})
+
+export const setUrls = (urls) => ({
+  type: ACTIONS.list_url,
+  data: urls
+})
+
+export const addUrl = url => ({
+  type: ACTIONS.add_url,
+  data: url
+})
+
+export const fetchUrls = () => async (dispatch, getState) => {
+  dispatch(setWorking(true))
+  try {
+    const { data } = await Ajax.get({
+      url: '/api/targets'
+    })
+    dispatch(setUrls(data))
+  } catch (e) {
+    dispatch({
+      type: ACTIONS.error,
+      data: e
+    })
+  } finally {
+    dispatch(setWorking(false))
+  }
+}
+
+export const createNewUrl = () => async (dispatch, getState) => {
+  dispatch(setWorking(true))
+  try {
+    const { data } = await Ajax.post({
+      url: '/api/targets'
+    })
+    dispatch(addUrl(data))
+  } catch (e) {
+    dispatch({
+      type: ACTIONS.error,
+      data: e
+    })
+  } finally {
+    dispatch(setWorking(false))
+  }
+}

assets/js/reducers/targets.js

@@ -0,0 +1,24 @@
+'use strict'
+
+import Actions from '../actions/targets'
+
+const reducer = (state = {}, action) => {
+  const { type, data } = action
+  switch (type) {
+    case Actions.set_working:
+      return {
+        working: data
+      }
+    case Actions.list_url:
+      return {
+        urls: data || []
+      }
+    case Actions.add_url:
+      return {
+        urls: state.urls.concat(data)
+      }
+    default: return {}
+  }
+}
+
+export default reducer

assets/js/targets.js

@@ -4,7 +4,8 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import Progress from './components/Progress'
 import UriListItem from './containers/UriListItem'
-
+import reducer from './reducers/targets'
+import { fetchUrls, createNewUrl } from './actions/targets'
 import '../styles/targets.scss'
 
 class App extends React.Component {
@@ -16,6 +17,7 @@ class App extends React.Component {
         email: '',
         password: ''
       },
+      urls: [1, 2],
       working: false
     }
 
@@ -34,8 +36,11 @@ class App extends React.Component {
       })
     }
   }
+  componentDidMount () {
+    this.dispatch(fetchUrls())
+  }
   getRegisteredUris () {
-    return [1, 2, 3].map((item, i) => {
+    return this.state.urls.map((item, i) => {
       return (<UriListItem key={i} />)
     })
   }
@@ -47,14 +52,14 @@ class App extends React.Component {
             <h1>RoE</h1>
           </header>
         </aside>
-        <section className='content flex'>
+        <section className={'content flex' + (this.state.working ? ' working' : '')}>
           <Progress bound />
           <header className='flex-container'>
             <div className='flex'>
               <h1>Push URIs</h1>
               <h2>Newly published books will be sent to these addresses.</h2>
             </div>
-            <button className='btn'>New address</button>
+            <button className='btn' onClick={() => this.dispatch(createNewUrl())}>New address</button>
           </header>
           <ul className='list'>
             {this.getRegisteredUris()}