Updated samples.

Author: crsanti

samples/react/00 SimpleForm/package.json

@@ -9,6 +9,7 @@
   "license": "ISC",
   "dependencies": {
     "bootstrap": "^3.3.7",
+    "core-js": "^2.4.1",
     "jquery": "^3.2.0",
     "lc-form-validation": "file:../../../lib/",
     "react": "^15.4.2",

samples/react/00 SimpleForm/src/actions/customerSaveCompleted.ts

@@ -6,7 +6,7 @@ interface ICustomerSaveCompletedAction {
   formValidationResult: FormValidationResult;
 }
 
-let customerSaveCompleted = (formValidationResult: FormValidationResult): ICustomerSaveCompletedAction => {
+const customerSaveCompleted = (formValidationResult: FormValidationResult): ICustomerSaveCompletedAction => {
   return {
     type: actionsDef.customer.CUSTOMER_SAVE_COMPLETED,
     formValidationResult

samples/react/00 SimpleForm/src/actions/customerSaveStart.ts

@@ -6,9 +6,8 @@ import { customerFormValidation } from '../components/sampleForm/validations/cus
 export function customerSaveStart(viewModel: any) {
 
   return (dispatcher) => {
-
     customerFormValidation.validateForm(viewModel).then(
-      function (formValidationResult: FormValidationResult) {
+      (formValidationResult: FormValidationResult) => {
         if (formValidationResult.succeeded) {
           // Call here the async call to save
           // additional logic or actins to be added on a real case

samples/react/00 SimpleForm/src/actions/customerUIInputStart.ts

@@ -7,7 +7,7 @@ export function customerUIInputStart(viewModel: any, fieldName: string, value: a
 
   return (dispatcher) => {
     customerFormValidation.validateField(viewModel, fieldName, value).then(
-      function (fieldValidationResult: FieldValidationResult) {
+      (fieldValidationResult: FieldValidationResult) => {
         dispatcher(customerUIInputCompleted(fieldName, value, fieldValidationResult));
       }
     );

samples/react/00 SimpleForm/src/actions/customerUInputCompleted.ts

@@ -8,8 +8,7 @@ interface ICustomerUIInputCompletedAction {
   fieldValidationResult: FieldValidationResult;
 }
 
-let customerUIInputCompleted = (fieldName: string, value: any, fieldValidationResult: FieldValidationResult): ICustomerUIInputCompletedAction => {
-
+const customerUIInputCompleted = (fieldName: string, value: any, fieldValidationResult: FieldValidationResult): ICustomerUIInputCompletedAction => {
   return {
     type: actionsDef.customer.CUSTOMER_PROCESS_UI_INPUT_COMPLETED,
     fieldName,

samples/react/00 SimpleForm/src/components/app.tsx

@@ -5,17 +5,13 @@ import { Provider } from 'react-redux';
 import reducers from '../reducers'
 import { ContainerSampleForm } from './sampleForm/sampleForm.container';
 
-let store = createStore(
-  reducers
-  , applyMiddleware(ReduxThunk)
+const store = createStore(
+  reducers,
+  applyMiddleware(ReduxThunk)
 );
 
-
-interface Props extends React.Props<App> {
-}
-
-export default class App extends React.Component<Props, {}> {
-  public render() {
+export default class App extends React.Component<{}, {}> {
+  render() {
     return (
       <Provider store={store}>
         <div className="container-fluid">

samples/react/00 SimpleForm/src/components/common/input.tsx

@@ -10,20 +10,18 @@ interface Props {
 }
 
 export class Input extends React.Component<Props, {}> {
-  constructor(props: Props) {
-    super(props);
-  }
-
-  public render() {
-    var wrapperClass: string = 'form-group';
+  render() {
+    let wrapperClass = 'form-group';
     if (this.props.error && this.props.error.length > 0) {
-      wrapperClass += " " + 'has-error';
+      wrapperClass = '${wrapperClass} has-error';
     }
+
     return (
       <div className={wrapperClass}>
         <label htmlFor={this.props.name}>{this.props.label}</label>
         <div className="field">
           <input type="text"
+            id={this.props.name}
             name={this.props.name}
             className="form-control"
             placeholder={this.props.placeholder}

samples/react/00 SimpleForm/src/components/sampleForm/sampleForm.tsx

@@ -11,19 +11,27 @@ interface Props extends React.Props<SampleForm> {
 }
 
 export class SampleForm extends React.Component<Props, {}> {
+
+  constructor(props) {
+    super(props);
+
+    this.onSave = this.onSave.bind(this);
+    this.updateMemberFromUI = this.updateMemberFromUI.bind(this);
+  }
+
   private updateMemberFromUI(event) {
-    var field = event.target.name;
-    var value = event.target.value;
+    const field = event.target.name;
+    const value = event.target.value;
 
     this.props.fireValidationFieldValueChanged(this.props.customer, field, value);
   }
 
-  private OnSave(event) {
+  private onSave(event) {
     event.preventDefault();
     this.props.saveCustomer(this.props.customer);
   }
 
-  public render() {
+  render() {
     return (
       <form>
         <h1>Customer Form</h1>
@@ -32,18 +40,18 @@ export class SampleForm extends React.Component<Props, {}> {
           name="fullname"
           label="full name"
           value={this.props.customer.fullname}
-          onChange={this.updateMemberFromUI.bind(this)}
+          onChange={this.updateMemberFromUI}
           error={(!this.props.errors.fullname) ? '' : this.props.errors.fullname.errorMessage} />
 
         <Input
           name="password"
           label="password"
           value={this.props.customer.password}
-          onChange={this.updateMemberFromUI.bind(this)}
+          onChange={this.updateMemberFromUI}
           error={(!this.props.errors.password) ? '' : this.props.errors.password.errorMessage} />
 
         <input type="submit" value="Save" className="btn btn-default"
-          onClick={this.OnSave.bind(this)} />
+          onClick={this.onSave} />
       </form>
     );
   }

samples/react/00 SimpleForm/src/index.tsx

@@ -3,5 +3,6 @@ import * as ReactDOM from 'react-dom';
 import App from './components/app';
 
 ReactDOM.render(
-  <App />
-  , document.getElementById('root'));
+  <App />,
+  document.getElementById('root'),
+);

samples/react/00 SimpleForm/src/reducers/customer.ts

@@ -10,13 +10,13 @@ export class CustomerState {
   customer: CustomerEntity;
   customerErrors: CustomerErrors;
 
-  public constructor() {
+  constructor() {
     this.customer = new CustomerEntity();
     this.customerErrors = new CustomerErrors();
   }
 }
 
-export let customerReducer = (state: CustomerState = new CustomerState(), action): CustomerState => {
+export const customerReducer = (state: CustomerState = new CustomerState(), action): CustomerState => {
   switch (action.type) {
     case actionsDef.customer.CUSTOMER_PROCESS_UI_INPUT_COMPLETED:
       return customerProcessUIInputCompleted(state, action);
@@ -30,11 +30,11 @@ export let customerReducer = (state: CustomerState = new CustomerState(), action
 }
 
 function customerProcessUIInputCompleted(state: CustomerState, action: ICustomerUIInputCompletedAction): CustomerState {
-  let newCustomer: CustomerEntity = Object.assign({}, state.customer, {
+  const newCustomer: CustomerEntity = Object.assign({}, state.customer, {
     [action.fieldName]: action.value
   });
 
-  let newCustomerErrors: CustomerErrors = Object.assign({}, state.customerErrors, {
+  const newCustomerErrors: CustomerErrors = Object.assign({}, state.customerErrors, {
     [action.fieldName]: action.fieldValidationResult
   });
 
@@ -45,7 +45,7 @@ function customerProcessUIInputCompleted(state: CustomerState, action: ICustomer
 }
 
 function customerSaveCompleted(state: CustomerState, action: ICustomerSaveCompletedAction): CustomerState {
-  let newCustomerErrors: CustomerErrors = Object.assign({}, state.customerErrors);
+  const newCustomerErrors: CustomerErrors = Object.assign({}, state.customerErrors);
 
   action.formValidationResult.fieldErrors.forEach(fieldValidationResult => {
     newCustomerErrors[fieldValidationResult.key] = fieldValidationResult;