Add front page reducers and actions

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

@@ -0,0 +1,7 @@
+import { createAction, props } from '@ngrx/store';
+
+export const fetchFile = createAction(
+  '[FrontPage Component] Fetch File',
+  props<{ file: File }>()
+);
+export const sendFile = createAction('[FrontPage Component] Send File');

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

@@ -4,6 +4,9 @@ import { SendDataService } from '../_services/send-data.service';
 import { SharedDataService } from '../_services/shared-data.service';
 import { HttpErrorResponse } from '@angular/common/http';
 import { NbToastrService } from '@nebular/theme';
+import { Store } from '@ngrx/store';
+import { State } from '../reducers/front-page.reducers';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-front-page',
@@ -11,18 +14,18 @@ import { NbToastrService } from '@nebular/theme';
   styleUrls: ['./front-page.component.scss'],
 })
 export class FrontPageComponent {
-  private file: File;
-  public fileName: string;
-  public isFileFetched: boolean;
+  // private file: File;
+  // public fileName: string;
+  // public isFileFetched: boolean;
+  file$: Observable<File>;
 
   constructor(
     private sendDataService: SendDataService,
     private sharedDataService: SharedDataService,
     private router: Router,
-    private toastService: NbToastrService
-  ) {
-    this.isFileFetched = false;
-  }
+    private toastService: NbToastrService,
+    private store: Store<{ fileState: State }>
+  ) {}
 
   scrollTo(el: HTMLElement) {
     el.scrollIntoView({ behavior: 'smooth' });
@@ -38,9 +41,10 @@ export class FrontPageComponent {
   }
 
   fetchFile(event: any): void {
-    this.file = event.target.files[0];
-    this.fileName = this.file.name;
-    this.isFileFetched = true;
+    this.store;
+    // this.file = event.target.files[0];
+    // this.fileName = this.file.name;
+    // this.isFileFetched = true;
   }
 
   sendFile(event: any): void {

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

@@ -0,0 +1,27 @@
+import { Action, ActionReducer, createReducer, on } from '@ngrx/store';
+import * as Actions from '../actions/front-page.actions';
+
+export interface State {
+  file: File;
+  fileName: string;
+  isFileFetched: boolean;
+}
+
+export const initialState: State = {
+  file: {} as File,
+  fileName: '',
+  isFileFetched: false,
+};
+
+const _fileReducer = createReducer(
+  initialState,
+  on(Actions.fetchFile, (state, { file }) => ({
+    file: file,
+    fileName: file.name,
+    isFileFetched: true,
+  }))
+);
+
+export function fileReducer(state: State | undefined, action: Action) {
+  return _fileReducer(state, action);
+}

frontend/src/app/reducers/index.ts

@@ -6,19 +6,22 @@ import {
   MetaReducer,
 } from '@ngrx/store';
 import { environment } from '../../environments/environment';
+import { fileReducer, State as FileState } from './front-page.reducers';
 
 export function debug(reducer: ActionReducer<any>): ActionReducer<any> {
   return function (state, action) {
     console.log('State: ', state);
-    console.log('Action', action);
+    console.log('Action: ', action);
 
     return reducer(state, action);
   };
 }
 
-export interface State {}
+export interface State {
+  fileState: FileState;
+}
 
-export const reducers: ActionReducerMap<State> = {};
+export const reducers: ActionReducerMap<State> = { fileState: fileReducer };
 
 export const metaReducers: MetaReducer<State>[] = !environment.production
   ? [debug]