feat(showcase): update generic-search actions style

docs/stark-ui/GENERIC_SEARCH.md

@@ -191,58 +191,34 @@ export class MovieSearchFormComponent implements OnInit, OnChanges, StarkSearchF
 
 Under the `src/app/modules/<module-name>/actions` folder create the files **movies-search.actions.ts** and **index.ts**.
 
-Obviously, you'll have to export everything from your _actions.ts_ file in your barrel (index.ts).
-
 #### 2.3.2. Define the actions
 
 The following actions should be defined to make your GenericSearch working perfectly.
 
 ```typescript
-import { Action } from "@ngrx/store";
+import { createAction, props, union } from "@ngrx/store";
 import { MovieSearchCriteria } from "../entities";
 
-export enum MovieActionTypes {
-  SET_MOVIE_SEARCH_CRITERIA = "[MovieSearch] Set criteria",
-  REMOVE_MOVIE_SEARCH_CRITERIA = "[MovieSearch] Remove criteria",
-  MOVIE_HAS_SEARCHED = "[MovieSearch] Has searched",
-  MOVIE_HAS_SEARCHED_RESET = "[MovieSearch] Has searched reset"
-}
+export const setCriteria = createAction("[MovieSearch] Set criteria", props<{ criteria: MovieSearchCriteria }>());
+export const removeCriteria = createAction("[MovieSearch] Remove criteria");
+export const hasSearched = createAction("[MovieSearch] Has searched");
+export const hasSearchedReset = createAction("[MovieSearch] Has searched reset");
 
-export class MovieSearchSetCriteria implements Action {
-  /**
-   * The type of action
-   */
-  public readonly type: MovieActionTypes.SET_MOVIE_SEARCH_CRITERIA = MovieActionTypes.SET_MOVIE_SEARCH_CRITERIA;
-  /**
-   * Class constructor
-   * @param criteria - Criteria to be set
-   */
-  public constructor(public criteria: MovieSearchCriteria) {}
-}
+/**
+ * @ignore
+ */
+const all = union({ setCriteria, removeCriteria, hasSearched, hasSearchedReset });
+export type Types = typeof all;
+```
 
-export class MovieSearchRemoveCriteria implements Action {
-  /**
-   * The type of action
-   */
-  public readonly type: MovieActionTypes.REMOVE_MOVIE_SEARCH_CRITERIA = MovieActionTypes.REMOVE_MOVIE_SEARCH_CRITERIA;
-}
+#### 2.3.3 Export the actions in barrel file
 
-export class MovieSearchHasSearched implements Action {
-  /**
-   * The type of action
-   */
-  public readonly type: MovieActionTypes.MOVIE_HAS_SEARCHED = MovieActionTypes.MOVIE_HAS_SEARCHED;
-}
+Export all the actions as follows in your barrel (index.ts):
 
-export class MovieSearchHasSearchedReset implements Action {
-  /**
-   * The type of action
-   */
-  public readonly type: MovieActionTypes.MOVIE_HAS_SEARCHED_RESET = MovieActionTypes.MOVIE_HAS_SEARCHED_RESET;
-}
+import * as MovieSearchActions from "./movies-search.actions";
+export { MovieSearchActions };
 
-export type MovieSearchActions = MovieSearchRemoveCriteria | MovieSearchHasSearchedReset | MovieSearchHasSearched | MovieSearchSetCriteria;
-```
+Obviously, you'll have to export everything from your _actions.ts_ file in your barrel (index.ts).
 
 ### 2.4. Create the search reducers
 
@@ -258,30 +234,28 @@ Don't forget to rename every variable and function that contain "movies" with yo
 
 ```typescript
 import { StarkSearchState } from "@nationalbankbelgium/stark-ui";
+import { createReducer, on } from "@ngrx/store";
 import { MovieSearchCriteria } from "../entities/movies-search.entity";
-import { MovieActionTypes, MovieSearchActions } from "../actions";
+import { MovieSearchActions } from "../actions";
 
 const INITIAL_STATE: Readonly<StarkSearchState<MovieSearchCriteria>> = {
   criteria: new MovieSearchCriteria(),
   hasBeenSearched: false
 };
 
-export function demoGenericSearchReducer(
-  state: Readonly<StarkSearchState<MovieSearchCriteria>> = INITIAL_STATE,
-  action: Readonly<MovieSearchActions>
+const reducer = createReducer<StarkSearchState<MovieSearchCriteria>, MovieSearchActions.Types>(
+  INITIAL_STATE,
+  on(DemoGenericSearchActions.setCriteria, (state, action) => ({ ...state, criteria: action.criteria })),
+  on(DemoGenericSearchActions.removeCriteria, (state) => ({ ...state, criteria: INITIAL_STATE.criteria })),
+  on(DemoGenericSearchActions.hasSearched, (state) => ({ ...state, hasBeenSearched: true })),
+  on(DemoGenericSearchActions.hasSearchedReset, (state) => ({ ...state, hasBeenSearched: false }))
+)
+
+export function movieSearchReducer(
+  state: Readonly<StarkSearchState<MovieSearchCriteria>> | undefined,
+  action: Readonly<MovieSearchActions.Types>
 ): Readonly<StarkSearchState<MovieSearchCriteria>> {
-  switch (action.type) {
-    case MovieActionTypes.SET_MOVIE_SEARCH_CRITERIA:
-      return { ...state, criteria: action.criteria };
-    case MovieActionTypes.REMOVE_MOVIE_SEARCH_CRITERIA:
-      return { ...state, criteria: INITIAL_STATE.criteria };
-    case MovieActionTypes.MOVIE_HAS_SEARCHED:
-      return { ...state, hasBeenSearched: true };
-    case MovieActionTypes.MOVIE_HAS_SEARCHED_RESET:
-      return { ...state, hasBeenSearched: false };
-    default:
-      return state;
-  }
+	return reducer(state, action);
 }
 ```
 
@@ -302,7 +276,7 @@ export interface MovieSearchState {
   movieSearch: StarkSearchState<MovieSearchCriteria>;
 }
 
-export const movieSearchReducers: ActionReducerMap<MovieSearchState, MovieSearchActions> = {
+export const movieSearchReducers: ActionReducerMap<MovieSearchState, MovieSearchActions.Types> = {
   movieSearch: movieSearchReducer
 };
 
@@ -383,7 +357,7 @@ import { MovieObject, MovieSearchCriteria } from "../entities";
 import { MovieSearchState, selectMovieSearch } from "../reducers";
 import { MOVIE_REPOSITORY, MovieRepository } from "../repositories";
 import { Store, select } from "@ngrx/store";
-import { MovieSearchHasSearched, MovieSearchHasSearchedReset, MovieSearchRemoveCriteria, MovieSearchSetCriteria } from "../actions";
+import { MovieSearchActions } from "../actions";
 
 @Injectable()
 export class DemoGenericServiceImpl implements MovieService {
@@ -394,13 +368,13 @@ export class DemoGenericServiceImpl implements MovieService {
   }
 
   public resetSearchState(): void {
-    this.store.dispatch(new MovieSearchRemoveCriteria());
-    this.store.dispatch(new MovieSearchHasSearchedReset());
+    this.store.dispatch(MovieSearchActions.removeCriteria());
+    this.store.dispatch(MovieSearchActions.hasSearchedReset());
   }
 
   public search(criteria: MovieSearchCriteria): Observable<MovieObject[]> {
-    this.store.dispatch(new MovieSearchSetCriteria(criteria));
-    this.store.dispatch(new MovieSearchHasSearched());
+    this.store.dispatch(MovieSearchActions.setCriteria({criteria}));
+    this.store.dispatch(MovieSearchActions.hasSearched());
 
     return this.movieRepository.search(criteria);
   }

showcase/src/app/demo-ui/demo-ui.module.ts

@@ -62,7 +62,8 @@ import {
 	DemoTablePageComponent,
 	DemoToastPageComponent,
 	DemoTransformInputDirectivePageComponent,
-	DemoDateTimePickerPageComponent
+	DemoDateTimePickerPageComponent,
+	demoGenericSearchStoreKey
 } from "./pages";
 import { SharedModule } from "../shared/shared.module";
 import { DEMO_STATES } from "./routes";
@@ -115,7 +116,7 @@ import {
 		StarkRouteSearchModule,
 		StarkSliderModule,
 		StarkTableModule,
-		StoreModule.forFeature("DemoGenericSearch", demoGenericSearchReducers)
+		StoreModule.forFeature(demoGenericSearchStoreKey, demoGenericSearchReducers)
 	],
 	declarations: [
 		DemoActionBarPageComponent,

showcase/src/app/demo-ui/pages/generic-search/actions/demo-generic-search.actions.ts

@@ -1,49 +1,14 @@
-import { Action } from "@ngrx/store";
+import { createAction, props, union } from "@ngrx/store";
 import { HeroMovieSearchCriteria } from "../entities";
-
-export enum DemoGenericActionTypes {
-	SET_DEMO_GENERIC_SEARCH_CRITERIA = "[DemoGenericSearch] Set criteria",
-	REMOVE_DEMO_GENERIC_SEARCH_CRITERIA = "[DemoGenericSearch] Remove criteria",
-	DEMO_GENERIC_HAS_SEARCHED = "[DemoGenericSearch] Has searched",
-	DEMO_GENERIC_HAS_SEARCHED_RESET = "[DemoGenericSearch] Has searched reset"
-}
-
-export class DemoGenericSearchSetCriteria implements Action {
-	/**
-	 * The type of action
-	 */
-	public readonly type: DemoGenericActionTypes.SET_DEMO_GENERIC_SEARCH_CRITERIA = DemoGenericActionTypes.SET_DEMO_GENERIC_SEARCH_CRITERIA;
-	/**
-	 * Class constructor
-	 * @param criteria - Criteria to be set
-	 */
-	public constructor(public criteria: HeroMovieSearchCriteria) {}
-}
-
-export class DemoGenericSearchRemoveCriteria implements Action {
-	/**
-	 * The type of action
-	 */
-	public readonly type: DemoGenericActionTypes.REMOVE_DEMO_GENERIC_SEARCH_CRITERIA =
-		DemoGenericActionTypes.REMOVE_DEMO_GENERIC_SEARCH_CRITERIA;
-}
-
-export class DemoGenericSearchHasSearched implements Action {
-	/**
-	 * The type of action
-	 */
-	public readonly type: DemoGenericActionTypes.DEMO_GENERIC_HAS_SEARCHED = DemoGenericActionTypes.DEMO_GENERIC_HAS_SEARCHED;
-}
-
-export class DemoGenericSearchHasSearchedReset implements Action {
-	/**
-	 * The type of action
-	 */
-	public readonly type: DemoGenericActionTypes.DEMO_GENERIC_HAS_SEARCHED_RESET = DemoGenericActionTypes.DEMO_GENERIC_HAS_SEARCHED_RESET;
-}
-
-export type DemoGenericSearchActions =
-	| DemoGenericSearchRemoveCriteria
-	| DemoGenericSearchHasSearchedReset
-	| DemoGenericSearchHasSearched
-	| DemoGenericSearchSetCriteria;
+import { demoGenericSearchStoreKey } from "../constants";
+
+export const setCriteria = createAction(`[${demoGenericSearchStoreKey}] Set criteria`, props<{ criteria: HeroMovieSearchCriteria }>());
+export const removeCriteria = createAction(`[${demoGenericSearchStoreKey}] Remove criteria`);
+export const hasSearched = createAction(`[${demoGenericSearchStoreKey}] Has searched`);
+export const hasSearchedReset = createAction(`[${demoGenericSearchStoreKey}] Has searched reset`);
+
+/**
+ * @ignore
+ */
+const all = union({ setCriteria, removeCriteria, hasSearched, hasSearchedReset });
+export type Types = typeof all;

showcase/src/app/demo-ui/pages/generic-search/actions/index.ts

@@ -1 +1,2 @@
-export * from "./demo-generic-search.actions";
+import * as DemoGenericSearchActions from "./demo-generic-search.actions";
+export { DemoGenericSearchActions };

showcase/src/app/demo-ui/pages/generic-search/constants/demo-generic-search-store-key.ts

@@ -0,0 +1,4 @@
+/**
+ * Key defined to find the service in a store
+ */
+export const demoGenericSearchStoreKey = "DemoGenericSearch";

showcase/src/app/demo-ui/pages/generic-search/constants/index.ts

@@ -0,0 +1 @@
+export * from "./demo-generic-search-store-key";

showcase/src/app/demo-ui/pages/generic-search/demo-generic-search-page.component.ts

@@ -58,7 +58,7 @@ export class DemoGenericSearchPageComponent
 		},
 		{
 			label: "SHOWCASE.DEMO.GENERIC_SEARCH.EXPLANATION_ABOUT_DOC_ON_GITHUB",
-			url: "https://github.com/NationalBankBelgium/stark/blob/master/docs/GENERIC_SEARCH.md"
+			url: "https://github.com/NationalBankBelgium/stark/blob/master/docs/stark-ui/GENERIC_SEARCH.md"
 		}
 	];
 

showcase/src/app/demo-ui/pages/generic-search/index.ts

@@ -1,5 +1,6 @@
 export * from "./actions";
 export * from "./components";
+export * from "./constants";
 export * from "./entities";
 export * from "./reducers";
 export * from "./services";

showcase/src/app/demo-ui/pages/generic-search/reducers/demo-generic-search.reducer.ts

@@ -1,26 +1,24 @@
 import { StarkSearchState } from "@nationalbankbelgium/stark-ui";
 import { HeroMovieSearchCriteria } from "../entities";
-import { DemoGenericActionTypes, DemoGenericSearchActions } from "../actions";
+import { DemoGenericSearchActions } from "../actions";
+import {createReducer, on} from "@ngrx/store";
 
 const INITIAL_STATE: Readonly<StarkSearchState<HeroMovieSearchCriteria>> = {
 	criteria: new HeroMovieSearchCriteria(),
 	hasBeenSearched: false
 };
 
+const reducer = createReducer<StarkSearchState<HeroMovieSearchCriteria>, DemoGenericSearchActions.Types>(
+	INITIAL_STATE,
+	on(DemoGenericSearchActions.setCriteria, (state, action) => ({ ...state, criteria: action.criteria })),
+	on(DemoGenericSearchActions.removeCriteria, (state) => ({ ...state, criteria: INITIAL_STATE.criteria })),
+	on(DemoGenericSearchActions.hasSearched, (state) => ({ ...state, hasBeenSearched: true })),
+	on(DemoGenericSearchActions.hasSearchedReset, (state) => ({ ...state, hasBeenSearched: false }))
+)
+
 export function demoGenericSearchReducer(
-	state: Readonly<StarkSearchState<HeroMovieSearchCriteria>> = INITIAL_STATE,
-	action: Readonly<DemoGenericSearchActions>
+	state: Readonly<StarkSearchState<HeroMovieSearchCriteria>> | undefined,
+	action: Readonly<DemoGenericSearchActions.Types>
 ): Readonly<StarkSearchState<HeroMovieSearchCriteria>> {
-	switch (action.type) {
-		case DemoGenericActionTypes.SET_DEMO_GENERIC_SEARCH_CRITERIA:
-			return { ...state, criteria: action.criteria };
-		case DemoGenericActionTypes.REMOVE_DEMO_GENERIC_SEARCH_CRITERIA:
-			return { ...state, criteria: INITIAL_STATE.criteria };
-		case DemoGenericActionTypes.DEMO_GENERIC_HAS_SEARCHED:
-			return { ...state, hasBeenSearched: true };
-		case DemoGenericActionTypes.DEMO_GENERIC_HAS_SEARCHED_RESET:
-			return { ...state, hasBeenSearched: false };
-		default:
-			return state;
-	}
+	return reducer(state, action);
 }

showcase/src/app/demo-ui/pages/generic-search/reducers/index.ts

@@ -1,18 +1,19 @@
 import { StarkSearchState } from "@nationalbankbelgium/stark-ui";
-import { ActionReducerMap, createSelector, MemoizedSelector, createFeatureSelector } from "@ngrx/store";
+import { ActionReducerMap, createSelector, createFeatureSelector } from "@ngrx/store";
 import { HeroMovieSearchCriteria } from "../entities";
 import { DemoGenericSearchActions } from "../actions";
 import { demoGenericSearchReducer } from "./demo-generic-search.reducer";
+import { demoGenericSearchStoreKey } from "../constants";
 
 export interface DemoGenericSearchState {
 	demoGenericSearch: StarkSearchState<HeroMovieSearchCriteria>;
 }
 
-export const demoGenericSearchReducers: ActionReducerMap<DemoGenericSearchState, DemoGenericSearchActions> = {
+export const demoGenericSearchReducers: ActionReducerMap<DemoGenericSearchState, DemoGenericSearchActions.Types> = {
 	demoGenericSearch: demoGenericSearchReducer
 };
 
-export const selectDemoGenericSearch: MemoizedSelector<object, StarkSearchState<HeroMovieSearchCriteria>> = createSelector(
-	createFeatureSelector<DemoGenericSearchState>("DemoGenericSearch"),
+export const selectDemoGenericSearch = createSelector(
+	createFeatureSelector<DemoGenericSearchState>(demoGenericSearchStoreKey),
 	(state: DemoGenericSearchState) => state.demoGenericSearch
 );

showcase/src/app/demo-ui/pages/generic-search/services/demo-generic.service.ts

@@ -5,12 +5,7 @@ import { StarkGenericSearchService, StarkSearchState } from "@nationalbankbelgiu
 import { HeroMovie, HeroMovieSearchCriteria } from "../entities";
 import { DemoGenericSearchState, selectDemoGenericSearch } from "../reducers";
 import { Store, select } from "@ngrx/store";
-import {
-	DemoGenericSearchHasSearched,
-	DemoGenericSearchHasSearchedReset,
-	DemoGenericSearchRemoveCriteria,
-	DemoGenericSearchSetCriteria
-} from "../actions";
+import { DemoGenericSearchActions } from "../actions";
 
 const MOVIES: HeroMovie[] = [
 	{
@@ -72,13 +67,13 @@ export class DemoGenericService implements StarkGenericSearchService<HeroMovie,
 	}
 
 	public resetSearchState(): void {
-		this.store.dispatch(new DemoGenericSearchRemoveCriteria());
-		this.store.dispatch(new DemoGenericSearchHasSearchedReset());
+		this.store.dispatch(DemoGenericSearchActions.removeCriteria());
+		this.store.dispatch(DemoGenericSearchActions.hasSearchedReset());
 	}
 
 	public search(criteria: HeroMovieSearchCriteria): Observable<HeroMovie[]> {
-		this.store.dispatch(new DemoGenericSearchSetCriteria(criteria));
-		this.store.dispatch(new DemoGenericSearchHasSearched());
+		this.store.dispatch(DemoGenericSearchActions.setCriteria({criteria}));
+		this.store.dispatch(DemoGenericSearchActions.hasSearched());
 
 		return of(MOVIES).pipe(
 			// The delay is important to show the progress-indicator during the search process.