feat: Portals store integration (#5185)

This commit is contained in:
Muhsin Keloth
2022-08-08 15:47:32 +05:30
committed by GitHub
parent 052422ed03
commit 20f3568583
30 changed files with 982 additions and 413 deletions

View File

@@ -3,13 +3,22 @@ import { throwErrorMessage } from 'dashboard/store/utils/api';
import { types } from './mutations';
const portalAPIs = new PortalAPI();
export const actions = {
index: async ({ commit }) => {
index: async ({ commit, state, dispatch }) => {
try {
commit(types.SET_UI_FLAG, { isFetching: true });
const { data } = await portalAPIs.get();
const portalIds = data.map(portal => portal.id);
commit(types.ADD_MANY_PORTALS_ENTRY, data);
const {
data: { payload, meta },
} = await portalAPIs.get();
commit(types.CLEAR_PORTALS);
const portalIds = payload.map(portal => portal.id);
commit(types.ADD_MANY_PORTALS_ENTRY, payload);
commit(types.ADD_MANY_PORTALS_IDS, portalIds);
const { selectedPortalId } = state;
// Check if selected portal is still in the portals list
if (!portalIds.includes(selectedPortalId)) {
dispatch('setPortalId', portalIds[0]);
}
commit(types.SET_PORTALS_META, meta);
} catch (error) {
throwErrorMessage(error);
} finally {
@@ -68,4 +77,8 @@ export const actions = {
});
}
},
setPortalId: async ({ commit }, portalId) => {
commit(types.SET_SELECTED_PORTAL_ID, portalId);
},
};

View File

@@ -16,11 +16,18 @@ export const getters = {
},
allPortals: (...getterArguments) => {
const [state, _getters] = getterArguments;
const portals = state.portals.allIds.map(id => {
return _getters.portalById(id);
});
return portals;
},
count: state => state.portals.allIds.length || 0,
getMeta: state => {
return state.meta;
},
getSelectedPortal: (...getterArguments) => {
const [state, _getters] = getterArguments;
const { selectedPortalId } = state.portals;
return _getters.portalById(selectedPortalId);
},
};

View File

@@ -9,6 +9,11 @@ export const defaultPortalFlags = {
};
const state = {
meta: {
count: 0,
currentPage: 1,
},
portals: {
byId: {},
allIds: [],
@@ -20,6 +25,7 @@ const state = {
meta: {
byId: {},
},
selectedPortalId: null,
},
uiFlags: {
allFetched: false,

View File

@@ -4,9 +4,12 @@ import { defaultPortalFlags } from './index';
export const types = {
SET_UI_FLAG: 'setUIFlag',
ADD_PORTAL_ENTRY: 'addPortalEntry',
SET_PORTALS_META: 'setPortalsMeta',
ADD_MANY_PORTALS_ENTRY: 'addManyPortalsEntry',
ADD_PORTAL_ID: 'addPortalId',
CLEAR_PORTALS: 'clearPortals',
ADD_MANY_PORTALS_IDS: 'addManyPortalsIds',
SET_SELECTED_PORTAL_ID: 'setSelectedPortalId',
UPDATE_PORTAL_ENTRY: 'updatePortalEntry',
REMOVE_PORTAL_ENTRY: 'removePortalEntry',
REMOVE_PORTAL_ID: 'removePortalId',
@@ -32,9 +35,23 @@ export const mutations = {
portals.forEach(portal => {
allPortals[portal.id] = portal;
});
Vue.set($state.portals, 'byId', {
allPortals,
});
Vue.set($state.portals, 'byId', allPortals);
},
[types.CLEAR_PORTALS]: $state => {
Vue.set($state.portals, 'byId', {});
Vue.set($state.portals, 'allIds', []);
Vue.set($state.portals, 'uiFlags', {});
},
[types.SET_PORTALS_META]: ($state, data) => {
const { portals_count: count, current_page: currentPage } = data;
Vue.set($state.meta, 'count', count);
Vue.set($state.meta, 'currentPage', currentPage);
},
[types.SET_SELECTED_PORTAL_ID]: ($state, portalId) => {
Vue.set($state.portals, 'selectedPortalId', portalId);
},
[types.ADD_PORTAL_ID]($state, portalId) {

View File

@@ -4,6 +4,7 @@ import { types } from '../mutations';
import { apiResponse } from './fixtures';
const commit = jest.fn();
const dispatch = jest.fn();
global.axios = axios;
jest.mock('axios');
@@ -11,11 +12,20 @@ describe('#actions', () => {
describe('#index', () => {
it('sends correct actions if API is success', async () => {
axios.get.mockResolvedValue({ data: apiResponse });
await actions.index({ commit });
await actions.index({
commit,
dispatch,
state: {
selectedPortalId: 4,
},
});
expect(dispatch.mock.calls).toMatchObject([['setPortalId', 1]]);
expect(commit.mock.calls).toEqual([
[types.SET_UI_FLAG, { isFetching: true }],
[types.ADD_MANY_PORTALS_ENTRY, apiResponse],
[types.CLEAR_PORTALS],
[types.ADD_MANY_PORTALS_ENTRY, apiResponse.payload],
[types.ADD_MANY_PORTALS_IDS, [1, 2]],
[types.SET_PORTALS_META, { current_page: 1, portals_count: 1 }],
[types.SET_UI_FLAG, { isFetching: false }],
]);
});
@@ -31,7 +41,7 @@ describe('#actions', () => {
describe('#create', () => {
it('sends correct actions if API is success', async () => {
axios.post.mockResolvedValue({ data: apiResponse[1] });
axios.post.mockResolvedValue({ data: apiResponse.payload[1] });
await actions.create(
{ commit },
{
@@ -42,7 +52,7 @@ describe('#actions', () => {
);
expect(commit.mock.calls).toEqual([
[types.SET_UI_FLAG, { isCreating: true }],
[types.ADD_PORTAL_ENTRY, apiResponse[1]],
[types.ADD_PORTAL_ENTRY, apiResponse.payload[1]],
[types.ADD_PORTAL_ID, 2],
[types.SET_UI_FLAG, { isCreating: false }],
]);
@@ -59,14 +69,14 @@ describe('#actions', () => {
describe('#update', () => {
it('sends correct actions if API is success', async () => {
axios.patch.mockResolvedValue({ data: apiResponse[1] });
await actions.update({ commit }, apiResponse[1]);
axios.patch.mockResolvedValue({ data: apiResponse.payload[1] });
await actions.update({ commit }, apiResponse.payload[1]);
expect(commit.mock.calls).toEqual([
[
types.SET_HELP_PORTAL_UI_FLAG,
{ uiFlags: { isUpdating: true }, portalId: 2 },
],
[types.UPDATE_PORTAL_ENTRY, apiResponse[1]],
[types.UPDATE_PORTAL_ENTRY, apiResponse.payload[1]],
[
types.SET_HELP_PORTAL_UI_FLAG,
{ uiFlags: { isUpdating: false }, portalId: 2 },
@@ -75,9 +85,9 @@ describe('#actions', () => {
});
it('sends correct actions if API is error', async () => {
axios.patch.mockRejectedValue({ message: 'Incorrect header' });
await expect(actions.update({ commit }, apiResponse[1])).rejects.toThrow(
Error
);
await expect(
actions.update({ commit }, apiResponse.payload[1])
).rejects.toThrow(Error);
expect(commit.mock.calls).toEqual([
[
types.SET_HELP_PORTAL_UI_FLAG,
@@ -123,4 +133,11 @@ describe('#actions', () => {
]);
});
});
describe('#setPortalId', () => {
it('sends correct actions', async () => {
axios.delete.mockResolvedValue({});
await actions.setPortalId({ commit }, 1);
expect(commit.mock.calls).toEqual([[types.SET_SELECTED_PORTAL_ID, 1]]);
});
});
});

View File

@@ -1,4 +1,8 @@
export default {
meta: {
count: 0,
currentPage: 1,
},
portals: {
byId: {
1: {
@@ -36,6 +40,7 @@ export default {
1: { isFetching: false, isUpdating: true, isDeleting: false },
},
},
selectedPortalId: 1,
},
uiFlags: {
allFetched: false,
@@ -43,33 +48,39 @@ export default {
},
};
export const apiResponse = [
{
id: 1,
color: 'red',
custom_domain: 'domain_for_help',
header_text: 'Domain Header',
homepage_link: 'help-center',
name: 'help name',
page_title: 'page title',
slug: 'domain',
archived: false,
config: {
allowed_locales: ['en'],
export const apiResponse = {
payload: [
{
id: 1,
color: 'red',
custom_domain: 'domain_for_help',
header_text: 'Domain Header',
homepage_link: 'help-center',
name: 'help name',
page_title: 'page title',
slug: 'domain',
archived: false,
config: {
allowed_locales: ['en'],
},
},
},
{
id: 2,
color: 'green',
custom_domain: 'campaign_for_help',
header_text: 'Campaign Header',
homepage_link: 'help-center',
name: 'help name',
page_title: 'campaign title',
slug: 'campaign',
archived: false,
config: {
allowed_locales: ['en'],
{
id: 2,
color: 'green',
custom_domain: 'campaign_for_help',
header_text: 'Campaign Header',
homepage_link: 'help-center',
name: 'help name',
page_title: 'campaign title',
slug: 'campaign',
archived: false,
config: {
allowed_locales: ['en'],
},
},
],
meta: {
current_page: 1,
portals_count: 1,
},
];
};

View File

@@ -42,4 +42,9 @@ describe('#getters', () => {
const state = portal;
expect(getters.count(state)).toEqual(2);
});
it('getMeta', () => {
const state = portal;
expect(getters.getMeta(state)).toEqual({ count: 0, currentPage: 1 });
});
});

View File

@@ -92,4 +92,33 @@ describe('#mutations', () => {
});
});
});
describe('#CLEAR_PORTALS', () => {
it('clears portals', () => {
mutations[types.CLEAR_PORTALS](state);
expect(state.portals.allIds).toEqual([]);
expect(state.portals.byId).toEqual({});
expect(state.portals.uiFlags).toEqual({});
});
});
describe('#SET_PORTALS_META', () => {
it('add meta to state', () => {
mutations[types.SET_PORTALS_META](state, {
portals_count: 10,
current_page: 1,
});
expect(state.meta).toEqual({
count: 10,
currentPage: 1,
});
});
});
describe('#SET_SELECTED_PORTAL_ID', () => {
it('set selected portal id', () => {
mutations[types.SET_SELECTED_PORTAL_ID](state, 4);
expect(state.portals.selectedPortalId).toEqual(4);
});
});
});