follow requests: refactor to properly leverage vuex

src/components/follow_requests/follow_requests.js

@@ -1,17 +1,22 @@
 import UserCard from '../user_card/user_card.vue'
 
 const FollowRequests = {
-  data () {
-    return {
-      requests: []
-    }
-  },
   components: {
     UserCard
   },
   created () {
-    this.$store.state.api.backendInteractor.fetchFollowRequests()
+    this.updateRequests()
-      .then((requests) => { this.requests = requests })
+  },
+  computed: {
+    requests () {
+      return this.$store.state.api.followRequests
+    }
+  },
+  methods: {
+    updateRequests () {
+      this.$store.state.api.backendInteractor.fetchFollowRequests()
+        .then((requests) => { this.$store.commit('setFollowRequests', requests) })
+    }
   }
 }
 

src/components/user_card/user_card.js

@@ -20,9 +20,11 @@ const UserCard = {
     },
     approveUser () {
       this.$store.state.api.backendInteractor.approveUser(this.user.id)
+      this.$store.dispatch('removeFollowRequest', this.user)
     },
     denyUser () {
       this.$store.state.api.backendInteractor.denyUser(this.user.id)
+      this.$store.dispatch('removeFollowRequest', this.user)
     }
   }
 }

src/modules/api.js

@@ -7,7 +7,8 @@ const api = {
     backendInteractor: backendInteractorService(),
     fetchers: {},
     socket: null,
-    chatDisabled: false
+    chatDisabled: false,
+    followRequests: []
   },
   mutations: {
     setBackendInteractor (state, backendInteractor) {
@@ -24,6 +25,9 @@ const api = {
     },
     setChatDisabled (state, value) {
       state.chatDisabled = value
+    },
+    setFollowRequests (state, value) {
+      state.followRequests = value
     }
   },
   actions: {
@@ -57,6 +61,10 @@ const api = {
     },
     disableChat (store) {
       store.commit('setChatDisabled', true)
+    },
+    removeFollowRequest (store, request) {
+      let requests = store.state.followRequests.filter((it) => it !== request)
+      store.commit('setFollowRequests', requests)
     }
   }
 }