akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: notification center (#1612)

Browse Source 
Co-authored-by: Pranav <pranav@chatwoot.com>
This commit is contained in:
Muhsin Keloth
2021-01-25 00:59:44 +05:30
committed by GitHub
co-authored by Pranav
parent e75916d562
commit c087e75808
23 changed files with 811 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/store/modules/notifications/actions.js
+55
View File
@@ -0,0 +1,55 @@
import types from '../../mutation-types';
import NotificationsAPI from '../../../api/notifications';
export const actions = {
get: async ({ commit }, { page = 1 } = {}) => {
commit(types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: true });
try {
const {
data: {
data: { payload, meta },
},
} = await NotificationsAPI.get(page);
commit(types.CLEAR_NOTIFICATIONS);
commit(types.SET_NOTIFICATIONS, payload);
commit(types.SET_NOTIFICATIONS_META, meta);
commit(types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: false });
} catch (error) {
commit(types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: false });
}
},
unReadCount: async ({ commit } = {}) => {
commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdatingUnreadCount: true });
try {
const { data } = await NotificationsAPI.getUnreadCount();
commit(types.SET_NOTIFICATIONS_UNREAD_COUNT, data);
commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdatingUnreadCount: false });
} catch (error) {
commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdatingUnreadCount: false });
}
},
read: async (
{ commit },
{ primaryActorType, primaryActorId, unreadCount }
) => {
try {
await NotificationsAPI.read(primaryActorType, primaryActorId);
commit(types.SET_NOTIFICATIONS_UNREAD_COUNT, unreadCount - 1);
commit(types.UPDATE_NOTIFICATION, primaryActorId);
} catch (error) {
throw new Error(error);
}
},
readAll: async ({ commit }) => {
commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: true });
try {
await NotificationsAPI.readAll();
commit(types.SET_NOTIFICATIONS_UNREAD_COUNT, 0);
commit(types.UPDATE_ALL_NOTIFICATIONS);
commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false });
} catch (error) {
commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false });
throw new Error(error);
}
},
};
app/javascript/dashboard/store/modules/notifications/getters.js
+15
View File
@@ -0,0 +1,15 @@
export const getters = {
getNotifications($state) {
return Object.values($state.records).sort((n1, n2) => n2.id - n1.id);
},
getUIFlags($state) {
return $state.uiFlags;
},
getNotification: $state => id => {
const notification = $state.records[id];
return notification || {};
},
getMeta: $state => {
return $state.meta;
},
};
app/javascript/dashboard/store/modules/notifications/index.js
+26
View File
@@ -0,0 +1,26 @@
import { getters } from './getters';
import { actions } from './actions';
import { mutations } from './mutations';
const state = {
meta: {
count: 0,
currentPage: 1,
unReadCount: 0,
},
records: {},
uiFlags: {
isFetching: false,
isFetchingItem: false,
isUpdating: false,
isUpdatingUnreadCount: false,
},
};
export default {
namespaced: true,
state,
getters,
actions,
mutations,
};
app/javascript/dashboard/store/modules/notifications/mutations.js
+48
View File
@@ -0,0 +1,48 @@
import Vue from 'vue';
import types from '../../mutation-types';
export const mutations = {
[types.SET_NOTIFICATIONS_UI_FLAG]($state, data) {
$state.uiFlags = {
...$state.uiFlags,
...data,
};
},
[types.CLEAR_NOTIFICATIONS]: $state => {
Vue.set($state, 'records', {});
},
[types.SET_NOTIFICATIONS_META]: ($state, data) => {
const {
count,
current_page: currentPage,
unread_count: unreadCount,
} = data;
Vue.set($state.meta, 'count', count);
Vue.set($state.meta, 'currentPage', currentPage);
Vue.set($state.meta, 'unreadCount', unreadCount);
},
[types.SET_NOTIFICATIONS_UNREAD_COUNT]: ($state, count) => {
Vue.set($state.meta, 'unreadCount', count);
},
[types.SET_NOTIFICATIONS]: ($state, data) => {
data.forEach(notification => {
Vue.set($state.records, notification.id, {
...($state.records[notification.id] || {}),
...notification,
});
});
},
[types.UPDATE_NOTIFICATION]: ($state, primaryActorId) => {
Object.values($state.records).forEach(item => {
if (item.primary_actor_id === primaryActorId) {
Vue.set($state.records[item.id], 'read_at', true);
}
});
},
[types.UPDATE_ALL_NOTIFICATIONS]: $state => {
Object.values($state.records).forEach(item => {
Vue.set($state.records[item.id], 'read_at', true);
});
},
};
app/javascript/dashboard/store/modules/specs/notifications/actions.spec.js
+93
View File
@@ -0,0 +1,93 @@
import axios from 'axios';
import { actions } from '../../notifications/actions';
import 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: {
data: {
payload: [{ id: 1 }],
meta: { count: 3, current_page: 1, unread_count: 2 },
},
},
});
await actions.get({ commit });
expect(commit.mock.calls).toEqual([
[types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: true }],
[types.CLEAR_NOTIFICATIONS],
[types.SET_NOTIFICATIONS, [{ id: 1 }]],
[
types.SET_NOTIFICATIONS_META,
{ count: 3, current_page: 1, unread_count: 2 },
],
[types.SET_NOTIFICATIONS_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.SET_NOTIFICATIONS_UI_FLAG, { isFetching: true }],
[types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: false }],
]);
});
});
describe('#unReadCount', () => {
it('sends correct actions if API is success', async () => {
axios.get.mockResolvedValue({ data: 1 });
await actions.unReadCount({ commit });
expect(commit.mock.calls).toEqual([
[types.SET_NOTIFICATIONS_UI_FLAG, { isUpdatingUnreadCount: true }],
[types.SET_NOTIFICATIONS_UNREAD_COUNT, 1],
[types.SET_NOTIFICATIONS_UI_FLAG, { isUpdatingUnreadCount: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.get.mockRejectedValue({ message: 'Incorrect header' });
await actions.unReadCount({ commit });
expect(commit.mock.calls).toEqual([
[types.SET_NOTIFICATIONS_UI_FLAG, { isUpdatingUnreadCount: true }],
[types.SET_NOTIFICATIONS_UI_FLAG, { isUpdatingUnreadCount: false }],
]);
});
});
describe('#read', () => {
it('sends correct actions if API is success', async () => {
axios.post.mockResolvedValue({});
await actions.read({ commit }, { unreadCount: 2, primaryActorId: 1 });
expect(commit.mock.calls).toEqual([
[types.SET_NOTIFICATIONS_UNREAD_COUNT, 1],
[types.UPDATE_NOTIFICATION, 1],
]);
});
it('sends correct actions if API is error', async () => {
axios.post.mockRejectedValue({ message: 'Incorrect header' });
await expect(actions.read({ commit })).rejects.toThrow(Error);
});
});
describe('#readAll', () => {
it('sends correct actions if API is success', async () => {
axios.post.mockResolvedValue({ data: 1 });
await actions.readAll({ commit });
expect(commit.mock.calls).toEqual([
[types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: true }],
[types.SET_NOTIFICATIONS_UNREAD_COUNT, 0],
[types.UPDATE_ALL_NOTIFICATIONS],
[types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.post.mockRejectedValue({ message: 'Incorrect header' });
await expect(actions.readAll({ commit })).rejects.toThrow(Error);
});
});
});
app/javascript/dashboard/store/modules/specs/notifications/getters.spec.js
+46
View File
@@ -0,0 +1,46 @@
import { getters } from '../../notifications/getters';
describe('#getters', () => {
it('getNotifications', () => {
const state = {
records: {
1: { id: 1 },
2: { id: 2 },
3: { id: 3 },
},
};
expect(getters.getNotifications(state)).toEqual([
{ id: 3 },
{ id: 2 },
{ id: 1 },
]);
});
it('getUIFlags', () => {
const state = {
uiFlags: {
isFetching: true,
},
};
expect(getters.getUIFlags(state)).toEqual({
isFetching: true,
});
});
it('getNotification', () => {
const state = {
records: {
1: { id: 1 },
},
};
expect(getters.getNotification(state)(1)).toEqual({ id: 1 });
expect(getters.getNotification(state)(2)).toEqual({});
});
it('getMeta', () => {
const state = {
meta: { unreadCount: 1 },
};
expect(getters.getMeta(state)).toEqual({ unreadCount: 1 });
});
});
app/javascript/dashboard/store/modules/specs/notifications/mutations.spec.js
+90
View File
@@ -0,0 +1,90 @@
import types from '../../../mutation-types';
import { mutations } from '../../notifications/mutations';
describe('#mutations', () => {
describe('#SET_NOTIFICATIONS_UI_FLAG', () => {
it('set notification ui flag', () => {
const state = { uiFlags: { isFetching: true } };
mutations[types.SET_NOTIFICATIONS_UI_FLAG](state, { isFetching: false });
expect(state.uiFlags).toEqual({ isFetching: false });
});
});
describe('#CLEAR_NOTIFICATIONS', () => {
it('clear notifications', () => {
const state = { records: { 1: { id: 1 } } };
mutations[types.CLEAR_NOTIFICATIONS](state);
expect(state.records).toEqual({});
});
});
describe('#SET_NOTIFICATIONS_META', () => {
it('set notifications meta data', () => {
const state = { meta: {} };
mutations[types.SET_NOTIFICATIONS_META](state, {
count: 3,
current_page: 1,
unread_count: 2,
});
expect(state.meta).toEqual({
count: 3,
currentPage: 1,
unreadCount: 2,
});
});
});
describe('#SET_NOTIFICATIONS_UNREAD_COUNT', () => {
it('set notifications unread count', () => {
const state = { meta: { unreadCount: 4 } };
mutations[types.SET_NOTIFICATIONS_UNREAD_COUNT](state, 3);
expect(state.meta).toEqual({ unreadCount: 3 });
});
});
describe('#SET_NOTIFICATIONS', () => {
it('set notifications ', () => {
const state = { records: {} };
mutations[types.SET_NOTIFICATIONS](state, [
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 },
]);
expect(state.records).toEqual({
1: { id: 1 },
2: { id: 2 },
3: { id: 3 },
4: { id: 4 },
});
});
});
describe('#UPDATE_NOTIFICATION', () => {
it('update notifications ', () => {
const state = {
records: {
1: { id: 1, primary_actor_id: 1 },
},
};
mutations[types.UPDATE_NOTIFICATION](state, 1);
expect(state.records).toEqual({
1: { id: 1, primary_actor_id: 1, read_at: true },
});
});
});
describe('#UPDATE_ALL_NOTIFICATIONS', () => {
it('update all notifications ', () => {
const state = {
records: {
1: { id: 1, primary_actor_id: 1 },
2: { id: 2, primary_actor_id: 2 },
},
};
mutations[types.UPDATE_ALL_NOTIFICATIONS](state);
expect(state.records).toEqual({
1: { id: 1, primary_actor_id: 1, read_at: true },
2: { id: 2, primary_actor_id: 2, read_at: true },
});
});
});
});