Ian Chow - World Clock

package.json

@@ -3,7 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bootstrap": "^5.3.2",
     "react": "^18.1.0",
+    "react-bootstrap": "^2.9.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1"
   },

src/App.js

@@ -2,19 +2,29 @@ import React from "react";
 import logo from "./logo.png";
 import "./App.css";
 
+import WorldClock from "./WorldClock";
+
 class App extends React.Component {
   render() {
+    const clockData = [
+      "Europe/Athens",
+      "America/Los_Angeles",
+      "Asia/Singapore",
+    ];
     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.
-          </p>
+          {/* ParentComponent App passes this.prop.timeZone to the child component Clock and Clock can then render that prop's timeZone value*/}
+          <WorldClock clockData={clockData} />
         </header>
       </div>
     );
   }
 }
 
 export default App;
+
+// We declare a new Javascript date object {new Date().toString()} in the <p> tags and rendered as a string
+
+// We add state which will store the date and time that we will update every second in this.state. We now have this.state.date to add new Date() to the JSX

src/Clock.js

@@ -0,0 +1,39 @@
+import React from "react";
+
+class Clock extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { date: new Date() };
+  }
+
+  componentDidMount() {
+    // Set date value in state every second to current date and time
+    // Save setInterval timerId in class variable (this.timerId) for teardown in another class method, componentWillUnmount
+    this.timerId = setInterval(() => {
+      this.setState({
+        date: new Date(),
+      });
+    });
+  }
+
+  componentWillUnmount() {
+    // Unmounting: When the timer component is removed from the DOM, React calls this method right before removing the component to perform cleanup tasks like clearing timers
+    clearInterval(this.timerId);
+  }
+
+  render() {
+    // Render just the date value stored in the state variable and remove any _ in the strings
+
+    return (
+      // We access the ParentComponenet's, App.js, timeZone prop in our ChildComponent here
+      <p>
+        {/* {formattedTimeZone}:&nbsp; */}
+        {this.state.date.toLocaleString("en-GB", {
+          timeZone: this.props.timeZone,
+        })}
+      </p>
+    );
+  }
+}
+
+export default Clock;

src/WorldClock.js

@@ -0,0 +1,25 @@
+import React from "react";
+import Clock from "./Clock";
+import { Container, Row, Col } from "react-bootstrap";
+
+class WorldClock extends React.Component {
+  render() {
+    const clockData = this.props.clockData;
+    return (
+      <Container>
+        {clockData.map((val, index) => (
+          <Row className="border">
+            <Col md={6} className="border">
+              Current time in {val}:
+            </Col>
+            <Col md={6} className="border">
+              <Clock timeZone={val} />
+            </Col>
+          </Row>
+        ))}
+      </Container>
+    );
+  }
+}
+
+export default WorldClock;

src/index.css

@@ -11,3 +11,11 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.border {
+  border: 1px solid white;
+}
+
+img {
+  margin-bottom: 50px;
+}

src/index.js

@@ -2,6 +2,20 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
+import "bootstrap/dist/css/bootstrap.min.css";
 
+// Rendering the root React element of the React app
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(<App />);
+
+// function tick() {
+//   const element = (
+//     <div>
+//       <h1>Hello, world!</h1>
+//       <h2>It is {new Date().toLocaleTimeString()}.</h2>
+//     </div>
+//   );
+//   root.render(element);
+// }
+
+// setInterval(tick, 1000); // setInterval() calls the tick function every 1000 milliseconds -> re-generating the <h2> element and the date and time every second