No macro text and route update

src/app.module.ts

@@ -22,6 +22,7 @@ import {
     MacroKeyTabComponent,
     MacroListComponent,
     MacroMouseTabComponent,
+    MacroNotFoundComponent,
     MacroTextTabComponent
 } from './components/macro';
 import { NotificationComponent } from './components/notification';
@@ -122,6 +123,7 @@ const storeConfig = {
         MacroKeyTabComponent,
         MacroMouseTabComponent,
         MacroTextTabComponent,
+        MacroNotFoundComponent,
         AddOnComponent,
         SettingsComponent,
         CancelableDirective

src/components/macro/edit/macro-edit.component.html

@@ -13,5 +13,5 @@
 </template>
 
 <div *ngIf="!macro" class="not-found">
-    Sorry, there is no macro with this id.
+    There is no macro with id {{ route.params.select('id') | async }}.
 </div>

src/components/macro/edit/macro-edit.component.ts

@@ -25,7 +25,7 @@ export class MacroEditComponent implements OnDestroy {
     private macro: Macro;
     private isNew: boolean;
 
-    constructor(private store: Store<AppState>, private route: ActivatedRoute) {
+    constructor(private store: Store<AppState>, public route: ActivatedRoute) {
         this.subscription = route
             .params
             .select<string>('id')

src/components/macro/index.ts

@@ -2,6 +2,7 @@ export * from './edit/macro-edit.component';
 export * from './list/macro-list.component';
 export * from './header/macro-header.component';
 export * from './macro.routes';
+export * from './not-found';
 export * from './item';
 export * from './action-editor';
 export * from './action-editor/tab';

src/components/macro/macro.routes.ts

@@ -1,11 +1,12 @@
 import { Routes } from '@angular/router';
 
 import { MacroEditComponent } from './edit/macro-edit.component';
+import { MacroNotFoundComponent } from './not-found';
 
 export const macroRoutes: Routes = [
     {
         path: 'macro',
-        component: MacroEditComponent
+        component: MacroNotFoundComponent
     },
     {
         path: 'macro/:id',

src/components/macro/not-found/index.ts

@@ -0,0 +1 @@
+export { MacroNotFoundComponent} from './macro-not-found.component';

src/components/macro/not-found/macro-not-found.component.html

@@ -0,0 +1,3 @@
+<div class="not-found">
+    You don't have any macros. Try to add one!
+</div>

src/components/macro/not-found/macro-not-found.component.scss

@@ -0,0 +1,5 @@
+.not-found {
+    margin-top: 30px;
+    font-size: 16px;
+    text-align: center;
+}

src/components/macro/not-found/macro-not-found.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'macro-not-found',
+    template: require('./macro-not-found.component.html'),
+    styles: [require('./macro-not-found.component.scss')]
+})
+export class MacroNotFoundComponent { }

src/store/effects/macro.ts

@@ -25,7 +25,7 @@ export class MacroEffects {
             const macro: Macro[] = state.macros.entities;
 
             if (state.macros.entities.length === 0) {
-                this.router.navigate(['/macro/add']);
+                this.router.navigate(['/macro']);
             } else {
                 this.router.navigate(['/macro', macro[0].id]);
             }

src/store/reducers/macro.ts

@@ -1,6 +1,7 @@
 import '@ngrx/core/add/operator/select';
 import { Action } from '@ngrx/store';
 
+import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/map';
 import { Observable } from 'rxjs/Observable';
 
@@ -13,7 +14,7 @@ const initialState: MacroState = {
     entities: []
 };
 
-export default function(state = initialState, action: Action): MacroState {
+export default function (state = initialState, action: Action): MacroState {
     let newMacro: Macro;
     let newState: Macro[];
 
@@ -149,15 +150,7 @@ export function getMacroEntities(): (state$: Observable<AppState>) => Observable
 
 export function getMacro(id: number) {
     if (isNaN(id)) {
-        return (state$: Observable<AppState>) => state$
+        return () => Observable.of<Macro>(undefined);
-            .select(appState => appState.macros.entities)
-            .map((macros: Macro[]) => {
-                if (macros.length > 0) {
-                    return macros[0];
-                } else {
-                    return undefined;
-                }
-            });
     } else {
         return (state$: Observable<AppState>) => state$
             .select(appState => appState.macros.entities)