Add feature to release hand raised when the tile indicator is clicked. (#2721)

* Refactor to add support for lowering hand on indicator click.

* Cleanup and lint.

* fix icon being a little off

src/reactions/RaisedHandIndicator.tsx

@@ -5,7 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ReactNode, useEffect, useState } from "react";
+import {
+  MouseEventHandler,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 import classNames from "classnames";
 import "@formatjs/intl-durationformat/polyfill";
 import { DurationFormat } from "@formatjs/intl-durationformat";
@@ -23,13 +29,26 @@ export function RaisedHandIndicator({
   raisedHandTime,
   minature,
   showTimer,
+  onClick,
 }: {
   raisedHandTime?: Date;
   minature?: boolean;
   showTimer?: boolean;
+  onClick?: () => void;
 }): ReactNode {
   const [raisedHandDuration, setRaisedHandDuration] = useState("");
 
+  const clickCallback = useCallback<MouseEventHandler<HTMLButtonElement>>(
+    (event) => {
+      if (!onClick) {
+        return;
+      }
+      event.preventDefault();
+      onClick();
+    },
+    [onClick],
+  );
+
   // This effect creates a simple timer effect.
   useEffect(() => {
     if (!raisedHandTime || !showTimer) {
@@ -52,26 +71,40 @@ export function RaisedHandIndicator({
     return (): void => clearInterval(to);
   }, [setRaisedHandDuration, raisedHandTime, showTimer]);
 
-  if (raisedHandTime) {
-    return (
+  if (!raisedHandTime) {
+    return;
+  }
+
+  const content = (
+    <div
+      className={classNames(styles.raisedHandWidget, {
+        [styles.raisedHandWidgetLarge]: !minature,
+      })}
+    >
       <div
-        className={classNames(styles.raisedHandWidget, {
-          [styles.raisedHandWidgetLarge]: !minature,
+        className={classNames(styles.raisedHand, {
+          [styles.raisedHandLarge]: !minature,
         })}
       >
-        <div
-          className={classNames(styles.raisedHand, {
-            [styles.raisedHandLarge]: !minature,
-          })}
-        >
-          <span role="img" aria-label="raised hand">
-            ✋
-          </span>
-        </div>
-        {showTimer && <p>{raisedHandDuration}</p>}
+        <span role="img" aria-label="raised hand">
+          ✋
+        </span>
       </div>
+      {showTimer && <p>{raisedHandDuration}</p>}
+    </div>
+  );
+
+  if (onClick) {
+    return (
+      <button
+        aria-label="lower raised hand"
+        className={styles.button}
+        onClick={clickCallback}
+      >
+        {content}
+      </button>
     );
   }
 
-  return null;
+  return content;
 }