Implement edit of admin value #330

src/actions/adminValuesActions.js

@@ -6,7 +6,7 @@ const ROOT_ENDPOINT = '/adminvalues';
 export function list() {
     return {
         [CALL_API]: {
-            method: 'get',
+            method: 'GET',
             url: ROOT_ENDPOINT,
             types: [
                 types.GET_ADMIN_VALUES_REQUEST,
@@ -21,7 +21,7 @@ export function list() {
 export function retrieve(id) {
     return {
         [CALL_API]: {
-            method: 'get',
+            method: 'GET',
             url: `${ROOT_ENDPOINT}/${id}`,
             types: [
                 types.GET_ADMIN_VALUE_REQUEST,
@@ -36,7 +36,7 @@ export function retrieve(id) {
 export function create(data) {
     return {
         [CALL_API]: {
-            method: 'post',
+            method: 'POST',
             url: ROOT_ENDPOINT,
             types: [
                 types.POST_ADMIN_VALUE_REQUEST,
@@ -52,7 +52,7 @@ export function create(data) {
 export function update(data) {
     return {
         [CALL_API]: {
-            method: 'put',
+            method: 'PUT',
             url: `${ROOT_ENDPOINT}/${data.id}`,
             types: [
                 types.PUT_ADMIN_VALUE_REQUEST,

src/router.jsx

@@ -60,6 +60,7 @@ import AdminValuesTable from './sections/admin/adminValues/adminValuesTable';
 import AddAdminValue from './sections/admin/adminValues/addAdminValue';
 import AdminValue from './sections/admin/adminValues/adminValue';
 import ViewAdminValue from './sections/admin/adminValues/adminValue/viewAdminValue';
+import EditAdminValue from './sections/admin/adminValues/adminValue/editAdminValue';
 
 
 import Email from './sections/admin/email';
@@ -175,7 +176,7 @@ export default(
                     <Route name="new" path="new" component={AddAdminValue} />
                     <Route path=":adminValueId" component={AdminValue}>
                         <IndexRoute component={ViewAdminValue} />
-
+                        <Route name="edit" path="edit" component={EditAdminValue} />
                     </Route>
                 </Route>
                 <Route name="Not found" path="*" component={NotFound} />

src/sections/admin/adminValues/addAdminValueForm.jsx → src/sections/admin/adminValues/addAdminValue/addAdminValueForm.jsx

@@ -2,20 +2,20 @@ import React, { PropTypes } from 'react';
 import { reduxForm } from 'redux-form';
 import { forEach } from 'lodash';
 
-import Button from '../../../commons/Button';
-import Form from '../../../commons/Form';
-import InputField from '../../../commons/Form/InputField';
-import TextField from '../../../commons/Form/TextField';
+import Button from '../../../../commons/Button';
+import Form from '../../../../commons/Form';
+import InputField from '../../../../commons/Form/InputField';
+import TextField from '../../../../commons/Form/TextField';
 
 
 const fields = ['title', 'description', 'value'];
 
 const validate = values => {
     const errors = {};
-    const requiredErrorMsg = 'Required';
+    const errorMessageForRequiredField = 'Required';
     forEach(fields, value => {
         if (!values[value]) {
-            errors[value] = requiredErrorMsg;
+            errors[value] = errorMessageForRequiredField;
         }
     });
     return errors;
@@ -42,7 +42,7 @@ function AddDestinationForm(props) {
             <TextField label="Value" rows={5} type="text" required>
                 {value}
             </TextField>
-            <TextField label="Description" rows={5} placeholder="Describe the value" required>
+            <TextField rows={5} placeholder="Describe the value" required>
                 {description}
             </TextField>
             <Button

src/sections/admin/adminValues/addAdminValue.jsx → src/sections/admin/adminValues/addAdminValue/index.jsx

@@ -1,9 +1,9 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { browserHistory } from 'react-router';
-import Segment from '../../../commons/Segment';
-import { create } from '../../../actions/adminValuesActions';
-import { pushNotification } from '../../../actions/notificationActions';
+import Segment from '../../../../commons/Segment';
+import { create } from '../../../../actions/adminValuesActions';
+import { pushNotification } from '../../../../actions/notificationActions';
 import AddAdminValueForm from './addAdminValueForm';
 
 const createHandlers = (dispatch) => (

src/sections/admin/adminValues/adminValue/editAdminValue.jsx

@@ -0,0 +1,86 @@
+import React, { PropTypes } from 'react';
+import { reduxForm } from 'redux-form';
+import Form from '../../../../commons/Form';
+import Button from '../../../../commons/Button';
+import Segment from '../../../../commons/Segment';
+import InputField from '../../../../commons/Form/InputField';
+import TextField from '../../../../commons/Form/TextField';
+
+const fields = [
+    'title',
+    'description',
+    'value'
+];
+
+
+const EditAdminValue = props => {
+    const {
+        fields: {
+            title,
+            description,
+            value
+        },
+        handleSubmit,
+        errorMessage,
+        isFetching
+    } = props;
+
+    return (
+        <Segment>
+            <Form
+                id="editAdminValueForm"
+                handleSubmit={handleSubmit}
+                errorMessage={errorMessage}
+            >
+                <InputField
+                    label={`The title of the value. This cannot be edited, 
+                    as the system is dependent on the value not changing.`}
+                    type="text"
+                    id="title"
+                >
+                    {title}
+                </InputField>
+                <TextField
+                    label="Description of what the value is. E.g. what page it's shown on."
+                    id="description"
+                    required
+                    rows={4}
+                >
+                    {description}
+                </TextField>
+
+                <TextField
+                    label="The actual value. This is shown to the users."
+                    id="value"
+                    required
+                    rows={4}
+                >
+                    {value}
+                </TextField>
+
+                <Button
+                    type="submit"
+                    color="green"
+                    fluid
+                    loading={isFetching}
+                    id="submit"
+                >
+                    Save
+                </Button>
+            </Form>
+        </Segment>
+    );
+};
+
+EditAdminValue.propTypes = {
+    fields: PropTypes.object.isRequired,
+    user: PropTypes.object.isRequired,
+    handleSubmit: PropTypes.func.isRequired,
+    isFetching: PropTypes.bool.isRequired,
+    errorMessage: PropTypes.string
+};
+
+export default reduxForm({
+    form: 'editAdminValueForm',
+    fields
+})(EditAdminValue);

src/sections/admin/adminValues/adminValue/index.jsx

@@ -2,10 +2,8 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { browserHistory } from 'react-router';
 
-import Header from '../../../../commons/pageHeader';
 import Segments from '../../../../commons/Segments';
 import Navbar from '../../../../commons/navbar';
-import Segment from '../../../../commons/Segment';
 import { retrieve, update, list } from '../../../../actions/adminValuesActions';
 import { pushNotification } from '../../../../actions/notificationActions';
 
@@ -18,7 +16,7 @@ const createHandlers = (dispatch) => (
         update(body) {
             return dispatch(update(body));
         },
-        list(){
+        list() {
             return dispatch(list());
         },
         notification(message, level) {

src/sections/admin/adminValues/adminValue/viewAdminValue.jsx

@@ -9,20 +9,20 @@ const ViewAdminValue = (props) => (
     <Segment>
         <List>
             <ListItem
-                name="First name"
-                icon="user"
+                name="Title of value"
+                icon="edit"
                 content={props.adminValue.title}
             />
-            <ListItem
-                name="Last name"
-                icon="user"
-                content={props.adminValue.value}
-            />
             <FluidListItem
-                name="Work and experience"
-                icon="building outline"
+                name="Description of the value"
+                icon="quote left"
                 content={props.adminValue.description}
             />
+            <FluidListItem
+                name="Value, i.e. what the value is"
+                icon="keyboard"
+                content={props.adminValue.value}
+            />
         </List>
     </Segment>
 );