Exception handling in react with typescript

withRenderCtrl.tsx

import React from 'react';
import Loading from '../../commons/loading/loading';
import ErrorBoundary from '../../commons/error/errorBoundary';
import EmptyHint from '../../commons/empty/emptyHint';

export interface WithRenderCtrlProp {
  isDataReady: boolean;
  isLoading: boolean;
  customEmptyMessage?: string | null;
  errorMessage: string | null;
}

const withRenderCtrl = <P extends object>(Component: React.ComponentType<P>) =>
  class WithLoading extends React.Component<P & WithRenderCtrlProp> {
    render() {
      const { isDataReady, isLoading, errorMessage, customEmptyMessage, ...props } = this.props;

      if (isDataReady) return <Component {...props as P} />;
      if (errorMessage) return <ErrorBoundary errorMessage={errorMessage}/>;
      if (isLoading) return <Loading />;
      return <EmptyHint customMessage={customEmptyMessage}/>;
    }
  }

export default withRenderCtrl;

emptyHint.tsx

import React from 'react';

interface IProps {
  customMessage?: string | null;
}
 // custom message is not necessary, if it is not given then a common message will be shown
const EmptyHint = ({ customMessage = null }: IProps) => (
  <div>
    <div>{customMessage ? customMessage : 'common message for no data found '}</div>
  </div>
);

export default EmptyHint;

errorBoundary.tsx

import React from 'react';

interface IState {
  error: any;
  info: any;
}

interface IProps {
  errorMessage: any | null;
}

// also it has componentDidCatch method
class ErrorBoundary extends React.Component<IProps, IState> {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      info: null,
    };
  }

  componentDidCatch(error, info) {
    this.setState({
      error: error,
      info: info,
    });
  }

  render() {
    if (this.state.error || this.props.errorMessage) {
      return (
        <div>
          <h1>...... :( </h1>
            {this.state.error && this.state.error.toString()}
            {this.props.errorMessage && this.props.errorMessage.toString()}
        </div>
      );
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

loading.tsx

import React from 'react';

const Loading = () => (
    <div>Wait for loading....</div>
);

export default Loading;

example:

import React from 'react';

// define props, states vs. ...

class Example extends React.PureComponent {

  // ...
  // when you calling your api, you should set loading, error props.
  async componentDidMount() {
    const { setMyData,  setLoader, setError } = this.props;

    setLoader(true);
    const myData = await getMyData()
      .catch((error) => {
        setError(error);
      });
    setLoader(false);

    setMyData(myData);
  }

  render(){
    const { myData, isLoading, error } = this.props;
    // usually your main component gets data, sets error & loading cases. It has callback methods vs.
    // The component named with Body includes html, css stuffs.
    // and you should define your body component as following. (with wraping our HOC named as withRenderCtrl)
    // export default withRenderCtrl(ExampleBody);
    return(
        <ExampleBody
          myData={myData}
          isLoading={isLoading}
          errorMessage={error}
          isDataReady={myData && !myData.isEmpty()}
          customEmptyMessage="my custom empty data >> this props is not necessary"
        />
    );
  }
}

export default Example;

References: https://github.com/kenneth1003/react-render-ctrl

React common api calls with axios (typescript)

Firstly, create a component called as "request.ts"

import axios from 'axios';
import I from 'immutable';

const apiURL = axios.create({
  baseURL: process.env.MY_API_URL, // example: localhost:8080/
});

const request = function (options) {

  const onSuccess = function (response) {
    const data = response.data;

    if (data.myErrorFromApiAsSuccessStatus) {
      return myStructureError(data.myErrorFromApiAsSuccessStatus);
    }
    return I.fromJS({ data });
  };

  const onError = function (error) {
    if (error.response && error.response.data && error.response.data.myErrorFromApiAsSuccessStatus) {
      return myStructureError(error.response.data.myErrorFromApiAsSuccessStatus);
    }

    console.log(`
      url: ${options.url}
      message:  ${error.message}
      stackTrace: ${error.stack}
    `);

    return Promise.reject(error.message);
  };

  function myStructureError(myErrorFromApiAsSuccessStatus) {
    const error = (`
      url: ${options.url}
      message: ${myErrorFromApiAsSuccessStatus.message}
    `);
    console.log(error);

    return Promise.reject(error);
  }

  return apiURL(options)
    .then(onSuccess)
    .catch(onError);
};

export default request;

Use request component in your api calls as following: (api.ts)

import request from '../request';

export const getMyData = async(mydata: string) => {
  return request({
    url:  '/my-data',
    method: 'POST',
    data: {
      mydata : mydata,
    },
  });
};

react - fusioncharts example with typescript (stackedcolumn2d)

import React from 'react';
import FusionCharts from 'fusioncharts';
import charts from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';

// add this line if you have licence:  FusionCharts.options['creditLabel'] = false;

charts(FusionCharts);

interface IOwnProps {
  myData: any;
}

type IProp = IOwnProps;

class StackedChart extends React.PureComponent<IProp> {
  constructor(props: IProp) {
    super(props);
    this.getToolText = this.getToolText.bind(this);
  }

  getToolText(label: string, customData: string) {
    return (
      `${label}` +
      ' | ' +
      `${customData}` +
      '<br/>' +
      '<div style="width:110px;color:red;margin-left:1px;margin-top:2px;"> ' +
        'Custom Tooltip' +
      '</div>'
    );
  }

  render() {
    // const { myData } = this.props;

    const dataSource = {
      chart: {
        theme: 'fusion',
        bgColor: '#FFFFFF',
        alternateHGridColor:'#FFFFFF',
        formatNumberScale: 1,
        numberPrefix: '$',
        numDivLines: 6,
        textOutline:0,

/*      decimalSeperator: ',',
        decimals: 0,
        forceDecimals: 0,
        yAxisValueDecimals: 0,*/

        divLineThickness: 1,
        divLineAlpha: 10,

        useRoundEdges: 0,
        usePlotGradientColor: 0,

        showSum: '1',
        showLegend: 1,
        showcanvasborder: 0,
        showPlotBorder: 0,

        baseFont:'Arial, "Helvetica Neue", Helvetica, sans-serif',
        baseFontSize: 14,
        baseFontColor: '#000000',

        labelFont:'Arial, "Helvetica Neue", Helvetica, sans-serif',
        labelFontSize: 14,
        labelFontColor: '#000000',

        valueFont:'Arial, "Helvetica Neue", Helvetica, sans-serif',
        valueFontSize: 14,
        valueFontColor: '#000000',

        outCnvBaseFont:'Arial, "Helvetica Neue", Helvetica, sans-serif',
        outCnvBaseFontSize: 14,
        outCnvBaseFontColor: '#000000',

        legendItemFont:'Arial, "Helvetica Neue", Helvetica, sans-serif',
        legendItemFontSize: 14,
        legendItemFontColor: '#000000',
        legendIconScale: 1,
        legendBorderThickness: 0,
        legendShadow: 0,

      },
      categories: [
        {
          category: [
            {
              label: 'Label1',
            },
            {
              label: 'Label2',
            },
            {
              label: 'Label3',
            },
            {
              label: 'Label4',
            },
          ],
        },
      ],
      dataset: [
        {
          seriesname: 'Serie 1',
          showValues: false,
          color: '#003f5ec',
          data: [
            {
              value: 1000,
              toolText: this.getToolText(
                '$label',
                'my custom text 1'
              ),
            },
            {
              value: 2000,
              toolText: this.getToolText(
                '$label',
                'my custom text 2'
              ),
            },
            {
              value: 50,
              toolText: this.getToolText(
                '$label',
                'my custom text 3'
              ),
            },
            {
              value: 3000,
              toolText: this.getToolText(
                '$label',
                'my custom text 4'
              ),
            },
          ],
        },
        {
          seriesname: 'Serie 2',
          showValues: false,
          color: '#ffe600',
          data: [
            {
              value: 4000,
              toolText: this.getToolText(
                '$label',
                'my custom text 5'
              ),
            },
            {
              value: 2000,
              toolText: this.getToolText(
                '$label',
                'my custom text 6'
              ),
            },
            {
              value: 800,
              toolText: this.getToolText(
                '$label',
                'my custom text 7'
              ),
            },
            {
              value: 6600,
              toolText: this.getToolText(
                '$label',
                'my custom text 8'
              ),
            },
          ],
        },
      ],
    }

    return (
      <div id="my-chart-container">
        <ReactFC
          type="stackedcolumn2d"
          width="100%"
          height="250"
          dataFormat="JSON"
          dataSource={dataSource}
        />
      </div>
    );
  }
}

export default StackedChart;