Move some interactions to the backendInteractor

The idea is that all interactions should move there, so components
don't have to pass around credentials all the time.

src/components/conversation/conversation.js

@@ -1,6 +1,5 @@
 import { find, filter, sortBy, toInteger } from 'lodash'
 import Status from '../status/status.vue'
-import apiService from '../../services/api/api.service.js'
 
 const conversation = {
   computed: {
@@ -32,12 +31,12 @@ const conversation = {
     fetchConversation () {
       if (this.status) {
         const conversationId = this.status.statusnet_conversation_id
-        apiService.fetchConversation({id: conversationId})
+        this.$store.state.api.backendInteractor.fetchConversation({id: conversationId})
           .then((statuses) => this.$store.dispatch('addNewStatuses', { statuses }))
           .then(() => this.$store.commit('updateTimestamps'))
       } else {
         const id = this.$route.params.id
-        apiService.fetchStatus({id})
+        this.$store.state.api.backendInteractor.fetchStatus({id})
           .then((status) => this.$store.dispatch('addNewStatuses', { statuses: [status] }))
           .then(() => this.fetchConversation())
       }

src/main.js

@@ -9,6 +9,7 @@ import Conversation from './components/conversation/conversation.vue'
 
 import statusesModule from './modules/statuses.js'
 import usersModule from './modules/users.js'
+import apiModule from './modules/api.js'
 
 Vue.use(Vuex)
 Vue.use(VueRouter)
@@ -16,7 +17,8 @@ Vue.use(VueRouter)
 const store = new Vuex.Store({
   modules: {
     statuses: statusesModule,
-    users: usersModule
+    users: usersModule,
+    api: apiModule
   }
 })
 

src/modules/api.js

@@ -0,0 +1,14 @@
+import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
+
+const api = {
+  state: {
+    backendInteractor: backendInteractorService()
+  },
+  mutations: {
+    setBackendInteractor (state, backendInteractor) {
+      state.backendInteractor = backendInteractor
+    }
+  }
+}
+
+export default api

src/modules/users.js

@@ -1,5 +1,6 @@
 import apiService from '../services/api/api.service.js'
 import timelineFetcher from '../services/timeline_fetcher/timeline_fetcher.service.js'
+import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 
 const users = {
   state: {
@@ -29,7 +30,10 @@ const users = {
                 user.credentials = userCredentials
                 commit('setCurrentUser', user)
               })
+              // Start getting fresh tweets.
               .then(() => timelineFetcher.startFetching({store, credentials: userCredentials}))
+              // Set our new backend interactor
+              .then(() => commit('setBackendInteractor', backendInteractorService(userCredentials)))
           }
           commit('endLogin')
         })

src/services/api/api.service.js

@@ -20,21 +20,23 @@ let fetch = (url, options) => {
 }
 
 const authHeaders = (user) => {
-  if (user) {
+  if (user && user.username && user.password) {
     return { 'Authorization': `Basic ${btoa(`${user.username}:${user.password}`)}` }
   } else {
     return { }
   }
 }
 
-const fetchConversation = ({id}) => {
+const fetchConversation = ({id, credentials}) => {
   let url = `${CONVERSATION_URL}/${id}.json?count=100`
-  return fetch(url).then((data) => data.json())
+  return fetch(url, { headers: authHeaders(credentials) })
+    .then((data) => data.json())
 }
 
-const fetchStatus = ({id}) => {
+const fetchStatus = ({id, credentials}) => {
   let url = `${STATUS_URL}/${id}.json`
-  return fetch(url).then((data) => data.json())
+  return fetch(url, { headers: authHeaders(credentials) })
+    .then((data) => data.json())
 }
 
 const fetchTimeline = ({timeline, credentials, since = false, until = false}) => {

src/services/backend_interactor_service/backend_interactor_service.js

@@ -0,0 +1,20 @@
+import apiService from '../api/api.service.js'
+
+const backendInteractorService = (credentials) => {
+  const fetchStatus = ({id}) => {
+    return apiService.fetchStatus({id, credentials})
+  }
+
+  const fetchConversation = ({id}) => {
+    return apiService.fetchConversation({id, credentials})
+  }
+
+  const backendInteractorServiceInstance = {
+    fetchStatus,
+    fetchConversation
+  }
+
+  return backendInteractorServiceInstance
+}
+
+export default backendInteractorService