Basic option adding and sorting behavior

app/components/flow/create/PollOptions.js

@@ -8,28 +8,59 @@ import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
+import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';
+
+
+const SortableItem = SortableElement(({value}) =>
+  <li>{value.title}</li>
+);
+
+const SortableList = SortableContainer(({items}) => {
+  return (
+    <ul>
+      {items.map((value, index) => (
+        <SortableItem key={`item-${index}`} index={index} value={value} />
+      ))}
+    </ul>
+  );
+});
 
 class PollOptions extends Component {
 
     state = {
         error: '',
-        open: false
+        open: false,
+        options: [],
+        optionTitle: '',
+        optionContent: ''
     }
 
-    handleChange = (event) => {
+    onSortEnd = ({oldIndex, newIndex}) => {
+        this.setState({
+          options: arrayMove(this.state.options, oldIndex, newIndex),
+        });
+      };
+
+    handleChange = name => event => {
         this.setState({error: ''});
-        if(event.target.value.length <= 70){
-            this.setState({title: event.target.value});
-        }
+        const state = {};
+        state[name] = event.target.value;
+        this.setState(state);
     }
 
     handleClickOpen = () => {
         this.setState({ open: true });
     };
+
+    addOption = () => {
+        const options = this.state.options;
+        options.push({title: this.state.optionTitle, content: this.state.optionContent});
+        this.setState({ open: false, optionTitle: '', optionContent: '' });
+    }
     
     handleClose = () => {
-    this.setState({ open: false });
-    };
+        this.setState({ open: false });
+    }
 
     continue = () => {
         const {title} = this.state;
@@ -49,6 +80,10 @@ class PollOptions extends Component {
             <Typography variant="headline">Create a Poll</Typography>
             <Typography variant="body1">Add options to the poll</Typography>
             <Button onClick={this.handleClickOpen}>Add option</Button>
+
+
+            <SortableList items={this.state.options} onSortEnd={this.onSortEnd} />
+
         </div>
         <div className="buttonNav">
             <Button onClick={this.continue}>Next</Button>
@@ -63,7 +98,7 @@ class PollOptions extends Component {
             <Button onClick={this.handleClose} color="primary">
                 X
             </Button>
-            <Button onClick={this.handleClose} color="primary" autoFocus>
+            <Button onClick={this.addOption} color="primary">
                 Save
             </Button>
             </DialogActions>
@@ -76,6 +111,8 @@ class PollOptions extends Component {
                     className="inputTxt"
                     fullWidth
                     margin="normal"
+                    value={this.state.optionTitle}
+                    onChange={this.handleChange('optionTitle')}
                     InputLabelProps={{
                     shrink: true,
                     }}      

package-lock.json

@@ -490,6 +490,27 @@
         "is-buffer": "^1.1.5"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.5.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
+          "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw=="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "bignumber.js": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-5.0.0.tgz",
@@ -1192,6 +1213,16 @@
         "warning": "^4.0.1"
       }
     },
+    "react-sortable-hoc": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-0.8.4.tgz",
+      "integrity": "sha512-J9AFEQAJ7u2YWdVzkU5E3ewrG82xQ4xF1ZPrZYKliDwlVBDkmjri+iKFAEt6NCDIRiBZ4hiN5vzI8pwy/dGPHw==",
+      "requires": {
+        "babel-runtime": "^6.11.6",
+        "invariant": "^2.2.1",
+        "prop-types": "^15.5.7"
+      }
+    },
     "react-toggle": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.0.2.tgz",

package.json

@@ -44,6 +44,7 @@
     "react-dom": "^16.4.2",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
+    "react-sortable-hoc": "^0.8.4",
     "react-toggle": "^4.0.2",
     "rlp": "^2.1.0",
     "typeface-roboto": "0.0.54"