🎨 Simplify search.vue & minor changes

components/CardsView.vue

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

components/TableView.vue

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

pages/_category.vue

@@ -3,21 +3,21 @@
     transition(name="fade-title" @after-enter="afterEnter")
       h1(v-if="showTitle") {{ category.title }}
     transition(name="fade-card")
-      .cards(v-if="areCardsVisible && showCards")
+      div(v-if="showCards")
-        template(v-for='resource in category.resources' )
+        component(
-          Card(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
+          :is="areCardsVisible ? 'CardsView' : 'TableView'"
-    transition(name="fade-card")
+          :resources="category.resources"
-      table(v-if="!areCardsVisible && showCards")
+          :createCopyUrl="createCopyUrl"
-        template(v-for='resource in category.resources' )
+          :activeCard='activeCard'
-          TableRow(:resource='resource' :key='resource.title' :createCopyUrl="createCopyUrl" :isActive='activeCard === resource.cleanTitle')
+        )
 </template>
 
 <script>
-import Card from '../components/Card'
+import CardsView from '../components/CardsView'
-import TableRow from '../components/TableRow'
+import TableView from '../components/TableView'
 
 export default {
-  components: { Card, TableRow },
+  components: { CardsView, TableView },
   data() {
     return {
       categoryRouteTitle: this.$route.params.category,

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: '',