From 12df967cb6f182f02318c166fe459ab86cc4f4ab Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 07:13:48 -0500
Subject: [PATCH 01/29] Add withLoadMore hoc

---
 src/hocs/with_load_more/with_load_more.js   | 73 +++++++++++++++++++++
 src/hocs/with_load_more/with_load_more.scss | 10 +++
 2 files changed, 83 insertions(+)
 create mode 100644 src/hocs/with_load_more/with_load_more.js
 create mode 100644 src/hocs/with_load_more/with_load_more.scss

diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
new file mode 100644
index 00000000..0f72ffd6
--- /dev/null
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -0,0 +1,73 @@
+import Vue from 'vue'
+import filter from 'lodash/filter'
+import './with_load_more.scss'
+
+const withLoadMore = (Component, fetchEntries, getEntries) => {
+  const originalProps = Component.props || []
+  const props = filter(originalProps, v => v !== 'entries')
+
+  return Vue.component('withLoadMore', {
+    render (createElement) {
+      return (
+        <div class="with-load-more">
+          <Component entries={this.entries} />
+          <div class="with-load-more-footer">
+            {this.error && <a onClick={this.fetch} class="alert error">{this.$t('general.generic_error')}</a>}
+            {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
+            {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetch}>{this.$t('general.more')}</a>}
+          </div>
+        </div>
+      )
+    },
+    props,
+    data () {
+      return {
+        loading: false,
+        bottomedOut: false,
+        error: false
+      }
+    },
+    computed: {
+      entries () {
+        return getEntries(this.$props, this.$store) || []
+      }
+    },
+    created () {
+      window.addEventListener('scroll', this.scrollLoad)
+      if (this.entries.length === 0) {
+        this.fetch()
+      }
+    },
+    destroyed () {
+      window.removeEventListener('scroll', this.scrollLoad)
+    },
+    methods: {
+      fetch () {
+        if (!this.loading) {
+          this.loading = true
+          fetchEntries(this.$props, this.$store).then((newEntries) => {
+            this.error = false
+            this.loading = false
+            this.bottomedOut = newEntries.length === 0
+          }).catch(() => {
+            this.error = true
+            this.loading = false
+          })
+        }
+      },
+      scrollLoad (e) {
+        const bodyBRect = document.body.getBoundingClientRect()
+        const height = Math.max(bodyBRect.height, -(bodyBRect.y))
+        if (this.loading === false &&
+          this.bottomedOut === false &&
+          this.$el.offsetHeight > 0 &&
+          (window.innerHeight + window.pageYOffset) >= (height - 750)
+        ) {
+          this.fetch()
+        }
+      }
+    }
+  })
+}
+
+export default withLoadMore
diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss
new file mode 100644
index 00000000..af1e1fe8
--- /dev/null
+++ b/src/hocs/with_load_more/with_load_more.scss
@@ -0,0 +1,10 @@
+.with-load-more {
+  &-footer {
+    padding: 10px;
+    text-align: center;
+  }
+
+  .error {
+    font-size: 14px;
+  }
+}
\ No newline at end of file

From 4a737cbe4507e0d0a042871725a310eb4307a766 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 07:14:23 -0500
Subject: [PATCH 02/29] Add reusable BasicUserCard and UserList components

---
 .../basic_user_card/basic_user_card.js        | 28 ++++++
 .../basic_user_card/basic_user_card.vue       | 94 +++++++++++++++++++
 src/components/user_list/user_list.js         | 10 ++
 src/components/user_list/user_list.vue        | 11 +++
 4 files changed, 143 insertions(+)
 create mode 100644 src/components/basic_user_card/basic_user_card.js
 create mode 100644 src/components/basic_user_card/basic_user_card.vue
 create mode 100644 src/components/user_list/user_list.js
 create mode 100644 src/components/user_list/user_list.vue

diff --git a/src/components/basic_user_card/basic_user_card.js b/src/components/basic_user_card/basic_user_card.js
new file mode 100644
index 00000000..a8441446
--- /dev/null
+++ b/src/components/basic_user_card/basic_user_card.js
@@ -0,0 +1,28 @@
+import UserCardContent from '../user_card_content/user_card_content.vue'
+import UserAvatar from '../user_avatar/user_avatar.vue'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+
+const BasicUserCard = {
+  props: [
+    'user'
+  ],
+  data () {
+    return {
+      userExpanded: false
+    }
+  },
+  components: {
+    UserCardContent,
+    UserAvatar
+  },
+  methods: {
+    toggleUserExpanded () {
+      this.userExpanded = !this.userExpanded
+    },
+    userProfileLink (user) {
+      return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
+    }
+  }
+}
+
+export default BasicUserCard
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
new file mode 100644
index 00000000..37f810ed
--- /dev/null
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="card">
+    <router-link :to="userProfileLink(user)">
+      <UserAvatar class="avatar" :compact="true" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
+    </router-link>
+    <div class="usercard" v-if="userExpanded">
+      <user-card-content :user="user" :switcher="false"></user-card-content>
+    </div>
+    <div class="name-and-screen-name" v-else>
+      <div :title="user.name" class="user-name">
+        <span v-if="user.name_html" v-html="user.name_html"></span>
+        <span v-else>{{ user.name }}</span>
+      </div>
+      <div class="user-link-action">
+        <router-link class='user-screen-name' :to="userProfileLink(user)">
+          @{{user.screen_name}}
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./basic_user_card.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.name-and-screen-name {
+  margin-left: 0.7em;
+  margin-top:0.0em;
+  text-align: left;
+  width: 100%;
+  .user-name {
+    display: flex;
+    justify-content: space-between;
+
+    img {
+      object-fit: contain;
+      height: 16px;
+      width: 16px;
+      vertical-align: middle;
+    }
+  }
+  
+  .user-link-action {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+
+    button {
+      margin-top: 3px;
+    }
+  }
+}
+
+.card {
+  display: flex;
+  flex: 1 0;
+  padding-top: 0.6em;
+  padding-right: 1em;
+  padding-bottom: 0.6em;
+  padding-left: 1em;
+  border-bottom: 1px solid;
+  margin: 0;
+  border-bottom-color: $fallback--border;
+	border-bottom-color: var(--border, $fallback--border);
+
+  .avatar {
+    padding: 0;
+  }
+}
+
+.usercard {
+  width: fill-available;
+  margin: 0.2em 0 0 0.7em;
+  border-radius: $fallback--panelRadius;
+  border-radius: var(--panelRadius, $fallback--panelRadius);
+  border-style: solid;
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
+  border-width: 1px;
+  overflow: hidden;
+
+  .panel-heading {
+    background: transparent;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+}
+</style>
diff --git a/src/components/user_list/user_list.js b/src/components/user_list/user_list.js
new file mode 100644
index 00000000..30e3d765
--- /dev/null
+++ b/src/components/user_list/user_list.js
@@ -0,0 +1,10 @@
+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+
+const UserList = {
+  props: ['entries'],
+  components: {
+    BasicUserCard
+  }
+}
+
+export default UserList
diff --git a/src/components/user_list/user_list.vue b/src/components/user_list/user_list.vue
new file mode 100644
index 00000000..242c04fc
--- /dev/null
+++ b/src/components/user_list/user_list.vue
@@ -0,0 +1,11 @@
+<template functional>
+  <div class="user-list">
+    <basic-user-card
+      v-for="entry in entries"
+      :key="entry.id"
+      :user="entry"
+    />
+  </div>
+</template>
+
+<script src="./user_list.js"></script>
\ No newline at end of file

From a56d2dfeb1c5ddd93c1c23036c0e0f2ca16d273c Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 07:15:08 -0500
Subject: [PATCH 03/29] Add blocks tab with test data to user settings page

---
 src/components/user_settings/user_settings.js  | 14 ++++++++++++--
 src/components/user_settings/user_settings.vue |  4 ++++
 src/i18n/en.json                               |  1 +
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 904060b2..34ab99c7 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -1,9 +1,18 @@
-import { unescape } from 'lodash'
+import unescape from 'lodash/unescape'
+import get from 'lodash/get'
 
 import TabSwitcher from '../tab_switcher/tab_switcher.js'
 import ImageCropper from '../image_cropper/image_cropper.vue'
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
+import UserList from '../user_list/user_list.vue'
+import withLoadMore from '../../hocs/with_load_more/with_load_more'
+
+const BlockListWithLoadMore = withLoadMore(
+  UserList,
+  (props, $store) => $store.dispatch('addFriends', $store.state.users.currentUser.id),
+  (props, $store) => get($store.getters.userById($store.state.users.currentUser.id), 'friends', [])
+)
 
 const UserSettings = {
   data () {
@@ -41,7 +50,8 @@ const UserSettings = {
   components: {
     StyleSwitcher,
     TabSwitcher,
-    ImageCropper
+    ImageCropper,
+    'block-list': BlockListWithLoadMore
   },
   computed: {
     user () {
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 948b5c25..be9f27e7 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -162,6 +162,10 @@
             <h2>{{$t('settings.follow_export_processing')}}</h2>
           </div>
         </div>
+        
+        <div :label="$t('settings.blocks_tab')">
+          <block-list />
+        </div>
       </tab-switcher>
     </div>
   </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 78e8fced..ddde1de2 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -110,6 +110,7 @@
     "avatarRadius": "Avatars",
     "background": "Background",
     "bio": "Bio",
+    "blocks_tab": "Blocks",
     "btnRadius": "Buttons",
     "cBlue": "Blue (Reply, follow)",
     "cGreen": "Green (Retweet)",

From a817cc7cb464d804ccd8af2bbe22e9b738959a3a Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 12:05:23 -0500
Subject: [PATCH 04/29] Wire up ui to real blocks api data

---
 src/components/user_settings/user_settings.js   |  4 ++--
 src/hocs/with_load_more/with_load_more.js       |  2 +-
 src/modules/users.js                            | 17 +++++++++++++++++
 src/services/api/api.service.js                 | 17 +++++++++++++++++
 .../backend_interactor_service.js               |  2 ++
 .../entity_normalizer.service.js                |  1 +
 6 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 34ab99c7..5d8541f0 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -10,8 +10,8 @@ import withLoadMore from '../../hocs/with_load_more/with_load_more'
 
 const BlockListWithLoadMore = withLoadMore(
   UserList,
-  (props, $store) => $store.dispatch('addFriends', $store.state.users.currentUser.id),
-  (props, $store) => get($store.getters.userById($store.state.users.currentUser.id), 'friends', [])
+  (props, $store) => $store.dispatch('fetchBlocks'),
+  (props, $store) => get($store.state.users.currentUser, 'blocks', [])
 )
 
 const UserSettings = {
diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
index 0f72ffd6..14d4303d 100644
--- a/src/hocs/with_load_more/with_load_more.js
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -48,7 +48,7 @@ const withLoadMore = (Component, fetchEntries, getEntries) => {
           fetchEntries(this.$props, this.$store).then((newEntries) => {
             this.error = false
             this.loading = false
-            this.bottomedOut = newEntries.length === 0
+            this.bottomedOut = !newEntries || newEntries.length === 0
           }).catch(() => {
             this.error = true
             this.loading = false
diff --git a/src/modules/users.js b/src/modules/users.js
index 000cfd72..6ea4e0c9 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -85,6 +85,15 @@ export const mutations = {
   addNewUsers (state, users) {
     each(users, (user) => mergeOrAdd(state.users, state.usersObject, user))
   },
+  addBlocks (state, { blocks, page }) {
+    const user = state.currentUser
+    each(blocks, block => {
+      if (!find(user.blocks, { id: block.id })) {
+        user.blocks.push(block)
+      }
+    })
+    user.blocksPage = page + 1
+  },
   setUserForStatus (state, status) {
     status.user = state.usersObject[status.user.id]
   },
@@ -137,6 +146,14 @@ const users = {
       store.rootState.api.backendInteractor.fetchUser({ id })
         .then((user) => store.commit('addNewUsers', [user]))
     },
+    fetchBlocks (store) {
+      const page = store.state.currentUser.blocksPage || 1
+      return store.rootState.api.backendInteractor.fetchBlocks({ page })
+        .then((blocks) => {
+          store.commit('addBlocks', { blocks, page })
+          return blocks
+        })
+    },
     addFriends ({ rootState, commit }, fetchBy) {
       return new Promise((resolve, reject) => {
         const user = rootState.users.usersObject[fetchBy]
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 13d31d91..908edf7c 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -18,6 +18,7 @@ const MENTIONS_URL = '/api/statuses/mentions.json'
 const DM_TIMELINE_URL = '/api/statuses/dm_timeline.json'
 const FOLLOWERS_URL = '/api/statuses/followers.json'
 const FRIENDS_URL = '/api/statuses/friends.json'
+const BLOCKS_URL = '/api/statuses/blocks.json'
 const FOLLOWING_URL = '/api/friendships/create.json'
 const UNFOLLOWING_URL = '/api/friendships/destroy.json'
 const QVITTER_USER_PREF_URL = '/api/qvitter/set_profile_pref.json'
@@ -519,6 +520,21 @@ const fetchMutes = ({credentials}) => {
   }).then((data) => data.json())
 }
 
+const fetchBlocks = ({page, credentials}) => {
+  let url = BLOCKS_URL
+  if (page) {
+    url = url + `?page=${page}`
+  }
+  return fetch(url, {
+    headers: authHeaders(credentials)
+  }).then((data) => {
+    if (data.ok) {
+      return data.json()
+    }
+    throw new Error('Error fetching blocks', data)
+  })
+}
+
 const suggestions = ({credentials}) => {
   return fetch(SUGGESTIONS_URL, {
     headers: authHeaders(credentials)
@@ -560,6 +576,7 @@ const apiService = {
   fetchAllFollowing,
   setUserMute,
   fetchMutes,
+  fetchBlocks,
   register,
   getCaptcha,
   updateAvatar,
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index 80c5cc5e..43c914d9 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -63,6 +63,7 @@ const backendInteractorService = (credentials) => {
   }
 
   const fetchMutes = () => apiService.fetchMutes({credentials})
+  const fetchBlocks = (params) => apiService.fetchBlocks({credentials, ...params})
   const fetchFollowRequests = () => apiService.fetchFollowRequests({credentials})
 
   const getCaptcha = () => apiService.getCaptcha()
@@ -94,6 +95,7 @@ const backendInteractorService = (credentials) => {
     startFetching,
     setUserMute,
     fetchMutes,
+    fetchBlocks,
     register,
     getCaptcha,
     updateAvatar,
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index d20ce77f..1192b6cc 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -120,6 +120,7 @@ export const parseUser = (data) => {
   if (data.pleroma) {
     output.follow_request_count = data.pleroma.follow_request_count
   }
+  output.blocks = []
 
   return output
 }

From 94e6de11b7f9aebbc0130c836f334921fc70ae81 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 14:30:12 -0500
Subject: [PATCH 05/29] Add withList hoc and remove UserList component

---
 src/components/user_list/user_list.js         | 10 -------
 src/components/user_list/user_list.vue        | 11 --------
 src/components/user_settings/user_settings.js |  4 ++-
 src/hocs/with_list/with_list.js               | 27 +++++++++++++++++++
 4 files changed, 30 insertions(+), 22 deletions(-)
 delete mode 100644 src/components/user_list/user_list.js
 delete mode 100644 src/components/user_list/user_list.vue
 create mode 100644 src/hocs/with_list/with_list.js

diff --git a/src/components/user_list/user_list.js b/src/components/user_list/user_list.js
deleted file mode 100644
index 30e3d765..00000000
--- a/src/components/user_list/user_list.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import BasicUserCard from '../basic_user_card/basic_user_card.vue'
-
-const UserList = {
-  props: ['entries'],
-  components: {
-    BasicUserCard
-  }
-}
-
-export default UserList
diff --git a/src/components/user_list/user_list.vue b/src/components/user_list/user_list.vue
deleted file mode 100644
index 242c04fc..00000000
--- a/src/components/user_list/user_list.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template functional>
-  <div class="user-list">
-    <basic-user-card
-      v-for="entry in entries"
-      :key="entry.id"
-      :user="entry"
-    />
-  </div>
-</template>
-
-<script src="./user_list.js"></script>
\ No newline at end of file
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 5d8541f0..a46afda6 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -5,9 +5,11 @@ import TabSwitcher from '../tab_switcher/tab_switcher.js'
 import ImageCropper from '../image_cropper/image_cropper.vue'
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
-import UserList from '../user_list/user_list.vue'
+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
+import withList from '../../hocs/with_list/with_list'
 
+const UserList = withList(BasicUserCard, entry => ({ user: entry }))
 const BlockListWithLoadMore = withLoadMore(
   UserList,
   (props, $store) => $store.dispatch('fetchBlocks'),
diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js
new file mode 100644
index 00000000..21aa288b
--- /dev/null
+++ b/src/hocs/with_list/with_list.js
@@ -0,0 +1,27 @@
+import Vue from 'vue'
+import map from 'lodash/map'
+
+const defaultEntryPropsGetter = entry => ({ entry })
+const defaultKeyGetter = entry => entry.id
+
+const withList = (Component, getEntryProps = defaultEntryPropsGetter, getKey = defaultKeyGetter) => {
+  return Vue.component('withList', {
+    render (createElement) {
+      return (
+        <div class="with-list">
+          {map(this.entries, (entry, index) => {
+            const props = {
+              key: getKey(entry, index),
+              ...this.$props.entryProps,
+              ...getEntryProps(entry, index)
+            }
+            return <Component {...{ attrs: props }} />
+          })}
+        </div>
+      )
+    },
+    props: ['entries', 'entryProps']
+  })
+}
+
+export default withList

From 5d6e1864a5602505dedf519ef5f8e64cf19ee158 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 14:31:02 -0500
Subject: [PATCH 06/29] Update BasicUserCard template and add a slot for
 customization

---
 .../basic_user_card/basic_user_card.vue       | 121 +++++++++---------
 1 file changed, 60 insertions(+), 61 deletions(-)

diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index 37f810ed..7cbf647c 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -1,20 +1,25 @@
 <template>
-  <div class="card">
+  <div class="user-card">
     <router-link :to="userProfileLink(user)">
       <UserAvatar class="avatar" :compact="true" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
     </router-link>
-    <div class="usercard" v-if="userExpanded">
+    <div class="user-card-expanded-content" v-if="userExpanded">
       <user-card-content :user="user" :switcher="false"></user-card-content>
     </div>
-    <div class="name-and-screen-name" v-else>
-      <div :title="user.name" class="user-name">
-        <span v-if="user.name_html" v-html="user.name_html"></span>
-        <span v-else>{{ user.name }}</span>
+    <div class="user-card-collapsed-content" v-else>
+      <div class="user-card-primary-area">
+        <div :title="user.name" class="user-name">
+          <span v-if="user.name_html" v-html="user.name_html"></span>
+          <span v-else>{{ user.name }}</span>
+        </div>
+        <div>
+          <router-link class='user-screen-name' :to="userProfileLink(user)">
+            @{{user.screen_name}}
+          </router-link>
+        </div>
       </div>
-      <div class="user-link-action">
-        <router-link class='user-screen-name' :to="userProfileLink(user)">
-          @{{user.screen_name}}
-        </router-link>
+      <div class="user-card-secondary-area">
+        <slot name="secondary-area"></slot>
       </div>
     </div>
   </div>
@@ -25,35 +30,7 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.name-and-screen-name {
-  margin-left: 0.7em;
-  margin-top:0.0em;
-  text-align: left;
-  width: 100%;
-  .user-name {
-    display: flex;
-    justify-content: space-between;
-
-    img {
-      object-fit: contain;
-      height: 16px;
-      width: 16px;
-      vertical-align: middle;
-    }
-  }
-  
-  .user-link-action {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-
-    button {
-      margin-top: 3px;
-    }
-  }
-}
-
-.card {
+.user-card {
   display: flex;
   flex: 1 0;
   padding-top: 0.6em;
@@ -65,30 +42,52 @@
   border-bottom-color: $fallback--border;
 	border-bottom-color: var(--border, $fallback--border);
 
-  .avatar {
-    padding: 0;
-  }
-}
-
-.usercard {
-  width: fill-available;
-  margin: 0.2em 0 0 0.7em;
-  border-radius: $fallback--panelRadius;
-  border-radius: var(--panelRadius, $fallback--panelRadius);
-  border-style: solid;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-  border-width: 1px;
-  overflow: hidden;
-
-  .panel-heading {
-    background: transparent;
-    flex-direction: column;
-    align-items: stretch;
+  &-collapsed-content {
+    margin-left: 0.7em;
+    margin-top:0.0em;
+    text-align: left;
+    flex: 1;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
   }
 
-  p {
-    margin-bottom: 0;
+  &-primary-area {
+    flex: 1;
+    .user-name {
+      img {
+        object-fit: contain;
+        height: 16px;
+        width: 16px;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  &-secondary-area {
+    flex: none;
+  }
+
+  &-expanded-content {
+    flex: 1;
+    margin: 0.2em 0 0 0.7em;
+    border-radius: $fallback--panelRadius;
+    border-radius: var(--panelRadius, $fallback--panelRadius);
+    border-style: solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    border-width: 1px;
+    overflow: hidden;
+
+    .panel-heading {
+      background: transparent;
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    p {
+      margin-bottom: 0;
+    }
   }
 }
 </style>

From 0220d3d304cbcb82b8531ff373dce1b35e93fb4f Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 14:55:02 -0500
Subject: [PATCH 07/29] Finally, added BlockCard

---
 src/components/block_card/block_card.js       | 21 +++++++++++++++++++
 src/components/block_card/block_card.vue      | 16 ++++++++++++++
 src/components/user_settings/user_settings.js |  6 +++---
 src/i18n/en.json                              |  4 +++-
 4 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 src/components/block_card/block_card.js
 create mode 100644 src/components/block_card/block_card.vue

diff --git a/src/components/block_card/block_card.js b/src/components/block_card/block_card.js
new file mode 100644
index 00000000..8788fb62
--- /dev/null
+++ b/src/components/block_card/block_card.js
@@ -0,0 +1,21 @@
+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+
+const BlockCard = {
+  props: ['user'],
+  data () {
+    return {
+      progress: false,
+      updated: false
+    }
+  },
+  components: {
+    BasicUserCard
+  },
+  methods: {
+    unblockUser () {
+      this.progress = true
+    }
+  }
+}
+
+export default BlockCard
diff --git a/src/components/block_card/block_card.vue b/src/components/block_card/block_card.vue
new file mode 100644
index 00000000..06fc67fc
--- /dev/null
+++ b/src/components/block_card/block_card.vue
@@ -0,0 +1,16 @@
+<template>
+  <basic-user-card :user="user">
+    <template slot="secondary-area">
+      <button class="btn btn-default" @click="unblockUser" :disabled="progress">
+        <template v-if="progress">
+          {{ $t('user_card.unblock_progress') }}
+        </template>
+        <template v-else>
+          {{ $t('user_card.unblock') }}
+        </template>
+      </button>
+    </template>
+  </basic-user-card>
+</template>
+
+<script src="./block_card.js"></script>
\ No newline at end of file
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index a46afda6..3bcecdf4 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -5,13 +5,13 @@ import TabSwitcher from '../tab_switcher/tab_switcher.js'
 import ImageCropper from '../image_cropper/image_cropper.vue'
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
-import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import BlockCard from '../block_card/block_card.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
 import withList from '../../hocs/with_list/with_list'
 
-const UserList = withList(BasicUserCard, entry => ({ user: entry }))
+const BlockList = withList(BlockCard, entry => ({ user: entry }))
 const BlockListWithLoadMore = withLoadMore(
-  UserList,
+  BlockList,
   (props, $store) => $store.dispatch('fetchBlocks'),
   (props, $store) => get($store.state.users.currentUser, 'blocks', [])
 )
diff --git a/src/i18n/en.json b/src/i18n/en.json
index ddde1de2..9027803d 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -366,7 +366,9 @@
     "muted": "Muted",
     "per_day": "per day",
     "remote_follow": "Remote follow",
-    "statuses": "Statuses"
+    "statuses": "Statuses",
+    "unblock": "Unblock",
+    "unblock_progress": "Unblocking..."
   },
   "user_profile": {
     "timeline_title": "User Timeline"

From 52913d8f873dd6994988d6a928cca007a0effeaf Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 15:31:20 -0500
Subject: [PATCH 08/29] Complete functionality of BlockCard

---
 src/components/block_card/block_card.js       | 22 ++++++++++++++++---
 src/components/block_card/block_card.vue      | 10 ++++++++-
 src/components/user_settings/user_settings.js |  2 +-
 src/i18n/en.json                              |  3 ++-
 src/modules/users.js                          |  8 +++++++
 5 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/src/components/block_card/block_card.js b/src/components/block_card/block_card.js
index 8788fb62..11fa27b4 100644
--- a/src/components/block_card/block_card.js
+++ b/src/components/block_card/block_card.js
@@ -1,11 +1,18 @@
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 
 const BlockCard = {
-  props: ['user'],
+  props: ['userId'],
   data () {
     return {
-      progress: false,
-      updated: false
+      progress: false
+    }
+  },
+  computed: {
+    user () {
+      return this.$store.getters.userById(this.userId)
+    },
+    blocked () {
+      return this.user.statusnet_blocking
     }
   },
   components: {
@@ -14,6 +21,15 @@ const BlockCard = {
   methods: {
     unblockUser () {
       this.progress = true
+      this.$store.dispatch('unblockUser', this.user.id).then(() => {
+        this.progress = false
+      })
+    },
+    blockUser () {
+      this.progress = true
+      this.$store.dispatch('blockUser', this.user.id).then(() => {
+        this.progress = false
+      })
     }
   }
 }
diff --git a/src/components/block_card/block_card.vue b/src/components/block_card/block_card.vue
index 06fc67fc..ed7fe30b 100644
--- a/src/components/block_card/block_card.vue
+++ b/src/components/block_card/block_card.vue
@@ -1,7 +1,7 @@
 <template>
   <basic-user-card :user="user">
     <template slot="secondary-area">
-      <button class="btn btn-default" @click="unblockUser" :disabled="progress">
+      <button class="btn btn-default" @click="unblockUser" :disabled="progress" v-if="blocked">
         <template v-if="progress">
           {{ $t('user_card.unblock_progress') }}
         </template>
@@ -9,6 +9,14 @@
           {{ $t('user_card.unblock') }}
         </template>
       </button>
+      <button class="btn btn-default" @click="blockUser" :disabled="progress" v-else>
+        <template v-if="progress">
+          {{ $t('user_card.block_progress') }}
+        </template>
+        <template v-else>
+          {{ $t('user_card.block') }}
+        </template>
+      </button>
     </template>
   </basic-user-card>
 </template>
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 3bcecdf4..621dcd4b 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -9,7 +9,7 @@ import BlockCard from '../block_card/block_card.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
 import withList from '../../hocs/with_list/with_list'
 
-const BlockList = withList(BlockCard, entry => ({ user: entry }))
+const BlockList = withList(BlockCard, entry => ({ userId: entry.id }))
 const BlockListWithLoadMore = withLoadMore(
   BlockList,
   (props, $store) => $store.dispatch('fetchBlocks'),
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 9027803d..eeb95f9c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -368,7 +368,8 @@
     "remote_follow": "Remote follow",
     "statuses": "Statuses",
     "unblock": "Unblock",
-    "unblock_progress": "Unblocking..."
+    "unblock_progress": "Unblocking...",
+    "block_progress": "Blocking..."
   },
   "user_profile": {
     "timeline_title": "User Timeline"
diff --git a/src/modules/users.js b/src/modules/users.js
index 6ea4e0c9..ce8af68c 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -154,6 +154,14 @@ const users = {
           return blocks
         })
     },
+    blockUser (store, id) {
+      return store.rootState.api.backendInteractor.blockUser(id)
+        .then((user) => store.commit('addNewUsers', [user]))
+    },
+    unblockUser (store, id) {
+      return store.rootState.api.backendInteractor.unblockUser(id)
+        .then((user) => store.commit('addNewUsers', [user]))
+    },
     addFriends ({ rootState, commit }, fetchBy) {
       return new Promise((resolve, reject) => {
         const user = rootState.users.usersObject[fetchBy]

From 82702748653c7630e4f337433d47863f52c57ee4 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 20:59:26 -0500
Subject: [PATCH 09/29] Update hocs to pass parent-scope bindings to the
 wrapped component

---
 src/hocs/with_list/with_list.js           | 11 +++---
 src/hocs/with_load_more/with_load_more.js | 42 ++++++++++++++---------
 2 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js
index 21aa288b..5ec37a2b 100644
--- a/src/hocs/with_list/with_list.js
+++ b/src/hocs/with_list/with_list.js
@@ -12,15 +12,18 @@ const withList = (Component, getEntryProps = defaultEntryPropsGetter, getKey = d
           {map(this.entries, (entry, index) => {
             const props = {
               key: getKey(entry, index),
-              ...this.$props.entryProps,
-              ...getEntryProps(entry, index)
+              props: {
+                ...this.$props.entryProps,
+                ...getEntryProps(entry, index)
+              },
+              on: this.$props.entryListeners
             }
-            return <Component {...{ attrs: props }} />
+            return <Component {...props} />
           })}
         </div>
       )
     },
-    props: ['entries', 'entryProps']
+    props: ['entries', 'entryProps', 'entryListeners']
   })
 }
 
diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
index 14d4303d..8877f8d3 100644
--- a/src/hocs/with_load_more/with_load_more.js
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -1,20 +1,28 @@
 import Vue from 'vue'
 import filter from 'lodash/filter'
+import isEmpty from 'lodash/isEmpty'
 import './with_load_more.scss'
 
-const withLoadMore = (Component, fetchEntries, getEntries) => {
+const withLoadMore = (Component, fetch, select, entriesPropName = 'entries') => {
   const originalProps = Component.props || []
   const props = filter(originalProps, v => v !== 'entries')
 
   return Vue.component('withLoadMore', {
     render (createElement) {
+      const props = {
+        props: {
+          ...this.$props,
+          [entriesPropName]: this.entries
+        },
+        on: this.$listeners
+      }
       return (
         <div class="with-load-more">
-          <Component entries={this.entries} />
+          <Component {...props} />
           <div class="with-load-more-footer">
-            {this.error && <a onClick={this.fetch} class="alert error">{this.$t('general.generic_error')}</a>}
+            {this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
             {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
-            {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetch}>{this.$t('general.more')}</a>}
+            {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
           </div>
         </div>
       )
@@ -29,30 +37,32 @@ const withLoadMore = (Component, fetchEntries, getEntries) => {
     },
     computed: {
       entries () {
-        return getEntries(this.$props, this.$store) || []
+        return select(this.$props, this.$store) || []
       }
     },
     created () {
       window.addEventListener('scroll', this.scrollLoad)
       if (this.entries.length === 0) {
-        this.fetch()
+        this.fetchEntries()
       }
     },
     destroyed () {
       window.removeEventListener('scroll', this.scrollLoad)
     },
     methods: {
-      fetch () {
+      fetchEntries () {
         if (!this.loading) {
           this.loading = true
-          fetchEntries(this.$props, this.$store).then((newEntries) => {
-            this.error = false
-            this.loading = false
-            this.bottomedOut = !newEntries || newEntries.length === 0
-          }).catch(() => {
-            this.error = true
-            this.loading = false
-          })
+          this.error = false
+          fetch(this.$props, this.$store)
+            .then((newEntries) => {
+              this.loading = false
+              this.bottomedOut = isEmpty(newEntries)
+            })
+            .catch(() => {
+              this.loading = false
+              this.error = true
+            })
         }
       },
       scrollLoad (e) {
@@ -63,7 +73,7 @@ const withLoadMore = (Component, fetchEntries, getEntries) => {
           this.$el.offsetHeight > 0 &&
           (window.innerHeight + window.pageYOffset) >= (height - 750)
         ) {
-          this.fetch()
+          this.fetchEntries()
         }
       }
     }

From 159e84532ebdae038e1263efe8832015597a5e20 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 21:07:28 -0500
Subject: [PATCH 10/29] Add withSubscription hoc

---
 .../with_subscription/with_subscription.js    | 65 +++++++++++++++++++
 .../with_subscription/with_subscription.scss  | 10 +++
 2 files changed, 75 insertions(+)
 create mode 100644 src/hocs/with_subscription/with_subscription.js
 create mode 100644 src/hocs/with_subscription/with_subscription.scss

diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js
new file mode 100644
index 00000000..31fc106f
--- /dev/null
+++ b/src/hocs/with_subscription/with_subscription.js
@@ -0,0 +1,65 @@
+import Vue from 'vue'
+import filter from 'lodash/filter'
+import isEmpty from 'lodash/isEmpty'
+import './with_subscription.scss'
+
+const withSubscription = (Component, fetch, select, contentPropName = 'content') => {
+  const originalProps = Component.props || []
+  const props = filter(originalProps, v => v !== 'content')
+
+  return Vue.component('withSubscription', {
+    render (createElement) {
+      const props = {
+        props: {
+          ...this.$props,
+          [contentPropName]: this.fetchedData
+        },
+        on: this.$listeners
+      }
+      return (
+        <div class="with-subscription">
+          <Component {...props} />
+          <div class="with-subscription-footer">
+            {this.error && <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>}
+            {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
+          </div>
+        </div>
+      )
+    },
+    props,
+    data () {
+      return {
+        loading: false,
+        error: false
+      }
+    },
+    computed: {
+      fetchedData () {
+        return select(this.$props, this.$store)
+      }
+    },
+    created () {
+      if (isEmpty(this.fetchedData)) {
+        this.fetchData()
+      }
+    },
+    methods: {
+      fetchData () {
+        if (!this.loading) {
+          this.loading = true
+          this.error = false
+          fetch(this.$props, this.$store)
+            .then(() => {
+              this.loading = false
+            })
+            .catch(() => {
+              this.error = true
+              this.loading = false
+            })
+        }
+      }
+    }
+  })
+}
+
+export default withSubscription
diff --git a/src/hocs/with_subscription/with_subscription.scss b/src/hocs/with_subscription/with_subscription.scss
new file mode 100644
index 00000000..5114029d
--- /dev/null
+++ b/src/hocs/with_subscription/with_subscription.scss
@@ -0,0 +1,10 @@
+.with-subscription {
+  &-footer {
+    padding: 10px;
+    text-align: center;
+  }
+
+  .error {
+    font-size: 14px;
+  }
+}
\ No newline at end of file

From 8c8a6edc7800bac854ef23f29aa87f5b932cb415 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 21:08:14 -0500
Subject: [PATCH 11/29] Remove pagination support from block-list

---
 src/components/user_settings/user_settings.js   | 10 ++++++----
 src/components/user_settings/user_settings.vue  |  2 +-
 src/modules/users.js                            | 17 ++++++-----------
 .../entity_normalizer.service.js                |  2 +-
 4 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 621dcd4b..8eade382 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -7,13 +7,15 @@ import StyleSwitcher from '../style_switcher/style_switcher.vue'
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
 import BlockCard from '../block_card/block_card.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
+import withSubscription from '../../hocs/with_subscription/with_subscription'
 import withList from '../../hocs/with_list/with_list'
 
-const BlockList = withList(BlockCard, entry => ({ userId: entry.id }))
-const BlockListWithLoadMore = withLoadMore(
+const BlockList = withList(BlockCard, userId => ({ userId }))
+const BlockListWithSubscription = withSubscription(
   BlockList,
   (props, $store) => $store.dispatch('fetchBlocks'),
-  (props, $store) => get($store.state.users.currentUser, 'blocks', [])
+  (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
+  'entries'
 )
 
 const UserSettings = {
@@ -53,7 +55,7 @@ const UserSettings = {
     StyleSwitcher,
     TabSwitcher,
     ImageCropper,
-    'block-list': BlockListWithLoadMore
+    'block-list': BlockListWithSubscription
   },
   computed: {
     user () {
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index be9f27e7..5cf21815 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -164,7 +164,7 @@
         </div>
         
         <div :label="$t('settings.blocks_tab')">
-          <block-list />
+          <block-list id="123" />
         </div>
       </tab-switcher>
     </div>
diff --git a/src/modules/users.js b/src/modules/users.js
index ce8af68c..1f03b47e 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -1,5 +1,5 @@
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
-import { compact, map, each, merge, find } from 'lodash'
+import { compact, map, each, merge, find, union } from 'lodash'
 import { set } from 'vue'
 import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js'
 import oauthApi from '../services/new_api/oauth'
@@ -85,14 +85,9 @@ export const mutations = {
   addNewUsers (state, users) {
     each(users, (user) => mergeOrAdd(state.users, state.usersObject, user))
   },
-  addBlocks (state, { blocks, page }) {
+  addBlocks (state, blockIds) {
     const user = state.currentUser
-    each(blocks, block => {
-      if (!find(user.blocks, { id: block.id })) {
-        user.blocks.push(block)
-      }
-    })
-    user.blocksPage = page + 1
+    user.blockIds = union(user.blockIds, blockIds)
   },
   setUserForStatus (state, status) {
     status.user = state.usersObject[status.user.id]
@@ -147,10 +142,10 @@ const users = {
         .then((user) => store.commit('addNewUsers', [user]))
     },
     fetchBlocks (store) {
-      const page = store.state.currentUser.blocksPage || 1
-      return store.rootState.api.backendInteractor.fetchBlocks({ page })
+      return store.rootState.api.backendInteractor.fetchBlocks()
         .then((blocks) => {
-          store.commit('addBlocks', { blocks, page })
+          store.commit('addBlocks', map(blocks, 'id'))
+          store.commit('addNewUsers', blocks)
           return blocks
         })
     },
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 1192b6cc..0e1be61e 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -120,7 +120,7 @@ export const parseUser = (data) => {
   if (data.pleroma) {
     output.follow_request_count = data.pleroma.follow_request_count
   }
-  output.blocks = []
+  output.blockIds = []
 
   return output
 }

From 09315b27804beadb7590f8e908ae9d0eb1d6a992 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 21:21:56 -0500
Subject: [PATCH 12/29] Add a prop to force-refresh data to withSubscription
 hoc

---
 src/components/user_settings/user_settings.vue  |  2 +-
 src/hocs/with_subscription/with_subscription.js | 13 +++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 5cf21815..5bae583c 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -164,7 +164,7 @@
         </div>
         
         <div :label="$t('settings.blocks_tab')">
-          <block-list id="123" />
+          <block-list :refresh="true" />
         </div>
       </tab-switcher>
     </div>
diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js
index 31fc106f..633517e3 100644
--- a/src/hocs/with_subscription/with_subscription.js
+++ b/src/hocs/with_subscription/with_subscription.js
@@ -1,24 +1,25 @@
 import Vue from 'vue'
-import filter from 'lodash/filter'
+import reject from 'lodash/reject'
 import isEmpty from 'lodash/isEmpty'
+import omit from 'lodash/omit'
 import './with_subscription.scss'
 
 const withSubscription = (Component, fetch, select, contentPropName = 'content') => {
   const originalProps = Component.props || []
-  const props = filter(originalProps, v => v !== 'content')
+  const props = reject(originalProps, v => v === 'content')
 
   return Vue.component('withSubscription', {
     render (createElement) {
       const props = {
         props: {
-          ...this.$props,
+          ...omit(this.$props, 'refresh'),
           [contentPropName]: this.fetchedData
         },
         on: this.$listeners
       }
       return (
         <div class="with-subscription">
-          <Component {...props} />
+          {!this.error && !this.loading && <Component {...props} />}
           <div class="with-subscription-footer">
             {this.error && <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>}
             {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
@@ -26,7 +27,7 @@ const withSubscription = (Component, fetch, select, contentPropName = 'content')
         </div>
       )
     },
-    props,
+    props: [...props, 'refresh'],
     data () {
       return {
         loading: false,
@@ -39,7 +40,7 @@ const withSubscription = (Component, fetch, select, contentPropName = 'content')
       }
     },
     created () {
-      if (isEmpty(this.fetchedData)) {
+      if (this.refresh || isEmpty(this.fetchedData)) {
         this.fetchData()
       }
     },

From e91a94ff9c4b9559f53a4b001f8972ceca843771 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 22:04:28 -0500
Subject: [PATCH 13/29] Add mutes tab

---
 src/components/mute_card/mute_card.js         | 37 +++++++++++++++++++
 src/components/mute_card/mute_card.vue        | 24 ++++++++++++
 src/components/user_settings/user_settings.js | 13 ++++++-
 .../user_settings/user_settings.vue           |  4 ++
 src/i18n/en.json                              |  1 +
 src/modules/users.js                          | 25 +++++++++++--
 .../entity_normalizer.service.js              |  1 +
 7 files changed, 99 insertions(+), 6 deletions(-)
 create mode 100644 src/components/mute_card/mute_card.js
 create mode 100644 src/components/mute_card/mute_card.vue

diff --git a/src/components/mute_card/mute_card.js b/src/components/mute_card/mute_card.js
new file mode 100644
index 00000000..5dd0a9e5
--- /dev/null
+++ b/src/components/mute_card/mute_card.js
@@ -0,0 +1,37 @@
+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+
+const MuteCard = {
+  props: ['userId'],
+  data () {
+    return {
+      progress: false
+    }
+  },
+  computed: {
+    user () {
+      return this.$store.getters.userById(this.userId)
+    },
+    muted () {
+      return this.user.muted
+    }
+  },
+  components: {
+    BasicUserCard
+  },
+  methods: {
+    unmuteUser () {
+      this.progress = true
+      this.$store.dispatch('unmuteUser', this.user.id).then(() => {
+        this.progress = false
+      })
+    },
+    muteUser () {
+      this.progress = true
+      this.$store.dispatch('muteUser', this.user.id).then(() => {
+        this.progress = false
+      })
+    }
+  }
+}
+
+export default MuteCard
diff --git a/src/components/mute_card/mute_card.vue b/src/components/mute_card/mute_card.vue
new file mode 100644
index 00000000..e1bfe20b
--- /dev/null
+++ b/src/components/mute_card/mute_card.vue
@@ -0,0 +1,24 @@
+<template>
+  <basic-user-card :user="user">
+    <template slot="secondary-area">
+      <button class="btn btn-default" @click="unmuteUser" :disabled="progress" v-if="muted">
+        <template v-if="progress">
+          {{ $t('user_card.unmute_progress') }}
+        </template>
+        <template v-else>
+          {{ $t('user_card.unmute') }}
+        </template>
+      </button>
+      <button class="btn btn-default" @click="muteUser" :disabled="progress" v-else>
+        <template v-if="progress">
+          {{ $t('user_card.mute_progress') }}
+        </template>
+        <template v-else>
+          {{ $t('user_card.mute') }}
+        </template>
+      </button>
+    </template>
+  </basic-user-card>
+</template>
+
+<script src="./mute_card.js"></script>
\ No newline at end of file
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 8eade382..8114d5e2 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -6,7 +6,7 @@ import ImageCropper from '../image_cropper/image_cropper.vue'
 import StyleSwitcher from '../style_switcher/style_switcher.vue'
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
 import BlockCard from '../block_card/block_card.vue'
-import withLoadMore from '../../hocs/with_load_more/with_load_more'
+import MuteCard from '../mute_card/mute_card.vue'
 import withSubscription from '../../hocs/with_subscription/with_subscription'
 import withList from '../../hocs/with_list/with_list'
 
@@ -18,6 +18,14 @@ const BlockListWithSubscription = withSubscription(
   'entries'
 )
 
+const MuteList = withList(MuteCard, userId => ({ userId }))
+const MuteListWithSubscription = withSubscription(
+  MuteList,
+  (props, $store) => $store.dispatch('fetchMutes'),
+  (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
+  'entries'
+)
+
 const UserSettings = {
   data () {
     return {
@@ -55,7 +63,8 @@ const UserSettings = {
     StyleSwitcher,
     TabSwitcher,
     ImageCropper,
-    'block-list': BlockListWithSubscription
+    'block-list': BlockListWithSubscription,
+    'mute-list': MuteListWithSubscription
   },
   computed: {
     user () {
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 5bae583c..27f3e7cb 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -166,6 +166,10 @@
         <div :label="$t('settings.blocks_tab')">
           <block-list :refresh="true" />
         </div>
+
+        <div :label="$t('settings.mutes_tab')">
+          <mute-list :refresh="true" />
+        </div>
       </tab-switcher>
     </div>
   </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index eeb95f9c..b41b6db9 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -165,6 +165,7 @@
     "lock_account_description": "Restrict your account to approved followers only",
     "loop_video": "Loop videos",
     "loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")",
+    "mutes_tab": "Mutes",
     "play_videos_in_modal": "Play videos directly in the media viewer",
     "use_contain_fit": "Don't crop the attachment in thumbnails",
     "name": "Name",
diff --git a/src/modules/users.js b/src/modules/users.js
index 1f03b47e..71201a77 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -89,6 +89,10 @@ export const mutations = {
     const user = state.currentUser
     user.blockIds = union(user.blockIds, blockIds)
   },
+  saveMutes (state, ids) {
+    const user = state.currentUser
+    user.muteIds = union(user.muteIds, ids)
+  },
   setUserForStatus (state, status) {
     status.user = state.usersObject[status.user.id]
   },
@@ -157,6 +161,22 @@ const users = {
       return store.rootState.api.backendInteractor.unblockUser(id)
         .then((user) => store.commit('addNewUsers', [user]))
     },
+    fetchMutes (store) {
+      return store.rootState.api.backendInteractor.fetchMutes()
+        .then((mutedUsers) => {
+          each(mutedUsers, (user) => { user.muted = true })
+          store.commit('addNewUsers', mutedUsers)
+          store.commit('saveMutes', map(mutedUsers, 'id'))
+        })
+    },
+    muteUser (store, id) {
+      return store.state.api.backendInteractor.setUserMute({ id, muted: true })
+        .then((user) => store.commit('addNewUsers', [user]))
+    },
+    unmuteUser (store, id) {
+      return store.state.api.backendInteractor.setUserMute({ id, muted: false })
+        .then((user) => store.commit('addNewUsers', [user]))
+    },
     addFriends ({ rootState, commit }, fetchBy) {
       return new Promise((resolve, reject) => {
         const user = rootState.users.usersObject[fetchBy]
@@ -300,10 +320,7 @@ const users = {
               store.dispatch('startFetching', { timeline: 'friends' })
 
               // Get user mutes and follower info
-              store.rootState.api.backendInteractor.fetchMutes().then((mutedUsers) => {
-                each(mutedUsers, (user) => { user.muted = true })
-                store.commit('addNewUsers', mutedUsers)
-              })
+              store.dispatch('fetchMutes')
 
               // Fetch our friends
               store.rootState.api.backendInteractor.fetchFriends({ id: user.id })
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 0e1be61e..49c83811 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -121,6 +121,7 @@ export const parseUser = (data) => {
     output.follow_request_count = data.pleroma.follow_request_count
   }
   output.blockIds = []
+  output.muteIds = []
 
   return output
 }

From 1fd9a1c7c0f9efb3660af44f9a8fa8722e6819cc Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 22:14:46 -0500
Subject: [PATCH 14/29] Set blockIds and muteIds to the currentUser state only

---
 src/modules/users.js                                        | 4 +++-
 src/services/entity_normalizer/entity_normalizer.service.js | 2 --
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/modules/users.js b/src/modules/users.js
index 71201a77..5921370d 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -303,6 +303,8 @@ const users = {
               const user = data
               // user.credentials = userCredentials
               user.credentials = accessToken
+              user.blockIds = []
+              user.muteIds = []
               commit('setCurrentUser', user)
               commit('addNewUsers', [user])
 
@@ -319,7 +321,7 @@ const users = {
               // Start getting fresh posts.
               store.dispatch('startFetching', { timeline: 'friends' })
 
-              // Get user mutes and follower info
+              // Get user mutes
               store.dispatch('fetchMutes')
 
               // Fetch our friends
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 49c83811..d20ce77f 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -120,8 +120,6 @@ export const parseUser = (data) => {
   if (data.pleroma) {
     output.follow_request_count = data.pleroma.follow_request_count
   }
-  output.blockIds = []
-  output.muteIds = []
 
   return output
 }

From 8f608e060c813dc6d9aeeb548beca971ce9b74bd Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 22:24:09 -0500
Subject: [PATCH 15/29] Just save blocks/mutes instead of adding

---
 src/modules/users.js | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/modules/users.js b/src/modules/users.js
index 5921370d..77df7168 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -1,5 +1,5 @@
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
-import { compact, map, each, merge, find, union } from 'lodash'
+import { compact, map, each, merge, find } from 'lodash'
 import { set } from 'vue'
 import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js'
 import oauthApi from '../services/new_api/oauth'
@@ -85,13 +85,11 @@ export const mutations = {
   addNewUsers (state, users) {
     each(users, (user) => mergeOrAdd(state.users, state.usersObject, user))
   },
-  addBlocks (state, blockIds) {
-    const user = state.currentUser
-    user.blockIds = union(user.blockIds, blockIds)
+  saveBlocks (state, blockIds) {
+    state.currentUser.blockIds = blockIds
   },
-  saveMutes (state, ids) {
-    const user = state.currentUser
-    user.muteIds = union(user.muteIds, ids)
+  saveMutes (state, muteIds) {
+    state.currentUser.muteIds = muteIds
   },
   setUserForStatus (state, status) {
     status.user = state.usersObject[status.user.id]
@@ -148,7 +146,7 @@ const users = {
     fetchBlocks (store) {
       return store.rootState.api.backendInteractor.fetchBlocks()
         .then((blocks) => {
-          store.commit('addBlocks', map(blocks, 'id'))
+          store.commit('saveBlocks', map(blocks, 'id'))
           store.commit('addNewUsers', blocks)
           return blocks
         })

From f81b82b4714643ba396b69ca54b97259a36a6b9f Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 22:52:57 -0500
Subject: [PATCH 16/29] Use hoc definitions to be factor of factory

---
 src/components/user_settings/user_settings.js | 26 +++++++++----------
 src/hocs/with_list/with_list.js               |  8 +++---
 src/hocs/with_load_more/with_load_more.js     |  6 ++---
 .../with_subscription/with_subscription.js    |  6 ++---
 4 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 8114d5e2..21023841 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -10,21 +10,19 @@ import MuteCard from '../mute_card/mute_card.vue'
 import withSubscription from '../../hocs/with_subscription/with_subscription'
 import withList from '../../hocs/with_list/with_list'
 
-const BlockList = withList(BlockCard, userId => ({ userId }))
-const BlockListWithSubscription = withSubscription(
-  BlockList,
-  (props, $store) => $store.dispatch('fetchBlocks'),
-  (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
-  'entries'
-)
+const BlockList = withList({ getEntryProps: userId => ({ userId }) })(BlockCard)
+const BlockListWithSubscription = withSubscription({
+  fetch: (props, $store) => $store.dispatch('fetchBlocks'),
+  select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
+  contentPropName: 'entries'
+})(BlockList)
 
-const MuteList = withList(MuteCard, userId => ({ userId }))
-const MuteListWithSubscription = withSubscription(
-  MuteList,
-  (props, $store) => $store.dispatch('fetchMutes'),
-  (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
-  'entries'
-)
+const MuteList = withList({ getEntryProps: userId => ({ userId }) })(MuteCard)
+const MuteListWithSubscription = withSubscription({
+  fetch: (props, $store) => $store.dispatch('fetchMutes'),
+  select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
+  contentPropName: 'entries'
+})(MuteList)
 
 const UserSettings = {
   data () {
diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js
index 5ec37a2b..c31cdcb1 100644
--- a/src/hocs/with_list/with_list.js
+++ b/src/hocs/with_list/with_list.js
@@ -4,8 +4,8 @@ import map from 'lodash/map'
 const defaultEntryPropsGetter = entry => ({ entry })
 const defaultKeyGetter = entry => entry.id
 
-const withList = (Component, getEntryProps = defaultEntryPropsGetter, getKey = defaultKeyGetter) => {
-  return Vue.component('withList', {
+const withList = ({ getEntryProps = defaultEntryPropsGetter, getKey = defaultKeyGetter }) => (ItemComponent) => (
+  Vue.component('withList', {
     render (createElement) {
       return (
         <div class="with-list">
@@ -18,13 +18,13 @@ const withList = (Component, getEntryProps = defaultEntryPropsGetter, getKey = d
               },
               on: this.$props.entryListeners
             }
-            return <Component {...props} />
+            return <ItemComponent {...props} />
           })}
         </div>
       )
     },
     props: ['entries', 'entryProps', 'entryListeners']
   })
-}
+)
 
 export default withList
diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
index 8877f8d3..28c741e3 100644
--- a/src/hocs/with_load_more/with_load_more.js
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -3,8 +3,8 @@ import filter from 'lodash/filter'
 import isEmpty from 'lodash/isEmpty'
 import './with_load_more.scss'
 
-const withLoadMore = (Component, fetch, select, entriesPropName = 'entries') => {
-  const originalProps = Component.props || []
+const withLoadMore = ({ fetch, select, entriesPropName = 'entries' }) => (WrappedComponent) => {
+  const originalProps = WrappedComponent.props || []
   const props = filter(originalProps, v => v !== 'entries')
 
   return Vue.component('withLoadMore', {
@@ -18,7 +18,7 @@ const withLoadMore = (Component, fetch, select, entriesPropName = 'entries') =>
       }
       return (
         <div class="with-load-more">
-          <Component {...props} />
+          <WrappedComponent {...props} />
           <div class="with-load-more-footer">
             {this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
             {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js
index 633517e3..21630b40 100644
--- a/src/hocs/with_subscription/with_subscription.js
+++ b/src/hocs/with_subscription/with_subscription.js
@@ -4,8 +4,8 @@ import isEmpty from 'lodash/isEmpty'
 import omit from 'lodash/omit'
 import './with_subscription.scss'
 
-const withSubscription = (Component, fetch, select, contentPropName = 'content') => {
-  const originalProps = Component.props || []
+const withSubscription = ({ fetch, select, contentPropName = 'content' }) => (WrapperComponent) => {
+  const originalProps = WrapperComponent.props || []
   const props = reject(originalProps, v => v === 'content')
 
   return Vue.component('withSubscription', {
@@ -19,7 +19,7 @@ const withSubscription = (Component, fetch, select, contentPropName = 'content')
       }
       return (
         <div class="with-subscription">
-          {!this.error && !this.loading && <Component {...props} />}
+          {!this.error && !this.loading && <WrapperComponent {...props} />}
           <div class="with-subscription-footer">
             {this.error && <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>}
             {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}

From 339373b495f5f30833268c01d1fe958e2ee99a7f Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 22:59:00 -0500
Subject: [PATCH 17/29] Improve chaining hocs using vue-compose

---
 package.json                                  |  1 +
 src/components/user_settings/user_settings.js | 33 ++++---
 yarn.lock                                     | 96 +++++--------------
 3 files changed, 46 insertions(+), 84 deletions(-)

diff --git a/package.json b/package.json
index c4dfb716..03228133 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "sass-loader": "^4.0.2",
     "vue": "^2.5.13",
     "vue-chat-scroll": "^1.2.1",
+    "vue-compose": "^0.7.1",
     "vue-i18n": "^7.3.2",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.3.4",
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 21023841..5ad7c46f 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -1,3 +1,4 @@
+import { compose } from 'vue-compose'
 import unescape from 'lodash/unescape'
 import get from 'lodash/get'
 
@@ -10,19 +11,23 @@ import MuteCard from '../mute_card/mute_card.vue'
 import withSubscription from '../../hocs/with_subscription/with_subscription'
 import withList from '../../hocs/with_list/with_list'
 
-const BlockList = withList({ getEntryProps: userId => ({ userId }) })(BlockCard)
-const BlockListWithSubscription = withSubscription({
-  fetch: (props, $store) => $store.dispatch('fetchBlocks'),
-  select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
-  contentPropName: 'entries'
-})(BlockList)
+const BlockList = compose(
+  withSubscription({
+    fetch: (props, $store) => $store.dispatch('fetchBlocks'),
+    select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
+    contentPropName: 'entries'
+  }),
+  withList({ getEntryProps: userId => ({ userId }) })
+)(BlockCard)
 
-const MuteList = withList({ getEntryProps: userId => ({ userId }) })(MuteCard)
-const MuteListWithSubscription = withSubscription({
-  fetch: (props, $store) => $store.dispatch('fetchMutes'),
-  select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
-  contentPropName: 'entries'
-})(MuteList)
+const MuteList = compose(
+  withSubscription({
+    fetch: (props, $store) => $store.dispatch('fetchMutes'),
+    select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
+    contentPropName: 'entries'
+  }),
+  withList({ getEntryProps: userId => ({ userId }) })
+)(MuteCard)
 
 const UserSettings = {
   data () {
@@ -61,8 +66,8 @@ const UserSettings = {
     StyleSwitcher,
     TabSwitcher,
     ImageCropper,
-    'block-list': BlockListWithSubscription,
-    'mute-list': MuteListWithSubscription
+    BlockList,
+    MuteList
   },
   computed: {
     user () {
diff --git a/yarn.lock b/yarn.lock
index 669fc981..0fe45479 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -38,11 +38,7 @@
     dom-event-types "^1.0.0"
     lodash "^4.17.4"
 
-abbrev@1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
-
-abbrev@1.0.x:
+abbrev@1, abbrev@1.0.x:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.0.9.tgz#91b4792588a7738c25f35dd6f63752a2f8776135"
 
@@ -1385,14 +1381,10 @@ color-convert@^1.3.0, color-convert@^1.9.0:
   dependencies:
     color-name "1.1.3"
 
-color-name@1.1.3:
+color-name@1.1.3, color-name@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
 
-color-name@^1.0.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
-
 color-string@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
@@ -2431,14 +2423,10 @@ extract-zip@^1.6.5, extract-zip@^1.6.7:
     mkdirp "0.5.1"
     yauzl "2.4.1"
 
-extsprintf@1.3.0:
+extsprintf@1.3.0, extsprintf@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
 
-extsprintf@^1.2.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
-
 fast-deep-equal@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
@@ -3024,18 +3012,12 @@ https-proxy-agent@1:
     debug "2"
     extend "3"
 
-iconv-lite@0.4.23:
+iconv-lite@0.4.23, iconv-lite@^0.4.4:
   version "0.4.23"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-iconv-lite@^0.4.4:
-  version "0.4.24"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
-  dependencies:
-    safer-buffer ">= 2.1.2 < 3"
-
 icss-replace-symbols@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
@@ -3480,11 +3462,7 @@ js-beautify@^1.6.3:
     mkdirp "~0.5.0"
     nopt "~4.0.1"
 
-"js-tokens@^3.0.0 || ^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
-
-js-tokens@^3.0.2:
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
@@ -4237,7 +4215,7 @@ minimatch@3.0.3:
   dependencies:
     brace-expansion "^1.0.0"
 
-minimist@0.0.8:
+minimist@0.0.8, minimist@~0.0.1:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
 
@@ -4245,10 +4223,6 @@ minimist@1.2.0, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
-minimist@~0.0.1:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
-
 minipass@^2.2.1, minipass@^2.3.4:
   version "2.3.5"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.5.tgz#cacebe492022497f656b0f0f51e2682a9ed2d848"
@@ -4679,7 +4653,7 @@ os-locale@^1.4.0:
   dependencies:
     lcid "^1.0.0"
 
-os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
+os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
 
@@ -4787,10 +4761,6 @@ path-is-inside@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
 
-path-parse@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
-
 path-to-regexp@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
@@ -5224,14 +5194,10 @@ punycode@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
 
-q@1.4.1:
+q@1.4.1, q@^1.1.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
 
-q@^1.1.2:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
-
 qjobs@^1.1.4:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/qjobs/-/qjobs-1.2.0.tgz#c45e9c61800bd087ef88d7e256423bdd49e5d071"
@@ -5546,16 +5512,10 @@ resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
 
-resolve@1.1.x:
+resolve@1.1.x, resolve@^1.1.6:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
 
-resolve@^1.1.6:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.9.0.tgz#a14c6fdfa8f92a7df1d996cb7105fa744658ea06"
-  dependencies:
-    path-parse "^1.0.6"
-
 restore-cursor@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
@@ -5607,14 +5567,10 @@ safe-regex@^1.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
 
-samsam@1.1.2:
+samsam@1.1.2, samsam@~1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/samsam/-/samsam-1.1.2.tgz#bec11fdc83a9fda063401210e40176c3024d1567"
 
-samsam@~1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/samsam/-/samsam-1.1.3.tgz#9f5087419b4d091f232571e7fa52e90b0f552621"
-
 sanitize-html@^1.13.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-1.20.0.tgz#9a602beb1c9faf960fb31f9890f61911cc4d9156"
@@ -5988,18 +5944,14 @@ static-extend@^0.1.1:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
-"statuses@>= 1.4.0 < 2":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+"statuses@>= 1.4.0 < 2", statuses@~1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
 
 statuses@~1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
 
-statuses@~1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
-
 stream-browserify@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
@@ -6088,7 +6040,7 @@ strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
-supports-color@3.1.2:
+supports-color@3.1.2, supports-color@^3.1.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5"
   dependencies:
@@ -6098,7 +6050,7 @@ supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
 
-supports-color@^3.1.0, supports-color@^3.2.3:
+supports-color@^3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
   dependencies:
@@ -6196,18 +6148,12 @@ timers-browserify@^2.0.2:
   dependencies:
     setimmediate "^1.0.4"
 
-tmp@0.0.31:
+tmp@0.0.31, tmp@0.0.x:
   version "0.0.31"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.31.tgz#8f38ab9438e17315e5dbd8b3657e8bfb277ae4a7"
   dependencies:
     os-tmpdir "~1.0.1"
 
-tmp@0.0.x:
-  version "0.0.33"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
-  dependencies:
-    os-tmpdir "~1.0.2"
-
 to-array@0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"
@@ -6476,6 +6422,16 @@ vue-chat-scroll@^1.2.1:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/vue-chat-scroll/-/vue-chat-scroll-1.3.5.tgz#a5ee5bae5058f614818a96eac5ee3be4394a2f68"
 
+vue-compose@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/vue-compose/-/vue-compose-0.7.1.tgz#1c11c4cd5e2c8f2743b03fce8ab43d78aabc20b3"
+  dependencies:
+    vue-hoc "0.x.x"
+
+vue-hoc@0.x.x:
+  version "0.4.7"
+  resolved "https://registry.yarnpkg.com/vue-hoc/-/vue-hoc-0.4.7.tgz#4d3322ba89b8b0e42b19045ef536c21d948a4fac"
+
 vue-hot-reload-api@^2.0.11:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.1.tgz#b2d3d95402a811602380783ea4f566eb875569a2"

From 6d4d705c51a3d39e4de22a3320cfa61ef63a0066 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 13 Feb 2019 23:25:21 -0500
Subject: [PATCH 18/29] Rename some options and add comments to HOCs

---
 src/components/user_settings/user_settings.js   |  4 ++--
 src/hocs/with_list/with_list.js                 |  5 ++++-
 src/hocs/with_load_more/with_load_more.js       |  8 ++++++--
 src/hocs/with_subscription/with_subscription.js | 12 ++++++++----
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 5ad7c46f..06e72112 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -15,7 +15,7 @@ const BlockList = compose(
   withSubscription({
     fetch: (props, $store) => $store.dispatch('fetchBlocks'),
     select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
-    contentPropName: 'entries'
+    childPropName: 'entries'
   }),
   withList({ getEntryProps: userId => ({ userId }) })
 )(BlockCard)
@@ -24,7 +24,7 @@ const MuteList = compose(
   withSubscription({
     fetch: (props, $store) => $store.dispatch('fetchMutes'),
     select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
-    contentPropName: 'entries'
+    childPropName: 'entries'
   }),
   withList({ getEntryProps: userId => ({ userId }) })
 )(MuteCard)
diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js
index c31cdcb1..e5770cee 100644
--- a/src/hocs/with_list/with_list.js
+++ b/src/hocs/with_list/with_list.js
@@ -4,7 +4,10 @@ import map from 'lodash/map'
 const defaultEntryPropsGetter = entry => ({ entry })
 const defaultKeyGetter = entry => entry.id
 
-const withList = ({ getEntryProps = defaultEntryPropsGetter, getKey = defaultKeyGetter }) => (ItemComponent) => (
+const withList = ({
+  getEntryProps = defaultEntryPropsGetter,  // function to accept entry and index values and return props to be passed into the item component
+  getKey = defaultKeyGetter                 // funciton to accept entry and index values and return key prop value
+}) => (ItemComponent) => (
   Vue.component('withList', {
     render (createElement) {
       return (
diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
index 28c741e3..459e026c 100644
--- a/src/hocs/with_load_more/with_load_more.js
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -3,7 +3,11 @@ import filter from 'lodash/filter'
 import isEmpty from 'lodash/isEmpty'
 import './with_load_more.scss'
 
-const withLoadMore = ({ fetch, select, entriesPropName = 'entries' }) => (WrappedComponent) => {
+const withLoadMore = ({
+  fetch,                      // function to fetch entries and return a promise
+  select,                     // function to select data from store
+  childPropName = 'entries'   // name of the prop to be passed into the wrapped component
+}) => (WrappedComponent) => {
   const originalProps = WrappedComponent.props || []
   const props = filter(originalProps, v => v !== 'entries')
 
@@ -12,7 +16,7 @@ const withLoadMore = ({ fetch, select, entriesPropName = 'entries' }) => (Wrappe
       const props = {
         props: {
           ...this.$props,
-          [entriesPropName]: this.entries
+          [childPropName]: this.entries
         },
         on: this.$listeners
       }
diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js
index 21630b40..960c6d71 100644
--- a/src/hocs/with_subscription/with_subscription.js
+++ b/src/hocs/with_subscription/with_subscription.js
@@ -4,8 +4,12 @@ import isEmpty from 'lodash/isEmpty'
 import omit from 'lodash/omit'
 import './with_subscription.scss'
 
-const withSubscription = ({ fetch, select, contentPropName = 'content' }) => (WrapperComponent) => {
-  const originalProps = WrapperComponent.props || []
+const withSubscription = ({
+  fetch,                      // function to fetch entries and return a promise
+  select,                     // function to select data from store
+  childPropName = 'content'   // name of the prop to be passed into the wrapped component
+}) => (WrappedComponent) => {
+  const originalProps = WrappedComponent.props || []
   const props = reject(originalProps, v => v === 'content')
 
   return Vue.component('withSubscription', {
@@ -13,13 +17,13 @@ const withSubscription = ({ fetch, select, contentPropName = 'content' }) => (Wr
       const props = {
         props: {
           ...omit(this.$props, 'refresh'),
-          [contentPropName]: this.fetchedData
+          [childPropName]: this.fetchedData
         },
         on: this.$listeners
       }
       return (
         <div class="with-subscription">
-          {!this.error && !this.loading && <WrapperComponent {...props} />}
+          {!this.error && !this.loading && <WrappedComponent {...props} />}
           <div class="with-subscription-footer">
             {this.error && <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>}
             {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}

From 8680046c4e59e2296de6add1237f59745aa49e03 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 14 Feb 2019 03:12:52 -0500
Subject: [PATCH 19/29] Pass down slots into wrapped components

---
 src/hocs/with_load_more/with_load_more.js     |  8 +++-
 .../with_subscription/with_subscription.js    | 46 ++++++++++++-------
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
index 459e026c..e9265d2a 100644
--- a/src/hocs/with_load_more/with_load_more.js
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -18,11 +18,15 @@ const withLoadMore = ({
           ...this.$props,
           [childPropName]: this.entries
         },
-        on: this.$listeners
+        on: this.$listeners,
+        scopedSlots: this.$scopedSlots
       }
+      const children = Object.keys(this.$slots).map(slot => createElement('template', { slot }, this.$slots[slot]))
       return (
         <div class="with-load-more">
-          <WrappedComponent {...props} />
+          <WrappedComponent {...props}>
+            {children}
+          </WrappedComponent>
           <div class="with-load-more-footer">
             {this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
             {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js
index 960c6d71..42ede7be 100644
--- a/src/hocs/with_subscription/with_subscription.js
+++ b/src/hocs/with_subscription/with_subscription.js
@@ -13,25 +13,39 @@ const withSubscription = ({
   const props = reject(originalProps, v => v === 'content')
 
   return Vue.component('withSubscription', {
+    props: [
+      ...props,
+      'refresh'               // boolean saying to force-fetch data whenever created
+    ],
     render (createElement) {
-      const props = {
-        props: {
-          ...omit(this.$props, 'refresh'),
-          [childPropName]: this.fetchedData
-        },
-        on: this.$listeners
-      }
-      return (
-        <div class="with-subscription">
-          {!this.error && !this.loading && <WrappedComponent {...props} />}
-          <div class="with-subscription-footer">
-            {this.error && <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>}
-            {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
+      if (!this.error && !this.loading) {
+        const props = {
+          props: {
+            ...omit(this.$props, 'refresh'),
+            [childPropName]: this.fetchedData
+          },
+          on: this.$listeners,
+          scopedSlots: this.$scopedSlots
+        }
+        const children = Object.keys(this.$slots).map(slot => createElement('template', { slot }, this.$slots[slot]))
+        return (
+          <div class="with-subscription">
+            <WrappedComponent {...props}>
+              {children}
+            </WrappedComponent>
           </div>
-        </div>
-      )
+        )
+      } else {
+        return (
+          <div class="with-subscription-loading">
+            {this.error
+              ? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>
+              : <i class="icon-spin3 animate-spin"/>
+            }
+          </div>
+        )
+      }
     },
-    props: [...props, 'refresh'],
     data () {
       return {
         loading: false,

From b4a5b5203f9c6b35feaf2918baa1da6e344ae3c1 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 14 Feb 2019 03:14:30 -0500
Subject: [PATCH 20/29] Minor css improvements of hocs

---
 src/hocs/with_load_more/with_load_more.scss       | 6 +++---
 src/hocs/with_subscription/with_subscription.scss | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss
index af1e1fe8..1a0a9c40 100644
--- a/src/hocs/with_load_more/with_load_more.scss
+++ b/src/hocs/with_load_more/with_load_more.scss
@@ -2,9 +2,9 @@
   &-footer {
     padding: 10px;
     text-align: center;
-  }
 
-  .error {
-    font-size: 14px;
+    .error {
+      font-size: 14px;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/hocs/with_subscription/with_subscription.scss b/src/hocs/with_subscription/with_subscription.scss
index 5114029d..52c7d94c 100644
--- a/src/hocs/with_subscription/with_subscription.scss
+++ b/src/hocs/with_subscription/with_subscription.scss
@@ -1,10 +1,10 @@
 .with-subscription {
-  &-footer {
+  &-loading {
     padding: 10px;
     text-align: center;
-  }
 
-  .error {
-    font-size: 14px;
+    .error {
+      font-size: 14px;
+    }
   }
 }
\ No newline at end of file

From a5162bd636880f53a8a47fbd547971f2aaead381 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 14 Feb 2019 03:16:37 -0500
Subject: [PATCH 21/29] Add note for empty state to the lists using slot

---
 src/components/user_settings/user_settings.vue |  8 ++++++--
 src/hocs/with_list/with_list.js                | 11 +++++++++--
 src/hocs/with_list/with_list.scss              |  6 ++++++
 3 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 src/hocs/with_list/with_list.scss

diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 27f3e7cb..520a8cbe 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -164,11 +164,15 @@
         </div>
         
         <div :label="$t('settings.blocks_tab')">
-          <block-list :refresh="true" />
+          <block-list :refresh="true">
+            <template slot="empty">No blocks</template>
+          </block-list>
         </div>
 
         <div :label="$t('settings.mutes_tab')">
-          <mute-list :refresh="true" />
+          <mute-list :refresh="true">
+            <template slot="empty">No mutes</template>
+          </mute-list>
         </div>
       </tab-switcher>
     </div>
diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js
index e5770cee..896f8fc8 100644
--- a/src/hocs/with_list/with_list.js
+++ b/src/hocs/with_list/with_list.js
@@ -1,5 +1,7 @@
 import Vue from 'vue'
 import map from 'lodash/map'
+import isEmpty from 'lodash/isEmpty'
+import './with_list.scss'
 
 const defaultEntryPropsGetter = entry => ({ entry })
 const defaultKeyGetter = entry => entry.id
@@ -9,6 +11,11 @@ const withList = ({
   getKey = defaultKeyGetter                 // funciton to accept entry and index values and return key prop value
 }) => (ItemComponent) => (
   Vue.component('withList', {
+    props: [
+      'entries',                            // array of entry
+      'entryProps',                         // additional props to be passed into each entry
+      'entryListeners'                      // additional event listeners to be passed into each entry
+    ],
     render (createElement) {
       return (
         <div class="with-list">
@@ -23,10 +30,10 @@ const withList = ({
             }
             return <ItemComponent {...props} />
           })}
+          {isEmpty(this.entries) && this.$slots.empty && <div class="with-list-empty-content faint">{this.$slots.empty}</div>}
         </div>
       )
-    },
-    props: ['entries', 'entryProps', 'entryListeners']
+    }
   })
 )
 
diff --git a/src/hocs/with_list/with_list.scss b/src/hocs/with_list/with_list.scss
new file mode 100644
index 00000000..c6e13d5b
--- /dev/null
+++ b/src/hocs/with_list/with_list.scss
@@ -0,0 +1,6 @@
+.with-list {
+  &-empty-content {
+    text-align: center;
+    padding: 10px;
+  }
+}
\ No newline at end of file

From 395d21290462525209ee4446746f14f996adf6b2 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 14 Feb 2019 03:19:07 -0500
Subject: [PATCH 22/29] Add new strings to i18n

---
 src/components/user_settings/user_settings.vue | 4 ++--
 src/i18n/en.json                               | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 520a8cbe..e18ca4ee 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -165,13 +165,13 @@
         
         <div :label="$t('settings.blocks_tab')">
           <block-list :refresh="true">
-            <template slot="empty">No blocks</template>
+            <template slot="empty">{{$t('settings.no_blocks')}}</template>
           </block-list>
         </div>
 
         <div :label="$t('settings.mutes_tab')">
           <mute-list :refresh="true">
-            <template slot="empty">No mutes</template>
+            <template slot="empty">{{$t('settings.no_mutes')}}</template>
           </mute-list>
         </div>
       </tab-switcher>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index b41b6db9..93819c2c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -177,6 +177,8 @@
     "notification_visibility_mentions": "Mentions",
     "notification_visibility_repeats": "Repeats",
     "no_rich_text_description": "Strip rich text formatting from all posts",
+    "no_blocks": "No blocks",
+    "no_mutes": "No mutes",
     "hide_follows_description": "Don't show who I'm following",
     "hide_followers_description": "Don't show who's following me",
     "show_admin_badge": "Show Admin badge in my profile",

From 32c112bc96ae96aebdb1f5bfa369e1ab52228b06 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 14 Feb 2019 03:31:20 -0500
Subject: [PATCH 23/29] Remove pagination logic in fetchBlocks api

---
 src/services/api/api.service.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 908edf7c..3d2e8823 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -521,11 +521,7 @@ const fetchMutes = ({credentials}) => {
 }
 
 const fetchBlocks = ({page, credentials}) => {
-  let url = BLOCKS_URL
-  if (page) {
-    url = url + `?page=${page}`
-  }
-  return fetch(url, {
+  return fetch(BLOCKS_URL, {
     headers: authHeaders(credentials)
   }).then((data) => {
     if (data.ok) {

From 85d43d17f5834cde8f5f778528ec3e8ffa041efa Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 14 Feb 2019 11:13:29 -0500
Subject: [PATCH 24/29] Add missing translation strings

---
 src/i18n/en.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index 93819c2c..55ea7b24 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -372,7 +372,10 @@
     "statuses": "Statuses",
     "unblock": "Unblock",
     "unblock_progress": "Unblocking...",
-    "block_progress": "Blocking..."
+    "block_progress": "Blocking...",
+    "unmute": "Unmute",
+    "unmute_progress": "Unmuting...",
+    "mute_progress": "Muting..."
   },
   "user_profile": {
     "timeline_title": "User Timeline"

From 46e1f3034788640c57953fbca0e5423dc771b9a9 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 20 Feb 2019 11:22:01 -0500
Subject: [PATCH 25/29] Fix indent

---
 src/components/basic_user_card/basic_user_card.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index 7cbf647c..e09b06ce 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -40,7 +40,7 @@
   border-bottom: 1px solid;
   margin: 0;
   border-bottom-color: $fallback--border;
-	border-bottom-color: var(--border, $fallback--border);
+  border-bottom-color: var(--border, $fallback--border);
 
   &-collapsed-content {
     margin-left: 0.7em;

From 5bd36c6476a8a41a3678c7a32e3eb206d57e5c4a Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 20 Feb 2019 11:28:05 -0500
Subject: [PATCH 26/29] Remove needless css

---
 src/components/basic_user_card/basic_user_card.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index e09b06ce..4ede15e9 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -44,7 +44,6 @@
 
   &-collapsed-content {
     margin-left: 0.7em;
-    margin-top:0.0em;
     text-align: left;
     flex: 1;
     display: flex;

From 37eec09b9b63ef494a075776234382a3da25773e Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 20 Feb 2019 12:36:15 -0500
Subject: [PATCH 27/29] Comment out the mutes tab

---
 src/components/user_settings/user_settings.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index e18ca4ee..5c272114 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -162,18 +162,18 @@
             <h2>{{$t('settings.follow_export_processing')}}</h2>
           </div>
         </div>
-        
+
         <div :label="$t('settings.blocks_tab')">
           <block-list :refresh="true">
             <template slot="empty">{{$t('settings.no_blocks')}}</template>
           </block-list>
         </div>
 
-        <div :label="$t('settings.mutes_tab')">
+        <!-- <div :label="$t('settings.mutes_tab')">
           <mute-list :refresh="true">
             <template slot="empty">{{$t('settings.no_mutes')}}</template>
           </mute-list>
-        </div>
+        </div> -->
       </tab-switcher>
     </div>
   </div>

From eb22e7f462fb69b77278b5f8ad9cb900d2f9e0d9 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 20 Feb 2019 21:50:10 -0500
Subject: [PATCH 28/29] Use Object.entries instead of Object.keys

---
 src/hocs/with_load_more/with_load_more.js       | 2 +-
 src/hocs/with_subscription/with_subscription.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
index e9265d2a..e862a39b 100644
--- a/src/hocs/with_load_more/with_load_more.js
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -21,7 +21,7 @@ const withLoadMore = ({
         on: this.$listeners,
         scopedSlots: this.$scopedSlots
       }
-      const children = Object.keys(this.$slots).map(slot => createElement('template', { slot }, this.$slots[slot]))
+      const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value))
       return (
         <div class="with-load-more">
           <WrappedComponent {...props}>
diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js
index 42ede7be..1ac67cba 100644
--- a/src/hocs/with_subscription/with_subscription.js
+++ b/src/hocs/with_subscription/with_subscription.js
@@ -27,7 +27,7 @@ const withSubscription = ({
           on: this.$listeners,
           scopedSlots: this.$scopedSlots
         }
-        const children = Object.keys(this.$slots).map(slot => createElement('template', { slot }, this.$slots[slot]))
+        const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value))
         return (
           <div class="with-subscription">
             <WrappedComponent {...props}>

From 22851a3a967cc5364a95c71bda48eccc3808bf41 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 21 Feb 2019 20:15:51 -0500
Subject: [PATCH 29/29] Remove needless code

---
 src/components/user_settings/user_settings.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 5c272114..983cbda0 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -168,12 +168,6 @@
             <template slot="empty">{{$t('settings.no_blocks')}}</template>
           </block-list>
         </div>
-
-        <!-- <div :label="$t('settings.mutes_tab')">
-          <mute-list :refresh="true">
-            <template slot="empty">{{$t('settings.no_mutes')}}</template>
-          </mute-list>
-        </div> -->
       </tab-switcher>
     </div>
   </div>