From 58fa9ff8c9acf733205af7c8f5d5c50b76f2210a Mon Sep 17 00:00:00 2001
From: Eduards Sizovs <eduardsi@Eduardss-MacBook-Pro.local>
Date: Thu, 9 Aug 2018 17:03:32 +0300
Subject: [PATCH] fix tag capitalization by adding exceptions

---
 src/ClickableTags.vue    | 18 ++++--------------
 src/ExpandableTags.vue   |  2 +-
 src/NonClickableTags.vue | 27 ---------------------------
 src/Search.vue           | 11 +++++------
 src/Tags.vue             |  5 +----
 src/VideoCard.vue        |  3 +--
 src/Watch.vue            |  2 +-
 src/helpers/filters.js   | 26 ++++++++++++++++++++++++++
 src/index.js             |  3 ++-
 9 files changed, 41 insertions(+), 56 deletions(-)
 delete mode 100644 src/NonClickableTags.vue

diff --git a/src/ClickableTags.vue b/src/ClickableTags.vue
index c692aa4..66968c7 100644
--- a/src/ClickableTags.vue
+++ b/src/ClickableTags.vue
@@ -2,13 +2,12 @@
   .tags
     span.tag.is-primary.is-capitalized(v-if="isNew") New
     span.tag.is-danger.is-capitalized(v-if="featured") Featured
-    a.tag.is-capitalized(v-for="(tag) in tags" v-on:click="refineTag(tag)") {{tag}}
+    a.tag(v-for="(tag) in tags" v-on:click="refineTag(tag)") {{tag | capitalizeIfNeeded}}
     a.tag.is-capitalized(v-on:click="refineChannel(channel)")
       i.fab.fa-youtube
       | &nbsp; {{channel | truncate(10)}}
 </template>
 <script>
-  import { Component } from 'vue-instantsearch'
 
   export default {
     props: {
@@ -17,22 +16,13 @@
       channel: { required: true },
       isNew: { required: true },
     },
-    mixins: [Component],
     methods: {
       refineTag(tag) {
-        if (window.fastrMode) {
-          this.$router.push({ name: 'tag', params: { tag: tag } })
-        } else {
-          this.searchStore.algoliaHelper.addDisjunctiveFacetRefinement('tags', tag)
-        }
+        this.$router.push({ name: 'tag', params: { tag: tag } })
       },
       refineChannel(channel) {
-        if (window.fastrMode) {
-          this.$router.push({ name: 'channel', params: { channel: channel } } )
-        } else {
-          this.searchStore.algoliaHelper.addDisjunctiveFacetRefinement('channelTitle', channel)
-        }
-    }
+        this.$router.push({ name: 'channel', params: { channel: channel } } )
+      }
   }
 }
 </script>
diff --git a/src/ExpandableTags.vue b/src/ExpandableTags.vue
index ed59fc9..41b6639 100644
--- a/src/ExpandableTags.vue
+++ b/src/ExpandableTags.vue
@@ -6,7 +6,7 @@
         .field.is-grouped.is-grouped-multiline
           .control(v-for="item in items")
             .tags.has-addons
-              a.tag.is-dark.is-capitalized(@click="navigate(item)"): slot(v-bind:item="item") {{item}}
+              a.tag.is-dark(@click="navigate(item)"): slot(v-bind:item="item") {{item}}
               a.is-black.tag(@click="navigate(item)") 
                 | {{item.videos.total}}  
                 span(v-if="item.videos.new > 0") &nbsp; +{{item.videos.new}}
diff --git a/src/NonClickableTags.vue b/src/NonClickableTags.vue
deleted file mode 100644
index 8ef6de0..0000000
--- a/src/NonClickableTags.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template lang="pug">
-  .tags
-    span.tag.is-primary.is-capitalized(v-if="isNew") New
-    span.tag.is-danger.is-capitalized(v-if="featured") Featured
-    a.tag.is-capitalized(v-for="(tag) in tags" @click="refineTag(tag)") {{tag}}
-    a.tag.is-capitalized(@click="refineChannel(channel)")
-      i.fab.fa-youtube 
-      | &nbsp; {{channel | truncate(10)}}
-</template>
-<script>
-  export default {
-    props: { 
-      featured: { type: Boolean, required: true },
-      tags: { required: true },
-      channel: { required: true },
-      isNew: { required: true }
-    },
-    methods: {
-      refineTag: function (tag) {
-        this.$router.push({ name: 'tag', params: { tag: tag } })
-      },
-      refineChannel: function (channel) {
-        this.$router.push({ name: 'channel', params: { channel: channel } } )
-      }      
-    }    
-  };
-</script>
\ No newline at end of file
diff --git a/src/Search.vue b/src/Search.vue
index 8c1330f..db88033 100644
--- a/src/Search.vue
+++ b/src/Search.vue
@@ -11,28 +11,28 @@
                 .column.is-one-quarter
                   p.buttons
                     router-link.button.is-small.is-outlined.is-hidden-tablet(v-if="speaker || tag || channel || showMyWatched || showFavorites" :to="{ name: 'search' }")
-                      span {{speaker || tag || channel || (showMyWatched ? 'Watched' : '') || (showFavorites ? 'Favorites' : '')}}
+                      span {{speaker || tag || channel || (showMyWatched ? 'Watched' : '') || (showFavorites ? 'Favorites' : '') | capitalizeIfNeeded}}
                       span.icon.is-small: i.fas.fa-times
                     a.button.is-small.is-hidden-tablet(@click="$refs.tagPicker.expand()"): span.icon.is-small: i.fas.fa-hashtag
                     a.button.is-small.is-hidden-tablet(@click="$refs.speakerPicker.expand()"): span.icon.is-small: i.far.fa-user-circle
                     a.button.is-small.is-hidden-tablet(@click="$refs.channelPicker.expand()"): span.icon.is-small: i.fab.fa-youtube
     
                   ExpandableTags(ref="tagPicker" icon="fas fa-hashtag" title="Tags" :items="tags" :limit="10" :route="routeToTag")
-                      template(slot-scope="slot") {{slot.item.tag}}
+                      template(slot-scope="slot") {{slot.item.tag | capitalizeIfNeeded}}
 
                   ExpandableTags(ref="speakerPicker" icon="far fa-user-circle" title="Speakers" :items="speakers" :limit="10" :route="routeToSpeaker")
                       template(slot-scope="slot")
-                        span {{slot.item.name}}
+                        span {{slot.item.name | capitalizeIfNeeded}}
 
                   ExpandableTags(ref="channelPicker" icon="fab fa-youtube" title="Channels" :items="channels" :limit="10" :route="routeToChannel")
-                      template(slot-scope="slot") {{slot.item.title | truncate(25)}}
+                      template(slot-scope="slot") {{slot.item.title | truncate(25) | capitalizeIfNeeded}}
                 .column
                   .columns
                     .column
                       .columns
                         .column.is-hidden-mobile
                           router-link.button.is-small.is-outlined(v-if="speaker || tag || channel || showMyWatched || showFavorites" :to="{ name: 'search' }")
-                            span.is-capitalized(v-if="tag || channel") {{tag || channel}}
+                            span(v-if="tag || channel") {{tag || channel | capitalizeIfNeeded}}
                             span.is-lowercased(v-if="speaker") @{{speaker}}
                             span.is-lowercased(v-if="showMyWatched") Watched
                             span.is-lowercased(v-if="showFavorites") Favorites
@@ -59,7 +59,6 @@
                                 :newMode="newMode" 
                                 :tags="result.tags" 
                                 :featured="result.featured" 
-                                :tagsClickable="true" 
                                 :speaker="result.speaker" 
                                 :creationDate="result.creationDate" 
                                 :recordingDate="result.recordingDate" 
diff --git a/src/Tags.vue b/src/Tags.vue
index 93ff278..1d5b842 100644
--- a/src/Tags.vue
+++ b/src/Tags.vue
@@ -9,7 +9,6 @@
 <script>
   export default {
     props: {
-      clickable: { type: Boolean, default: false },
       featured: { type: [Boolean, Array], required: true },
       tags: { required: true },
       channel: { required: true },
@@ -17,9 +16,7 @@
     },
     computed: {
       componentLoader() {
-        return () => this.clickable
-          ? import('./ClickableTags.vue')
-          : import('./NonClickableTags.vue')
+        return () => import('./ClickableTags.vue')
       },
     }
   }
diff --git a/src/VideoCard.vue b/src/VideoCard.vue
index 8094408..00e7088 100644
--- a/src/VideoCard.vue
+++ b/src/VideoCard.vue
@@ -52,7 +52,7 @@
               div                
                 p.heading.is-capitalized Recorded
                 p.title.is-size-7 {{recordingDate | published}}                
-          Tags(:tags="tags" :isNew="isNew" :featured="featured" :clickable="tagsClickable" :channel="channel")
+          Tags(:tags="tags" :isNew="isNew" :featured="featured" :channel="channel")
           .contribute(v-if="speaker")
             p.subtitle.is-7
               | Wrong data? 
@@ -140,7 +140,6 @@
       creationDate: { type: Number, required: true },
       tags: { type: Array, required: false },
       featured: { type: [Boolean, Array], default: false},
-      tagsClickable: { type: Boolean, default: false},
       speaker: {
         required: false,
         name: {
diff --git a/src/Watch.vue b/src/Watch.vue
index 3d67ea5..5596035 100644
--- a/src/Watch.vue
+++ b/src/Watch.vue
@@ -62,7 +62,7 @@
                       |  contribute
             .media
             .tags
-              a.tag.is-capitalized(v-for="tag in video.tags" @click="refineTag(tag)") {{tag}}
+              a.tag(v-for="tag in video.tags" @click="refineTag(tag)") {{tag | capitalizeIfNeeded}}
               a.tag.is-capitalized(@click="refineChannel(video.channelTitle)")
                 i.fab.fa-youtube 
                 | &nbsp; {{video.channelTitle}}
diff --git a/src/helpers/filters.js b/src/helpers/filters.js
index 5ea5038..1b5fd22 100644
--- a/src/helpers/filters.js
+++ b/src/helpers/filters.js
@@ -26,6 +26,32 @@ export const duration = it => {
   return (hours ? `${hours} h `: '') + (minutes ? `${minutes} min` : '')
 }
 
+export const capitalizeIfNeeded = (it) => { 
+  let tags = [
+    "iOS", 
+    "IoT", 
+    "DI", 
+    "TDD", 
+    "GraphQL", 
+    "BDD", 
+    "PHP", 
+    ".NET", 
+    "DevOps", 
+    "ML", 
+    "HTML5", 
+    "API",
+    "AWS",
+    "RxJava",
+    "CSS",
+    "REST"
+  ]
+  
+  let noCapitalizeTag = tags.find(tag => new RegExp(`^${tag}$`, "i").test(it))
+  return noCapitalizeTag || capitalize(it)
+}
+
+const capitalize = (str) => str.replace(/\b\w/g, l => l.toUpperCase())
+
 export const truncate = (it, max) => it
   ? it.slice(0, max) + (max < it.length ? '...' : '')
   : it
diff --git a/src/index.js b/src/index.js
index f526bfb..1820cdd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -26,7 +26,7 @@ import App from './App.vue'
 import Watch from './Watch.vue'
 import Search from './Search.vue'
 import Contributors from './Contributors.vue'
-import { flatten, views, duration, truncate, published } from './helpers/filters'
+import { flatten, views, duration, truncate, published, capitalizeIfNeeded } from './helpers/filters'
 
 import auth from './auth'
 import videos from './videos'
@@ -52,6 +52,7 @@ Vue.filter('views', views)
 Vue.filter('duration', duration)
 Vue.filter('truncate', truncate)
 Vue.filter('published', published)
+Vue.filter('capitalizeIfNeeded', capitalizeIfNeeded)
 
 const router = new VueRouter({
   mode: 'history',