Feature: Add UI to update email notification preferences (#579)

This commit is contained in:
Pranav Raj S
2020-03-01 17:47:08 +05:30
committed by GitHub
parent 629c73d3ce
commit d6237dfc59
11 changed files with 369 additions and 3 deletions

View File

@@ -6,8 +6,8 @@ import auth from './modules/auth';
import billing from './modules/billing';
import cannedResponse from './modules/cannedResponse';
import Channel from './modules/channels';
import contacts from './modules/contacts';
import contactConversations from './modules/contactConversations';
import contacts from './modules/contacts';
import conversationLabels from './modules/conversationLabels';
import conversationMetadata from './modules/conversationMetadata';
import conversationPage from './modules/conversationPage';
@@ -15,6 +15,7 @@ import conversations from './modules/conversations';
import inboxes from './modules/inboxes';
import inboxMembers from './modules/inboxMembers';
import reports from './modules/reports';
import userNotificationSettings from './modules/userNotificationSettings';
import webhooks from './modules/webhooks';
Vue.use(Vuex);
@@ -34,6 +35,7 @@ export default new Vuex.Store({
inboxes,
inboxMembers,
reports,
userNotificationSettings,
webhooks,
},
});

View File

@@ -0,0 +1,69 @@
import axios from 'axios';
import { actions } from '../../userNotificationSettings';
import * as types from '../../../mutation-types';
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: { selected_email_flags: ['conversation_creation'] },
});
await actions.get({ commit });
expect(commit.mock.calls).toEqual([
[types.default.SET_USER_NOTIFICATION_UI_FLAG, { isFetching: true }],
[
types.default.SET_USER_NOTIFICATION,
{ selected_email_flags: ['conversation_creation'] },
],
[types.default.SET_USER_NOTIFICATION_UI_FLAG, { isFetching: false }],
]);
});
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_USER_NOTIFICATION_UI_FLAG, { isFetching: true }],
[types.default.SET_USER_NOTIFICATION_UI_FLAG, { isFetching: false }],
]);
});
});
describe('#update', () => {
it('sends correct actions if API is success', async () => {
axios.patch.mockResolvedValue({
data: { selected_email_flags: ['conversation_creation'] },
});
await actions.update(
{ commit },
{ selected_email_flags: ['conversation_creation'] }
);
expect(commit.mock.calls).toEqual([
[types.default.SET_USER_NOTIFICATION_UI_FLAG, { isUpdating: true }],
[
types.default.SET_USER_NOTIFICATION,
{ selected_email_flags: ['conversation_creation'] },
],
[types.default.SET_USER_NOTIFICATION_UI_FLAG, { isUpdating: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.patch.mockRejectedValue({ message: 'Incorrect header' });
await expect(
actions.update(
{ commit },
{ selected_email_flags: ['conversation_creation'] }
)
).rejects.toEqual({
message: 'Incorrect header',
});
expect(commit.mock.calls).toEqual([
[types.default.SET_USER_NOTIFICATION_UI_FLAG, { isUpdating: true }],
[types.default.SET_USER_NOTIFICATION_UI_FLAG, { isUpdating: false }],
]);
});
});
});

View File

@@ -0,0 +1,33 @@
import { getters } from '../../userNotificationSettings';
describe('#getters', () => {
it('getSelectedEmailFlags', () => {
const state = {
record: {
selected_email_flags: ['conversation_creation'],
},
};
expect(getters.getSelectedEmailFlags(state)).toEqual([
'conversation_creation',
]);
});
it('getUIFlags', () => {
const state = {
uiFlags: {
fetchingList: false,
fetchingItem: false,
creatingItem: false,
updatingItem: false,
deletingItem: false,
},
};
expect(getters.getUIFlags(state)).toEqual({
fetchingList: false,
fetchingItem: false,
creatingItem: false,
updatingItem: false,
deletingItem: false,
});
});
});

View File

@@ -0,0 +1,30 @@
import * as types from '../../../mutation-types';
import { mutations } from '../../userNotificationSettings';
describe('#mutations', () => {
describe('#SET_USER_NOTIFICATION', () => {
it('set user notification record', () => {
const state = { record: {} };
mutations[types.default.SET_USER_NOTIFICATION](state, {
selected_email_flags: ['conversation_creation'],
});
expect(state.record).toEqual({
selected_email_flags: ['conversation_creation'],
});
});
});
describe('#SET_USER_NOTIFICATION_UI_FLAG', () => {
it('set UIFlag notification', () => {
const state = {
uiFlags: { isFetching: false },
};
mutations[types.default.SET_USER_NOTIFICATION_UI_FLAG](state, {
isFetching: true,
});
expect(state.uiFlags).toEqual({
isFetching: true,
});
});
});
});

View File

@@ -0,0 +1,77 @@
import Vue from 'vue';
import * as types from '../mutation-types';
import UserNotificationSettings from '../../api/userNotificationSettings';
const state = {
record: {},
uiFlags: {
isFetching: false,
isUpdating: false,
},
};
export const getters = {
getUIFlags($state) {
return $state.uiFlags;
},
getSelectedEmailFlags: $state => {
return $state.record.selected_email_flags;
},
};
export const actions = {
get: async ({ commit }) => {
commit(types.default.SET_USER_NOTIFICATION_UI_FLAG, { isFetching: true });
try {
const response = await UserNotificationSettings.get();
commit(types.default.SET_USER_NOTIFICATION, response.data);
commit(types.default.SET_USER_NOTIFICATION_UI_FLAG, {
isFetching: false,
});
} catch (error) {
commit(types.default.SET_USER_NOTIFICATION_UI_FLAG, {
isFetching: false,
});
}
},
update: async ({ commit }, params) => {
commit(types.default.SET_USER_NOTIFICATION_UI_FLAG, { isUpdating: true });
try {
const response = await UserNotificationSettings.update({
notification_settings: {
selected_email_flags: params,
},
});
commit(types.default.SET_USER_NOTIFICATION, response.data);
commit(types.default.SET_USER_NOTIFICATION_UI_FLAG, {
isUpdating: false,
});
} catch (error) {
commit(types.default.SET_USER_NOTIFICATION_UI_FLAG, {
isUpdating: false,
});
throw error;
}
},
};
export const mutations = {
[types.default.SET_USER_NOTIFICATION_UI_FLAG]($state, data) {
$state.uiFlags = {
...$state.uiFlags,
...data,
};
},
[types.default.SET_USER_NOTIFICATION]: ($state, data) => {
Vue.set($state, 'record', data);
},
};
export default {
namespaced: true,
state,
getters,
actions,
mutations,
};

View File

@@ -92,4 +92,8 @@ export default {
SET_CURRENT_PAGE: 'SET_CURRENT_PAGE',
SET_CONVERSATION_END_REACHED: 'SET_CONVERSATION_END_REACHED',
CLEAR_CONVERSATION_PAGE: 'CLEAR_CONVERSATION_PAGE',
// Notification Settings
SET_USER_NOTIFICATION_UI_FLAG: 'SET_USER_NOTIFICATION_UI_FLAG',
SET_USER_NOTIFICATION: 'SET_USER_NOTIFICATION',
};