Feat: Show notes panel on crm page (#2320)

* Feat: Show notes panel on CRM page

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This commit is contained in:
Nithin David Thomas
2021-06-14 09:49:17 +05:30
committed by GitHub
parent 75d05e55ae
commit fe2af370e0
17 changed files with 352 additions and 19 deletions

View File

@@ -0,0 +1,107 @@
import * as types from '../mutation-types';
import Vue from 'vue';
import ContactNotesAPI from '../../api/contactNotes';
export const state = {
records: {},
uiFlags: {
isFetching: false,
isCreating: false,
isDeleting: false,
},
};
export const getters = {
getAllNotesByContact: _state => contactId => {
return _state.records[contactId] || [];
},
getUIFlags(_state) {
return _state.uiFlags;
},
};
export const actions = {
async get({ commit }, { contactId }) {
commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
isFetching: true,
});
try {
const { data } = await ContactNotesAPI.get(contactId);
commit(types.default.SET_CONTACT_NOTES, { contactId, data });
} catch (error) {
throw new Error(error);
} finally {
commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
isFetching: false,
});
}
},
async create({ commit }, { contactId, content }) {
commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
isCreating: true,
});
try {
const { data } = await ContactNotesAPI.create({
content,
contactId,
});
commit(types.default.ADD_CONTACT_NOTE, {
contactId,
data,
});
} catch (error) {
throw new Error(error);
} finally {
commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
isCreating: false,
});
}
},
async delete({ commit }, { noteId, contactId }) {
commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
isDeleting: true,
});
try {
await ContactNotesAPI.delete(contactId, noteId);
commit(types.default.DELETE_CONTACT_NOTE, { contactId, noteId });
} catch (error) {
throw new Error(error);
} finally {
commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
isDeleting: false,
});
}
},
};
export const mutations = {
[types.default.SET_CONTACT_NOTES_UI_FLAG](_state, data) {
_state.uiFlags = {
..._state.uiFlags,
...data,
};
},
[types.default.SET_CONTACT_NOTES]($state, { data, contactId }) {
Vue.set($state.records, contactId, data);
},
[types.default.ADD_CONTACT_NOTE]($state, { data, contactId }) {
const contactNotes = $state.records[contactId] || [];
$state.records[contactId] = [...contactNotes, data];
},
[types.default.DELETE_CONTACT_NOTE]($state, { noteId, contactId }) {
const contactNotes = $state.records[contactId];
const withoutDeletedNote = contactNotes.filter(note => note.id !== noteId);
$state.records[contactId] = [...withoutDeletedNote];
},
};
export default {
namespaced: true,
state,
getters,
actions,
mutations,
};

View File

@@ -0,0 +1,78 @@
import axios from 'axios';
import { actions } from '../../contactNotes';
import * as types from '../../../mutation-types';
import notesData 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: notesData });
await actions.get({ commit }, { contactId: 23 });
expect(commit.mock.calls).toEqual([
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isFetching: true }],
[types.default.SET_CONTACT_NOTES, { contactId: 23, data: notesData }],
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isFetching: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.get.mockRejectedValue({ message: 'Incorrect header' });
await expect(actions.get({ commit }, { contactId: 23 })).rejects.toThrow(
Error
);
expect(commit.mock.calls).toEqual([
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isFetching: true }],
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isFetching: false }],
]);
});
});
describe('#create', () => {
it('sends correct actions if API is success', async () => {
axios.post.mockResolvedValue({ data: { id: 2, content: 'hi' } });
await actions.create({ commit }, { contactId: 1, content: 'hi' });
expect(commit.mock.calls).toEqual([
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isCreating: true }],
[
types.default.ADD_CONTACT_NOTE,
{ contactId: 1, data: { id: 2, content: 'hi' } },
],
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isCreating: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.post.mockRejectedValue({ message: 'Incorrect header' });
await expect(
actions.create({ commit }, { contactId: 1, content: 'hi' })
).rejects.toThrow(Error);
expect(commit.mock.calls).toEqual([
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isCreating: true }],
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isCreating: false }],
]);
});
});
describe('#delete', () => {
it('sends correct actions if API is success', async () => {
axios.delete.mockResolvedValue({ data: notesData[0] });
await actions.delete({ commit }, { contactId: 1, noteId: 2 });
expect(commit.mock.calls).toEqual([
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isDeleting: true }],
[types.default.DELETE_CONTACT_NOTE, { contactId: 1, noteId: 2 }],
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isDeleting: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.delete.mockRejectedValue({ message: 'Incorrect header' });
await expect(
actions.delete({ commit }, { contactId: 1, noteId: 2 })
).rejects.toThrow(Error);
expect(commit.mock.calls).toEqual([
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isDeleting: true }],
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isDeleting: false }],
]);
});
});
});

View File

@@ -0,0 +1,21 @@
export default [
{
id: 12345,
content: 'It is a long established fact that a reader will be distracted.',
user: {
name: 'John Doe',
thumbnail: 'https://randomuser.me/api/portraits/men/69.jpg',
},
created_at: 1618046084,
},
{
id: 12346,
content:
'It is simply dummy text of the printing and typesetting industry.',
user: {
name: 'Pearl Cruz',
thumbnail: 'https://randomuser.me/api/portraits/women/29.jpg',
},
created_at: 1616046076,
},
];

View File

@@ -0,0 +1,24 @@
import { getters } from '../../contactNotes';
import notesData from './fixtures';
describe('#getters', () => {
it('getAllNotesByContact', () => {
const state = { records: { 1: notesData } };
expect(getters.getAllNotesByContact(state)(1)).toEqual(notesData);
});
it('getUIFlags', () => {
const state = {
uiFlags: {
isFetching: true,
isCreating: false,
isDeleting: false,
},
};
expect(getters.getUIFlags(state)).toEqual({
isFetching: true,
isCreating: false,
isDeleting: false,
});
});
});

View File

@@ -0,0 +1,37 @@
import types from '../../../mutation-types';
import { mutations } from '../../contactNotes';
import allNotes from './fixtures';
describe('#mutations', () => {
describe('#SET_CONTACT_NOTES', () => {
it('set allNotes records', () => {
const state = { records: {} };
mutations[types.SET_CONTACT_NOTES](state, {
data: allNotes,
contactId: 1,
});
expect(state.records).toEqual({ 1: allNotes });
});
});
describe('#ADD_CONTACT_NOTE', () => {
it('push newly created note to the store', () => {
const state = { records: { 1: [allNotes[0]] } };
mutations[types.ADD_CONTACT_NOTE](state, {
data: allNotes[1],
contactId: 1,
});
expect(state.records[1]).toEqual([allNotes[0], allNotes[1]]);
});
});
describe('#DELETE_CONTACT_NOTE', () => {
it('Delete existing note from records', () => {
const state = { records: { 1: [{ id: 2 }] } };
mutations[types.DELETE_CONTACT_NOTE](state, {
noteId: 2,
contactId: 1,
});
expect(state.records[1]).toEqual([]);
});
});
});