Add filter routes

package.json

@@ -19,7 +19,8 @@
     "vue": "^3.2.37",
     "vue-github-button": "^3.0.3",
     "vue-gtag": "^2.0.1",
-    "vue-loading-overlay": "^5.0.3"
+    "vue-loading-overlay": "^5.0.3",
+    "vue-router": "4"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/App.vue

@@ -11,7 +11,7 @@ export default {
   data() {
     return {
       ascending: this.ascending,
-      filter: "",
+      filter: window.location.href.split("filter=")[1] || "",
       isLoading: false,
       sortColumn: this.sortColumn,
       topics: [],
@@ -23,16 +23,24 @@ export default {
       localStorage.getItem("ascending") === "false" ? false : true;
     this.isLoading = true;
     this.fetchDeals();
-    Mousetrap.bind("/", this.focusSearch, "keyup");
+    Mousetrap.bind("/", this.focusFilter, "keyup");
     Mousetrap.bind("r", this.fetchDeals);
-    Mousetrap.bind("escape", this.blurSearch);
+    Mousetrap.bind("escape", this.blurFilter);
   },
   methods: {
-    focusSearch() {
+    focusFilter() {
-      this.$refs.search.focus();
+      this.$refs.filter.focus();
     },
-    blurSearch() {
+    blurFilter() {
-      this.$refs.search.blur();
+      this.$refs.filter.blur();
+    },
+    createFilterRoute(params) {
+      this.$refs.filter.blur();
+      history.pushState(
+        {},
+        null,
+        `${window.location.origin}#/filter=${encodeURIComponent(params)}`
+      );
     },
     fetchDeals() {
       this.isLoading = true;
@@ -79,14 +87,13 @@ export default {
       }
     },
   },
-  props: ["date"],
   computed: {
     formatDate() {
       return (v) => {
         return moment(String(v)).format("hh:mm A z (MM/DD)");
       };
     },
-    columns: function columns() {
+    columns() {
       return {
         Deal: "deal",
         Score: "score",
@@ -102,9 +109,8 @@ export default {
           row.Offer.dealer_name +
           "]"
         ).toLowerCase();
-        const searchTerm = this.filter.toLowerCase();
+        const filterTerm = this.filter.toLowerCase();
-
+        return titles.includes(filterTerm);
-        return titles.includes(searchTerm);
       });
     },
     highlightMatches() {
@@ -131,10 +137,11 @@ export default {
     <input
       class="form-control bg-dark text-light mousetrap"
       type="text"
+      id="filter"
       placeholder="Filter"
       v-model="filter"
-      v-on:keyup.enter="blurSearch()"
+      v-on:keyup.enter="createFilterRoute(this.filter.toString())"
-      ref="search"
+      ref="filter"
     />
     <table class="table table-dark table-hover">
       <thead class="thead thead-light text-muted">
@@ -194,7 +201,7 @@ export default {
     </table>
     <div v-if="!isMobile()">
       <footer class="fixed-bottom">
-        <small>Tip: Press '/' to search and 'r' to reload</small>
+        <small>Tip: Press '/' to filter and create filter links (i.e. <a href="/#/filter=pizza" onclick="setTimeout(location.reload.bind(location), 1)">https://rfd.fyi/#/filter=pizza</a>)</small>
         <div class="footer-right">
           <github-button href="https://github.com/davegallant/rfd-fyi"
             >Star</github-button

src/main.js

@@ -1,6 +1,7 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import VueGtag from "vue-gtag";
+import { createRouter, createWebHashHistory } from "vue-router";
 
 import "bootstrap/dist/css/bootstrap.min.css";
 import "bootstrap/dist/js/bootstrap.min.js";
@@ -8,9 +9,17 @@ import "mousetrap/mousetrap.min.js";
 
 import "./theme.css";
 
-createApp(App)
+const routes = [];
-  .use(VueGtag, {
-    config: { id: "G-YF11ZH9SYD" },
-  })
-  .mount("#app");
 
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+});
+
+const app = createApp(App).use(VueGtag, {
+  config: { id: "G-YF11ZH9SYD" },
+});
+
+app.use(router);
+console.log(router);
+app.mount("#app");

yarn.lock

@@ -1608,6 +1608,11 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
+"@vue/devtools-api@^6.4.5":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
+  integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
+
 "@vue/reactivity-transform@3.2.37":
   version "3.2.37"
   resolved "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.37.tgz"
@@ -5924,6 +5929,13 @@ vue-loading-overlay@^5.0.3:
   resolved "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-5.0.3.tgz"
   integrity sha512-6JWZalwlHF4do3HXsFZGt6PcWYseAI5FuNKpveEkljkzqskDWRr7rYmYHVx2kKu4qIvK0vLpL25T/hpFMNoevQ==
 
+vue-router@4:
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.6.tgz#b70303737e12b4814578d21d68d21618469375a1"
+  integrity sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==
+  dependencies:
+    "@vue/devtools-api" "^6.4.5"
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.3:
   version "4.1.3"
   resolved "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz"