Added view/route to filter by programming language (#41)

Author: masterfermin02

src/components/Languages.vue

@@ -1,16 +1,16 @@
 <template>
   <div>
     <span v-if="!languages.trim()">(no languages)</span>
-    <a
+    <router-link
       v-else
-      href="#"
       class="chip"
       v-for="(language, index) in languagesWithColors"
       :key="index"
       :style="{ backgroundColor: language.backgroundColor, color: language.textColor }"
+      :to="'/repositories/' + language.text"
     >
       {{ language.text }}
-    </a>
+    </router-link>
   </div>
 </template>
 

src/router/index.js

@@ -23,6 +23,11 @@ const routes = [
         name: "PopularRepositories",
         component: PopularRepositories
       },
+      {
+        path: ":language",
+        name: "PopularRepositories",
+        component: PopularRepositories
+      },
       {
         path: "new",
         name: "NewRepositories",

src/views/PopularRepositories.vue

@@ -1,8 +1,10 @@
 <template>
   <div>
-    <h3 class="center-align">Popular Repositories</h3>
+    <h3 class="center-align">
+      Popular <span>{{ language }}</span> Repositories
+    </h3>
     <p class="center">
-      Showing <strong>{{ repositories.length.toLocaleString() }}</strong> repositories
+      Showing <strong>{{ filteredLanguageRepositories.length.toLocaleString() }}</strong> repositories
       <span>sorted by stars.</span>
     </p>
     <InputSearch label="Filter repository by name or description..." v-model="searchTerm" />
@@ -34,18 +36,28 @@ export default {
     ...mapState({
       repositories: state => state.Repositories.repositories
     }),
+    filteredLanguageRepositories() {
+      if (this.language) {
+        return this.repositories.filter(item => item.languages.includes(this.language));
+      }
+
+      return this.repositories;
+    },
     filteredRepositories() {
       if (!this.searchTerm) {
-        return this.repositories.slice(0, 10);
+        return this.filteredLanguageRepositories.slice(0, 10);
       }
 
       return sortBy(repoSearcher.findAll(this.searchTerm), repo => -repo.stargazers).slice(0, 10);
+    },
+    language() {
+      return this.$route.params.language || null;
     }
   },
   watch: {
     repositories: {
       handler() {
-        repoSearcher.setData(this.repositories);
+        repoSearcher.setData(this.filteredLanguageRepositories);
       },
       immediate: true
     }
@@ -58,4 +70,12 @@ span {
   font-style: italic;
   font-weight: 600;
 }
+h3 span {
+  text-decoration: underline;
+  font-size: 2.92rem;
+  line-height: 110%;
+  margin: 1.9466666667rem 0 1.168rem 0;
+  font-style: inherit;
+  font-weight: inherit;
+}
 </style>