🎨 Simplify search.vue & minor changes

components/CardsView.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .cards
-    Card(v-for='resource in category.resources' :resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
+    Card(v-for='resource in resources' :resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
 </template>
 
 <script>
@@ -8,6 +8,6 @@ import Card from './Card'
 
 export default {
   components: { Card },
-  props: ['category', 'createCopyUrl', 'activeCard'],
+  props: ['resources', 'createCopyUrl', 'activeCard'],
 }
 </script>

components/TableView.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   table
-    TableRow(v-for='resource in category.resources' :resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
+    TableRow(v-for='resource in resources' :resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
 </template>
 
 <script>
@@ -8,6 +8,6 @@ import TableRow from '../components/TableRow'
 
 export default {
   components: { TableRow },
-  props: ['category', 'createCopyUrl', 'activeCard'],
+  props: ['resources', 'createCopyUrl', 'activeCard'],
 }
 </script>

pages/_category.vue

@@ -4,7 +4,12 @@
       h1(v-if="showTitle") {{ category.title }}
     transition(name="fade-card")
       div(v-if="showCards")
-        <component :is="areCardsVisible ? 'CardsView' : 'TableView'" :category="category" :createCopyUrl="createCopyUrl" :activeCard='activeCard'></component>
+        component(
+          :is="areCardsVisible ? 'CardsView' : 'TableView'"
+          :resources="category.resources"
+          :createCopyUrl="createCopyUrl"
+          :activeCard='activeCard'
+        )
 </template>
 
 <script>

pages/search.vue

@@ -3,26 +3,24 @@
     transition(name="fade-title" @after-enter="afterEnter")
       h1(v-if="showTitle") Search
     transition(name="fade-card")
-      .cards(v-if="areCardsVisible && showCards")
+      div(showCards)
-        template(v-if="resources.length")
+        component(
-          template(v-for='resource in resources' )
+          v-if="resources.length"
-            Card(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
+          :is="areCardsVisible ? 'CardsView' : 'TableView'"
-        p(v-else) No results
+          :createCopyUrl="createCopyUrl"
-    transition(name="fade-card")
+          :activeCard="activeCard"
-      table(v-if="!areCardsVisible && showCards")
+          :resources="resources"
-        template(v-if="resources.length")
+        )
-          template(v-for='resource in resources' )
-            TableRow(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
         p(v-else) No results
 </template>
 
 <script>
-import Card from '../components/Card'
+import CardsView from '../components/CardsView'
-import TableRow from '../components/TableRow'
+import TableView from '../components/TableView'
 import * as R from 'ramda'
 
 export default {
-  components: { Card, TableRow },
+  components: { CardsView, TableView },
   data() {
     return {
       activeCard: '',