Move front page file loading into store

frontend/src/app/_services/send-data.service.ts

@@ -6,7 +6,7 @@ import { Observable } from 'rxjs';
 export class SendDataService {
   constructor(private http: HttpClient) {}
 
-  postFile(file: File): Observable<File> {
+  postFile(file: File): Observable<any> {
     const formData: FormData = new FormData();
     const requestOptions = {
       responseType: 'text' as 'json',

frontend/src/app/actions/front-page.actions.ts

@@ -1,3 +1,4 @@
+import { HttpErrorResponse } from '@angular/common/http';
 import { createAction, props } from '@ngrx/store';
 
 export const fetchFile = createAction(
@@ -8,5 +9,10 @@ export const sendFile = createAction('[FrontPage Component] Send File');
 
 export const sendFileError = createAction(
   '[FrontPage Component] Send Error',
-  props<{ error: string }>()
+  props<{ error: HttpErrorResponse }>()
+);
+
+export const sendFileSuccess = createAction(
+  '[FrontPage Component] Send Success',
+  props<{ data: string }>()
 );

frontend/src/app/effects/front-page.effects.ts

@@ -15,48 +15,57 @@ import {
   flatMap,
 } from 'rxjs/operators';
 import { of } from 'rxjs';
-import { HttpErrorResponse } from '@angular/common/http';
+import { NbToastrService } from '@nebular/theme';
+import { Router } from '@angular/router';
 
 @Injectable()
 export class FrontPageEffect {
   constructor(
     private sendDataService: SendDataService,
     private actions$: Actions,
-    private store$: Store<AppState>
+    private store$: Store<AppState>,
+    private toastService: NbToastrService,
+    private router: Router
   ) {}
 
-  file$ = createEffect(
+  file$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(FrontPageActions.sendFile),
+      concatMap((action) =>
+        of(action).pipe(
+          withLatestFrom(this.store$.select(FrontPageSelectors.selectFile))
+        )
+      ),
+      flatMap(([_, file]) =>
+        this.sendDataService.postFile(file).pipe(
+          map((result) => FrontPageActions.sendFileSuccess({ data: result })),
+          catchError((error) => of(FrontPageActions.sendFileError({ error })))
+        )
+      )
+    )
+  );
+
+  toast$ = createEffect(
     () =>
       this.actions$.pipe(
-        ofType(FrontPageActions.sendFile),
-        concatMap((action) =>
-          of(action).pipe(
-            withLatestFrom(this.store$.select(FrontPageSelectors.selectFile))
-          )
-        ),
-        flatMap(([_, file]) => {
-          return this.sendDataService
-            .postFile(file)
-            .pipe(
-              catchError((error) =>
-                of(FrontPageActions.sendFileError({ error }))
-              )
-            );
+        ofType(FrontPageActions.sendFileError),
+        tap(({ error }) => {
+          if (error.status === 406) {
+            this.toastService.danger('', 'Format pliku jest niepoprawny!', {
+              icon: 'alert-circle',
+            });
+          }
         })
-      )
-    // this.actions$.pipe(
-    //   ofType(FrontPageActions.sendFile),
-    //   map((action) =>
-    //     of(action).pipe(
-    //       withLatestFrom(this.store$.select(FrontPageSelectors.selectFile))))
-    // )
-    // this.actions$.pipe(
-    //   ofType(FrontPageActions.sendFile),
-    //   exhaustMap((action) =>
-    //     of(action).pipe(
-    //       withLatestFrom(this.store$.select(FrontPageSelectors.selectFile))
-    //     )
-    //   )
-    // ),
+      ),
+    { dispatch: false }
+  );
+
+  navigate$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType(FrontPageActions.sendFileSuccess),
+        tap(() => this.router.navigate(['/view']))
+      ),
+    { dispatch: false }
   );
 }

frontend/src/app/reducers/front-page.reducers.ts

@@ -1,4 +1,4 @@
-import { Action, ActionReducer, createReducer, on } from '@ngrx/store';
+import { Action, createReducer, on } from '@ngrx/store';
 import * as Actions from '../actions/front-page.actions';
 
 export interface State {
@@ -7,21 +7,40 @@ export interface State {
   isFileFetched: boolean;
 }
 
+export interface DataState {
+  data: any;
+}
+
 export const initialState: State = {
   file: {} as File,
   fileName: '',
   isFileFetched: false,
 };
 
+export const initialDataState: DataState = {
+  data: '',
+};
+
 const _fileReducer = createReducer(
   initialState,
-  on(Actions.fetchFile, (state, { file }) => ({
+  on(Actions.fetchFile, (_, { file }) => ({
     file: file,
     fileName: file.name,
     isFileFetched: true,
   }))
 );
 
+const _dataReducer = createReducer(
+  initialDataState,
+  on(Actions.sendFileSuccess, (_, { data }) => {
+    return { data: data };
+  })
+);
+
 export function fileReducer(state: State | undefined, action: Action) {
   return _fileReducer(state, action);
 }
+
+export function dataReducer(state: DataState | undefined, action: Action) {
+  return _dataReducer(state, action);
+}

frontend/src/app/reducers/index.ts

@@ -1,6 +1,11 @@
 import { ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';
 import { environment } from '../../environments/environment';
-import { fileReducer, State as FileState } from './front-page.reducers';
+import {
+  fileReducer,
+  State as FileState,
+  DataState,
+  dataReducer,
+} from './front-page.reducers';
 
 export function debug(reducer: ActionReducer<any>): ActionReducer<any> {
   return function (state, action) {
@@ -13,9 +18,13 @@ export function debug(reducer: ActionReducer<any>): ActionReducer<any> {
 
 export interface State {
   fileState: FileState;
+  data: DataState;
 }
 
-export const reducers: ActionReducerMap<State> = { fileState: fileReducer };
+export const reducers: ActionReducerMap<State> = {
+  fileState: fileReducer,
+  data: dataReducer,
+};
 
 export const metaReducers: MetaReducer<State>[] = !environment.production
   ? [debug]