Rewrite Class (4h)

A plugin can rewrite a class from core or other plugin.

Config Rewrite

In the plugin, we register rewrite in file etc/config.js.

For example: We rewrite MenuComponent

import rewriteMenu from "../view/menu";
import ModuleConfigAbstract from "../../ModuleConfigAbstract";

class HelloWorldConfig extends ModuleConfigAbstract{
    module = ['helloworld'];
    rewrite = {
        service: {
            // "UserService": BlaService
        },
        container: {
            // "LoginContainer": HelloWorldContainer
        },
        component: {
            MenuComponent: rewriteMenu
        },
    };
}

export default (new HelloWorldConfig());

We have 7 type of class can be rewrite:

service
resource_model
repository
epic
container
component
data_resource

To determine which type of class, we can find Factory type in source code. Example:

/**
 *
 * @type {MenuComponent}
 */
const component = ComponentFactory.get(MenuComponent);

Rewrite Implementation

To implement rewrite, we need using javascript function. For example, we implement rewrite for MenuComponent as:

import React, {Fragment} from "react";

/**
 * Rewrite MenuComponent
 *
 * @param {MenuComponent} MenuComponent
 * @returns {RewriteClass}
 */
export default function(MenuComponent) {
    return class Rewrite extends MenuComponent {
        template() {
            let template = super.template();
            return (
              <Fragment>
                Hello World!
                {template}
              </Fragment>
            )
        }
    }
}

Rewrite Epic

Epic is a Function, not a Class. So rewriting epic has a little difference. For example, we implement rewrite for LocationEpic as:

import {Observable} from "rxjs/Rx";
import UserConstant from "../../../view/constant/UserConstant";
import LocationAction from "../../../view/action/LocationAction";

export default function () {
    let LocationEpic = function (action$) {
        let LocationService = require("../../../service/LocationService").default;
        return action$.ofType(UserConstant.USER_ASSIGN_POS)
            .mergeMap(action => Observable.from(
                LocationService.assignPos(
                    action.posId, action.locationId, action.currentStaffId))
                .map((response) => {
                    console.log(response);
                    return LocationAction.assignPosResponse();
                })
                .catch((error) =>{
                        return Observable.of(LocationAction.assignPosError(error.message));
                    }
                )
            );
    };
    LocationEpic.className = "LocationEpic";
    return LocationEpic;
}

Exercise: Use rewrite to display SKU of product to product list of POS