Extract search to a file

Author: DannyFeliz

src/util/Searcher.js

@@ -0,0 +1,40 @@
+import deburr from "lodash/deburr";
+
+export default class Searcher {
+  /**
+   * @param {Array}
+   */
+  fields = [];
+
+  /**
+   *
+   * @param {string} field
+   */
+  setField(field) {
+    this.fields.push(field);
+    return this;
+  }
+
+  /**
+   *
+   * @param {Array} data
+   */
+  setData(data) {
+    this.data = data;
+    return this;
+  }
+
+  /**
+   *
+   * @param {string} searchTerm
+   * @returns {Array}
+   */
+  findAll(searchTerm) {
+    const matcher = new RegExp(deburr(searchTerm), "i");
+    const result = this.data.filter(item => {
+      return this.fields.some(field => matcher.test(deburr(item[field])));
+    });
+
+    return result;
+  }
+}

src/views/PopularRepositories.vue

@@ -12,10 +12,12 @@
 
 <script>
 import { mapState } from "vuex";
-import deburr from "lodash/deburr";
 import sortBy from "lodash/sortBy";
 import Repositories from "@/components/RepositoryCard";
 import InputSearch from "@/components/InputSearch";
+import Searcher from "@/util/Searcher";
+
+const repoSearcher = new Searcher().setField("name").setField("description");
 
 export default {
   name: "PopularRepositories",
@@ -37,14 +39,15 @@ export default {
         return this.repositories.slice(0, 10);
       }
 
-      // TODO: Improve the performance, I'm not happy with the current speed.
-      // TODO Extract this to another file and make it modular.
-      const matcher = new RegExp(deburr(this.searchTerm), "i");
-      const filteredRepos = this.repositories.filter(repo => {
-        return matcher.test(deburr(repo.name)) || matcher.test(deburr(repo.description));
-      });
-
-      return sortBy(filteredRepos, repo => -repo.stargazers).slice(0, 10);
+      return sortBy(repoSearcher.findAll(this.searchTerm), repo => -repo.stargazers).slice(0, 10);
+    }
+  },
+  watch: {
+    repositories: {
+      handler() {
+        repoSearcher.setData(this.repositories);
+      },
+      immediate: true
     }
   }
 };