[Refactor] Cleanup agent store and actions (#373)
* Cleanup agent store and actions * Move set/create/update/destroy to helpers * Update mutation specs * Add specs for API helper * Fix edit/delete action visibility * Add actions specs * Remove unused API helpers * Remove duplicates * Remove duplicates * Fix duplicate
This commit is contained in:
Pranav Raj S
@@ -1,108 +0,0 @@
|
||||
/* eslint no-console: 0 */
|
||||
/* eslint no-param-reassign: 0 */
|
||||
/* eslint no-shadow: 0 */
|
||||
import * as types from '../mutation-types';
|
||||
import Account from '../../api/account';
|
||||
import { setLoadingStatus, getLoadingStatus } from '../utils/api';
|
||||
|
||||
const state = {
|
||||
agents: [],
|
||||
fetchAPIloadingStatus: false,
|
||||
};
|
||||
|
||||
const getters = {
|
||||
getAgents(_state) {
|
||||
return _state.agents;
|
||||
},
|
||||
getVerifiedAgents(_state) {
|
||||
return _state.agents.filter(element => element.confirmed);
|
||||
},
|
||||
getAgentFetchStatus: getLoadingStatus,
|
||||
};
|
||||
|
||||
const actions = {
|
||||
fetchAgents({ commit }) {
|
||||
commit(types.default.SET_AGENT_FETCHING_STATUS, true);
|
||||
Account.getAgents()
|
||||
.then(response => {
|
||||
commit(types.default.SET_AGENT_FETCHING_STATUS, false);
|
||||
commit(types.default.SET_AGENTS, response);
|
||||
})
|
||||
.catch();
|
||||
},
|
||||
addAgent({ commit }, agentInfo) {
|
||||
return new Promise((resolve, reject) => {
|
||||
Account.addAgent(agentInfo)
|
||||
.then(response => {
|
||||
commit(types.default.ADD_AGENT, response);
|
||||
resolve();
|
||||
})
|
||||
.catch(response => {
|
||||
reject(response);
|
||||
});
|
||||
});
|
||||
},
|
||||
editAgent({ commit }, agentInfo) {
|
||||
return new Promise((resolve, reject) => {
|
||||
Account.editAgent(agentInfo)
|
||||
.then(response => {
|
||||
commit(types.default.EDIT_AGENT, response, agentInfo.id);
|
||||
resolve();
|
||||
})
|
||||
.catch(response => {
|
||||
reject(response);
|
||||
});
|
||||
});
|
||||
},
|
||||
deleteAgent({ commit }, agentId) {
|
||||
return new Promise((resolve, reject) => {
|
||||
Account.deleteAgent(agentId)
|
||||
.then(response => {
|
||||
if (response.status === 200) {
|
||||
commit(types.default.DELETE_AGENT, agentId);
|
||||
}
|
||||
resolve();
|
||||
})
|
||||
.catch(response => {
|
||||
reject(response);
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
const mutations = {
|
||||
// List
|
||||
[types.default.SET_AGENT_FETCHING_STATUS]: setLoadingStatus,
|
||||
// List
|
||||
[types.default.SET_AGENTS](_state, response) {
|
||||
_state.agents = response.data;
|
||||
},
|
||||
// Add Agent
|
||||
[types.default.ADD_AGENT](_state, response) {
|
||||
if (response.status === 200) {
|
||||
_state.agents.push(response.data);
|
||||
}
|
||||
},
|
||||
// Edit Agent
|
||||
[types.default.EDIT_AGENT](_state, response) {
|
||||
if (response.status === 200) {
|
||||
_state.agents.forEach((element, index) => {
|
||||
if (element.id === response.data.id) {
|
||||
_state.agents[index] = response.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// Delete Agent
|
||||
[types.default.DELETE_AGENT](_state, { id }) {
|
||||
_state.agents = _state.agents.filter(agent => agent.id !== id);
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
state,
|
||||
getters,
|
||||
actions,
|
||||
mutations,
|
||||
};
|
||||
99
app/javascript/dashboard/store/modules/agents.js
Normal file
99
app/javascript/dashboard/store/modules/agents.js
Normal file
@@ -0,0 +1,99 @@
|
||||
import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
|
||||
import * as types from '../mutation-types';
|
||||
import AgentAPI from '../../api/agents';
|
||||
|
||||
export const state = {
|
||||
records: [],
|
||||
uiFlags: {
|
||||
isFetching: false,
|
||||
isCreating: false,
|
||||
isUpdating: false,
|
||||
isDeleting: false,
|
||||
},
|
||||
};
|
||||
|
||||
export const getters = {
|
||||
getAgents($state) {
|
||||
return $state.records;
|
||||
},
|
||||
getVerifiedAgents($state) {
|
||||
return $state.records.filter(record => record.confirmed);
|
||||
},
|
||||
getUIFlags($state) {
|
||||
return $state.uiFlags;
|
||||
},
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
get: async ({ commit }) => {
|
||||
commit(types.default.SET_AGENT_FETCHING_STATUS, true);
|
||||
try {
|
||||
const response = await AgentAPI.get();
|
||||
commit(types.default.SET_AGENT_FETCHING_STATUS, false);
|
||||
commit(types.default.SET_AGENTS, response.data);
|
||||
} catch (error) {
|
||||
commit(types.default.SET_AGENT_FETCHING_STATUS, false);
|
||||
}
|
||||
},
|
||||
create: async ({ commit }, agentInfo) => {
|
||||
commit(types.default.SET_AGENT_CREATING_STATUS, true);
|
||||
try {
|
||||
const response = await AgentAPI.create(agentInfo);
|
||||
commit(types.default.ADD_AGENT, response.data);
|
||||
commit(types.default.SET_AGENT_CREATING_STATUS, false);
|
||||
} catch (error) {
|
||||
commit(types.default.SET_AGENT_CREATING_STATUS, false);
|
||||
throw new Error(error);
|
||||
}
|
||||
},
|
||||
update: async ({ commit }, { id, ...agentParams }) => {
|
||||
commit(types.default.SET_AGENT_UPDATING_STATUS, true);
|
||||
try {
|
||||
const response = await AgentAPI.update(id, agentParams);
|
||||
commit(types.default.EDIT_AGENT, response.data);
|
||||
commit(types.default.SET_AGENT_UPDATING_STATUS, false);
|
||||
} catch (error) {
|
||||
commit(types.default.SET_AGENT_UPDATING_STATUS, false);
|
||||
throw new Error(error);
|
||||
}
|
||||
},
|
||||
delete: async ({ commit }, agentId) => {
|
||||
commit(types.default.SET_AGENT_DELETING_STATUS, true);
|
||||
try {
|
||||
await AgentAPI.delete(agentId);
|
||||
commit(types.default.DELETE_AGENT, agentId);
|
||||
commit(types.default.SET_AGENT_DELETING_STATUS, false);
|
||||
} catch (error) {
|
||||
commit(types.default.SET_AGENT_DELETING_STATUS, false);
|
||||
throw new Error(error);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export const mutations = {
|
||||
[types.default.SET_AGENT_FETCHING_STATUS]($state, status) {
|
||||
$state.uiFlags.isFetching = status;
|
||||
},
|
||||
[types.default.SET_AGENT_CREATING_STATUS]($state, status) {
|
||||
$state.uiFlags.isCreating = status;
|
||||
},
|
||||
[types.default.SET_AGENT_UPDATING_STATUS]($state, status) {
|
||||
$state.uiFlags.isUpdating = status;
|
||||
},
|
||||
[types.default.SET_AGENT_DELETING_STATUS]($state, status) {
|
||||
$state.uiFlags.isDeleting = status;
|
||||
},
|
||||
|
||||
[types.default.SET_AGENTS]: MutationHelpers.set,
|
||||
[types.default.ADD_AGENT]: MutationHelpers.create,
|
||||
[types.default.EDIT_AGENT]: MutationHelpers.update,
|
||||
[types.default.DELETE_AGENT]: MutationHelpers.destroy,
|
||||
};
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state,
|
||||
getters,
|
||||
actions,
|
||||
mutations,
|
||||
};
|
||||
@@ -1,6 +1,4 @@
|
||||
/* eslint no-console: 0 */
|
||||
/* eslint no-param-reassign: 0 */
|
||||
/* eslint no-shadow: 0 */
|
||||
import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
|
||||
import * as types from '../mutation-types';
|
||||
import CannedResponseAPI from '../../api/cannedResponse';
|
||||
|
||||
@@ -87,27 +85,10 @@ const mutations = {
|
||||
};
|
||||
},
|
||||
|
||||
[types.default.SET_CANNED](_state, data) {
|
||||
_state.records = data;
|
||||
},
|
||||
|
||||
[types.default.ADD_CANNED](_state, data) {
|
||||
_state.records.push(data);
|
||||
},
|
||||
|
||||
[types.default.EDIT_CANNED](_state, data) {
|
||||
_state.records.forEach((element, index) => {
|
||||
if (element.id === data.id) {
|
||||
_state.records[index] = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
[types.default.DELETE_CANNED](_state, id) {
|
||||
_state.records = _state.records.filter(
|
||||
cannedResponse => cannedResponse.id !== id
|
||||
);
|
||||
},
|
||||
[types.default.SET_CANNED]: MutationHelpers.set,
|
||||
[types.default.ADD_CANNED]: MutationHelpers.create,
|
||||
[types.default.EDIT_CANNED]: MutationHelpers.update,
|
||||
[types.default.DELETE_CANNED]: MutationHelpers.destroy,
|
||||
};
|
||||
|
||||
export default {
|
||||
|
||||
@@ -0,0 +1,94 @@
|
||||
import axios from 'axios';
|
||||
import { actions } from '../../agents';
|
||||
import * as types from '../../../mutation-types';
|
||||
import agentList from './fixtures';
|
||||
|
||||
const commit = jest.fn();
|
||||
global.axios = axios;
|
||||
jest.mock('axios');
|
||||
|
||||
describe('#actions', () => {
|
||||
describe('#get', () => {
|
||||
it('sends correct actions if API is success', async () => {
|
||||
axios.get.mockResolvedValue({ data: agentList });
|
||||
await actions.get({ commit });
|
||||
expect(commit.mock.calls).toEqual([
|
||||
[types.default.SET_AGENT_FETCHING_STATUS, true],
|
||||
[types.default.SET_AGENT_FETCHING_STATUS, false],
|
||||
[types.default.SET_AGENTS, agentList],
|
||||
]);
|
||||
});
|
||||
it('sends correct actions if API is error', async () => {
|
||||
axios.get.mockRejectedValue({ message: 'Incorrect header' });
|
||||
await actions.get({ commit });
|
||||
expect(commit.mock.calls).toEqual([
|
||||
[types.default.SET_AGENT_FETCHING_STATUS, true],
|
||||
[types.default.SET_AGENT_FETCHING_STATUS, false],
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#create', () => {
|
||||
it('sends correct actions if API is success', async () => {
|
||||
axios.post.mockResolvedValue({ data: agentList[0] });
|
||||
await actions.create({ commit }, agentList[0]);
|
||||
expect(commit.mock.calls).toEqual([
|
||||
[types.default.SET_AGENT_CREATING_STATUS, true],
|
||||
[types.default.ADD_AGENT, agentList[0]],
|
||||
[types.default.SET_AGENT_CREATING_STATUS, false],
|
||||
]);
|
||||
});
|
||||
it('sends correct actions if API is error', async () => {
|
||||
axios.post.mockRejectedValue({ message: 'Incorrect header' });
|
||||
await expect(actions.create({ commit })).rejects.toThrow(Error);
|
||||
expect(commit.mock.calls).toEqual([
|
||||
[types.default.SET_AGENT_CREATING_STATUS, true],
|
||||
[types.default.SET_AGENT_CREATING_STATUS, false],
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#update', () => {
|
||||
it('sends correct actions if API is success', async () => {
|
||||
axios.patch.mockResolvedValue({ data: agentList[0] });
|
||||
await actions.update({ commit }, agentList[0]);
|
||||
expect(commit.mock.calls).toEqual([
|
||||
[types.default.SET_AGENT_UPDATING_STATUS, true],
|
||||
[types.default.EDIT_AGENT, agentList[0]],
|
||||
[types.default.SET_AGENT_UPDATING_STATUS, false],
|
||||
]);
|
||||
});
|
||||
it('sends correct actions if API is error', async () => {
|
||||
axios.patch.mockRejectedValue({ message: 'Incorrect header' });
|
||||
await expect(actions.update({ commit }, agentList[0])).rejects.toThrow(
|
||||
Error
|
||||
);
|
||||
expect(commit.mock.calls).toEqual([
|
||||
[types.default.SET_AGENT_UPDATING_STATUS, true],
|
||||
[types.default.SET_AGENT_UPDATING_STATUS, false],
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#delete', () => {
|
||||
it('sends correct actions if API is success', async () => {
|
||||
axios.delete.mockResolvedValue({ data: agentList[0] });
|
||||
await actions.delete({ commit }, agentList[0].id);
|
||||
expect(commit.mock.calls).toEqual([
|
||||
[types.default.SET_AGENT_DELETING_STATUS, true],
|
||||
[types.default.DELETE_AGENT, agentList[0].id],
|
||||
[types.default.SET_AGENT_DELETING_STATUS, false],
|
||||
]);
|
||||
});
|
||||
it('sends correct actions if API is error', async () => {
|
||||
axios.delete.mockRejectedValue({ message: 'Incorrect header' });
|
||||
await expect(actions.delete({ commit }, agentList[0].id)).rejects.toThrow(
|
||||
Error
|
||||
);
|
||||
expect(commit.mock.calls).toEqual([
|
||||
[types.default.SET_AGENT_DELETING_STATUS, true],
|
||||
[types.default.SET_AGENT_DELETING_STATUS, false],
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,28 @@
|
||||
export default [
|
||||
{
|
||||
id: 1,
|
||||
provider: 'email',
|
||||
uid: 'agent1@chatwoot.com',
|
||||
name: 'Agent1',
|
||||
email: 'agent1@chatwoot.com',
|
||||
account_id: 1,
|
||||
created_at: '2019-11-18T02:21:06.225Z',
|
||||
updated_at: '2019-12-20T07:43:35.794Z',
|
||||
pubsub_token: 'random-1',
|
||||
role: 'agent',
|
||||
confirmed: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
provider: 'email',
|
||||
uid: 'agent2@chatwoot.com',
|
||||
name: 'Agent2',
|
||||
email: 'agent2@chatwoot.com',
|
||||
account_id: 1,
|
||||
created_at: '2019-11-18T02:21:06.225Z',
|
||||
updated_at: '2019-12-20T07:43:35.794Z',
|
||||
pubsub_token: 'random-2',
|
||||
role: 'agent',
|
||||
confirmed: true,
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,80 @@
|
||||
import { getters } from '../../agents';
|
||||
|
||||
describe('#getters', () => {
|
||||
it('getAgents', () => {
|
||||
const state = {
|
||||
records: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Agent 1',
|
||||
email: 'agent1@chatwoot.com',
|
||||
confirmed: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Agent 2',
|
||||
email: 'agent2@chatwoot.com',
|
||||
confirmed: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
expect(getters.getAgents(state)).toEqual([
|
||||
{
|
||||
id: 1,
|
||||
name: 'Agent 1',
|
||||
email: 'agent1@chatwoot.com',
|
||||
confirmed: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Agent 2',
|
||||
email: 'agent2@chatwoot.com',
|
||||
confirmed: false,
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
it('getVerifiedAgents', () => {
|
||||
const state = {
|
||||
records: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Agent 1',
|
||||
email: 'agent1@chatwoot.com',
|
||||
confirmed: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Agent 2',
|
||||
email: 'agent2@chatwoot.com',
|
||||
confirmed: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
expect(getters.getVerifiedAgents(state)).toEqual([
|
||||
{
|
||||
id: 1,
|
||||
name: 'Agent 1',
|
||||
email: 'agent1@chatwoot.com',
|
||||
confirmed: true,
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
it('getUIFlags', () => {
|
||||
const state = {
|
||||
uiFlags: {
|
||||
isFetching: true,
|
||||
isCreating: false,
|
||||
isUpdating: false,
|
||||
isDeleting: false,
|
||||
},
|
||||
};
|
||||
expect(getters.getUIFlags(state)).toEqual({
|
||||
isFetching: true,
|
||||
isCreating: false,
|
||||
isUpdating: false,
|
||||
isDeleting: false,
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,63 @@
|
||||
import * as types from '../../../mutation-types';
|
||||
import { mutations } from '../../agents';
|
||||
|
||||
describe('#mutations', () => {
|
||||
describe('#SET_AGENTS', () => {
|
||||
it('set agent records', () => {
|
||||
const state = { records: [] };
|
||||
mutations[types.default.SET_AGENTS](state, [
|
||||
{ id: 1, name: 'Agent1', email: 'agent1@chatwoot.com' },
|
||||
]);
|
||||
expect(state.records).toEqual([
|
||||
{
|
||||
id: 1,
|
||||
name: 'Agent1',
|
||||
email: 'agent1@chatwoot.com',
|
||||
},
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#ADD_AGENT', () => {
|
||||
it('push newly created agent data to the store', () => {
|
||||
const state = {
|
||||
records: [{ id: 1, name: 'Agent1', email: 'agent1@chatwoot.com' }],
|
||||
};
|
||||
mutations[types.default.ADD_AGENT](state, {
|
||||
id: 2,
|
||||
name: 'Agent2',
|
||||
email: 'agent2@chatwoot.com',
|
||||
});
|
||||
expect(state.records).toEqual([
|
||||
{ id: 1, name: 'Agent1', email: 'agent1@chatwoot.com' },
|
||||
{ id: 2, name: 'Agent2', email: 'agent2@chatwoot.com' },
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#EDIT_AGENT', () => {
|
||||
it('sets allMessagesLoaded flag if payload is empty', () => {
|
||||
const state = {
|
||||
records: [{ id: 1, name: 'Agent1', email: 'agent1@chatwoot.com' }],
|
||||
};
|
||||
mutations[types.default.EDIT_AGENT](state, {
|
||||
id: 1,
|
||||
name: 'Agent2',
|
||||
email: 'agent2@chatwoot.com',
|
||||
});
|
||||
expect(state.records).toEqual([
|
||||
{ id: 1, name: 'Agent2', email: 'agent2@chatwoot.com' },
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#DELETE_AGENT', () => {
|
||||
it('sets allMessagesLoaded flag if payload is empty', () => {
|
||||
const state = {
|
||||
records: [{ id: 1, name: 'Agent1', email: 'agent1@chatwoot.com' }],
|
||||
};
|
||||
mutations[types.default.DELETE_AGENT](state, 1);
|
||||
expect(state.records).toEqual([]);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user