Create edit training page

[brauliodiez]

Implement Edit Trainin Page from Admin module.

Wiki: Admin Edit Training

• Right now there dummy page under src/pages/admin/training/edit.

Steps:

• Create a fork.

• Start by the simple case, just edit the training data, then move on to next scenarios.

• Create new branch called feature/<issue_number>_Create_Edit_Training_Page (where issue_number is the id of this issue given by Github).

  • Good news: We have alreay a training entity under model.
  • rest-api/trainig.ts: We need here a method to extract a training given an Id:

Pseudocode proposal:

  getTrainingById(id: number): Promise<TrainingEntity> {
    const training = this.trainingData.find(tr => tr.id === id);
    return Promise.resolve(training);
  }

• Let's go now start bottom up:
  • Let's create an action file (please follow TDD on this):

./src/pages/admin/training/edit/actions/trainingFetchRequest
(pseudocode)

import { adminActionEnums } from '../../../../../common/actionEnums/admin'
import { TrainingEntity} from '../../../../../model/training'
import { trainingApi } from '../../../../../rest-api'

export const trainingFetchRequestStarted = (trainingId) => {
  return function(dispatcher) {
    const promise = trainigApi.getTrainingById(trainingId);

    promise.then(
      data => dispatcher(trainingFetchRequestCompleted(data))
    )

    return promise;
  }
}

export const trainingFetchRequestCompleted = (training: TrainingEntity) => ({
    type: adminActionEnums.GET_TRAINING_REQUEST_COMPLETED,
    payload: training
});

• Now it's time to jump into the reduces side, we are going to create a new reducer (please follow TDD on this)

./src/reducers/adminTrainings.ts

import { Action } from 'redux'
import { TrainingEntity } from '../model/trainingEntity'
import { adminActionEnums} from '../common/actionEnums/admin'


export class AdminTrainingState {
  training :  TrainingEntity;

  public constructor() {
    this.training = new Training();
  }
}

export const adminTrainingReducer = (state : AdminTrainingState = new AdminTrainingState(), action) => {
  switch(action.type) {
    case adminActionEnums.GET_TRAINING_REQUEST_COMPLETED:
      return handleGetTrainingRequestCompleted(state, action.payload);
  }

  return state;
}

const handleGetTrainingRequestCompleted=
  (state : AdminTrainingState, payload : TrainingEntity) => {
      return {
         ...state,
         training: payload
      };
}

• We will add it to the combinereducers:

./src/reducers/index.ts

import { combineReducers } from 'redux';
import { AdminStudentState, adminStudentReducer} from './adminStudent'
import { AdminTraningState, adminTrainingReducer} from './adminTraining'

export interface IAppState {
  adminStudent : AdminStudentState,
 adminTrainingState: AdminTraningState
}

export const reducers = combineReducers<IAppState>({
  adminStudent: adminStudentReducer,
  adminTrainingReducer: adminTrainingReducer
});

Next steps:

• Implement first tab. only UI for now.

• Implement tabs component using react-toolbox.

• Add form validations.

• Implement first tab with functionality (Save).

• Implement second tab.

• Important: Follow this work flow

[nasdan]

Assigned to @baltika9