docs.js

import React from 'react'
import DocViewer from '../src/components/doc/Viewer'
import { setupSaxParser } from 'docutils-react/lib/getComponentForXmlSax'
import regeneratorRuntime from "regenerator-runtime";

export default class Viewer extends React.Component {
    constructor(props) {
	super(props);
    }
    
    static async getInitialProps({req}) {
	if(req) {
	    const server = true;
	    console.log('get initial props');
	    return new Promise((resolve, reject) => {
		const parser = Viewer.getDocumentParser({ server, resolve, reject });
		if(!parser) {
		    throw new Error("no parser");
		}
		Viewer.getDocumentStream({ server, parser, docName: 'index' })
		    .then((stream) => Viewer.handleDocumentStream({ server, stream, parser }))
		    .catch(err => console.log(err.stack));
	    });
	}
	return Promise.resolve({ server: false });
//	    const fetch = require('node-fetch');
//	    const axios = r<equire('axios');
//	    axios.get('/static/xml/index.xml').then(response =>{
//		
//	    });
    }

    componentDidMount()
    {
    }

    static getDocumentUrl(props) {
	return `http://localhost/xml/${props.docName}.xml`;
    }

    static nodeStreamReader(stream, parser) {
	let chunk;
	while(null !== (chunk = stream.read())) {
	    // console.log(chunk);
            parser.write(chunk);
	}
    }

    static handleNodeStream({stream, parser}) {
	if(!parser) {
	    throw new Error("Need parser");
	}
	stream.setEncoding('utf8');
	stream.on('readable', () => Viewer.nodeStreamReader(stream, parser));
	return new Promise((resolve, reject) => {
	    stream.on('end', () => { parser.close(); resolve({o: true});});
	});
    }
    
    static handleDocumentStream(props) {
	const { server, stream, parser } = props;
	if(server) {
	    return Viewer.handleNodeStream({stream, parser});
	} else {
	    return Viewer.handleWebStream({stream, parser});
	}
    }

    static getDocumentParser({ server, resolve, reject }) {
	const context = {};
	const { parser } = setupSaxParser({context});
	parser.onend = () => {
	    const nodes = context.siblings[0].map(f => f());
	    const r = nodes.filter(React.isValidElement)[0];
	    if(!React.isValidElement(r)) {
		reject(new Error("Invalid Element"));
	    }
	    const data = context.nodes[0].dataChildren.map(f => f()).filter(e => e[0] === 'document')[0];
	    resolve({ component: r });
	};
	return parser;
    }

    static getDocumentStream(props) {
	const url = Viewer.getDocumentUrl(props);
	let fetch;
	if(props.server) {
	    fetch = require('node-fetch');
	} else {
	    fetch = window.fetch;
	}
        return fetch(url).then(
	    response => {
		if(!response.ok) {
		    throw new Error(`Unable to retreieve URL ${url}`);
		}
		return response;
	    }).then(response => {
		if(props.server) {
		    return response.body;
		} else {
		    return response.body.getReader();
		}
	    });
    }
    /*

    updateDocument() {
        const context = { getComponent: this.props.getComponent };
        const { parser } = setupSaxParser({ context });
	parser.onend = (() => {
	    const nodes = context.siblings[0].map(f => f());
	    const r = nodes.filter(React.isValidElement)[0];
	    if(!React.isValidElement(r)) {
                console.dir(r);
                console.log('invalid element');
		return;
	    }
	    const data = context.nodes[0].dataChildren.map(f => f()).filter(e => e[0] === 'document')[0];
	    if(this.props.handleData) {
		this.props.handleData(data);
	    }
	    this.setState({component: r, loading: false}, () => {
		console.log('state has been set');
		if(me.timerId) {
		    clearInterval(me.timerId);
		    this.timerId = undefined;
		}
		this.props.onComplete({ docName: me.props.docName});
	    });
        }).bind(this);

	let fetch;
	if(this.props.server) {
	    fetch = require('node-fetch');
	} else {
	    fetch = window.fetch;
	}
*/
/*	
	    .catch(err => {
		console.log(`fetch error ${url}`);
		if(err.stack) {
		    console.log(err.stack);
		}
		console.log(err);
		this.setState({loading: false});
		if(this.props.onFail) {
		    this.props.onFail(this.props.docName, err);
		}
	    });
    }
*/

    render() {
	const props = { };
	console.log('hello props');
	console.log(Object.keys(this.props));
//	getDocumentStream={Viewer.getDocumentStream}
	return <div>{this.props.component}</div>;// <DocViewer handleDocumentStream={this.handleDocumentStream} getDocumentUrl={() => ''}/>
    }
}

Do you like using redux ? I got a taste of it but i dont really know it well enough to have too many opinions about (state tracking?) im just a php programmer the only state persistence i know is $_SESSION and that var makes it p easy to keep track of : https://gitlab.com/netcrave/cerulean

Millie is fine https://imgur.com/gallery/a7tiOHm but she has kidney disease (shes almost 15) and needs subcutaneous fluids about 3 times a week for the rest of her life :/ but im ok to do it and i love her lots. She would love to meet you sometime