feat: Inbox list API integration (#8825)
* feat: Inbox view * feat: Bind real values * chore: code cleanup * feat: add observer * fix: Inbox icon * chore: more code cleanup * chore: Replace conversation id * chore: Minor fix * chore: Hide from side bar * chore: Fix eslint * chore: Minor fix * fix: dark mode color * chore: Minor fix * feat: Add description for each notification types * chore: remove commented code * Update InboxList.vue * Update InboxView.vue * chore: fix specs * fix: specs * Update InboxView.vue --------- Co-authored-by: iamsivin <iamsivin@gmail.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
@@ -18,6 +18,24 @@ export const actions = {
|
||||
commit(types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: false });
|
||||
}
|
||||
},
|
||||
index: async ({ commit }, { page = 1 } = {}) => {
|
||||
commit(types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: true });
|
||||
try {
|
||||
const {
|
||||
data: {
|
||||
data: { payload, meta },
|
||||
},
|
||||
} = await NotificationsAPI.get(page);
|
||||
commit(types.SET_NOTIFICATIONS, payload);
|
||||
commit(types.SET_NOTIFICATIONS_META, meta);
|
||||
commit(types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: false });
|
||||
if (payload.length < 15) {
|
||||
commit(types.SET_ALL_NOTIFICATIONS_LOADED);
|
||||
}
|
||||
} catch (error) {
|
||||
commit(types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: false });
|
||||
}
|
||||
},
|
||||
unReadCount: async ({ commit } = {}) => {
|
||||
commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdatingUnreadCount: true });
|
||||
try {
|
||||
@@ -59,4 +77,7 @@ export const actions = {
|
||||
deleteNotification({ commit }, data) {
|
||||
commit(types.DELETE_NOTIFICATION, data);
|
||||
},
|
||||
clear({ commit }) {
|
||||
commit(types.CLEAR_NOTIFICATIONS);
|
||||
},
|
||||
};
|
||||
|
||||
@@ -14,6 +14,7 @@ const state = {
|
||||
isFetchingItem: false,
|
||||
isUpdating: false,
|
||||
isUpdatingUnreadCount: false,
|
||||
isAllNotificationsLoaded: false,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -10,6 +10,7 @@ export const mutations = {
|
||||
},
|
||||
[types.CLEAR_NOTIFICATIONS]: $state => {
|
||||
Vue.set($state, 'records', {});
|
||||
Vue.set($state.uiFlags, 'isAllNotificationsLoaded', false);
|
||||
},
|
||||
[types.SET_NOTIFICATIONS_META]: ($state, data) => {
|
||||
const {
|
||||
@@ -61,4 +62,7 @@ export const mutations = {
|
||||
Vue.set($state.meta, 'unreadCount', unreadCount);
|
||||
Vue.set($state.meta, 'count', count);
|
||||
},
|
||||
[types.SET_ALL_NOTIFICATIONS_LOADED]: $state => {
|
||||
Vue.set($state.uiFlags, 'isAllNotificationsLoaded', true);
|
||||
},
|
||||
};
|
||||
|
||||
@@ -39,6 +39,38 @@ describe('#actions', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('#index', () => {
|
||||
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.index({ commit });
|
||||
expect(commit.mock.calls).toEqual([
|
||||
[types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: true }],
|
||||
[types.SET_NOTIFICATIONS, [{ id: 1 }]],
|
||||
[
|
||||
types.SET_NOTIFICATIONS_META,
|
||||
{ count: 3, current_page: 1, unread_count: 2 },
|
||||
],
|
||||
[types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: false }],
|
||||
[types.SET_ALL_NOTIFICATIONS_LOADED],
|
||||
]);
|
||||
});
|
||||
it('sends correct actions if API is error', async () => {
|
||||
axios.get.mockRejectedValue({ message: 'Incorrect header' });
|
||||
await actions.index({ 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 });
|
||||
@@ -107,4 +139,11 @@ describe('#actions', () => {
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('clear', () => {
|
||||
it('sends correct actions', async () => {
|
||||
await actions.clear({ commit });
|
||||
expect(commit.mock.calls).toEqual([[types.CLEAR_NOTIFICATIONS]]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -12,7 +12,10 @@ describe('#mutations', () => {
|
||||
|
||||
describe('#CLEAR_NOTIFICATIONS', () => {
|
||||
it('clear notifications', () => {
|
||||
const state = { records: { 1: { id: 1 } } };
|
||||
const state = {
|
||||
records: { 1: { id: 1 } },
|
||||
uiFlags: { isAllNotificationsLoaded: true },
|
||||
};
|
||||
mutations[types.CLEAR_NOTIFICATIONS](state);
|
||||
expect(state.records).toEqual({});
|
||||
});
|
||||
@@ -141,4 +144,12 @@ describe('#mutations', () => {
|
||||
expect(state.meta.count).toEqual(232);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#SET_ALL_NOTIFICATIONS_LOADED', () => {
|
||||
it('set all notifications loaded', () => {
|
||||
const state = { uiFlags: { isAllNotificationsLoaded: false } };
|
||||
mutations[types.SET_ALL_NOTIFICATIONS_LOADED](state);
|
||||
expect(state.uiFlags).toEqual({ isAllNotificationsLoaded: true });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user