missing files

amirhakim · Oct 10, 2020 · dd16fee · dd16fee
1 parent 8446486
commit dd16fee
Show file tree

Hide file tree

Showing 18 changed files with 304 additions and 0 deletions.
diff --git a/src/app/friend/friend-add/friend-add.component.html b/src/app/friend/friend-add/friend-add.component.html
@@ -0,0 +1,36 @@
+<div class="add-frnd-conrainer">
+    <div class="add-frnd-form-cont">
+        <form [formGroup]="addFrndForm" (submit)="submit()" > 
+            <mat-form-field class="form-field" appearance="outline">
+                <mat-label>Name</mat-label>
+                <input matInput formControlName="name" required>
+                <mat-error *ngIf="addFrndForm.controls.name.touched && addFrndForm.controls.name.invalid">
+                  <span *ngIf="addFrndForm.controls.name.errors.required">This field is mandatory.</span>
+                  <span *ngIf="addFrndForm.controls.name.errors.pattern">This field is invalid.</span>
+                </mat-error>
+            </mat-form-field>
+            <mat-form-field class="form-field" appearance="outline">
+                <mat-label>Friends</mat-label>
+                <input matInput formControlName="friends" type="friends">
+                <mat-error *ngIf="addFrndForm.controls.friends.touched && addFrndForm.controls.friends.invalid">
+                  <span *ngIf="addFrndForm.controls.friends.errors.required">This field is mandatory.</span>
+                </mat-error>
+            </mat-form-field>
+            <mat-form-field class="form-field" appearance="outline">
+                <mat-label>Age</mat-label>
+                <input matInput formControlName="age" type="age">
+                <mat-error *ngIf="addFrndForm.controls.age.touched && addFrndForm.controls.age.invalid">
+                  <span *ngIf="addFrndForm.controls.age.errors.required">This field is mandatory.</span>
+                </mat-error>
+            </mat-form-field>
+            <mat-form-field class="form-field" appearance="outline">
+                <mat-label>Weight</mat-label>
+                <input matInput formControlName="weight" type="weight">
+                <mat-error *ngIf="addFrndForm.controls.weight.touched && addFrndForm.controls.weight.invalid">
+                  <span *ngIf="addFrndForm.controls.weight.errors.required">This field is mandatory.</span>
+                </mat-error>
+            </mat-form-field>
+            <button mat-raised-button color="primary" type="submit">Add</button>
+        </form>
+    </div>
+</div>
diff --git a/src/app/friend/friend-add/friend-add.component.scss b/src/app/friend/friend-add/friend-add.component.scss
diff --git a/src/app/friend/friend-add/friend-add.component.spec.ts b/src/app/friend/friend-add/friend-add.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FriendAddComponent } from './friend-add.component';
+
+describe('FriendAddComponent', () => {
+  let component: FriendAddComponent;
+  let fixture: ComponentFixture<FriendAddComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FriendAddComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FriendAddComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/friend/friend-add/friend-add.component.ts b/src/app/friend/friend-add/friend-add.component.ts
@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import {Store} from '@ngrx/store';
+import { addFriends } from '../store/action/friend.actions';
+import { FriendState } from '../store/reducer/friend.reducer';
+
+
+@Component({
+  selector: 'app-friend-add',
+  templateUrl: './friend-add.component.html',
+  styleUrls: ['./friend-add.component.scss']
+})
+export class FriendAddComponent implements OnInit {
+
+  addFrndForm: FormGroup;
+  nameRegex = /^[a-zA-Z]/;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private store: Store<FriendState>
+  ) { }
+
+  ngOnInit(): void {
+    this.addFrndForm = this.formBuilder.group({
+      name: [null, [Validators.required, Validators.pattern(this.nameRegex)]],
+      friends: [null, [Validators.required]],
+      age: [null, [Validators.required]],
+      weight: [null, [Validators.required]]
+    });
+  }
+
+  submit() {
+    if(!this.addFrndForm.valid){
+      return;
+    }
+    console.log(this.addFrndForm.value);
+    const newFriend = this.addFrndForm.value;
+    this.store.dispatch(addFriends(newFriend))
+  }
+
+}
diff --git a/src/app/friend/friend-view/friend-view.component.html b/src/app/friend/friend-view/friend-view.component.html
@@ -0,0 +1,4 @@
+<h4>List of Friends</h4>
+<div *ngFor="let friend of friends$ | async; let i=index">
+  <span >{{i+1}}.</span> {{friend.name}}
+</div>
diff --git a/src/app/friend/friend-view/friend-view.component.scss b/src/app/friend/friend-view/friend-view.component.scss
diff --git a/src/app/friend/friend-view/friend-view.component.spec.ts b/src/app/friend/friend-view/friend-view.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FriendViewComponent } from './friend-view.component';
+
+describe('FriendViewComponent', () => {
+  let component: FriendViewComponent;
+  let fixture: ComponentFixture<FriendViewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FriendViewComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FriendViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/friend/friend-view/friend-view.component.ts b/src/app/friend/friend-view/friend-view.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Friend } from 'src/app/models/friend/friend.model';
+import { FriendState } from '../store/reducer/friend.reducer';
+import {select, Store} from '@ngrx/store';
+import { selectFriend } from '../store/selector/friend.selectors';
+
+@Component({
+  selector: 'app-friend-view',
+  templateUrl: './friend-view.component.html',
+  styleUrls: ['./friend-view.component.scss']
+})
+export class FriendViewComponent implements OnInit {
+
+  friends$: Observable<Friend[]>;
+
+  constructor(private store: Store<FriendState>) {
+    this.friends$ = this.store.pipe(select(selectFriend))
+  }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/friend/friend.module.ts b/src/app/friend/friend.module.ts
@@ -0,0 +1,35 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatCheckboxModule} from '@angular/material/checkbox';
+import { FriendViewComponent } from './friend-view/friend-view.component';
+import { FriendAddComponent } from './friend-add/friend-add.component';
+import { StoreModule } from '@ngrx/store';
+import { friendFeatureKey, reducer } from './store/reducer/friend.reducer';
+
+
+
+@NgModule({
+  declarations: [FriendViewComponent, FriendAddComponent],
+  imports: [
+    BrowserModule,
+    ReactiveFormsModule,
+    BrowserAnimationsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    CommonModule,
+    StoreModule.forFeature(friendFeatureKey, reducer)
+  ],
+  exports: [
+    FriendViewComponent,
+    FriendAddComponent
+  ]
+})
+export class FriendModule { }
diff --git a/src/app/friend/store/action/friend.actions.spec.ts b/src/app/friend/store/action/friend.actions.spec.ts
@@ -0,0 +1,7 @@
+import * as fromFriend from './friend.actions';
+
+describe('loadFriends', () => {
+  it('should return an action', () => {
+    expect(fromFriend.loadFriends().type).toBe('[Friend] Load Friends');
+  });
+});
diff --git a/src/app/friend/store/action/friend.actions.ts b/src/app/friend/store/action/friend.actions.ts
@@ -0,0 +1,11 @@
+import { createAction, props } from '@ngrx/store';
+import { Friend } from 'src/app/models/friend/friend.model';
+
+export const addFriends = createAction(
+  '[Friend] Add Friend',
+  (friend: Friend) => ({friend})
+);
+
+
+
+
diff --git a/src/app/friend/store/reducer/friend.reducer.spec.ts b/src/app/friend/store/reducer/friend.reducer.spec.ts
@@ -0,0 +1,13 @@
+import { reducer, initialState } from './friend.reducer';
+
+describe('Friend Reducer', () => {
+  describe('an unknown action', () => {
+    it('should return the previous state', () => {
+      const action = {} as any;
+
+      const result = reducer(initialState, action);
+
+      expect(result).toBe(initialState);
+    });
+  });
+});
diff --git a/src/app/friend/store/reducer/friend.reducer.ts b/src/app/friend/store/reducer/friend.reducer.ts
@@ -0,0 +1,30 @@
+import { Action, createReducer, on } from '@ngrx/store';
+import { Friend } from 'src/app/models/friend/friend.model';
+import * as FriendActions from '../action/friend.actions'
+
+
+export const friendFeatureKey = 'friend';
+
+export interface FriendState {
+  friends: Friend[];
+}
+
+export const initialFriendState: FriendState = {
+  friends: []
+};
+
+
+export const friendReducer = createReducer(
+  initialFriendState,
+  on(FriendActions.addFriends,
+    (state: FriendState, {friend}) =>
+    ({
+      ...state,
+      friends: [...state.friends, friend]
+    })
+    )
+);
+
+export function reducer(state: FriendState | undefined, action: Action): any {
+  return friendReducer(state, action);
+}
diff --git a/src/app/friend/store/selector/friend.selectors.spec.ts b/src/app/friend/store/selector/friend.selectors.spec.ts
@@ -0,0 +1,7 @@
+
+
+describe('Friend Selectors', () => {
+  it('should select the feature state', () => {
+
+  });
+});
diff --git a/src/app/friend/store/selector/friend.selectors.ts b/src/app/friend/store/selector/friend.selectors.ts
@@ -0,0 +1,12 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { constants } from 'buffer';
+import * as fromFriend from '../reducer/friend.reducer'
+
+export const selectFriendState = createFeatureSelector<fromFriend.FriendState>(
+    fromFriend.friendFeatureKey
+);
+
+export const selectFriend = createSelector(
+    selectFriendState,
+    (state: fromFriend.FriendState) => state.friends
+)
diff --git a/src/app/models/friend/friend.model.spec.ts b/src/app/models/friend/friend.model.spec.ts
@@ -0,0 +1,7 @@
+import { Friend } from './friend.model';
+
+describe('Friend', () => {
+  it('should create an instance', () => {
+    expect(new Friend()).toBeTruthy();
+  });
+});
diff --git a/src/app/models/friend/friend.model.ts b/src/app/models/friend/friend.model.ts
@@ -0,0 +1,7 @@
+export class Friend {
+    id? = '';
+    name? = '';
+    friends? = [];
+    age? = 0;
+    weight? = 0;
+}
diff --git a/src/app/reducers/index.ts b/src/app/reducers/index.ts
@@ -0,0 +1,20 @@
+import {
+  ActionReducer,
+  ActionReducerMap,
+  createFeatureSelector,
+  createSelector,
+  MetaReducer
+} from '@ngrx/store';
+import { environment } from '../../environments/environment';
+
+
+export interface State {
+
+}
+
+export const reducers: ActionReducerMap<State> = {
+
+};
+
+
+export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [];