adds examples for lecture-19/leic51d

code/js/react-intro/src/example-lecture-19/App.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Counter } from './Counter';
+import { Timer } from './Timer';
+import { useState } from 'react';
+
+export function App() {
+    const [observedPeriod, setPeriod] = useState(1)
+    function handleChange(newValue) {
+        setPeriod(newValue)
+    }
+    return (
+        <div>
+            <Counter title="The counter" onChange={handleChange}/>
+            <Timer title="The timer" period={observedPeriod}/>
+        </div>
+    )
+}

code/js/react-intro/src/example-lecture-19/Counter.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { useState } from 'react';
+
+type CounterProps = {
+  title: string;
+  onChange?: (newValue: number) => void;
+};
+
+export function Counter({ title, onChange }: CounterProps) {
+  const [observedCounter, setCounter] = useState(1);
+  function incHandler() {
+    setCounter(observedCounter + 1);
+    if (onChange) {
+      onChange(observedCounter + 1);
+    }
+  }
+  function decHandler() {
+    if (observedCounter > 1) {
+      setCounter(observedCounter - 1);
+      if (onChange) {
+        onChange(observedCounter - 1);
+      }
+    }
+  }
+  return (
+    <div>
+      <h2>{title}</h2>
+      <h3>{observedCounter}</h3>
+      <button onClick={incHandler}>+</button>
+      <button onClick={decHandler}>-</button>
+    </div>
+  );
+}

code/js/react-intro/src/example-lecture-19/Timer.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+
+type TimerProps = {
+  title: string;
+  period: number;
+};
+
+export function Timer({ title, period }: TimerProps) {
+  const [observedValue, setValue] = useState(0);
+  const [observedIsRunning, setIsRunning] = useState(true);
+  useEffect(() => {
+    // the effect function
+    console.log('setInterval');
+    const intervalId = setInterval(() => {
+      if (observedIsRunning) {
+        setValue(currValue => currValue + 1);
+      }
+    }, period * 1000);
+    return () => {
+      console.log('clearInterval');
+      clearInterval(intervalId);
+    };
+  }, [period, observedIsRunning]);
+  function handleResume() {
+    setIsRunning(true);
+  }
+  function handlePause() {
+    setIsRunning(false);
+  }
+  const resumeIsEnabled: boolean = observedIsRunning == false;
+  const pauseIsEnabled: boolean = observedIsRunning == true;
+  return (
+    <div>
+      <h2>{title}</h2>
+      <h3>{observedValue}</h3>
+      <button disabled={!resumeIsEnabled} onClick={handleResume}>
+        resume
+      </button>
+      <button disabled={!pauseIsEnabled} onClick={handlePause}>
+        pause
+      </button>
+      <p>period: {period}</p>
+    </div>
+  );
+}

code/js/react-intro/src/index.tsx

@@ -7,11 +7,8 @@ import { createRoot } from 'react-dom/client';
 // import { App } from './example-lecture-18-counter/App';
 // import { App } from './example-lecture-18-stopwatch/App';
 // import { Message } from './example-lecture-18/models';
-import { App } from './example-lecture-18-leic51n/App';
+// import { App } from './example-lecture-18-leic51n/App';
+import {App} from './example-lecture-19/App'
 
 const root = createRoot(document.getElementById('main-div'));
-let title = 0;
-setInterval(() => {
-  title += 1;
-  root.render(<App title={title} />);
-}, 1000);
+root.render(<App />);