add and remove users to/from lists from their profile

src/components/account_actions/account_actions.js

@@ -1,6 +1,7 @@
 import { mapState } from 'vuex'
 import ProgressButton from '../progress_button/progress_button.vue'
 import Popover from '../popover/popover.vue'
+import UserListMenu from 'src/components/user_list_menu/user_list_menu.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEllipsisV
@@ -19,7 +20,8 @@ const AccountActions = {
   },
   components: {
     ProgressButton,
-    Popover
+    Popover,
+    UserListMenu
   },
   methods: {
     showRepeats () {

src/components/account_actions/account_actions.vue

@@ -28,6 +28,7 @@
               class="dropdown-divider"
             />
           </template>
+          <UserListMenu :user="user" />
           <button
             v-if="relationship.blocking"
             class="btn button-default btn-block dropdown-item"

src/components/lists_edit/lists_edit.js

@@ -27,9 +27,9 @@ const ListsNew = {
     }
   },
   created () {
-    this.$store.dispatch('fetchList', { id: this.id })
+    this.$store.dispatch('fetchList', { listId: this.id })
       .then(() => { this.title = this.findListTitle(this.id) })
-    this.$store.dispatch('fetchListAccounts', { id: this.id })
+    this.$store.dispatch('fetchListAccounts', { listId: this.id })
       .then(() => {
         this.selectedUserIds = this.findListAccounts(this.id)
         this.selectedUserIds.forEach(userId => {
@@ -76,13 +76,13 @@ const ListsNew = {
       this.userIds = results
     },
     updateList () {
-      this.$store.dispatch('setList', { id: this.id, title: this.title })
-      this.$store.dispatch('setListAccounts', { id: this.id, accountIds: this.selectedUserIds })
+      this.$store.dispatch('setList', { listId: this.id, title: this.title })
+      this.$store.dispatch('setListAccounts', { listId: this.id, accountIds: this.selectedUserIds })
 
       this.$router.push({ name: 'lists-timeline', params: { id: this.id } })
     },
     deleteList () {
-      this.$store.dispatch('deleteList', { id: this.id })
+      this.$store.dispatch('deleteList', { listId: this.id })
       this.$router.push({ name: 'lists' })
     }
   }

src/components/lists_new/lists_new.js

@@ -69,8 +69,8 @@ const ListsNew = {
       // and "updating the accounts on the list".
       this.$store.dispatch('createList', { title: this.title })
         .then((list) => {
-          this.$store.dispatch('setListAccounts', { id: list.id, accountIds: this.selectedUserIds })
-          this.$router.push({ name: 'lists-timeline', params: { id: list.id } })
+          this.$store.dispatch('setListAccounts', { listId: list.id, accountIds: this.selectedUserIds })
+          this.$router.push({ name: 'lists-timeline', params: { listId: list.id } })
         })
     }
   }

src/components/popover/popover.js

@@ -4,7 +4,7 @@ const Popover = {
     // Action to trigger popover: either 'hover' or 'click'
     trigger: String,
 
-    // Either 'top' or 'bottom'
+    // 'top', 'bottom', 'left', 'right'
     placement: String,
 
     // Takes object with properties 'x' and 'y', values of these can be
@@ -84,6 +84,8 @@ const Popover = {
       const anchorStyle = getComputedStyle(anchorEl)
       const topPadding = parseFloat(anchorStyle.paddingTop)
       const bottomPadding = parseFloat(anchorStyle.paddingBottom)
+      const rightPadding = parseFloat(anchorStyle.paddingRight)
+      const leftPadding = parseFloat(anchorStyle.paddingLeft)
 
       // Screen position of the origin point for popover = center of the anchor
       const origin = {
@@ -170,7 +172,7 @@ const Popover = {
       if (overlayCenter) {
         translateX = origin.x + horizOffset
         translateY = origin.y + vertOffset
-      } else {
+      } else if (this.placement !== 'right' && this.placement !== 'left') {
         // Default to whatever user wished with placement prop
         let usingTop = this.placement !== 'bottom'
 
@@ -189,6 +191,25 @@ const Popover = {
 
         const xOffset = (this.offset && this.offset.x) || 0
         translateX = origin.x + horizOffset + xOffset
+      } else {
+        // Default to whatever user wished with placement prop
+        let usingRight = this.placement !== 'left'
+
+        // Handle special cases, first force to displaying on top if there's not space on bottom,
+        // regardless of what placement value was. Then check if there's not space on top, and
+        // force to bottom, again regardless of what placement value was.
+        const rightBoundary = origin.x - anchorWidth * 0.5 + (this.removePadding ? rightPadding : 0)
+        const leftBoundary = origin.x + anchorWidth * 0.5 - (this.removePadding ? leftPadding : 0)
+        if (leftBoundary + content.offsetWidth > xBounds.max) usingRight = true
+        if (rightBoundary - content.offsetWidth < xBounds.min) usingRight = false
+
+        const xOffset = (this.offset && this.offset.x) || 0
+        translateX = usingRight
+          ? rightBoundary - xOffset - content.offsetWidth
+          : leftBoundary + xOffset
+
+        const yOffset = (this.offset && this.offset.y) || 0
+        translateY = origin.y + vertOffset + yOffset
       }
 
       this.styles = {

src/i18n/en.json

@@ -980,7 +980,8 @@
     "create": "Create",
     "save": "Save changes",
     "delete": "Delete list",
-    "following_only": "Limit to Following"
+    "following_only": "Limit to Following",
+    "manage_lists": "Manage lists"
   },
   "file_type": {
     "audio": "Audio",

src/modules/lists.js

@@ -9,27 +9,42 @@ export const mutations = {
   setLists (state, value) {
     state.allLists = value
   },
-  setList (state, { id, title }) {
-    if (!state.allListsObject[id]) {
-      state.allListsObject[id] = {}
+  setList (state, { listId, title }) {
+    if (!state.allListsObject[listId]) {
+      state.allListsObject[listId] = { accountIds: [] }
     }
-    state.allListsObject[id].title = title
+    state.allListsObject[listId].title = title
 
-    if (!find(state.allLists, { id })) {
-      state.allLists.push({ id, title })
+    if (!find(state.allLists, { listId })) {
+      state.allLists.push({ listId, title })
     } else {
-      find(state.allLists, { id }).title = title
+      find(state.allLists, { listId }).title = title
     }
   },
-  setListAccounts (state, { id, accountIds }) {
-    if (!state.allListsObject[id]) {
-      state.allListsObject[id] = {}
+  setListAccounts (state, { listId, accountIds }) {
+    if (!state.allListsObject[listId]) {
+      state.allListsObject[listId] = { accountIds: [] }
     }
-    state.allListsObject[id].accountIds = accountIds
+    state.allListsObject[listId].accountIds = accountIds
   },
-  deleteList (state, { id }) {
-    delete state.allListsObject[id]
-    remove(state.allLists, list => list.id === id)
+  addListAccount (state, { listId, accountId }) {
+    if (!state.allListsObject[listId]) {
+      state.allListsObject[listId] = { accountIds: [] }
+    }
+    state.allListsObject[listId].accountIds.push(accountId)
+  },
+  removeListAccount (state, { listId, accountId }) {
+    if (!state.allListsObject[listId]) {
+      state.allListsObject[listId] = { accountIds: [] }
+    }
+    const { accountIds } = state.allListsObject[listId]
+    const set = new Set(accountIds)
+    set.delete(accountId)
+    state.allListsObject[listId].accountIds = [...set]
+  },
+  deleteList (state, { listId }) {
+    delete state.allListsObject[listId]
+    remove(state.allLists, list => list.id === listId)
   }
 }
 
@@ -40,37 +55,57 @@ const actions = {
   createList ({ rootState, commit }, { title }) {
     return rootState.api.backendInteractor.createList({ title })
       .then((list) => {
-        commit('setList', { id: list.id, title })
+        commit('setList', { listId: list.id, title })
         return list
       })
   },
-  fetchList ({ rootState, commit }, { id }) {
-    return rootState.api.backendInteractor.getList({ id })
+  fetchList ({ rootState, commit }, { listId }) {
+    return rootState.api.backendInteractor.getList({ listId })
       .then((list) => commit('setList', { id: list.id, title: list.title }))
   },
-  fetchListAccounts ({ rootState, commit }, { id }) {
-    return rootState.api.backendInteractor.getListAccounts({ id })
-      .then((accountIds) => commit('setListAccounts', { id, accountIds }))
+  fetchListAccounts ({ rootState, commit }, { listId }) {
+    return rootState.api.backendInteractor.getListAccounts({ listId })
+      .then((accountIds) => commit('setListAccounts', { listId, accountIds }))
   },
-  setList ({ rootState, commit }, { id, title }) {
-    rootState.api.backendInteractor.updateList({ id, title })
-    commit('setList', { id, title })
+  setList ({ rootState, commit }, { listId, title }) {
+    rootState.api.backendInteractor.updateList({ listId, title })
+    commit('setList', { listId, title })
   },
-  setListAccounts ({ rootState, commit }, { id, accountIds }) {
-    const saved = rootState.lists.allListsObject[id].accountIds || []
+  setListAccounts ({ rootState, commit }, { listId, accountIds }) {
+    const saved = rootState.lists.allListsObject[listId].accountIds || []
     const added = accountIds.filter(id => !saved.includes(id))
     const removed = saved.filter(id => !accountIds.includes(id))
-    commit('setListAccounts', { id, accountIds })
+    commit('setListAccounts', { listId, accountIds })
     if (added.length > 0) {
-      rootState.api.backendInteractor.addAccountsToList({ id, accountIds: added })
+      rootState.api.backendInteractor.addAccountsToList({ listId, accountIds: added })
     }
     if (removed.length > 0) {
-      rootState.api.backendInteractor.removeAccountsFromList({ id, accountIds: removed })
+      rootState.api.backendInteractor.removeAccountsFromList({ listId, accountIds: removed })
     }
   },
-  deleteList ({ rootState, commit }, { id }) {
-    rootState.api.backendInteractor.deleteList({ id })
-    commit('deleteList', { id })
+  addListAccount ({ rootState, commit }, { listId, accountId }) {
+    return rootState
+      .api
+      .backendInteractor
+      .addAccountsToList({ listId, accountIds: [accountId] })
+      .then((result) => {
+        commit('addListAccount', { listId, accountId })
+        return result
+      })
+  },
+  removeListAccount ({ rootState, commit }, { listId, accountId }) {
+    return rootState
+      .api
+      .backendInteractor
+      .removeAccountsFromList({ listId, accountIds: [accountId] })
+      .then((result) => {
+        commit('removeListAccount', { listId, accountId })
+        return result
+      })
+  },
+  deleteList ({ rootState, commit }, { listId }) {
+    rootState.api.backendInteractor.deleteList({ listId })
+    commit('deleteList', { listId })
   }
 }
 

src/modules/users.js

@@ -170,6 +170,9 @@ export const mutations = {
       state.relationships[relationship.id] = relationship
     })
   },
+  updateUserInLists (state, { id, inLists }) {
+    state.usersObject[id].inLists = inLists
+  },
   saveBlockIds (state, blockIds) {
     state.currentUser.blockIds = blockIds
   },
@@ -291,6 +294,12 @@ const users = {
           .then((relationships) => store.commit('updateUserRelationship', relationships))
       }
     },
+    fetchUserInLists (store, id) {
+      if (store.state.currentUser) {
+        store.rootState.api.backendInteractor.fetchUserInLists({ id })
+          .then((inLists) => store.commit('updateUserInLists', { id, inLists }))
+      }
+    },
     fetchBlocks (store) {
       return store.rootState.api.backendInteractor.fetchBlocks()
         .then((blocks) => {

src/services/api/api.service.js

@@ -52,6 +52,7 @@ const MASTODON_STATUS_CONTEXT_URL = id => `/api/v1/statuses/${id}/context`
 const MASTODON_USER_URL = '/api/v1/accounts'
 const MASTODON_USER_RELATIONSHIPS_URL = '/api/v1/accounts/relationships'
 const MASTODON_USER_TIMELINE_URL = id => `/api/v1/accounts/${id}/statuses`
+const MASTODON_USER_IN_LISTS = id => `/api/v1/accounts/${id}/lists`
 const MASTODON_LIST_URL = id => `/api/v1/lists/${id}`
 const MASTODON_LIST_TIMELINE_URL = id => `/api/v1/timelines/list/${id}`
 const MASTODON_LIST_ACCOUNTS_URL = id => `/api/v1/lists/${id}/accounts`
@@ -262,6 +263,13 @@ const unfollowUser = ({ id, credentials }) => {
   }).then((data) => data.json())
 }
 
+const fetchUserInLists = ({ id, credentials }) => {
+  const url = MASTODON_USER_IN_LISTS(id)
+  return fetch(url, {
+    headers: authHeaders(credentials)
+  }).then((data) => data.json())
+}
+
 const pinOwnStatus = ({ id, credentials }) => {
   return promisedRequest({ url: MASTODON_PIN_OWN_STATUS(id), credentials, method: 'POST' })
     .then((data) => parseStatus(data))
@@ -408,14 +416,14 @@ const createList = ({ title, credentials }) => {
   }).then((data) => data.json())
 }
 
-const getList = ({ id, credentials }) => {
-  const url = MASTODON_LIST_URL(id)
+const getList = ({ listId, credentials }) => {
+  const url = MASTODON_LIST_URL(listId)
   return fetch(url, { headers: authHeaders(credentials) })
     .then((data) => data.json())
 }
 
-const updateList = ({ id, title, credentials }) => {
-  const url = MASTODON_LIST_URL(id)
+const updateList = ({ listId, title, credentials }) => {
+  const url = MASTODON_LIST_URL(listId)
   const headers = authHeaders(credentials)
   headers['Content-Type'] = 'application/json'
 
@@ -426,15 +434,15 @@ const updateList = ({ id, title, credentials }) => {
   })
 }
 
-const getListAccounts = ({ id, credentials }) => {
-  const url = MASTODON_LIST_ACCOUNTS_URL(id)
+const getListAccounts = ({ listId, credentials }) => {
+  const url = MASTODON_LIST_ACCOUNTS_URL(listId)
   return fetch(url, { headers: authHeaders(credentials) })
     .then((data) => data.json())
     .then((data) => data.map(({ id }) => id))
 }
 
-const addAccountsToList = ({ id, accountIds, credentials }) => {
-  const url = MASTODON_LIST_ACCOUNTS_URL(id)
+const addAccountsToList = ({ listId, accountIds, credentials }) => {
+  const url = MASTODON_LIST_ACCOUNTS_URL(listId)
   const headers = authHeaders(credentials)
   headers['Content-Type'] = 'application/json'
 
@@ -445,8 +453,8 @@ const addAccountsToList = ({ id, accountIds, credentials }) => {
   })
 }
 
-const removeAccountsFromList = ({ id, accountIds, credentials }) => {
-  const url = MASTODON_LIST_ACCOUNTS_URL(id)
+const removeAccountsFromList = ({ listId, accountIds, credentials }) => {
+  const url = MASTODON_LIST_ACCOUNTS_URL(listId)
   const headers = authHeaders(credentials)
   headers['Content-Type'] = 'application/json'
 
@@ -457,8 +465,8 @@ const removeAccountsFromList = ({ id, accountIds, credentials }) => {
   })
 }
 
-const deleteList = ({ id, credentials }) => {
-  const url = MASTODON_LIST_URL(id)
+const deleteList = ({ listId, credentials }) => {
+  const url = MASTODON_LIST_URL(listId)
   return fetch(url, {
     method: 'DELETE',
     headers: authHeaders(credentials)
@@ -1563,7 +1571,8 @@ const apiService = {
   sendChatMessage,
   readChat,
   deleteChatMessage,
-  setReportState
+  setReportState,
+  fetchUserInLists
 }
 
 export default apiService

src/services/entity_normalizer/entity_normalizer.service.js

@@ -43,6 +43,7 @@ export const parseUser = (data) => {
   // case for users in "mentions" property for statuses in MastoAPI
   const mastoShort = masto && !Object.prototype.hasOwnProperty.call(data, 'avatar')
 
+  output.inLists = null
   output.id = String(data.id)
   output._original = data // used for server-side settings