feat: Portals store integration (#5185)
This commit is contained in:
@@ -1,18 +1,22 @@
|
||||
import PortalAPI from 'dashboard/api/helpCenter/portals';
|
||||
import articlesAPI from 'dashboard/api/helpCenter/articles';
|
||||
import { throwErrorMessage } from 'dashboard/store/utils/api';
|
||||
const portalAPIs = new PortalAPI();
|
||||
|
||||
import types from '../../mutation-types';
|
||||
export const actions = {
|
||||
index: async ({ commit }, { pageNumber, portalSlug, locale }) => {
|
||||
index: async (
|
||||
{ commit },
|
||||
{ pageNumber, portalSlug, locale, status, author_id }
|
||||
) => {
|
||||
try {
|
||||
commit(types.SET_UI_FLAG, { isFetching: true });
|
||||
const {
|
||||
data: { payload, meta },
|
||||
} = await portalAPIs.getArticles({
|
||||
} = await articlesAPI.getArticles({
|
||||
pageNumber,
|
||||
portalSlug,
|
||||
locale,
|
||||
status,
|
||||
author_id,
|
||||
});
|
||||
const articleIds = payload.map(article => article.id);
|
||||
commit(types.CLEAR_ARTICLES);
|
||||
|
||||
@@ -8,7 +8,7 @@ export const defaultHelpCenterFlags = {
|
||||
isDeleting: false,
|
||||
};
|
||||
const state = {
|
||||
categoriess: {
|
||||
categories: {
|
||||
byId: {},
|
||||
byLocale: {},
|
||||
allIds: [],
|
||||
|
||||
@@ -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);
|
||||
},
|
||||
};
|
||||
|
||||
@@ -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);
|
||||
},
|
||||
};
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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]]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
@@ -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 });
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user