29 can send multiple messages 2 (#406)

* disables send button when message is sending * prevents pressing enter to send msessage while message is sending * puts classname back onto wrapper div * run formatter * stops send button having different styling when loading * runs formatter
ScottLogic · Oct 18, 2023 · e9dca4f · e9dca4f
1 parent 93aae49
commit e9dca4f
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 deletions.
diff --git a/frontend/src/components/ChatBox/ChatBox.tsx b/frontend/src/components/ChatBox/ChatBox.tsx
@@ -88,7 +88,7 @@ function ChatBox({
 
   function inputKeyUp(event: KeyboardEvent<HTMLTextAreaElement>) {
     // shift+enter shouldn't send message
-    if (event.key === "Enter" && !event.shiftKey) {
+    if (event.key === "Enter" && !event.shiftKey && !isSendingMessage) {
       // asynchronously send the message
       void sendChatMessage();
     }

diff --git a/frontend/src/components/ThemedButtons/LoadingButton.tsx b/frontend/src/components/ThemedButtons/LoadingButton.tsx
@@ -9,7 +9,11 @@ function LoadingButton({
   isLoading?: boolean;
 }) {
   return (
-    <ThemedButton {...buttonProps}>
+    <ThemedButton
+      isDisabled={isLoading}
+      appearsDifferentWhenDisabled={false}
+      {...buttonProps}
+    >
       {isLoading ? (
         <span className="loader">
           <ThreeDots width="24px" color="white" />

diff --git a/frontend/src/components/ThemedButtons/ThemedButton.css b/frontend/src/components/ThemedButtons/ThemedButton.css
@@ -27,7 +27,7 @@
   color: var(--main-button-active-hover-text-colour);
 }
 
-.themed-button[disabled] {
+.themed-button.appearsDifferentWhenDisabled[disabled] {
   background-color: var(--main-button-disabled-background-colour);
   color: var(--main-button-disabled-text-colour);
   cursor: default;

diff --git a/frontend/src/components/ThemedButtons/ThemedButton.tsx b/frontend/src/components/ThemedButtons/ThemedButton.tsx
@@ -7,15 +7,20 @@ export interface ThemedButtonProps {
   isDisabled?: boolean;
   isSelected?: boolean;
   onClick: () => void;
+  appearsDifferentWhenDisabled?: boolean;
 }
 
 function ThemedButton({
   children,
   onClick,
   isDisabled = false,
   isSelected = false,
+  appearsDifferentWhenDisabled = true,
 }: ThemedButtonProps) {
-  const buttonClass = clsx("themed-button", { selected: isSelected });
+  const buttonClass = clsx("themed-button", {
+    selected: isSelected,
+    appearsDifferentWhenDisabled: appearsDifferentWhenDisabled,
+  });
 
   return (
     <button className={buttonClass} onClick={onClick} disabled={isDisabled}>