Skip to content
Permalink
Browse files

updated to angular 8 and ngrx 8

  • Loading branch information...
FabianGosebrink committed Jun 26, 2019
1 parent 7df4526 commit c49dd9e62393ee9fcf83a991579255db631b320f

Some generated files are not rendered by default. Learn more.

@@ -24,8 +24,8 @@
"@angular/pwa": "^0.12.4",
"@angular/router": "~8.0.2",
"@angular/service-worker": "~8.0.2",
"@ngrx/effects": "^7.3.0",
"@ngrx/store": "^7.3.0",
"@ngrx/effects": "^8.0.1",
"@ngrx/store": "^8.0.1",
"bootstrap": "^4.3.1",
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
@@ -55,4 +55,4 @@
"tslint": "~5.11.0",
"typescript": "~3.4.5"
}
}
}
@@ -1,12 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { Todo } from '@app/models/todo';
import { getAllDoneItems, getAllUndoneItems, TodoState } from '@app/todo/store';
import {
AddTodoAction,
LoadAllTodosAction,
SetAsDoneAction,
DeleteTodoAction
} from '@app/todo/store/todo.actions';
import * as fromTodoStore from '@app/todo/store';
import { select, Store } from '@ngrx/store';
import { Observable } from 'rxjs';

@@ -25,18 +20,18 @@ export class ContentComponent implements OnInit {
this.items$ = this.store.pipe(select(getAllUndoneItems));
this.doneItems$ = this.store.pipe(select(getAllDoneItems));

this.store.dispatch(new LoadAllTodosAction());
this.store.dispatch(fromTodoStore.loadAllTodos());
}

addTodo(item: string) {
this.store.dispatch(new AddTodoAction(item));
this.store.dispatch(fromTodoStore.addTodo({ payload: item }));
}

markAsDone(item: Todo) {
this.store.dispatch(new SetAsDoneAction(item));
this.store.dispatch(fromTodoStore.setAsDone({ payload: item }));
}

deleteItem(item: Todo) {
this.store.dispatch(new DeleteTodoAction(item));
this.store.dispatch(fromTodoStore.deleteTodo({ payload: item }));
}
}
@@ -1,24 +1,26 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Todo } from '@app/models/todo';
import { getSelectedItem, TodoState } from '@app/todo/store';
import { LoadSingleTodoAction } from '@app/todo/store/todo.actions';
import * as fromTodoStore from '@app/todo/store';
import { select, Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { Observable, from } from 'rxjs';

@Component({
selector: 'app-todo-detail',
templateUrl: './todo-detail.component.html',
styleUrls: ['./todo-detail.component.css'],
styleUrls: ['./todo-detail.component.css']
})
export class TodoDetailComponent implements OnInit {
todo$: Observable<Todo>;

constructor(private route: ActivatedRoute, private store: Store<TodoState>) {}
constructor(
private route: ActivatedRoute,
private store: Store<fromTodoStore.TodoState>
) {}

ngOnInit() {
this.todo$ = this.store.pipe(select(getSelectedItem));
this.todo$ = this.store.pipe(select(fromTodoStore.getSelectedItem));
const id = this.route.snapshot.params.id;
this.store.dispatch(new LoadSingleTodoAction(id));
this.store.dispatch(fromTodoStore.loadSingleTodo({ payload: id }));
}
}
@@ -1,80 +1,44 @@
import { Action } from '@ngrx/store';
import { createAction, props } from '@ngrx/store';
import { Todo } from '../../models/todo';

export enum ActionTypes {
LoadAllTodos = '[Todo] Load Todos',
LoadAllTodosFinished = '[Todo] Load Todos Finished',

LoadSingleTodo = '[Todo] Load Single Todos',
LoadSingleTodoFinished = '[Todo] Load Single Todo Finished',

AddTodo = '[Todo] Add Todo',
AddTodoFinished = '[Todo] Add Todo Finished',

SetAsDone = '[Todo] SetAsDone',
SetAsDoneFinished = '[Todo] SetAsDone Finished',

DeleteTodo = '[Todo] DeleteTodo',
DeleteTodoFinished = '[Todo] DeleteTodo Finished'
}

export class LoadAllTodosAction implements Action {
readonly type = ActionTypes.LoadAllTodos;
}

export class LoadAllTodosFinishedAction implements Action {
readonly type = ActionTypes.LoadAllTodosFinished;
constructor(public payload: Todo[]) {}
}

export class LoadSingleTodoAction implements Action {
readonly type = ActionTypes.LoadSingleTodo;
constructor(public payload: string) {}
}

export class LoadSingleTodoFinishedAction implements Action {
readonly type = ActionTypes.LoadSingleTodoFinished;
constructor(public payload: Todo) {}
}

export class AddTodoAction implements Action {
readonly type = ActionTypes.AddTodo;
constructor(public payload: string) {}
}

export class AddTodoFinishedAction implements Action {
readonly type = ActionTypes.AddTodoFinished;
constructor(public payload: Todo) {}
}

export class SetAsDoneAction implements Action {
readonly type = ActionTypes.SetAsDone;
constructor(public payload: Todo) {}
}

export class SetAsDoneFinishedAction implements Action {
readonly type = ActionTypes.SetAsDoneFinished;
constructor(public payload: Todo) {}
}

export class DeleteTodoAction implements Action {
readonly type = ActionTypes.DeleteTodo;
constructor(public payload: Todo) {}
}

export class DeleteTodoFinishedAction implements Action {
readonly type = ActionTypes.DeleteTodoFinished;
constructor(public payload: Todo) {}
}

export type TodoActions =
| DeleteTodoAction
| DeleteTodoFinishedAction
| AddTodoAction
| SetAsDoneAction
| AddTodoFinishedAction
| SetAsDoneFinishedAction
| LoadAllTodosAction
| LoadAllTodosFinishedAction
| LoadSingleTodoAction
| LoadSingleTodoFinishedAction;
export const loadAllTodos = createAction('[Todo] Load Todos');
export const loadAllTodosFinished = createAction(
'[Todo] Load Todos Finished',
props<{ payload: Todo[] }>()
);

export const loadSingleTodo = createAction(
'[Todo] Load Single Todo',
props<{ payload: string }>()
);
export const loadSingleTodoFinished = createAction(
'[Todo] Load Single Todo Finished',
props<{ payload: Todo }>()
);

export const addTodo = createAction(
'[Todo] Add Todo',
props<{ payload: string }>()
);
export const addTodoFinished = createAction(
'[Todo] Add Todo Finished',
props<{ payload: Todo }>()
);

export const setAsDone = createAction(
'[Todo] SetAsDone',
props<{ payload: Todo }>()
);
export const setAsDoneFinished = createAction(
'[Todo] SetAsDone Finished',
props<{ payload: Todo }>()
);

export const deleteTodo = createAction(
'[Todo] DeleteTodo',
props<{ payload: Todo }>()
);
export const deleteTodoFinished = createAction(
'[Todo] DeleteTodo Finished',
props<{ payload: Todo }>()
);
@@ -1,99 +1,75 @@
import { Injectable } from '@angular/core';
import { Actions, Effect, ofType } from '@ngrx/effects';
import { Actions, ofType, createEffect } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, map, switchMap } from 'rxjs/operators';
import { TodoService } from '../../core/services/todo.service';
import { Todo } from '../../models/todo';
import {
ActionTypes,
AddTodoAction,
AddTodoFinishedAction,
LoadAllTodosFinishedAction,
LoadSingleTodoAction,
LoadSingleTodoFinishedAction,
SetAsDoneAction,
SetAsDoneFinishedAction,
DeleteTodoAction,
DeleteTodoFinishedAction
} from './todo.actions';
import * as todoActions from './todo.actions';
import { TodoService } from '@app/core/services/todo.service';

@Injectable()
export class TodoEffects {
constructor(private actions$: Actions, private todoService: TodoService) {}

@Effect()
loadTodos$ = this.actions$.pipe(
ofType(ActionTypes.LoadAllTodos),
switchMap(() =>
this.todoService
.getItems()
.pipe(
map(
(todos: Todo[]) => new LoadAllTodosFinishedAction(todos),
catchError(error => of(error))
)
loadTodos$ = createEffect(() =>
this.actions$.pipe(
ofType(todoActions.loadAllTodos),
switchMap(action =>
this.todoService.getItems().pipe(
map(todos => todoActions.loadAllTodosFinished({ payload: todos })),
catchError(error => of(error))
)
)
)
);

@Effect()
loadSingleTodos$ = this.actions$.pipe(
ofType(ActionTypes.LoadSingleTodo),
switchMap((action: LoadSingleTodoAction) =>
this.todoService
.getItem(action.payload)
.pipe(
map(
(todo: Todo) => new LoadSingleTodoFinishedAction(todo),
catchError(error => of(error))
)
loadSingleTodos$ = createEffect(() =>
this.actions$.pipe(
ofType(todoActions.loadSingleTodo),
map(action => action.payload),
switchMap(payload =>
this.todoService.getItem(payload).pipe(
map(todo => todoActions.loadSingleTodoFinished({ payload: todo })),
catchError(error => of(error))
)
)
)
);

@Effect()
addTodo$ = this.actions$.pipe(
ofType(ActionTypes.AddTodo),
switchMap((action: AddTodoAction) =>
this.todoService
.addItem(action.payload)
.pipe(
map(
(todo: Todo) => new AddTodoFinishedAction(todo),
catchError(error => of(error))
)
addTodo$ = createEffect(() =>
this.actions$.pipe(
ofType(todoActions.addTodo),
map(action => action.payload),
switchMap(payload =>
this.todoService.addItem(payload).pipe(
map(todo => todoActions.addTodoFinished({ payload: todo })),
catchError(error => of(error))
)
)
)
);

@Effect()
markAsDone$ = this.actions$.pipe(
ofType(ActionTypes.SetAsDone),
switchMap((action: SetAsDoneAction) =>
this.todoService
.updateItem(action.payload)
.pipe(
map(
(todo: Todo) => new SetAsDoneFinishedAction(todo),
catchError(error => of(error))
)
markAsDone$ = createEffect(() =>
this.actions$.pipe(
ofType(todoActions.setAsDone),
map(action => action.payload),
switchMap(payload =>
this.todoService.updateItem(payload).pipe(
map(todo => todoActions.setAsDoneFinished({ payload: todo })),
catchError(error => of(error))
)
)
)
);

@Effect()
deleteTodo$ = this.actions$.pipe(
ofType(ActionTypes.DeleteTodo),
map((action: DeleteTodoAction) => action.payload),
switchMap((todo: Todo) =>
this.todoService
.deleteItem(todo)
.pipe(
map(
() => new DeleteTodoFinishedAction(todo),
catchError(error => of(error))
)
deleteTodo$ = createEffect(() =>
this.actions$.pipe(
ofType(todoActions.deleteTodo),
map(action => action.payload),
switchMap(payload =>
this.todoService.deleteItem(payload).pipe(
map(_ => todoActions.deleteTodoFinished({ payload })),
catchError(error => of(error))
)
)
)
);
}

0 comments on commit c49dd9e

Please sign in to comment.
You can’t perform that action at this time.