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:
Muhsin Keloth
2024-02-01 12:10:58 +05:30
committed by GitHub
parent b9c62b3fed
commit b7a7e5a0d3
27 changed files with 541 additions and 210 deletions

View File

@@ -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);
},
};

View File

@@ -14,6 +14,7 @@ const state = {
isFetchingItem: false,
isUpdating: false,
isUpdatingUnreadCount: false,
isAllNotificationsLoaded: false,
},
};

View File

@@ -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);
},
};

View File

@@ -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]]);
});
});
});

View File

@@ -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 });
});
});
});