Add support for displaying the duration of a raised hand.

src/useReactions.tsx

@@ -5,11 +5,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import React, { createContext, useContext, useState, ReactNode } from "react";
+import React, {
+  createContext,
+  useContext,
+  useState,
+  ReactNode,
+  useCallback,
+} from "react";
 
 interface ReactionsContextType {
-  raisedHands: string[];
-  setRaisedHands: React.Dispatch<React.SetStateAction<string[]>>;
+  raisedHands: Record<string, Date>;
+  addRaisedHand: (userId: string, date: Date) => void;
+  removeRaisedHand: (userId: string) => void;
   supportsReactions: boolean;
   setSupportsReactions: React.Dispatch<React.SetStateAction<boolean>>;
 }
@@ -31,14 +38,33 @@ export const ReactionsProvider = ({
 }: {
   children: ReactNode;
 }): JSX.Element => {
-  const [raisedHands, setRaisedHands] = useState<string[]>([]);
+  const [raisedHands, setRaisedHands] = useState<Record<string, Date>>({});
   const [supportsReactions, setSupportsReactions] = useState<boolean>(true);
 
+  const addRaisedHand = useCallback(
+    (userId: string, time: Date) => {
+      setRaisedHands({
+        ...raisedHands,
+        [userId]: time,
+      });
+    },
+    [raisedHands],
+  );
+
+  const removeRaisedHand = useCallback(
+    (userId: string) => {
+      delete raisedHands[userId];
+      setRaisedHands(raisedHands);
+    },
+    [raisedHands],
+  );
+
   return (
     <ReactionsContext.Provider
       value={{
         raisedHands,
-        setRaisedHands,
+        addRaisedHand,
+        removeRaisedHand,
         supportsReactions,
         setSupportsReactions,
       }}