LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore: Moves portal slug as ID to query resources in vue store (#5359)

Browse Source
This commit is contained in:
Nithin David Thomas
2022-08-31 19:59:05 +05:30
committed by GitHub
parent d14beeb654
commit ebea5428bc
16 changed files with 121 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
app/javascript/dashboard/store/modules/helpCenterPortals/actions.js
View File

@@ -3,21 +3,17 @@ import { throwErrorMessage } from 'dashboard/store/utils/api';
import { types } from './mutations';
const portalAPIs = new PortalAPI();
export const actions = {
index: async ({ commit, state, dispatch }) => {
index: async ({ commit }) => {
try {
commit(types.SET_UI_FLAG, { isFetching: true });
const {
data: { payload, meta },
} = await portalAPIs.get();
commit(types.CLEAR_PORTALS);
const portalIds = payload.map(portal => portal.id);
const portalSlugs = payload.map(portal => portal.slug);
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.ADD_MANY_PORTALS_IDS, portalSlugs);
commit(types.SET_PORTALS_META, meta);
} catch (error) {
throwErrorMessage(error);
@@ -26,20 +22,13 @@ export const actions = {
}
},
create: async ({ commit, state, dispatch }, params) => {
create: async ({ commit }, params) => {
commit(types.SET_UI_FLAG, { isCreating: true });
try {
const { data } = await portalAPIs.create(params);
const { id: portalId } = data;
const { slug: portalSlug } = data;
commit(types.ADD_PORTAL_ENTRY, data);
commit(types.ADD_PORTAL_ID, portalId);
const {
portals: { selectedPortalId },
} = state;
// Check if there are any selected portal
if (!selectedPortalId) {
dispatch('setPortalId', portalId);
}
commit(types.ADD_PORTAL_ID, portalSlug);
} catch (error) {
throwErrorMessage(error);
} finally {
@@ -47,47 +36,46 @@ export const actions = {
}
},
update: async ({ commit }, params) => {
const portalId = params.id;
const portalSlug = params.slug;
update: async ({ commit }, { portalObj }) => {
const portalSlug = portalObj.slug;
commit(types.SET_HELP_PORTAL_UI_FLAG, {
uiFlags: { isUpdating: true },
portalId,
portalSlug,
});
try {
const { data } = await portalAPIs.updatePortal({ portalSlug, params });
const { data } = await portalAPIs.updatePortal({
portalSlug,
portalObj,
});
commit(types.UPDATE_PORTAL_ENTRY, data);
} catch (error) {
throwErrorMessage(error);
} finally {
commit(types.SET_HELP_PORTAL_UI_FLAG, {
uiFlags: { isUpdating: false },
portalId,
portalSlug,
});
}
},
delete: async ({ commit }, portalId) => {
delete: async ({ commit }, { portalSlug }) => {
commit(types.SET_HELP_PORTAL_UI_FLAG, {
uiFlags: { isDeleting: true },
portalId,
portalSlug,
});
try {
await portalAPIs.delete(portalId);
commit(types.REMOVE_PORTAL_ENTRY, portalId);
commit(types.REMOVE_PORTAL_ID, portalId);
await portalAPIs.delete(portalSlug);
commit(types.REMOVE_PORTAL_ENTRY, portalSlug);
commit(types.REMOVE_PORTAL_ID, portalSlug);
} catch (error) {
throwErrorMessage(error);
} finally {
commit(types.SET_HELP_PORTAL_UI_FLAG, {
uiFlags: { isDeleting: false },
portalId,
portalSlug,
});
}
},
setPortalId: async ({ commit }, portalId) => {
commit(types.SET_SELECTED_PORTAL_ID, portalId);
},
updatePortal: async ({ commit }, portal) => {
commit(types.UPDATE_PORTAL_ENTRY, portal);
},

13
app/javascript/dashboard/store/modules/helpCenterPortals/getters.js
View File

@@ -6,18 +6,16 @@ export const getters = {
},
isFetchingPortals: state => state.uiFlags.isFetching,
portalById: (...getterArguments) => portalId => {
portalBySlug: (...getterArguments) => portalId => {
const [state] = getterArguments;
const portal = state.portals.byId[portalId];
return {
...portal,
};
return portal;
},
allPortals: (...getterArguments) => {
const [state, _getters] = getterArguments;
const portals = state.portals.allIds.map(id => {
return _getters.portalById(id);
return _getters.portalBySlug(id);
});
return portals;
},
@@ -25,9 +23,4 @@ export const getters = {
getMeta: state => {
return state.meta;
},
getSelectedPortal: (...getterArguments) => {
const [state, _getters] = getterArguments;
const { selectedPortalId } = state.portals;
return _getters.portalById(selectedPortalId);
},
};

1
app/javascript/dashboard/store/modules/helpCenterPortals/index.js
View File

@@ -25,7 +25,6 @@ const state = {
meta: {
byId: {},
},
selectedPortalId: null,
},
uiFlags: {
allFetched: false,

43
app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js
View File

@@ -9,7 +9,6 @@ export const types = {
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',
@@ -25,7 +24,7 @@ export const mutations = {
},
[types.ADD_PORTAL_ENTRY]($state, portal) {
Vue.set($state.portals.byId, portal.id, {
Vue.set($state.portals.byId, portal.slug, {
...portal,
});
},
@@ -33,7 +32,7 @@ export const mutations = {
[types.ADD_MANY_PORTALS_ENTRY]($state, portals) {
const allPortals = { ...$state.portals.byId };
portals.forEach(portal => {
allPortals[portal.id] = portal;
allPortals[portal.slug] = portal;
});
Vue.set($state.portals, 'byId', allPortals);
},
@@ -41,7 +40,7 @@ export const mutations = {
[types.CLEAR_PORTALS]: $state => {
Vue.set($state.portals, 'byId', {});
Vue.set($state.portals, 'allIds', []);
Vue.set($state.portals, 'uiFlags.byId', {});
Vue.set($state.portals.uiFlags, 'byId', {});
},
[types.SET_PORTALS_META]: ($state, data) => {
@@ -50,41 +49,39 @@ export const mutations = {
Vue.set($state.meta, 'currentPage', currentPage);
},
[types.SET_SELECTED_PORTAL_ID]: ($state, portalId) => {
Vue.set($state.portals, 'selectedPortalId', portalId);
[types.ADD_PORTAL_ID]($state, portalSlug) {
$state.portals.allIds.push(portalSlug);
},
[types.ADD_PORTAL_ID]($state, portalId) {
$state.portals.allIds.push(portalId);
},
[types.ADD_MANY_PORTALS_IDS]($state, portalIds) {
$state.portals.allIds.push(...portalIds);
[types.ADD_MANY_PORTALS_IDS]($state, portalSlugs) {
$state.portals.allIds.push(...portalSlugs);
},
[types.UPDATE_PORTAL_ENTRY]($state, portal) {
const portalId = portal.id;
if (!$state.portals.allIds.includes(portalId)) return;
const portalSlug = portal.slug;
if (!$state.portals.allIds.includes(portalSlug)) return;
Vue.set($state.portals.byId, portalId, {
Vue.set($state.portals.byId, portalSlug, {
...portal,
});
},
[types.REMOVE_PORTAL_ENTRY]($state, portalId) {
if (!portalId) return;
[types.REMOVE_PORTAL_ENTRY]($state, portalSlug) {
if (!portalSlug) return;
const { [portalId]: toBeRemoved, ...newById } = $state.portals.byId;
const { [portalSlug]: toBeRemoved, ...newById } = $state.portals.byId;
Vue.set($state.portals, 'byId', newById);
},
[types.REMOVE_PORTAL_ID]($state, portalId) {
$state.portals.allIds = $state.portals.allIds.filter(id => id !== portalId);
[types.REMOVE_PORTAL_ID]($state, portalSlug) {
$state.portals.allIds = $state.portals.allIds.filter(
slug => slug !== portalSlug
);
},
[types.SET_HELP_PORTAL_UI_FLAG]($state, { portalId, uiFlags }) {
const flags = $state.portals.uiFlags.byId[portalId];
Vue.set($state.portals.uiFlags.byId, portalId, {
[types.SET_HELP_PORTAL_UI_FLAG]($state, { portalSlug, uiFlags }) {
const flags = $state.portals.uiFlags.byId[portalSlug];
Vue.set($state.portals.uiFlags.byId, portalSlug, {
...defaultPortalFlags,
...flags,
...uiFlags,

53
app/javascript/dashboard/store/modules/helpCenterPortals/specs/actions.spec.js
View File

@@ -15,16 +15,13 @@ describe('#actions', () => {
await actions.index({
commit,
dispatch,
state: {
selectedPortalId: 4,
},
state: {},
});
expect(dispatch.mock.calls).toMatchObject([['setPortalId', 1]]);
expect(commit.mock.calls).toEqual([
[types.SET_UI_FLAG, { isFetching: true }],
[types.CLEAR_PORTALS],
[types.ADD_MANY_PORTALS_ENTRY, apiResponse.payload],
[types.ADD_MANY_PORTALS_IDS, [1, 2]],
[types.ADD_MANY_PORTALS_IDS, ['domain', 'campaign']],
[types.SET_PORTALS_META, { current_page: 1, portals_count: 1 }],
[types.SET_UI_FLAG, { isFetching: false }],
]);
@@ -43,7 +40,7 @@ describe('#actions', () => {
it('sends correct actions if API is success', async () => {
axios.post.mockResolvedValue({ data: apiResponse.payload[1] });
await actions.create(
{ commit, dispatch, state: { portals: { selectedPortalId: null } } },
{ commit, dispatch, state: { portals: {} } },
{
color: 'red',
custom_domain: 'domain_for_help',
@@ -53,17 +50,14 @@ describe('#actions', () => {
expect(commit.mock.calls).toEqual([
[types.SET_UI_FLAG, { isCreating: true }],
[types.ADD_PORTAL_ENTRY, apiResponse.payload[1]],
[types.ADD_PORTAL_ID, 2],
[types.ADD_PORTAL_ID, 'campaign'],
[types.SET_UI_FLAG, { isCreating: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.post.mockRejectedValue({ message: 'Incorrect header' });
await expect(
actions.create(
{ commit, dispatch, state: { portals: { selectedPortalId: null } } },
{}
)
actions.create({ commit, dispatch, state: { portals: {} } }, {})
).rejects.toThrow(Error);
expect(commit.mock.calls).toEqual([
[types.SET_UI_FLAG, { isCreating: true }],
@@ -75,32 +69,32 @@ describe('#actions', () => {
describe('#update', () => {
it('sends correct actions if API is success', async () => {
axios.patch.mockResolvedValue({ data: apiResponse.payload[1] });
await actions.update({ commit }, apiResponse.payload[1]);
await actions.update({ commit }, { portalObj: apiResponse.payload[1] });
expect(commit.mock.calls).toEqual([
[
types.SET_HELP_PORTAL_UI_FLAG,
{ uiFlags: { isUpdating: true }, portalId: 2 },
{ uiFlags: { isUpdating: true }, portalSlug: 'campaign' },
],
[types.UPDATE_PORTAL_ENTRY, apiResponse.payload[1]],
[
types.SET_HELP_PORTAL_UI_FLAG,
{ uiFlags: { isUpdating: false }, portalId: 2 },
{ uiFlags: { isUpdating: false }, portalSlug: 'campaign' },
],
]);
});
it('sends correct actions if API is error', async () => {
axios.patch.mockRejectedValue({ message: 'Incorrect header' });
await expect(
actions.update({ commit }, apiResponse.payload[1])
actions.update({ commit }, { portalObj: apiResponse.payload[1] })
).rejects.toThrow(Error);
expect(commit.mock.calls).toEqual([
[
types.SET_HELP_PORTAL_UI_FLAG,
{ uiFlags: { isUpdating: true }, portalId: 2 },
{ uiFlags: { isUpdating: true }, portalSlug: 'campaign' },
],
[
types.SET_HELP_PORTAL_UI_FLAG,
{ uiFlags: { isUpdating: false }, portalId: 2 },
{ uiFlags: { isUpdating: false }, portalSlug: 'campaign' },
],
]);
});
@@ -109,40 +103,35 @@ describe('#actions', () => {
describe('#delete', () => {
it('sends correct actions if API is success', async () => {
axios.delete.mockResolvedValue({});
await actions.delete({ commit }, 2);
await actions.delete({ commit }, { portalSlug: 'campaign' });
expect(commit.mock.calls).toEqual([
[
types.SET_HELP_PORTAL_UI_FLAG,
{ uiFlags: { isDeleting: true }, portalId: 2 },
{ uiFlags: { isDeleting: true }, portalSlug: 'campaign' },
],
[types.REMOVE_PORTAL_ENTRY, 2],
[types.REMOVE_PORTAL_ID, 2],
[types.REMOVE_PORTAL_ENTRY, 'campaign'],
[types.REMOVE_PORTAL_ID, 'campaign'],
[
types.SET_HELP_PORTAL_UI_FLAG,
{ uiFlags: { isDeleting: false }, portalId: 2 },
{ uiFlags: { isDeleting: false }, portalSlug: 'campaign' },
],
]);
});
it('sends correct actions if API is error', async () => {
axios.delete.mockRejectedValue({ message: 'Incorrect header' });
await expect(actions.delete({ commit }, 2)).rejects.toThrow(Error);
await expect(
actions.delete({ commit }, { portalSlug: 'campaign' })
).rejects.toThrow(Error);
expect(commit.mock.calls).toEqual([
[
types.SET_HELP_PORTAL_UI_FLAG,
{ uiFlags: { isDeleting: true }, portalId: 2 },
{ uiFlags: { isDeleting: true }, portalSlug: 'campaign' },
],
[
types.SET_HELP_PORTAL_UI_FLAG,
{ uiFlags: { isDeleting: false }, portalId: 2 },
{ uiFlags: { isDeleting: false }, portalSlug: 'campaign' },
],
]);
});
});
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
app/javascript/dashboard/store/modules/helpCenterPortals/specs/fixtures.js
View File

@@ -40,7 +40,6 @@ export default {
1: { isFetching: false, isUpdating: true, isDeleting: false },
},
},
selectedPortalId: 1,
},
uiFlags: {
allFetched: false,

4
app/javascript/dashboard/store/modules/helpCenterPortals/specs/getters.spec.js
View File

@@ -16,9 +16,9 @@ describe('#getters', () => {
expect(getters.isFetchingPortals(state)).toEqual(true);
});
it('portalById', () => {
it('portalBySlug', () => {
const state = portal;
expect(getters.portalById(state)(1)).toEqual({
expect(getters.portalBySlug(state)(1)).toEqual({
id: 1,
color: 'red',
custom_domain: 'domain_for_help',

35
app/javascript/dashboard/store/modules/helpCenterPortals/specs/mutations.spec.js
View File

@@ -31,13 +31,13 @@ describe('#mutations', () => {
expect(state).toEqual(portal);
});
it('does adds helpcenter object to state', () => {
mutations[types.ADD_PORTAL_ENTRY](state, { id: 3 });
expect(state.portals.byId[3]).toEqual({ id: 3 });
mutations[types.ADD_PORTAL_ENTRY](state, { slug: 'new' });
expect(state.portals.byId.new).toEqual({ slug: 'new' });
});
});
describe('[types.ADD_PORTAL_ID]', () => {
it('adds helpcenter id to state', () => {
it('adds helpcenter slug to state', () => {
mutations[types.ADD_PORTAL_ID](state, 12);
expect(state.portals.allIds).toEqual([1, 2, 12]);
});
@@ -48,13 +48,13 @@ describe('#mutations', () => {
mutations[types.UPDATE_PORTAL_ENTRY](state, {});
expect(state).toEqual(portal);
});
it('does not updates if object id is not present ', () => {
mutations[types.UPDATE_PORTAL_ENTRY](state, { id: 5 });
it('does not updates if object slug is not present ', () => {
mutations[types.UPDATE_PORTAL_ENTRY](state, { slug: 5 });
expect(state).toEqual(portal);
});
it(' updates if object with id already present in the state', () => {
it(' updates if object with slug already present in the state', () => {
mutations[types.UPDATE_PORTAL_ENTRY](state, {
id: 2,
slug: 2,
name: 'Updated name',
});
expect(state.portals.byId[2].name).toEqual('Updated name');
@@ -62,7 +62,7 @@ describe('#mutations', () => {
});
describe('[types.REMOVE_PORTAL_ENTRY]', () => {
it('does not remove object entry if no id is passed', () => {
it('does not remove object entry if no slug is passed', () => {
mutations[types.REMOVE_PORTAL_ENTRY](state, undefined);
expect(state).toEqual({ ...portal });
});
@@ -73,7 +73,7 @@ describe('#mutations', () => {
});
describe('[types.REMOVE_PORTAL_ID]', () => {
it('removes id from state', () => {
it('removes slug from state', () => {
mutations[types.REMOVE_PORTAL_ID](state, 2);
expect(state.portals.allIds).toEqual([1, 12]);
});
@@ -82,12 +82,12 @@ describe('#mutations', () => {
describe('[types.SET_HELP_PORTAL_UI_FLAG]', () => {
it('sets correct flag in state', () => {
mutations[types.SET_HELP_PORTAL_UI_FLAG](state, {
portalId: 1,
portalSlug: 'domain',
uiFlags: { isFetching: true },
});
expect(state.portals.uiFlags.byId[1]).toEqual({
expect(state.portals.uiFlags.byId.domain).toEqual({
isFetching: true,
isUpdating: true,
isUpdating: false,
isDeleting: false,
});
});
@@ -99,9 +99,7 @@ describe('#mutations', () => {
expect(state.portals.allIds).toEqual([]);
expect(state.portals.byId).toEqual({});
expect(state.portals.uiFlags).toEqual({
byId: {
'1': { isFetching: true, isUpdating: true, isDeleting: false },
},
byId: {},
});
});
});
@@ -118,11 +116,4 @@ describe('#mutations', () => {
});
});
});
describe('#SET_SELECTED_PORTAL_ID', () => {
it('set selected portal id', () => {
mutations[types.SET_SELECTED_PORTAL_ID](state, 4);
expect(state.portals.selectedPortalId).toEqual(4);
});
});
});