REFACTOR: various refactorings/fixes (#2)

assets/javascripts/discourse/components/knowledge-explorer-search.js.es6

@@ -1,10 +1,23 @@
+import debounce from "discourse/lib/debounce";
+
 export default Ember.Component.extend({
   classNames: "knowledge-explorer-search",
 
+  didUpdateAttrs() {
+    this._super(...arguments);
+
+    Ember.run.schedule("afterRender", () => {
+      document.querySelector(".knowledge-explorer-search-bar").focus();
+    });
+  },
+
+  debouncedSearch: debounce(function(term) {
+    this.onSearch(term);
+  }, 250),
+
   actions: {
-    onSearchTermChange(event) {
-      const term = event.target.value;
-      Ember.run.debounce(this, this.onSearch, term, 250);
+    onSearchTermChange(term) {
+      this.debouncedSearch(term);
     }
   }
 });

assets/javascripts/discourse/components/knowledge-explorer-topic.js.es6

@@ -1,7 +1,6 @@
-import { default as computed } from "ember-addons/ember-computed-decorators";
-
 export default Ember.Component.extend({
   classNames: "knowledge-explorer-topic",
+
   originalPostContent: Ember.computed.readOnly(
     "topic.post_stream.posts.firstObject.cooked"
   )

assets/javascripts/discourse/controllers/knowledge-explorer.js.es6

@@ -1,6 +1,5 @@
 import {
-  default as computed,
-  observes
+  default as computed
 } from "ember-addons/ember-computed-decorators";
 import KnowledgeExplorer from "discourse/plugins/discourse-knowledge-explorer/discourse/models/knowledge-explorer";
 
@@ -15,6 +14,15 @@ export default Ember.Controller.extend({
   isLoading: false,
   isLoadingMore: false,
   loadMoreUrl: Ember.computed.alias("model.topics.load_more_url"),
+  isTopicLoading: false,
+  topics: Ember.computed.alias("model.topics.topic_list.topics"),
+  tags: Ember.computed.readOnly("model.tags"),
+  filterTags: null,
+  filterCategory: null,
+  searchTerm: null,
+  selectedTopic: null,
+  topic: null,
+
   @computed("loadMoreUrl")
   canLoadMore(loadMoreUrl) {
     if (loadMoreUrl === null || this.isLoadingMore) {
@@ -22,15 +30,6 @@ export default Ember.Controller.extend({
     }
     return true;
   },
-  isTopicLoading: false,
-  topics: Ember.computed.alias("model.topics.topic_list.topics"),
-  tags: Ember.computed.readOnly("model.tags"),
-  filterTags: null,
-  filterCategory: null,
-  searchTerm: null,
-
-  selectedTopic: null,
-  topic: null,
 
   @computed("searchTerm")
   isSearching(searchTerm) {
@@ -41,6 +40,7 @@ export default Ember.Controller.extend({
   searchCount(isSearching, topics) {
     if (isSearching) return topics.length;
   },
+
   emptySearchResults: Ember.computed.equal("searchCount", 0),
 
   @computed("filterTags")
@@ -50,29 +50,40 @@ export default Ember.Controller.extend({
 
   actions: {
     setSelectedTopic(topicId) {
-      this.set("isTopicLoading", true);
-      this.set("selectedTopic", topicId);
+      this.setProperties({
+        isTopicLoading: true,
+        selectedTopic: topicId
+      });
+
       KnowledgeExplorer.getTopic(topicId).then(result => {
-        this.set("topic", result);
-        this.set("isTopicLoading", false);
+        this.setProperties({
+          topic: result,
+          isTopicLoading: false
+        });
       });
     },
+
     updateSelectedTags(tag) {
       let filter = this.filterTags;
       if (filter && filter.includes(tag.id)) {
-        filter = filter.replace(tag.id, "");
-        filter = filter.replace("|", "|");
-        filter = filter.replace(/^\|+|\|+$/g, "");
+        filter = filter
+          .replace(tag.id, "")
+          .replace("|", "|")
+          .replace(/^\|+|\|+$/g, "");
       } else if (filter) {
         filter = `${filter}|${tag.id}`;
       } else {
         filter = tag.id;
       }
 
-      this.set("filterTags", filter);
-      this.set("selectedTopic", null);
+      this.setProperties({
+        filterTags: filter,
+        selectedTopic: null
+      });
+
       this.send("refreshModel");
     },
+
     performSearch(term) {
       if (term === "") {
         this.set("searchTerm", null);
@@ -84,35 +95,44 @@ export default Ember.Controller.extend({
         return false;
       }
 
-      this.set("searchTerm", term);
-      this.set("selectedTopic", null);
+      this.setProperties({
+        searchTerm: term,
+        selectedTopic: null
+      });
+
       this.send("refreshModel");
     },
+
     loadMore() {
       if (this.canLoadMore) {
         this.set("isLoadingMore", true);
 
         KnowledgeExplorer.loadMore(this.loadMoreUrl).then(result => {
-          let topics = this.topics;
+          const topics = this.topics.concat(result.topics.topic_list.topics);
 
-          topics = topics.concat(result.topics.topic_list.topics);
-
-          this.set("topics", topics);
-          this.set("loadMoreUrl", result.topics.load_more_url || null);
-          this.set("isLoadingMore", false);
+          this.setProperties({
+            topics,
+            loadMoreUrl: result.topics.load_more_url || null,
+            isLoadingMore: false
+          });
         });
       }
     },
+
     refreshModel() {
       this.set("isLoading", true);
+
       const params = this.getProperties(
         "filterCategory",
         "filterTags",
         "searchTerm"
       );
+
       KnowledgeExplorer.list(params).then(result => {
-        this.set("model", result);
-        this.set("isLoading", false);
+        this.setProperties({
+          model: result,
+          isLoading: false
+        });
       });
     }
   }

assets/javascripts/discourse/initializers/setup-knowledge-explorer.js.es6

@@ -2,6 +2,7 @@ import { withPluginApi } from "discourse/lib/plugin-api";
 
 export default {
   name: "setup-knowledge-explorer",
+
   initialize() {
     withPluginApi("0.8", api => {
       api.decorateWidget("hamburger-menu:generalLinks", () => {

assets/javascripts/discourse/models/knowledge-explorer.js.es6

@@ -9,9 +9,11 @@ export default {
 
     return ajax(`/knowledge-explorer.json?${filters.join("&")}`);
   },
+
   loadMore(loadMoreUrl) {
     return ajax(loadMoreUrl);
   },
+
   getTopic(id) {
     return ajax(`/t/${id}.json`);
   }

assets/javascripts/discourse/routes/knowledge-explorer.js.es6

@@ -1,7 +1,12 @@
-import { ajax } from "discourse/lib/ajax";
 import KnowledgeExplorer from "discourse/plugins/discourse-knowledge-explorer/discourse/models/knowledge-explorer";
 
 export default Ember.Route.extend({
+  queryParams: {
+    searchTerm: {
+      replace: true
+    }
+  },
+
   model(params) {
     return KnowledgeExplorer.list(params);
   }

assets/javascripts/discourse/templates/components/knowledge-explorer-search.hbs

@@ -1,7 +1,8 @@
-<input
+{{input
   type="text"
-  value={{searchTerm}}
-  oninput={{action "onSearchTermChange"}}
+  value=(readonly searchTerm)
+  input=(action "onSearchTermChange" value="target.value")
   class="knowledge-explorer-search-bar"
   autocorrect="off"
-  autocapitalize="off">
+  autocapitalize="off"
+}}

assets/javascripts/discourse/templates/components/knowledge-explorer-tag.hbs

@@ -2,7 +2,8 @@
   {{#unless tag.active}}
     {{d-icon "plus"}}
   {{/unless}}
-  <span class="tag-id">{{tag.id}}</span><span class="tag-count">({{tag.count}})</span>
+  <span class="tag-id">{{tag.id}}</span>
+  <span class="tag-count">({{tag.count}})</span>
   {{#if tag.active}}
     {{d-icon "times-circle"}}
   {{/if}}

assets/javascripts/discourse/templates/components/knowledge-explorer-topic-list.hbs

@@ -1,28 +1,32 @@
 {{#load-more selector=".topic-list tr" action=loadMore}}
-<table class="topic-list">
-  <thead>
-    <th>Topic</th>
-    <th>Activity</th>
-  </thead>
-  <tbody>
-    {{#each topics as |topic|}}
-    <tr>
-      <td class="main-link">
-        <span class="link-top-line">
-          {{knowledge-explorer-topic-link topic=topic selectTopic=selectTopic}}
-        </span>
-        <span class="link-bottom-line">
-          {{#each topic.tags as |tag|}}
-            <span class="discourse-tag">{{tag}}</span>
-          {{/each}}
-        </span>
-      </td>
-      <td>
-        {{format-date topic.bumped_at format="tiny" noTitle="true"}}
-      </td>
-    </tr>
-    {{/each}}
-  </tbody>
-</table>
+  <table class="topic-list">
+    <thead>
+      <th>Topic</th>
+      <th>Activity</th>
+    </thead>
+    <tbody>
+      {{#each topics as |topic|}}
+      <tr>
+        <td class="main-link">
+          <span class="link-top-line">
+            {{knowledge-explorer-topic-link
+              topic=topic
+              selectTopic=selectTopic
+            }}
+          </span>
+          <span class="link-bottom-line">
+            {{#each topic.tags as |tag|}}
+              <span class="discourse-tag">{{tag}}</span>
+            {{/each}}
+          </span>
+        </td>
+        <td>
+          {{format-date topic.bumped_at format="tiny" noTitle="true"}}
+        </td>
+      </tr>
+      {{/each}}
+    </tbody>
+  </table>
 {{/load-more}}
+
 {{conditional-loading-spinner condition=loading}}

assets/javascripts/discourse/templates/components/knowledge-explorer-topic.hbs

@@ -1,8 +1,12 @@
 {{#link-to 'knowledgeExplorer' (query-params topic=null) class='knowledge-explorer-nav-link return'}}
   {{i18n 'knowledge_explorer.topic.back'}}
 {{/link-to}}
+
 <div class="topic-content">
   <h1>{{topic.title}}</h1>
   {{{originalPostContent}}}
 </div>
-<a class="knowledge-explorer-nav-link more" href="/t/{{topic.id}}">{{i18n 'knowledge_explorer.topic.navigate_to_topic'}}</a>
+
+<a class="knowledge-explorer-nav-link more" href="/t/{{topic.id}}">
+  {{i18n 'knowledge_explorer.topic.navigate_to_topic'}}
+</a>

assets/javascripts/discourse/templates/knowledge-explorer.hbs

@@ -1,17 +1,16 @@
 <div class="knowledge-explorer">
-  <div class="knowledge-explorer-search">
-    {{knowledge-explorer-search 
-      onSearch=(action "performSearch")
-    }}
-  </div>
+  {{knowledge-explorer-search
+    searchTerm=(readonly searchTerm)
+    onSearch=(action "performSearch")
+  }}
   {{#conditional-loading-spinner condition=isLoading}}
     <div class="knowledge-explorer-browse">
       <div class="knowledge-explorer-tags">
         {{#each tags as |tag|}}
-            {{knowledge-explorer-tag 
-              tag=tag
-              selectTag=(action "updateSelectedTags")
-            }}
+          {{knowledge-explorer-tag
+            tag=tag
+            selectTag=(action "updateSelectedTags")
+          }}
         {{/each}}
       </div>
       {{#if selectedTopic}}
@@ -20,21 +19,27 @@
         {{/conditional-loading-spinner}}
       {{else}}
         <div class="knowledge-explorer-results">
-        {{#if isSearching}}
-          {{#if emptySearchResults}}
-            <div class="result-count no-result">{{i18n 'search.no_results'}}</div>
-          {{else}}
-            <div class="result-count">{{i18n 'knowledge_explorer.search.results' count=searchCount}}</div>
+          {{#if isSearching}}
+            {{#if emptySearchResults}}
+              <div class="result-count no-result">
+                {{i18n 'search.no_results'}}
+              </div>
+            {{else}}
+              <div class="result-count">
+                {{i18n 'knowledge_explorer.search.results'
+                  count=searchCount
+                }}
+              </div>
+            {{/if}}
           {{/if}}
-        {{/if}}
-        {{#unless emptySearchResults}}
-          {{knowledge-explorer-topic-list 
-            topics=topics 
-            selectTopic=(action "setSelectedTopic")
-            loadMore=(action "loadMore")
-            loading=isLoadingMore
-          }}
-        {{/unless}}
+          {{#unless emptySearchResults}}
+            {{knowledge-explorer-topic-list
+              topics=topics
+              selectTopic=(action "setSelectedTopic")
+              loadMore=(action "loadMore")
+              loading=isLoadingMore
+            }}
+          {{/unless}}
         </div>
       {{/if}}
     </div>