gem-hunter

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.log method;
• add the next comment above the console.log of console.warn command to ignore linter error

  // eslint-disable-next-line no-console
  console.log('some message');

• 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: MouseEvent) => {
    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.warn method (use componentDidUpdate):

  Renamed from oldName to newName
  

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

• Install Prettier Extention and use this VSCode settings to enable format on save.
• 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.