react-async-poll.js

react-async-poll.js

import React from 'react';
import 'whatwg-fetch'; // https://www.npmjs.com/package/whatwg-fetch
import asyncPoll from 'react-async-poll';
import ReactDOM from "react-dom";

const Status = props => {
    let text = '';
    const {inProgress, isSuccessful, isFailed, stopPolling} = props;

    console.log(props);
    if (inProgress === true) {
        text = 'publishing in progress';
    }
    if (inProgress === false) {
        console.log('stopping...');
        stopPolling();
    }
    if (isSuccessful === true) {
        text = 'publishing successful';
        console.log('stopping...');
        stopPolling();
    }
    if (isFailed === true) {
        text = 'publishing failed';
        console.log('stopping...');
        stopPolling();
    }

    return (
        <div>
            {text}
        </div>
    )
}

const onInterval = (props, dispatch) => {
    return fetch('/admin/jenkins/status', {
        method: 'GET',
        credentials: 'include',
        headers: {
            'Content-Type': 'application/vnd.api+json'
        }
    }).then(function (response) {
        console.log('fetch then response', response);
        return response.json();
    }).then(
        function (response) {
            dispatch(response);
        }
    ).catch(function (ex) {
        console.log('parsing failed', ex)
    });
};

const PollingStatus = asyncPoll(
    5 * 1000,
    onInterval
)
(Status);

const appRender = elem => Component => props => ReactDOM.render(<Component {...props} />, elem);
const app = appRender(document.getElementById('jenkins-status-container'))(PollingStatus);
const dispatch = (data) => {
    console.log(this);
    app(data); // <--- dispatch property is not passed to PollingStatus wrapper component, thus poll will never stop
};

const initialData = {
    isSuccessful: null,
    isFailed: null,
    inProgress: null,

    dispatch: dispatch,
    consoleOutput: '',
    result: ''
};

app(initialData);