React Clock

React + Typescript cheat sheet

Create a Clock class component that will update the time every second using a given markup:

Here is the working version

print current time on the page on page load;
- use .toUTCString().slice(-12, -4) methods do awoid timezone issues;
update the time every second using the window.setInterval;
start the timer only when the component is added to the page (componentDidMount).- every second print the time in the DevTools using console.info method (not the console.log);
make the App a class component;
add the hasClock property to the App state;
the Clock should be visible only when the hasClock is true;

hide the Clock on a right mouse click in the document (contextmenu event):

document.addEventListener('contextmenu', (event) => {
  event.preventDefault(); // not to show the context menu

  // put your code here
});

show the Clock on a left mouse click in the document (click event):
```
document.addEventListener('click', () => {});
```
the time should not be printed to the console when the Clock is hidden (componentWillUnmount);
add the clockName having Clock-0 default value to the App state;
pass it to the Clock to be shown near the time (see the markup):
```
<Clock name={this.state.clockName} />
```
update the clockName every 3300ms with a new value generated by existing getRandomName function;
each time the name is changed, the Clock must print a message with an old name and a new name using the console.debug method (use componentDidUpdate):
```
Renamed from oldName to newName
```
to see console.debug messages enable the verbose level in DevTools console:

check in the console that a renaming message occurs after each 3-4 time messages.

Instructions

Implement a solution following the React task guideline.
Use the React TypeScript cheatsheet.
Open one more terminal and run tests with npm test to ensure your solution is correct.
Replace <your_account> with your Github username in the DEMO LINK and add it to the PR description.