Add binding for reloading deals

src/App.vue

@@ -62,21 +62,25 @@ export default {
   },
   mounted() {
     this.isLoading = true;
-    axios
+    this.fetchDeals();
-      .get("http://localhost:8081/api/v1/topics")
+    Mousetrap.bind("/", this.focusSearch, "keyup");
-      .then((response) => {
+    Mousetrap.bind("r", this.loadDeals);
-        this.topics = response.data;
-        this.isLoading = false;
-      })
-      .catch((err) => {
-        console.log(err.response);
-      });
-    Mousetrap.bind("/", this.focusSearch);
   },
   methods: {
     focusSearch() {
       this.$refs.search.focus();
     },
+    fetchDeals() {
+      axios
+        .get("http://localhost:8081/api/v1/topics")
+        .then((response) => {
+          this.topics = response.data;
+          this.isLoading = false;
+        })
+        .catch((err) => {
+          console.log(err.response);
+        });
+    },
   },
   props: ["date"],
   computed: {

src/style.css

@@ -6,3 +6,12 @@ body {
   position: sticky;
   top: 0;
 }
+
+.form-control {
+  border-color: #404142;
+}
+
+.form-control:focus {
+  color: #ccc !important;
+  background-color: #404142 !important;
+}