Refresh Taxonomy panel each time user open it

mitodl · Sep 23, 2015 · 50f3abb · 50f3abb
1 parent 17d3586
commit 50f3abb
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 15 deletions.
diff --git a/ui/static/ui/js/listing.js b/ui/static/ui/js/listing.js
@@ -88,6 +88,14 @@ define('listing',
         $('.cd-panel').removeClass('is-visible');
       }
 
+      var loadManageTaxonomies = function () {
+        ManageTaxonomies.loader(
+          repoSlug,
+          refreshFromAPI,
+          showConfirmationDialog,
+          $('#taxonomy-component')[0]);
+      };
+
       $('[data-toggle=popover]').popover();
       //Close panels on escape keypress
       $(document).keyup(function(event) {
@@ -118,6 +126,7 @@ define('listing',
       //open the lateral panel
       $('.btn-taxonomies').on('click', function (event) {
         event.preventDefault();
+        loadManageTaxonomies();
         $('.cd-panel-2').addClass('is-visible');
       });
 
@@ -502,11 +511,6 @@ define('listing',
 
       // Initial refresh to populate page.
       refreshFromAPI();
-      ManageTaxonomies.loader(
-        repoSlug,
-        refreshFromAPI,
-        showConfirmationDialog,
-        $('#taxonomy-component')[0]);
     };
 
     return {

diff --git a/ui/static/ui/js/manage_taxonomies.jsx b/ui/static/ui/js/manage_taxonomies.jsx
@@ -281,6 +281,9 @@ define('manage_taxonomies', ['react', 'lodash', 'jquery', 'utils', 'bootstrap'],
       </div>;
 
     },
+    componentWillReceiveProps: function() {
+      this.reportMessage(undefined);
+    },
     reportMessage: function(message) {
       this.setState({message: message});
     },
@@ -539,9 +542,23 @@ define('manage_taxonomies', ['react', 'lodash', 'jquery', 'utils', 'bootstrap'],
         </div>
       );
     },
-    componentDidMount: function() {
+    refreshTaxonomies: function(props) {
       var thiz = this;
+      Utils.getVocabulariesAndTerms(props.repoSlug).then(
+        function(vocabularies) {
+          if (!thiz.isMounted()) {
+            return;
+          }
 
+          thiz.setState({vocabularies: vocabularies});
+        }
+      );
+    },
+    componentWillReceiveProps: function(nextProps) {
+      this.refreshTaxonomies(nextProps);
+    },
+    componentDidMount: function() {
+      var thiz = this;
       Utils.getCollection("/api/v1/learning_resource_types/").then(
         function(learningResourceTypes) {
         if (!thiz.isMounted()) {
@@ -552,15 +569,7 @@ define('manage_taxonomies', ['react', 'lodash', 'jquery', 'utils', 'bootstrap'],
           return type.name;
         });
         thiz.setState({learningResourceTypes: types});
-        Utils.getVocabulariesAndTerms(thiz.props.repoSlug).then(
-          function(vocabularies) {
-            if (!thiz.isMounted()) {
-              return;
-            }
-
-            thiz.setState({vocabularies: vocabularies});
-          }
-        );
+        thiz.refreshTaxonomies(thiz.props);
       });
     }
   });