feat: finish the save options functionality (#56)

src/admin/story-view/stores/StoryViewStore.js

@@ -96,6 +96,17 @@ class StoryViewStore {
     this.allStoryOptions = options;
   };
 
+  @action addToAllStoryOptions = (newOptions = []) => {
+    this.allStoryOptions = [...this.allStoryOptions, ...newOptions];
+  };
+
+  @action updateInAllStoryOptions = (updatedOptions = []) => {
+    this.allStoryOptions = this.allStoryOptions.map((option) => {
+      const exists = updatedOptions.find(uo => uo._id === option._id);
+      return exists || option;
+    });
+  };
+
   @action setCurrentStory = story => {
     this.currentStory = story;
   };
@@ -170,6 +181,8 @@ export const storyViewStorePropTypes = PropTypes.shape({
   removeOptionFromSequence: PropTypes.func,
 
   setAllStoryOptions: PropTypes.func,
+  addToAllStoryOptions: PropTypes.func,
+  updateInAllStoryOptions: PropTypes.func,
 
   setCurrentStory: PropTypes.func,
   updateCurrentStory: PropTypes.func,

src/admin/story-view/view/components/write-story/save-graph-options/SaveGraphOptions.js

@@ -30,6 +30,11 @@ class SaveGraphOptions extends Component {
       .map(s => ({ value: s._id, label: s.name }));
   };
 
+  onDrawerClose = () => {
+    this.formikRef = {};
+    this.props.onDrawerClose();
+  };
+
   onSubmitAll = async () => {
     const {
       [GRAPH_SOURCE_DEST_PROPERTY]: sourceDestFormik,
@@ -54,7 +59,8 @@ class SaveGraphOptions extends Component {
         option.nextSeq = nextSeq;
         return option;
       });
-    onSubmitAll(newOptions);
+    await onSubmitAll(newOptions);
+    this.onDrawerClose();
   };
 
   onSubmit = index => async (values) => {
@@ -144,12 +150,10 @@ class SaveGraphOptions extends Component {
   };
 
   renderActionButtons = () => {
-    const { onDrawerClose } = this.props;
-
     return (
       <div className={styles.buttons}>
         <Button
-          onClick={onDrawerClose}
+          onClick={this.onDrawerClose}
           color="secondary"
         >
           Cancel
@@ -168,14 +172,13 @@ class SaveGraphOptions extends Component {
     const {
       open,
       options = [],
-      onDrawerClose,
     } = this.props;
 
     return (
       <Drawer
         anchor="top"
         open={open}
-        onClose={onDrawerClose}
+        onClose={this.onDrawerClose}
       >
         <div className={styles.container}>
           {this.renderSourceDestContainer()}

src/admin/story-view/view/components/write-story/write-story/WriteStoryComponent.js

@@ -5,7 +5,8 @@ import { toJS } from 'mobx';
 
 import { Card, CardContent } from '@material-ui/core';
 import {
-  getNewGraph, getOptionsBetweenNodes,
+  getNewGraph,
+  getOptionsBetweenNodes,
   optionToLink,
   seqToNode,
   sourceDestInitialValues
@@ -33,8 +34,6 @@ class WriteStoryComponent extends Component {
     sequence: undefined,
     sourceDest: sourceDestInitialValues,
     options: [],
-    nodes: this.props.sequences,
-    links: this.props.options,
   };
   graphRef = React.createRef();
 
@@ -56,9 +55,11 @@ class WriteStoryComponent extends Component {
   };
 
   onOpenSaveOptionsModal = async (fromSeqId, toSeqId) => {
+    const { story } = this.props;
     let sourceDest = sourceDestInitialValues;
     let optionsToLoad = [new OptionModel({
-      action: 'New action'
+      action: 'New option',
+      story: story._id,
     })];
 
     if (fromSeqId && toSeqId) {
@@ -86,8 +87,13 @@ class WriteStoryComponent extends Component {
   };
 
   addOption = () => {
+    const { story } = this.props;
     const { options } = this.state;
-    const newOptions = [...options, new OptionModel({ action: 'New Option' })];
+    const newOption = new OptionModel({
+      action: 'New Option',
+      story: story._id,
+    });
+    const newOptions = [...options, newOption];
     this.setState({ options: newOptions });
   };
 
@@ -108,6 +114,7 @@ class WriteStoryComponent extends Component {
   onHandleDrawerClose = () => {
     this.setState({
       sequence: undefined,
+      sourceDest: sourceDestInitialValues,
       options: [],
       viewState: ViewStates.View
     })
@@ -116,6 +123,8 @@ class WriteStoryComponent extends Component {
   render () {
     const {
       story,
+      sequences,
+      options: optionFromContainer,
       attributes,
       onSaveSequence,
       onSaveOptions,
@@ -126,17 +135,18 @@ class WriteStoryComponent extends Component {
       sequence,
       sourceDest,
       options,
-      nodes,
-      links,
     } = this.state;
 
     const data = {
-      nodes: nodes.map(seqToNode(story)),
-      links: links
+      nodes: sequences.map(seqToNode(story)),
+      links: optionFromContainer
         .reduce((curr, option) => {
           // Display only one link from a sequence to another
           // even if there are multiple options
-          if (curr.find(o => o.sequence === option.sequence)) {
+          const linkBetweenNodesExists = curr.find(o => {
+            return o.sequence === option.sequence && o.nextSeq === option.nextSeq;
+          });
+          if (linkBetweenNodesExists) {
             return curr;
           }
           return [...curr, option];

src/admin/story-view/view/containers/WriteStoryContainer.js

@@ -13,6 +13,7 @@ import { SocketEvents } from '../../../../shared/constants/events';
 import { SequenceModel } from '../../../../infrastructure/models/SequenceModel';
 import { storyService } from '../../../../infrastructure/services/StoryService';
 import { attributeService } from '../../../../infrastructure/services/AttributeService';
+import { OptionModel } from '../../../../infrastructure/models/OptionModel';
 
 @inject('storyViewStore')
 @observer
@@ -38,6 +39,11 @@ class WriteStoryContainer extends Component {
     socket.on(SocketEvents.UpdateSequenceResponse, seq => {
       storyViewStore.updateSequenceInPlace(seq._id, seq);
     });
+    socket.on(SocketEvents.SaveOptionsResponse, result => {
+      const { created, updated } = result;
+      storyViewStore.addToAllStoryOptions(created.map(option => new OptionModel(option)));
+      storyViewStore.updateInAllStoryOptions(updated.map(option => new OptionModel(option)));
+    });
   };
 
   getSequences = async () => {
@@ -102,8 +108,10 @@ class WriteStoryContainer extends Component {
   };
 
   onSaveOptions = (options) => {
-    console.log(options);
-    // TODO: save on BE
+    socket.emit(
+      SocketEvents.SaveOptionsRequest,
+      options.map(option => OptionModel.forApi(option, ['_id'])),
+    );
   };
 
   onUpdateSeqPosition = (seqId, x, y) => {

src/infrastructure/models/BaseModel.js

@@ -39,4 +39,11 @@ export class BaseModel {
 
     return 'An error has occurred';
   }
+
+  static handleExtraFieldsForApi (resource, extraFields = []) {
+    return (extraFields.reduce((curr, field) => {
+      curr[field] = resource[field];
+      return curr;
+    }, {}))
+  }
 }

src/infrastructure/models/OptionModel.js

@@ -5,6 +5,7 @@ import { ConsequenceModel } from './ConsequenceModel';
 
 export class OptionModel extends BaseModel {
   _id = '';
+  story = '';
   action = '';
   sequence = '';
   nextSeq = '';
@@ -47,7 +48,7 @@ export class OptionModel extends BaseModel {
     return errors;
   }
 
-  static forApi(option) {
+  static forApi(option, extraFields) {
     return {
       story: option.story,
       action: option.action,
@@ -58,6 +59,7 @@ export class OptionModel extends BaseModel {
         ? option.nextSeq.value
         : option.nextSeq,
       consequences: option.consequences,
+      ...BaseModel.handleExtraFieldsForApi(option, extraFields),
     };
   }
 

src/infrastructure/models/SequenceModel.js

@@ -38,10 +38,7 @@ export class SequenceModel extends BaseModel {
       content: sequence.content,
       isEnding: sequence.isEnding,
       chapter: sequence.chapter,
-      ...(extraFields.reduce((curr, field) => {
-        curr[field] = sequence[field];
-        return curr;
-      }, {})),
+      ...BaseModel.handleExtraFieldsForApi(sequence, extraFields),
     };
   }
 

src/infrastructure/services/OptionService.js

@@ -26,7 +26,7 @@ class OptionService extends BaseService {
 
   getAllStoryOptions = (storyId) => {
     const endpoint = makePath(this.allOptionsEndpoint, { ':story': storyId });
-    return this.client.get(endpoint)
+    return this.client.get(`${endpoint}?${BaseService.parseSort({ created_at: 'asc' })}`)
       .then(BaseService.onSuccess).then(options => {
       return options.map(o => new OptionModel(o));
     });

src/shared/constants/events.js

@@ -32,6 +32,10 @@ export const SocketEvents = {
   UpdateOptionError: 'UPDATE_OPTION_ERROR',
   DeleteOptionError: 'DELETE_OPTION_ERROR',
 
+  SaveOptionsRequest: 'SAVE_OPTIONS_REQUEST',
+  SaveOptionsResponse: 'SAVE_OPTIONS_RESPONSE',
+  SaveOptionsError: 'SAVE_OPTIONS_ERROR',
+
   Errors: {
     Connect: 'connect_error'
   }