Merge branch 'feature/filtering' into 'develop'

Feature/filtering

See merge request !68

src/components/settings/settings.js

@@ -1,11 +1,13 @@
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
+import { filter, trim } from 'lodash'
 
 const settings = {
   data () {
     return {
       hideAttachmentsLocal: this.$store.state.config.hideAttachments,
       hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv,
-      hideNsfwLocal: this.$store.state.config.hideNsfw
+      hideNsfwLocal: this.$store.state.config.hideNsfw,
+      muteWordsString: this.$store.state.config.muteWords.join('\n')
     }
   },
   components: {
@@ -20,6 +22,10 @@ const settings = {
     },
     hideNsfwLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideNsfw', value })
+    },
+    muteWordsString (value) {
+      value = filter(value.split('\n'), (word) => trim(word).length > 0)
+      this.$store.dispatch('setOption', { name: 'muteWords', value })
     }
   }
 }

src/components/settings/settings.vue

@@ -8,6 +8,11 @@
         <h2>Theme</h2>
         <style-switcher></style-switcher>
       </div>
+      <div class="setting-item">
+        <h2>Filtering</h2>
+        <p>All notices containing these words will be muted, one per line</p>
+        <textarea id="muteWords" v-model="muteWordsString"></textarea>
+      </div>
       <div class="setting-item">
         <h2>Attachments</h2>
         <ul class="setting-list">
@@ -32,9 +37,13 @@
 <script src="./settings.js">
 </script>
 
-<style>
+<style lang="scss">
  .setting-item {
    margin: 1em 1em 1.4em;
+   textarea {
+     width: 100%;
+     height: 100px;
+   }
  }
  .setting-list {
    list-style-type: none;

src/components/status/status.js

@@ -4,6 +4,7 @@ import RetweetButton from '../retweet_button/retweet_button.vue'
 import DeleteButton from '../delete_button/delete_button.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
 import UserCardContent from '../user_card_content/user_card_content.vue'
+import { filter } from 'lodash'
 
 const Status = {
   props: [
@@ -19,6 +20,9 @@ const Status = {
     userExpanded: false
   }),
   computed: {
+    muteWords () {
+      return this.$store.state.config.muteWords
+    },
     hideAttachments () {
       return (this.$store.state.config.hideAttachments && !this.inConversation) ||
         (this.$store.state.config.hideAttachmentsInConv && this.inConversation)
@@ -35,7 +39,15 @@ const Status = {
     loggedIn () {
       return !!this.$store.state.users.currentUser
     },
-    muted () { return !this.unmuted && this.status.user.muted },
+    muteWordHits () {
+      const statusText = this.status.text.toLowerCase()
+      const hits = filter(this.muteWords, (muteWord) => {
+        return statusText.includes(muteWord.toLowerCase())
+      })
+
+      return hits
+    },
+    muted () { return !this.unmuted && (this.status.user.muted || this.muteWordHits.length > 0) },
     isReply () { return !!this.status.in_reply_to_status_id },
     borderColor () {
       return {

src/components/status/status.vue

@@ -3,6 +3,7 @@
     <template v-if="muted">
       <div class="media status container muted">
         <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
+        <small class="muteWords">{{muteWordHits.join(', ')}}</small>
         <a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a>
       </div>
     </template>
@@ -52,10 +53,10 @@
                 <small>
                   <a href="#" @click.prevent="toggleExpanded" ><i class="icon-plus-squared"></i></a>
                 </small>
-                <small v-if="status.user.muted">
+              </template>
+              <small v-if="unmuted">
                 <a href="#" @click.prevent="toggleMute" ><i class="icon-eye-off"></i></a>
               </small>
-              </template>
               <small v-if="!status.is_local" class="source_url">
                 <a :href="status.external_url" target="_blank" ><i class="icon-binoculars"></i></a>
               </small>
@@ -167,6 +168,10 @@
    button {
      margin-left: auto;
    }
+
+   .muteWords {
+     margin-left: 10px;
+   }
  }
 
  a.unmute {

src/lib/persisted_state.js

@@ -3,6 +3,8 @@ import objectPath from 'object-path'
 import localforage from 'localforage'
 import { throttle, each } from 'lodash'
 
+let loaded = false
+
 const defaultReducer = (state, paths) => (
   paths.length === 0 ? state : paths.reduce((substate, path) => {
     objectPath.set(substate, path, objectPath.get(state, path))
@@ -15,7 +17,11 @@ const defaultStorage = (() => {
 })()
 
 const defaultSetState = (key, state, storage) => {
+  if (!loaded) {
+    console.log('waiting for old state to be loaded...')
+  } else {
     return storage.setItem(key, state)
+  }
 }
 
 export default function createPersistedState ({
@@ -32,6 +38,7 @@ export default function createPersistedState ({
 } = {}) {
   return store => {
     getState(key, storage).then((savedState) => {
+      try {
         if (typeof savedState === 'object') {
           // build user cache
           const usersState = savedState.users || {}
@@ -44,6 +51,11 @@ export default function createPersistedState ({
             merge({}, store.state, savedState)
           )
         }
+        loaded = true
+      } catch (e) {
+        console.log("Couldn't load state")
+        loaded = true
+      }
     })
 
     subscriber(store)((mutation, state) => {

src/main.js

@@ -33,6 +33,7 @@ const persistedStateOptions = {
     'config.hideAttachments',
     'config.hideAttachmentsInConv',
     'config.hideNsfw',
+    'config.muteWords',
     'statuses.notifications',
     'users.users'
   ]

src/modules/config.js

@@ -6,7 +6,8 @@ const defaultState = {
   colors: {},
   hideAttachments: false,
   hideAttachmentsInConv: false,
-  hideNsfw: true
+  hideNsfw: true,
+  muteWords: []
 }
 
 const config = {