Merge pull request #1134 from slidewiki/SWIK-2615-Tags_are_removed_wh…

…en_selecting_a_file_on_the_add_deck_page Swik 2615 tags are removed when selecting a file on the add deck page
slidewiki · Dec 13, 2018 · 70903da · 70903da
2 parents 700da4a + 4751a7f
commit 70903da
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 7 deletions.
diff --git a/actions/import/storeTags.js b/actions/import/storeTags.js
@@ -0,0 +1,8 @@
+import { shortTitle } from '../../configs/general';
+const log = require('../log/clog');
+
+export default function storeTags(context, payload, done) {
+    log.info(context);
+    context.dispatch('STORE_TAGS', payload);
+    done();
+}
diff --git a/components/AddDeck/AddDeck.js b/components/AddDeck/AddDeck.js
@@ -14,6 +14,7 @@ import checkNoOfSlides from '../../actions/addDeck/checkNoOfSlides';
 import importCanceled from '../../actions/import/importCanceled';
 import importFinished from '../../actions/import/importFinished';
 import uploadFile from '../../actions/import/uploadFile';
+import storeTags from '../../actions/import/storeTags';
 import addActivity from '../../actions/activityfeed/addActivity';
 import publishDeck from '../../actions/addDeck/publishDeck';
 import ImportModal from '../Import/ImportModal';
@@ -33,6 +34,7 @@ class AddDeck extends React.Component {
     constructor(props) {
         super(props);
         this.percentage = 0;
+        this.defaultTagNames = [];// used for saving defaultName properties for tags
     }
     componentDidMount() {
         // let that = this;
@@ -75,7 +77,8 @@ class AddDeck extends React.Component {
     }
     handleAddDeck(x) {
         //console.log('handleAddDeck');
-
+        this.saveTags();
+
         this.context.executeAction(addDeckDeleteError, null);
 
         //validate input
@@ -86,7 +89,14 @@ class AddDeck extends React.Component {
         const { value: educationLevel } = this.refs.dropdown_level.getSelectedItem();
         // const license = this.refs.select_licenses.value;
         const license = 'CC BY-SA';//default license
-        const tags = [...this.tagInput.getSelected(), ...this.topicInput.getSelected()];
+        let tags = [...this.tagInput.getSelected(), ...this.topicInput.getSelected()];
+        tags.forEach((tag) => {
+            // check whether we have earlier assigned defaultName to tagName (in saveTags function) for this tag and restore the original state
+            if (this.defaultTagNames.includes(tag.tagName)) {
+                tag.defaultName = tag.tagName;
+                delete tag.tagName;
+            }
+        });
         const acceptedConditions = this.refs.checkbox_conditions.checked;
         const acceptedImagesLicense = this.refs.checkbox_imageslicense.checked;
         //console.log(title, language, description, theme, license, tags, acceptedConditions);
@@ -413,6 +423,25 @@ class AddDeck extends React.Component {
             console.error('Submission not possible - no file or not pptx/odp/zip');
         }
     }
+
+    saveTags() {
+        let tags = this.tagInput.getSelected();
+        tags.forEach((tag) => {
+            if (!tag.tagName && tag.defaultName) {
+                tag.tagName = tag.defaultName;//assign defaultName to tagName to avoid errors during the initialization of the TagInput component
+                this.defaultTagNames.push((tag.defaultName));//save defaultName in the array so that in the end we can restore the tag state in handleAddDeck
+            }
+        });
+        let topics = this.topicInput.getSelected();
+        topics.forEach((topic) => {
+            if (!topic.tagName && topic.defaultName) {
+                topic.tagName = topic.defaultName;
+                this.defaultTagNames.push((topic.defaultName));
+            }
+        });
+        //save tags in the store so that they can be restored during the initialization of TagInput component
+        this.context.executeAction(storeTags, {tags:tags, topics: topics});
+    }
 
     render() {
         //redirect to new deck if created
@@ -611,13 +640,13 @@ class AddDeck extends React.Component {
                             </div>
                             <div className="field">
                                 <label htmlFor="topics_input_field" id="topics_label"><FormattedMessage id='DeckProperty.Tag.Topic.Choose' defaultMessage='Choose Subject' /></label>
-                                <TagInput id="topics_input_field" initialTags={[]} ref={(i) => (this.topicInput = i)} tagFilter={{ tagType: 'topic' }} aria-labelledby="topics_label" aria-describedby="describe_topic" />
+                                <TagInput id="topics_input_field" initialTags={this.props.ImportStore.topics} ref={(i) => (this.topicInput = i)} tagFilter={{ tagType: 'topic' }} aria-labelledby="topics_label" aria-describedby="describe_topic" />
                             </div>
                         </div>
 
                         <div className="field">
                             <label htmlFor="tags_input_field" id="tags_label"><FormattedMessage id='DeckProperty.Tag.Choose' defaultMessage='Choose Tags' /></label>
-                            <TagInput id="tags_input_field" initialTags={[]} ref={(i) => (this.tagInput = i)} allowAdditions={true} aria-labelledby="tags_label" aria-describedby="describe_tags" />
+                            <TagInput id="tags_input_field" initialTags={this.props.ImportStore.tags} ref={(i) => (this.tagInput = i)} allowAdditions={true} aria-labelledby="tags_label" aria-describedby="describe_tags" />
                         </div>
 
                         <div className="ui message" id="uploadDesc">
@@ -637,7 +666,7 @@ class AddDeck extends React.Component {
                                             defaultMessage='Select file' />
                                     </div>
                                     */}
-                                    <ImportModal />
+                                    <ImportModal savetags={this.saveTags.bind(this)}/>
                                     {/*    <Import />*/}
 
                                 </div>

diff --git a/components/Import/ImportModal.js b/components/Import/ImportModal.js
@@ -73,6 +73,7 @@ class Import extends React.Component {
             $('#import_file_chooser').val('');
     }
     handleOpen(){
+        this.props.savetags();
         $('#app').attr('aria-hidden','true');
         this.setState({
             modalOpen:true,
@@ -127,7 +128,6 @@ class Import extends React.Component {
     }
     handleFileSelect(evt){
 
-
         this.context.executeAction(importFinished, null);
 
         //console.log(evt.target.files[0]);

diff --git a/stores/ImportStore.js b/stores/ImportStore.js
@@ -20,6 +20,8 @@ class ImportStore extends BaseStore {
         this.description = '';
         this.theme = '';
         this.license = '';
+        this.tags = [];
+        this.topics = [];
     }
     destructor()
     {
@@ -40,6 +42,8 @@ class ImportStore extends BaseStore {
         this.description = '';
         this.theme = '';
         this.license = '';
+        this.tags = [];
+        this.topics = [];
     }
     cancel() {
         this.destructor();
@@ -63,7 +67,9 @@ class ImportStore extends BaseStore {
             language: this.language,
             description: this.description,
             theme: this.theme,
-            license: this.license
+            license: this.license,
+            tags: this.tags,
+            topics: this.topics
         };
     }
     dehydrate() {
@@ -87,6 +93,8 @@ class ImportStore extends BaseStore {
         this.description = state.description;
         this.theme = state.theme;
         this.license = state.license;
+        this.tags = state.tags;
+        this.topics = state.topics;
     }
 
     storeFile(payload) {
@@ -97,6 +105,11 @@ class ImportStore extends BaseStore {
         this.fileReadyForUpload = true;
         this.emitChange();
     }
+    storeTags(payload) {
+        this.tags = payload.tags;
+        this.topics = payload.topics;
+        this.emitChange();
+    }
     uploadFailed(error) {
         console.log('ImportStore: uploadFailed()', error);
         this.destructor();
@@ -184,6 +197,7 @@ class ImportStore extends BaseStore {
 ImportStore.storeName = 'ImportStore';
 ImportStore.handlers = {
     'STORE_FILE': 'storeFile',
+    'STORE_TAGS': 'storeTags',
     'IMPORT_CANCELED': 'cancel',
     'IMPORT_FINISHED': 'destructor',
     'UPLOAD_FAILED': 'uploadFailed',