Feature/normalizr/add country entity and students that belongs to contry

18 Normalizr/package.json

@@ -35,7 +35,7 @@
     "bootstrap": "^3.3.7",
     "jquery": "^3.1.1",
     "lc-form-validation": "^0.1.7",
-    "normalizr": "^2.3.1",
+    "normalizr": "^3.0.0",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
     "react-redux": "^4.4.5",

18 Normalizr/src/common/actionsEnums.ts

@@ -6,5 +6,6 @@ export const actionsEnums = {
   STUDENT_FIELD_VALUE_CHANGED: "STUDENT_FIELD_VALUE_CHANGED",
   STUDENT_FIELD_VALUE_CHANGED_COMPLETED: "STUDENT_FIELD_VALUE_CHANGED_COMPLETED",
   STUDENT_SAVE_COMPLETED: "STUDENT_SAVE_COMPLETED",
-  RESET_EDITING_STUDENT: "RESET_EDITING_STUDENT"
+  RESET_EDITING_STUDENT: "RESET_EDITING_STUDENT",
+  FETCH_COUNTRY_LIST_REQUEST_COMPLETED: "FETCH_COUNTRY_LIST_REQUEST_COMPLETED"
 };

18 Normalizr/src/common/components/Input.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import {ValidationFieldComponent} from './validationFieldComponent';
 
 interface Props {
   name: string;
@@ -10,37 +11,19 @@ interface Props {
   error?: string;
 }
 
-export class Input extends React.Component<Props, {}> {
-  constructor(props: Props) {
-    super(props);
-  }
-
-  public render() {
-    let wrapperClass: string = "form-group";
-    if (this.props.error && this.props.error.length > 0) {
-      wrapperClass += " " + "has-error";
-    }
-    return (
-      <div className={wrapperClass}>
-        <label htmlFor={this.props.name}>
-          {this.props.label}
-        </label>
-        <div className="field">
-          <input
-            type="text"
-            name={this.props.name}
-            className="form-control"
-            placeholder={this.props.placeholder}
-            ref={this.props.name}
-            value={this.props.value}
-            onChange={this.props.onChange}
-            onBlur={this.props.onBlur}
-          />
-          <div className="input">
-            {this.props.error}
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
+export const Input = (props: Props) => {
+  return (
+    <ValidationFieldComponent
+     name={props.name} label={props.label} error={props.error}>
+      <input
+        type="text"
+        name={props.name}
+        className="form-control"
+        placeholder={props.placeholder}
+        value={props.value}
+        onChange={props.onChange}
+        onBlur={props.onBlur}
+      />
+    </ValidationFieldComponent>
+  );
+};

18 Normalizr/src/common/components/Select.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import {ValidationFieldComponent} from './validationFieldComponent';
+
+interface Props {
+  name: string;
+  label: string;
+  onChange: any;
+  onBlur?: any;
+  value: any;
+  error?: string;
+  option: any;
+}
+
+export const Select = (props: Props) => {
+
+  return (
+    <ValidationFieldComponent
+     name={props.name} label={props.label} error={props.error}>
+       <select
+         name={props.name}
+         className="form-control"
+         value={props.value}
+         onChange={props.onChange}
+         onBlur={props.onBlur} >
+        {props.option}
+       </select>
+    </ValidationFieldComponent>
+
+  );
+}

18 Normalizr/src/common/components/index.ts

@@ -0,0 +1,7 @@
+import {Input} from './Input';
+import {Select} from './Select';
+
+export {
+  Input,
+  Select
+}

18 Normalizr/src/common/components/validationFieldComponent.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+
+interface Props {
+  name: string;
+  label: string;
+  error?: string;
+}
+
+export class ValidationFieldComponent extends React.Component<Props, {}> {
+  constructor(props: Props) {
+    super(props);
+  }
+
+  public render() {
+    let wrapperClass: string = "form-group";
+    if (this.props.error && this.props.error.length > 0) {
+      wrapperClass += " " + "has-error";
+    }
+    return (
+      <div className={wrapperClass}>
+        <label htmlFor={this.props.name}>
+          {this.props.label}
+        </label>
+        <div className="field">
+          {this.props.children}
+
+          <div className="help-block">
+            {this.props.error}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

18 Normalizr/src/common/validations/validators.ts → 18 Normalizr/src/common/validations/required.ts

@@ -1,12 +1,12 @@
 import { FieldValidationResult } from "lc-form-validation";
+import { validationsEnums } from "../validationsEnums";
 
-// TODO: Harcoded strings and Id's isolate them in a config class
 export const requiredValidationHandler = (vm: any, value: any): FieldValidationResult => {
   const isFieldInformed: boolean = (value != null && value.length > 0);
-  const errorInfo: string = (isFieldInformed) ? "" : "Mandatory field";
+  const errorInfo: string = (isFieldInformed) ? "" : validationsEnums.REQUIRED.FIELD.MESSAGE;
 
   const fieldValidationResult: FieldValidationResult = new FieldValidationResult();
-  fieldValidationResult.type = "REQUIRED";
+  fieldValidationResult.type = validationsEnums.REQUIRED.FIELD.TYPE;
   fieldValidationResult.succeeded = isFieldInformed;
   fieldValidationResult.errorMessage = errorInfo;
 

18 Normalizr/src/common/validations/requiredId.ts

@@ -0,0 +1,14 @@
+import { FieldValidationResult } from "lc-form-validation";
+import { validationsEnums } from "../validationsEnums";
+
+export const requiredIdValidationHandler = (vm: any, value: {id: number}): FieldValidationResult => {
+  const isFieldInformed: boolean = (value != null && value.id && value.id > 0);
+  const errorInfo: string = (isFieldInformed) ? "" : validationsEnums.REQUIRED.FIELD.MESSAGE;
+
+  const fieldValidationResult: FieldValidationResult = new FieldValidationResult();
+  fieldValidationResult.type = validationsEnums.REQUIRED.FIELD.TYPE;
+  fieldValidationResult.succeeded = isFieldInformed;
+  fieldValidationResult.errorMessage = errorInfo;
+
+  return fieldValidationResult;
+};

18 Normalizr/src/common/validationsEnums.ts

@@ -1,4 +1,10 @@
 export const validationsEnums = {
+  REQUIRED: {
+    FIELD: {
+      TYPE: "REQUIRED_FIELD",
+      MESSAGE: "Mandatory field",
+    }
+  },
   EMAIL: {
     NOT_VALID: {
       TYPE: "EMAIL_NOT_VALID",

18 Normalizr/src/main.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { Router, Route, IndexRoute, hashHistory } from "react-router";
 import { syncHistoryWithStore} from "react-router-redux";
-import { createStore, applyMiddleware } from "redux";
+import { createStore, applyMiddleware, compose } from "redux";
 import { Provider } from "react-redux";
 import { reducers } from "./reducers";
 import { App } from "./app";
@@ -13,7 +13,10 @@ import reduxThunk from "redux-thunk";
 
 let store = createStore(
   reducers,
-  applyMiddleware(reduxThunk),
+  compose(
+    applyMiddleware(reduxThunk),
+    window['devToolsExtension'] ? window['devToolsExtension']() : f => f
+  )
 );
 
 const history = syncHistoryWithStore(hashHistory, store);

18 Normalizr/src/model/api/country.ts

@@ -0,0 +1,9 @@
+export class Country {
+  id: number;
+  name: string;
+
+  constructor() {
+    this.id = -1;
+    this.name = "";
+  }
+}

18 Normalizr/src/model/api/student.ts

@@ -3,12 +3,14 @@ export class Student {
   gotActiveTraining: boolean;
   fullname: string;
   email: string;
+  countryId: number;
 
   public constructor() {
     this.id = -1;
     this.gotActiveTraining = false;
     this.fullname = "";
     this.email = "";
+    this.countryId = -1;
   }
 }
 

18 Normalizr/src/model/mappers/countryMapper.ts

@@ -0,0 +1,19 @@
+import { Country } from '../api/country';
+import { CountryView } from '../view/countryView';
+
+class CountryMapper {
+  mapCountryToCountryView(country: Country): CountryView {
+    return {
+      id: country.id,
+      name: country.name
+    }
+  }
+
+  mapCountryListToCountryViewList(countrys: Country[]): CountryView[] {
+    return countrys.map((country) => {
+      return this.mapCountryToCountryView(country)
+    });
+  }
+}
+
+export const countryMapper = new CountryMapper();

18 Normalizr/src/model/mappers/studentMapper.ts

@@ -7,7 +7,11 @@ class StudentMapper {
       id: student.id,
       gotActiveTraining: student.gotActiveTraining,
       fullname: student.fullname,
-      email: student.email
+      email: student.email,
+      country: {
+        id: student.countryId,
+        name: ''
+      }
     }
   }
 

18 Normalizr/src/model/view/countryView.ts

@@ -0,0 +1,9 @@
+export class CountryView {
+  id: number;
+  name: string;
+
+  constructor() {
+    this.id = -1;
+    this.name = "";
+  }
+}

18 Normalizr/src/model/view/studentErrors.ts

@@ -3,4 +3,5 @@ import { FieldValidationResult } from "lc-form-validation";
 export class StudentErrors {
   fullname: FieldValidationResult;
   email: FieldValidationResult;
+  country: FieldValidationResult;
 }

18 Normalizr/src/model/view/studentView.ts

@@ -1,13 +1,17 @@
+import { CountryView } from './countryView';
+
 export class StudentView {
   id: number;
   gotActiveTraining: boolean;
   fullname: string;
   email: string;
+  country: CountryView;
 
   public constructor() {
     this.id = -1;
     this.gotActiveTraining = false;
     this.fullname = "";
     this.email = "";
+    this.country = new CountryView();
   }
 }

18 Normalizr/src/pages/login/login.validation.ts

@@ -1,5 +1,5 @@
 import { FieldValidationResult, BaseFormValidation } from "lc-form-validation";
-import { requiredValidationHandler } from "../../common/validations/validators";
+import { requiredValidationHandler } from "../../common/validations/required";
 import { emailValidationHandler } from "../../common/validations/email";
 
 class LoginFormValidation extends BaseFormValidation {

18 Normalizr/src/pages/student-detail/actions/getStudentRequestStart.ts

@@ -1,20 +1,13 @@
 import { actionsEnums } from "../../../common/actionsEnums";
 import { studentApi } from "../../../rest-api/student-api";
 import { getStudentRequestCompletedAction } from "./getStudentRequestCompleted";
-import { normalize } from 'normalizr'
-import { studentSchema } from '../../../schema/schema'
 
 export const getStudentRequestStartAction = (studentId: number) => {
   return function(dispatcher) {
     const promise = studentApi.getStudentById(studentId);
 
     promise.then(
       data => {
-        console.log(
-          'normalized response',
-          normalize(data, studentSchema)
-        );
-
         dispatcher(getStudentRequestCompletedAction(data));
       }
     );

18 Normalizr/src/pages/student-detail/actions/studentFieldValueChangedStart.ts

@@ -1,11 +1,11 @@
 import { studentFieldValueChangedCompleted } from "./studentFieldValueChangedCompleted";
 import { FieldValidationResult } from "lc-form-validation";
-import { loginFormValidation} from "../../login/login.validation";
+import { studentFormValidation} from "../student.validation";
 
 export function studentFieldValueChangedStart(viewModel: any, fieldName: string, value: any, event?: any) {
 
   return (dispatcher) => {
-    loginFormValidation.validateField(viewModel, fieldName, value, event).then(
+    studentFormValidation.validateField(viewModel, fieldName, value, event).then(
       (fieldValidationResult: FieldValidationResult) => dispatcher(studentFieldValueChangedCompleted(fieldName, value, fieldValidationResult ))
     );
   };