Function TypingFunctions

apps/web/ui/Thread/UsersTyping.tsx:37–81

({
  isUserTyping,
  setUserTyping,
  userTyping,
  currentUser,
}: {
  isUserTyping: boolean;
  setUserTyping: React.Dispatch<React.SetStateAction<boolean>>;
  userTyping: ({
    typing,
    username,
  }: {
    typing: boolean;
    username: string;
  }) => void;
  currentUser: SerializedUser | null;
})

}

export function TypingFunctions({
  isUserTyping,
  setUserTyping,
  userTyping,
  currentUser,
}: {
  isUserTyping: boolean;
  setUserTyping: React.Dispatch<React.SetStateAction<boolean>>;
  userTyping: ({
    typing,
    username,
  }: {
    typing: boolean;
    username: string;
  }) => void;
  currentUser: SerializedUser | null;
}) {
  let typingTimer: NodeJS.Timeout;

  const userStartsTyping = function () {
    if (isUserTyping) {
      return;
    }
    setUserTyping(true);
    userTyping({ typing: true, username: currentUser?.displayName! });
  };

  const userStopsTyping = function () {
    clearTimeout(typingTimer);
    setUserTyping(false);
    userTyping({ typing: false, username: currentUser?.displayName! });
  };

  const onKeyDown = () => {
    userStartsTyping();
    clearTimeout(typingTimer);
  };

  const onKeyUp = () => {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(userStopsTyping, typingTimeout);
  };

  return { onKeyDown, onKeyUp };
}