From 507289d084139b35a3721a475a03affb11779bd0 Mon Sep 17 00:00:00 2001
From: mvrcusj <mvrcusj@gmail.com>
Date: Wed, 12 Aug 2020 21:15:38 -0400
Subject: [PATCH] Update clock with visitor thanks

---
 package-lock.json | 14 ++++++++-
 src/App.css       |  3 +-
 src/App.js        | 78 +++++++++++++++++++++++++----------------------
 3 files changed, 57 insertions(+), 38 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1099b71..88cc6df 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3737,6 +3737,8 @@
     },
     "@testing-library/jest-dom": {
       "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-4.2.4.tgz",
+      "integrity": "sha512-j31Bn0rQo12fhCWOUWy9fl7wtqkp7In/YP2p5ZFyRuiiB9Qs3g+hS4gAmDWONbAHcRmVooNJ5eOHQDCOmUFXHg==",
       "requires": {
         "@babel/runtime": "^7.5.1",
         "chalk": "^2.4.1",
@@ -3761,6 +3763,8 @@
     },
     "@testing-library/react": {
       "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-9.5.0.tgz",
+      "integrity": "sha512-di1b+D0p+rfeboHO5W7gTVeZDIK5+maEgstrZbWZSSvxDyfDRkkyBE1AJR5Psd6doNldluXlCWqXriUfqu/9Qg==",
       "requires": {
         "@babel/runtime": "^7.8.4",
         "@testing-library/dom": "^6.15.0",
@@ -3768,7 +3772,9 @@
       }
     },
     "@testing-library/user-event": {
-      "version": "7.2.1"
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz",
+      "integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA=="
     },
     "@types/babel__core": {
       "version": "7.1.9",
@@ -12760,6 +12766,8 @@
     },
     "react": {
       "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
+      "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -12966,6 +12974,8 @@
     },
     "react-dom": {
       "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
+      "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -12985,6 +12995,8 @@
     },
     "react-scripts": {
       "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.3.tgz",
+      "integrity": "sha512-oSnoWmii/iKdeQiwaO6map1lUaZLmG0xIUyb/HwCVFLT7gNbj8JZ9RmpvMCZ4fB98ZUMRfNmp/ft8uy/xD1RLA==",
       "requires": {
         "@babel/core": "7.9.0",
         "@svgr/webpack": "4.3.3",
diff --git a/src/App.css b/src/App.css
index 74b5e05..578faca 100644
--- a/src/App.css
+++ b/src/App.css
@@ -15,7 +15,8 @@
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 80vh;
+  max-height: 90vh;
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/src/App.js b/src/App.js
index 7230cc2..28b23a8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,59 +2,65 @@ import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 
-
-// @see https://reactjs.org/docs/rendering-elements.html#updating-the-rendered-element
 class Clock extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {date: new Date()};
+  // `constructor` is part of `class` and React components
+  // always called when an instance of our class is created
+  // aka `construct`d
+  constructor (props) {
+    super(props)
+    // bad code: this.state.displayTime = ''
+    // we must set state to an object
+    this.state = {
+      displayTime: ''
+    }
+    this.state = {
+      visitorName: ''
+    }
   }
 
-  componentDidMount() {
-    this.timerID = setInterval(
-      () => this.tick(),
-      1000
-    );
+  // `componentDidMount` is standard in React
+  // this is where we load data or otherwise initialize data
+  componentDidMount () {
+    this.timerID = setInterval(() => {
+      // call the `tick`
+      this.tick()
+    }, 1000);
   }
 
-  tick() {
+  // custom method as seen on reactjs.org
+  tick () {
+    console.log("In tick")
     this.setState({
-      date: new Date()
-    });
+      // displayTime: new Date().toString for 24 hour time
+      displayTime: new Date().toLocaleTimeString(),
+      visitorName: 'whoever you are!'
+
+    })
   }
 
-  render() {
+  // `render` is standard for getting html into our webpage
+  render () {
+    const displayTime = this.state.displayTime;
+    const visitorName = this.state.visitorName;
+
     return (
-      <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
-      </div>
-    );
+    <div className="clock">
+      <h2>Time is {displayTime}</h2>
+      <div>Thanks for visiting {visitorName}</div>
+    </div>
+    )
   }
 }
 
-// @see https://reactjs.org/docs/create-a-new-react-app.html
-function App() {
+function App () {
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload. Ok.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        <img src={logo} className="" alt="logo" />
       </header>
-      // See https://reactjs.org/docs/rendering-elements.html#updating-the-rendered-element
-      <Clock date={new Date()} />,
+      <Clock />
     </div>
-  );
+  )
 }
 
 export default App;