import React, {Component, useState, useEffect, useLayoutEffect, useRef} from 'react';
import {withRouter, RouteComponentProps} from 'react-router-dom'

const TSTest: React.FC = () => {
    const [count, setCount] = useState(0);

    function handleAlertClick() {
        setTimeout(() => {
            alert('You clicked on: ' + count);
        }, 3000);
    }

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
            <button onClick={handleAlertClick}>
                Show alert
            </button>
        </div>
    );
}

function Message({text}: { text: string }) {
    const [message, setMessage] = useState<string | null>(null)

    useEffect(() => {
        setMessage(text)
    })

    return <span>{message}</span>
}

export default withRouter(TSTest);