next-issue

import React, {useState, useEffect, useRef} from "react"
import {useRouter} from 'next/router'
import axios from "axios";
import {Helmet} from "react-helmet";

const Event = ({embed}) => {
    const router = useRouter()
    const [embedSRC, setEmbedSRC] = useState(embed);
    const [content, setContent] = useState(null)
    // useEffect(() => {
    //     const handleRouteChange = () => {
    //         setEmbedSRC(embed)
    //     }
    //     router.events.on('routeChangeStart', handleRouteChange)
    // }, []);


    const embedRef = useRef(null)

    useEffect(() => {
        const doEmbed = async () => {

            await axios.get(embedSRC).then(r => {
                setContent(r.data)

                const data = r.data.substring(16);
                const editedText = data.slice(0, -3)
                const dd = editedText.replaceAll("\\", '')

                // TRY WITH POSTSCRIBE
                const postscribe = require('postscribe');
                console.log("postscribe loaded?", postscribe);
                if (postscribe) {
                    // console.log(r)
                    // console.log(';asfd', embedRef)
                    postscribe("#records",  dd);
                }

                // TRY WITH A GOOD 'OL DOCUMENT WRITE
                // document.open();
                // document.write(dd);
                // document.close();

                // TRY WITH STATE
                // if (content) {
                //     console.log('first')
                //     document.open();
                //
                //     // document.write(`<script  src=${embedSRC}></script>`);
                //     // document.write(content);
                //     document.close();
                // } else {
                //     console.log('second')
                //     document.open();
                //     document.write(`<script id="test" src=${embedSRC}></script>`);
                //     // document.write(r.data);
                //     document.close();
                // }


            })

        };

        doEmbed();


    }, [embedRef, embedSRC]);


    setTimeout(() => {
        console.log('booom!');
        setEmbedSRC('https://app.infoweave.io/embed/uspa/ais/public/records/queryget?hierarchy_category_id=54&hierarchy_item_id=2&sub_hierarchy_item_id=8&v=913a35d1-1077-4f72-95eb-da9289d992ed');
    }, 8000);




    return (
        <>

            {/*<script type="text/javascript">{content}</script>*/}

            <div id="records"/>
            {/*{*/}
            {/*    content &&*/}
            {/*    <div dangerouslySetInnerHTML={{__html: `${content}`}}/>*/}
            {/*}*/}


        </>


        // <ChildComponent embedSRC={embedSRC} refprop={embedRef}/>

    )
}

export default Event;


const ChildComponent = (props) => {

    const setURL = () => {
        return {__html: `<script src=${props.embedSRC}></script>`}
    }

    return (
        <React.Fragment>
            {
                <div dangerouslySetInnerHTML={setURL()} ref={props.refprop}/>
            }
        </React.Fragment>
    )
}

export async function getStaticProps() {

    let embed = 'https://app.infoweave.io/embed/uspa/ais/public/records/queryget?hierarchy_category_id=54&hierarchy_item_id=2&sub_hierarchy_item_id=3&v=913a35d1-1077-4f72-95eb-da9289d992ed';
    return {
        props: {
            embed
        },
    };
}