feat: implement delete options from right click on link (#56)

NoMercy235 · Mar 27, 2020 · c2c09bc · c2c09bc
1 parent 5ef0884
commit c2c09bc
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 9 deletions.
diff --git a/src/admin/story-view/view/components/write-story/write-story/WriteStoryComponent.js b/src/admin/story-view/view/components/write-story/write-story/WriteStoryComponent.js
@@ -31,9 +31,12 @@ const ViewStates = {
 class WriteStoryComponent extends Component {
   state = {
     viewState: ViewStates.View,
+
+    // These are used for the save drawers
     sequence: undefined,
     sourceDest: sourceDestInitialValues,
     options: [],
+
     graphState: { staticGraph: true },
   };
   graphRef = React.createRef();
@@ -74,6 +77,17 @@ class WriteStoryComponent extends Component {
     onDeleteSequenceModalOpen(seqId);
   };
 
+  onOpenDeleteOptionsModal = (e, fromSeqId, toSeqId) => {
+    const { onOpenDeleteOptionsModal } = this.props;
+    const { options } = this.props;
+    e.preventDefault();
+    onOpenDeleteOptionsModal(
+      fromSeqId,
+      toSeqId,
+      getOptionsBetweenNodes(fromSeqId, toSeqId, options),
+    );
+  };
+
   onOpenSaveOptionsModal = async (fromSeqId, toSeqId) => {
     const { story } = this.props;
     let sourceDest = sourceDestInitialValues;
@@ -201,6 +215,7 @@ class WriteStoryComponent extends Component {
                 onClickNode={this.onOpenSaveSeqModal}
                 onRightClickNode={this.onOpenDeleteSeqModal}
                 onClickLink={this.onOpenSaveOptionsModal}
+                onRightClickLink={this.onOpenDeleteOptionsModal}
                 onNodePositionChange={onUpdateSeqPosition}
               />
             </CardContent>
@@ -237,6 +252,7 @@ WriteStoryComponent.propTypes = {
 
   onSaveSequence: PropTypes.func.isRequired,
   onDeleteSequenceModalOpen: PropTypes.func.isRequired,
+  onOpenDeleteOptionsModal: PropTypes.func.isRequired,
   onSaveOptions: PropTypes.func.isRequired,
   onUpdateSeqPosition: PropTypes.func.isRequired,
 };

diff --git a/src/admin/story-view/view/containers/WriteStoryContainer.js b/src/admin/story-view/view/containers/WriteStoryContainer.js
@@ -29,6 +29,7 @@ class WriteStoryContainer extends Component {
   state = {
     canRender: false,
     isDeleteSequenceModalOpen: false,
+    isDeleteOptionsModalOpen: false,
     resourceToDelete: undefined,
   };
 
@@ -132,6 +133,12 @@ class WriteStoryContainer extends Component {
     this.onCloseDeleteModals();
   };
 
+  onDeleteOptionsBetweenSequences = () => {
+    const { resourceToDelete: { options } } = this.state;
+    this.onSaveOptions([], options);
+    this.onCloseDeleteModals();
+  };
+
   onDeleteSequenceModalOpen = (seqId) => {
     const {
       storyViewStore,
@@ -144,6 +151,21 @@ class WriteStoryContainer extends Component {
     });
   };
 
+  onOpenDeleteOptionsModal = (fromSeqId, toSeqId, options) => {
+    const { storyViewStore } = this.props;
+
+    const fromSeq = storyViewStore.getSequenceById(fromSeqId);
+    const toSeq = storyViewStore.getSequenceById(toSeqId);
+    this.setState({
+      isDeleteOptionsModalOpen: true,
+      resourceToDelete: {
+        fromSeq,
+        toSeq,
+        options,
+      },
+    });
+  };
+
   onCloseDeleteModals = () => {
     this.setState({
       isDeleteSequenceModalOpen: false,
@@ -152,12 +174,12 @@ class WriteStoryContainer extends Component {
     });
   };
 
-  onSaveOptions = (newOptions, optionsToDelete) => {
-    socket.emit(
+  onSaveOptions = (newOptions = [], optionsToDelete = []) => {
+    newOptions.length && socket.emit(
       SocketEvents.SaveOptionsRequest,
       newOptions.map(option => OptionModel.forApi(option, ['_id'])),
     );
-    socket.emit(
+    optionsToDelete.length && socket.emit(
       SocketEvents.DeleteOptionsRequest,
       optionsToDelete.map(option => option._id),
     );
@@ -170,7 +192,8 @@ class WriteStoryContainer extends Component {
     );
   };
 
-  renderDeleteSequenceModalContent = (sequence = {}) => {
+  renderDeleteSequenceModalContent = () => {
+    const { resourceToDelete: sequence = {} } = this.state;
     return (
       <>
         <Typography>You are about to delete the following sequence:</Typography>
@@ -187,21 +210,31 @@ class WriteStoryContainer extends Component {
   };
 
   renderDeleteSequenceModal = () => {
-    const {
-      isDeleteSequenceModalOpen,
-      resourceToDelete,
-    } = this.state;
+    const { isDeleteSequenceModalOpen } = this.state;
     return (
       <ConfirmationModal
         title="Delete sequence?"
-        description={this.renderDeleteSequenceModalContent(resourceToDelete)}
+        description={this.renderDeleteSequenceModalContent()}
         open={isDeleteSequenceModalOpen}
         onAccept={this.onDeleteSequence}
         onClose={this.onCloseDeleteModals}
       />
     );
   };
 
+  renderDeleteOptionsModal = () => {
+    const { isDeleteOptionsModalOpen } = this.state;
+    return (
+      <ConfirmationModal
+        title="Delete options?"
+        description={<Typography>You are about to delete all options between these sequences</Typography>}
+        open={isDeleteOptionsModalOpen}
+        onAccept={this.onDeleteOptionsBetweenSequences}
+        onClose={this.onCloseDeleteModals}
+      />
+    );
+  };
+
   render() {
     const {
       storyViewStore: {
@@ -226,10 +259,12 @@ class WriteStoryContainer extends Component {
           attributes={attributes}
           onSaveSequence={this.onSaveSequence}
           onDeleteSequenceModalOpen={this.onDeleteSequenceModalOpen}
+          onOpenDeleteOptionsModal={this.onOpenDeleteOptionsModal}
           onSaveOptions={this.onSaveOptions}
           onUpdateSeqPosition={this.onUpdateSeqPosition}
         />
         {this.renderDeleteSequenceModal()}
+        {this.renderDeleteOptionsModal()}
       </>
     );
   }