Skip to content

Commit

Permalink
Update builder.slice with new flowActions and proper selector creation
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoshuaCWebDeveloper
JoshuaCWebDeveloper committed May 22, 2024
1 parent 0038e6b commit ca4291b
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 54 deletions.
50 changes: 26 additions & 24 deletions packages/flow-client/src/app/redux/modules/builder/builder.slice.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { RootState } from '../../store';
import { flowActions } from '../flow/flow.slice';
import {
builderActions,
Expand All @@ -12,6 +13,7 @@ import {
selectNewFlowCounter,
selectNewFolderCounter,
selectNewTreeItem,
BuilderState,
} from './builder.slice';

describe('builder.slice', () => {
Expand Down Expand Up @@ -220,15 +222,15 @@ describe('builder.slice', () => {
});

describe('extra reducers', () => {
it('flowActions.removeEntity() should trigger closeFlow if the entity is an open flow', () => {
it('flowActions.removeFlowEntity() should trigger closeFlow if the entity is an open flow', () => {
const initialState = {
...baseInitialState,
openFlows: ['flow1', 'flow2'],
activeFlow: 'flow1',
};

const action = {
type: flowActions.removeEntity.type,
type: flowActions.removeFlowEntity.type,
payload: 'flow1',
};

Expand All @@ -239,15 +241,15 @@ describe('builder.slice', () => {
expect(state.openFlows).toEqual(['flow2']);
});

it('flowActions.removeEntity() should not affect state if the entity is not an open flow', () => {
it('flowActions.removeFlowEntity() should not affect state if the entity is not an open flow', () => {
const initialState = {
...baseInitialState,
openFlows: ['flow1', 'flow2'],
activeFlow: 'flow1',
};

const action = {
type: flowActions.removeEntity.type,
type: flowActions.removeFlowEntity.type,
payload: 'flow3', // flow3 is not in openFlows
};

Expand All @@ -264,8 +266,8 @@ describe('builder.slice', () => {
builder: {
...baseInitialState,
theme: 'dark' as const,
},
};
} as BuilderState,
} as RootState;

expect(selectTheme(state)).toEqual('dark');
});
Expand All @@ -275,8 +277,8 @@ describe('builder.slice', () => {
builder: {
...baseInitialState,
showPrimarySidebar: true,
},
};
} as BuilderState,
} as RootState;

expect(selectShowPrimarySidebar(state)).toEqual(true);
});
Expand All @@ -286,8 +288,8 @@ describe('builder.slice', () => {
builder: {
...baseInitialState,
showSecondarySidebar: false,
},
};
} as BuilderState,
} as RootState;

expect(selectShowSecondarySidebar(state)).toEqual(false);
});
Expand All @@ -297,8 +299,8 @@ describe('builder.slice', () => {
builder: {
...baseInitialState,
showConsolePanel: true,
},
};
} as BuilderState,
} as RootState;

expect(selectShowConsolePanel(state)).toEqual(true);
});
Expand All @@ -308,8 +310,8 @@ describe('builder.slice', () => {
builder: {
...baseInitialState,
editing: 'node1',
},
};
} as BuilderState,
} as RootState;

expect(selectEditing(state)).toEqual('node1');
});
Expand All @@ -319,8 +321,8 @@ describe('builder.slice', () => {
builder: {
...baseInitialState,
openFlows: ['flow1', 'flow2'],
},
};
} as BuilderState,
} as RootState;

expect(selectOpenFlows(state)).toEqual(['flow1', 'flow2']);
});
Expand All @@ -330,8 +332,8 @@ describe('builder.slice', () => {
builder: {
...baseInitialState,
activeFlow: 'flow1',
},
};
} as BuilderState,
} as RootState;

expect(selectActiveFlow(state)).toEqual('flow1');
});
Expand All @@ -341,8 +343,8 @@ describe('builder.slice', () => {
builder: {
...baseInitialState,
newFlowCounter: 5,
},
};
} as BuilderState,
} as RootState;

expect(selectNewFlowCounter(state)).toEqual(5);
});
Expand All @@ -352,8 +354,8 @@ describe('builder.slice', () => {
builder: {
...baseInitialState,
newFolderCounter: 3,
},
};
} as BuilderState,
} as RootState;

expect(selectNewFolderCounter(state)).toEqual(3);
});
Expand All @@ -363,8 +365,8 @@ describe('builder.slice', () => {
builder: {
...baseInitialState,
newTreeItem: 'newItem1',
},
};
} as BuilderState,
} as RootState;

expect(selectNewTreeItem(state)).toEqual('newItem1');
});
Expand Down
93 changes: 63 additions & 30 deletions packages/flow-client/src/app/redux/modules/builder/builder.slice.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { createSelector, createSlice, PayloadAction } from '@reduxjs/toolkit';
import { Theme } from '../../../themes';
import { flowActions } from '../flow/flow.slice';
import { RootState } from '../../store';

export const BUILDER_FEATURE_KEY = 'builder';

Expand Down Expand Up @@ -77,6 +78,12 @@ export const builderSlice = createSlice({
},
// Action to set the active flow
setActiveFlow: (state, action: PayloadAction<string | null>) => {
if (action.payload) {
builderSlice.caseReducers.openFlow(
state,
action as PayloadAction<string>
);
}
state.activeFlow = action.payload;
},
addNewFlow: (state, action: PayloadAction<string>) => {
Expand All @@ -93,7 +100,7 @@ export const builderSlice = createSlice({
},
extraReducers(builder) {
builder.addCase(
flowActions.removeEntity,
flowActions.removeFlowEntity,
(state, action: PayloadAction<string>) => {
if (state.openFlows.includes(action.payload)) {
builderSlice.caseReducers.closeFlow(state, action);
Expand All @@ -108,31 +115,57 @@ export const builderReducer = builderSlice.reducer;
export const builderActions = builderSlice.actions;

// Selectors
export const selectTheme = (state: { [BUILDER_FEATURE_KEY]: BuilderState }) =>
state[BUILDER_FEATURE_KEY].theme;
export const selectShowPrimarySidebar = (state: {
[BUILDER_FEATURE_KEY]: BuilderState;
}) => state[BUILDER_FEATURE_KEY].showPrimarySidebar;
export const selectShowSecondarySidebar = (state: {
[BUILDER_FEATURE_KEY]: BuilderState;
}) => state[BUILDER_FEATURE_KEY].showSecondarySidebar;
export const selectShowConsolePanel = (state: {
[BUILDER_FEATURE_KEY]: BuilderState;
}) => state[BUILDER_FEATURE_KEY].showConsolePanel;
export const selectEditing = (state: { [BUILDER_FEATURE_KEY]: BuilderState }) =>
state[BUILDER_FEATURE_KEY].editing;
export const selectOpenFlows = (state: {
[BUILDER_FEATURE_KEY]: BuilderState;
}) => state[BUILDER_FEATURE_KEY].openFlows;
export const selectActiveFlow = (state: {
[BUILDER_FEATURE_KEY]: BuilderState;
}) => state[BUILDER_FEATURE_KEY].activeFlow;
export const selectNewFlowCounter = (state: {
[BUILDER_FEATURE_KEY]: BuilderState;
}) => state[BUILDER_FEATURE_KEY].newFlowCounter;
export const selectNewFolderCounter = (state: {
[BUILDER_FEATURE_KEY]: BuilderState;
}) => state[BUILDER_FEATURE_KEY].newFolderCounter;
export const selectNewTreeItem = (state: {
[BUILDER_FEATURE_KEY]: BuilderState;
}) => state[BUILDER_FEATURE_KEY].newTreeItem;

// builder state
export const selectBuilderState = (state: RootState) =>
state[BUILDER_FEATURE_KEY];

export const selectTheme = createSelector(
selectBuilderState,
(builderState: BuilderState) => builderState.theme
);

export const selectShowPrimarySidebar = createSelector(
selectBuilderState,
(builderState: BuilderState) => builderState.showPrimarySidebar
);

export const selectShowSecondarySidebar = createSelector(
selectBuilderState,
(builderState: BuilderState) => builderState.showSecondarySidebar
);

export const selectShowConsolePanel = createSelector(
selectBuilderState,
(builderState: BuilderState) => builderState.showConsolePanel
);

export const selectEditing = createSelector(
selectBuilderState,
(builderState: BuilderState) => builderState.editing
);

export const selectOpenFlows = createSelector(
selectBuilderState,
(builderState: BuilderState) => builderState.openFlows
);

export const selectActiveFlow = createSelector(
selectBuilderState,
(builderState: BuilderState) => builderState.activeFlow
);

export const selectNewFlowCounter = createSelector(
selectBuilderState,
(builderState: BuilderState) => builderState.newFlowCounter
);

export const selectNewFolderCounter = createSelector(
selectBuilderState,
(builderState: BuilderState) => builderState.newFolderCounter
);

export const selectNewTreeItem = createSelector(
selectBuilderState,
(builderState: BuilderState) => builderState.newTreeItem
);

0 comments on commit ca4291b

Please sign in to comment.