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 avoid 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.