Skip to content

Instantly share code, notes, and snippets.

@peerhenry

peerhenry/clientModule1.js

Created February 22, 2019 11:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save peerhenry/2f71a78604dc2b116ecaeef3a9995bec to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save peerhenry/2f71a78604dc2b116ecaeef3a9995bec to your computer and use it in GitHub Desktop.
Download ZIP
Raw
clientModule1.js
const initialState = {
client: undefined,
fetchClientPending: false,
fetchClientError: undefined,
updateClientPending: false,
updateClientError: undefined,
}
const getters = {
client(state) {
return state.client
},
fetchClientPending(state) {
return state.fetchClientPending
},
fetchClientError(state) {
return state.fetchClientError
},
updateClientPending(state) {
return state.updateClientPending
},
updateClientError(state) {
return state.updateClientError
}
}
const mutations = {
setClient(state, client) {
state.client = client
},
setFetchClientPending(state, pending) {
state.fetchClientPending = pending
},
setFetchClientError(state, error) {
state.fetchClientError = error
},
setUpdateClientPending(state, pending) {
state.updateClientPending = pending
},
setUpdateClientError(state, error) {
state.updateClientError = error
},
}
const actions = {
fetchClient(context, payload) {
context.commit('setFetchClientPending', true)
context.commit('setFetchClientError', undefined)
const url = fetchClientUrl + '?ID=' + payload.clientId
axios.get(url).then(
(response) => {
context.commit('setFetchClientPending', false)
context.commit('setClient', response.data)
},
(error) => {
context.commit('setFetchClientPending', false)
context.commit('setFetchClientError', error)
}
)
},
updateClient(context, payload) {
context.commit('setUpdateClientPending', true)
context.commit('setUpdateClientError', undefined)
axios.post(updateClientUrl, payload).then(
(response) => {
context.commit('setUpdateClientPending', true)
},
(error) => {
context.commit('setUpdateClientPending', false)
context.commit('setUpdateClientError', error)
}
)
}
}
const clientModule = {
state: initialState,
getters,
mutations,
actions
}
export clientModule
Raw
clientModule2.js
function fetchClient(context, payload) {
context.commit('setFetchClientPending', true)
context.commit('setFetchClientError', undefined)
const url = fetchClientUrl + '?ID=' + payload.clientId
axios.get(url).then(
(response) => {
context.commit('setFetchClientPending', false)
context.commit('setClient', response.data)
},
(error) => {
context.commit('setFetchClientPending', false)
context.commit('setFetchClientError', error)
}
)
}
function updateClient(context, payload) {
context.commit('setUpdateClientPending', true)
context.commit('setUpdateClientError', undefined)
axios.post(updateClientUrl, payload).then(
(response) => {
context.commit('setUpdateClientPending', false)
},
(error) => {
context.commit('setUpdateClientPending', false)
context.commit('setUpdateClientError', error)
}
)
}
const clientModule = {
state: { client: undefined },
getters: {
client(state) { return state.client }
},
mutations: {
setClient(state, client) { state.client = client }
},
actions: {}
}
setupApiCall(clientModule, 'fetchClient', fetchClient)
setupApiCall(clientModule, 'updateClient', updateClient)
export clientModule
Raw
clientModule3.js
const clientModule = {
state: { client: undefined },
getters: {
client(state) { return state.client }
},
mutations: {
setClient(state, client) { state.client = client }
},
actions: {}
}
setupApiCall(
clientModule,
'fetchClient',
fetchClientUrl,
(url, payload) => (fetchClientUrl + '?ID=' + payload.clientId), // formatUrl
axios.get, // call
(context, response) => { context.commit('setClient', response.data) }, // handleResponse
)
setupApiCall(
clientModule,
'updateClient',
updateClientUrl,
(url, payload) => (url), // formatUrl
axios.post, // call
(context, response) => (), // handleResponse
)
export clientModule
Raw
finalSetupApiCall.js
const validOption = (options, key) => options && options[key] && typeof options[key] === 'function'
const formatOptions = options => {
let result = { }
result.mapPayload = validOption(options, 'handleError') ? options.mapPayload : (context, payload) => payload
result.formatUrl = validOption(options, 'formatUrl') ? options.formatUrl : (context, payload, url) => url
result.handleResponse = validOption(options, 'handleResponse') ? options.handleResponse : _ => _
result.handleError = validOption(options, 'handleError') ? options.handleError : _ => _
return result
}
function setupApiCall(vuexModule, name, url, call, argOptions) {
const options = formatOptions(argOptions)
const pendingKey = name + 'Pending'
const errorKey = name + 'Error'
const capitalizedName = name.charAt(0).toUpperCase() + name.slice(1)
const pendingMutationKey = 'set' + capitalizedName + 'Pending'
const errorMutationKey = 'set' + capitalizedName + 'Error'
vuexModule.state[pendingKey] = false
vuexModule.state[errorKey] = undefined
vuexModule.getters[pendingKey] = (state) => state[pendingKey]
vuexModule.getters[errorKey] = (state) => state[errorKey]
vuexModule.mutations[pendingMutationKey] = (state, pending) => state[pendingKey] = pending
vuexModule.mutations[errorMutationKey] = (state, error) => state[errorKey] = error
vuexModule.actions[name] = (context, payload) => {
context.commit(pendingMutationKey, true)
context.commit(errorMutationKey, undefined)
const formattedUrl = options.formatUrl(context, payload, url)
const data = options.mapPayload(context, payload)
call(formattedUrl, data).then(
(response) => {
context.commit(pendingMutationKey, false)
options.handleResponse(context, payload, response)
},
(error) => {
context.commit(pendingMutationKey, false)
context.commit(errorMutationKey, error)
options.handleError(context, payload, error)
}
)
}
}
Raw
setupApiCall1.js
function setupApiCall(vuexModule, name, action) {
const pendingKey = name + 'Pending'
const errorKey = name + 'Error'
const capitalizedName = name.charAt(0).toUpperCase() + name.slice(1)
const pendingMutationKey = 'set' + capitalizedName + 'Pending'
const errorMutationKey = 'set' + capitalizedName + 'Error'
vuexModule.state[pendingKey] = false
vuexModule.state[errorKey] = undefined
vuexModule.getters[pendingKey] = (state) => state[pendingKey]
vuexModule.getters[errorKey] = (state) => state[errorKey]
vuexModule.mutations[pendingMutationKey] = (state, pending) => state[pendingKey] = pending
vuexModule.mutations[errorMutationKey] = (state, error) => state[errorKey] = error
vuexModule.actions[name] = action
}
Raw
setupApiCall2.js
function setupApiCall(vuexModule, name, url, formatUrl, call, handleResponse) {
const pendingKey = name + 'Pending'
const errorKey = name + 'Error'
const capitalizedName = name.charAt(0).toUpperCase() + name.slice(1)
const pendingMutationKey = 'set' + capitalizedName + 'Pending'
const errorMutationKey = 'set' + capitalizedName + 'Error'
vuexModule.state[pendingKey] = false
vuexModule.state[errorKey] = undefined
vuexModule.getters[pendingKey] = (state) => state[pendingKey]
vuexModule.getters[errorKey] = (state) => state[errorKey]
vuexModule.mutations[pendingMutationKey] = (state, pending) => state[pendingKey] = pending
vuexModule.mutations[errorMutationKey] = (state, error) => state[errorKey] = error
vuexModule.actions[name] = (context, payload) => {
context.commit(pendingMutationKey, true)
context.commit(errorMutationKey, undefined)
const formattedUrl = formatUrl(url, payload)
call(formattedUrl, payload).then(
(response) => {
context.commit(pendingMutationKey, false)
handleResponse(context, response)
},
(error) => {
context.commit(pendingMutationKey, false)
context.commit(errorMutationKey, error)
}
)
}
}
Raw
setupApiCall3.js
const validOption = (options, key) => options && options[key] && typeof options[key] === 'function'
const formatOptions = options => {
let result = {}
result.formatUrl = validOption(options, 'formatUrl') ? options.formatUrl : (context, payload, url) => url
result.handleResponse = validOption(options, 'handleResponse') ? options.handleResponse : _ => _
return result
}
function setupApiCall(vuexModule, name, url, call, argOptions) {
const options = formatOptions(argOptions)
const pendingKey = name + 'Pending'
const errorKey = name + 'Error'
const capitalizedName = name.charAt(0).toUpperCase() + name.slice(1)
const pendingMutationKey = 'set' + capitalizedName + 'Pending'
const errorMutationKey = 'set' + capitalizedName + 'Error'
vuexModule.state[pendingKey] = false
vuexModule.state[errorKey] = undefined
vuexModule.getters[pendingKey] = (state) => state[pendingKey]
vuexModule.getters[errorKey] = (state) => state[errorKey]
vuexModule.mutations[pendingMutationKey] = (state, pending) => state[pendingKey] = pending
vuexModule.mutations[errorMutationKey] = (state, error) => state[errorKey] = error
vuexModule.actions[name] = (context, payload) => {
context.commit(pendingMutationKey, true)
context.commit(errorMutationKey, undefined)
const formattedUrl = options.formatUrl(url, payload)
call(formattedUrl, payload).then(
(response) => {
context.commit(pendingMutationKey, false)
options.handleResponse(context, response)
},
(error) => {
context.commit(pendingMutationKey, false)
context.commit(errorMutationKey, error)
}
)
}
}
Raw
usage.js
setupApiCall(
clientModule,
'fetchClient',
fetchClientUrl,
axios.get,
{
formatUrl: (url, payload) => (fetchClientUrl + '?ID=' + payload.clientId),
handleResponse: (context, response) => { context.commit('setClient', response.data) }
}
)
setupApiCall(
clientModule,
'updateClient',
updateClientUrl,
axios.post
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment