Refactor raised hand indicator and add tests.

src/reactions/RaisedHandIndicator.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import styles from "./RaisedHandIndicator.module.css";
+
+export function RaisedHandIndicator({
+  raisedHandTime,
+}: {
+  raisedHandTime?: Date;
+}) {
+  const [raisedHandDuration, setRaisedHandDuration] = useState("");
+
+  useEffect(() => {
+    if (!raisedHandTime) {
+      return;
+    }
+    const calculateTime = () => {
+      const totalSeconds = Math.ceil(
+        (new Date().getTime() - raisedHandTime.getTime()) / 1000,
+      );
+      const seconds = totalSeconds % 60;
+      const minutes = Math.floor(totalSeconds / 60);
+      setRaisedHandDuration(
+        `${minutes < 10 ? "0" : ""}${minutes}:${seconds < 10 ? "0" : ""}${seconds}`,
+      );
+    };
+    const to = setInterval(calculateTime, 1000);
+    calculateTime();
+    return (): void => clearInterval(to);
+  }, [setRaisedHandDuration, raisedHandTime]);
+
+  if (raisedHandTime) {
+    return (
+      <div className={styles.raisedHandWidget}>
+        <div className={styles.raisedHand}>
+          <span role="img" aria-label="raised hand">
+            ✋
+          </span>
+        </div>
+        <p>{raisedHandDuration}</p>
+      </div>
+    );
+  }
+
+  return null;
+}