From 215e51f764660442405b47c2620c62681ef5a057 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Sat, 26 Nov 2016 18:57:08 +0100 Subject: [PATCH] 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 | 5 ++--- src/main.js | 4 +++- src/modules/api.js | 14 +++++++++++++ src/modules/users.js | 4 ++++ src/services/api/api.service.js | 12 ++++++----- .../backend_interactor_service.js | 20 +++++++++++++++++++ 6 files changed, 50 insertions(+), 9 deletions(-) create mode 100644 src/modules/api.js create mode 100644 src/services/backend_interactor_service/backend_interactor_service.js diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index ea26d958..20540ed3 100644 --- a/src/components/conversation/conversation.js +++ b/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()) } diff --git a/src/main.js b/src/main.js index 3d3ef1b4..eb1ad9b2 100644 --- a/src/main.js +++ b/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 } }) diff --git a/src/modules/api.js b/src/modules/api.js new file mode 100644 index 00000000..4000dc60 --- /dev/null +++ b/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 diff --git a/src/modules/users.js b/src/modules/users.js index cf2b16f0..b798ccfb 100644 --- a/src/modules/users.js +++ b/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') }) diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index 87102376..7757dd88 100644 --- a/src/services/api/api.service.js +++ b/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}) => { diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js new file mode 100644 index 00000000..03d7af2d --- /dev/null +++ b/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