Add rageshake submit state

src/settings/SettingsModal.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Modal } from "../Modal";
 import styles from "./SettingsModal.module.css";
 import { TabContainer, TabItem } from "../tabs/Tabs";
@@ -8,7 +8,7 @@ import { ReactComponent as DeveloperIcon } from "../icons/Developer.svg";
 import { SelectInput } from "../input/SelectInput";
 import { Item } from "@react-stately/collections";
 import { useMediaHandler } from "./useMediaHandler";
-import { FieldRow, InputField } from "../input/Input";
+import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";
 import { useSubmitRageshake } from "./useSubmitRageshake";
 
@@ -27,7 +27,8 @@ export function SettingsModal({
     setVideoInput,
   } = useMediaHandler(client);
 
-  const { submitRageshake, downloadDebugLog } = useSubmitRageshake();
+  const { submitRageshake, sending, sent, error, downloadDebugLog } =
+    useSubmitRageshake();
 
   return (
     <Modal
@@ -93,8 +94,19 @@ export function SettingsModal({
             />
           </FieldRow>
           <FieldRow>
-            <Button onPress={submitRageshake}>Send Debug Logs</Button>
+            <Button onPress={submitRageshake}>
+              {sent
+                ? "Debug Logs Sent"
+                : sending
+                ? "Sending Debug Logs..."
+                : "Send Debug Logs"}
+            </Button>
           </FieldRow>
+          {error && (
+            <FieldRow>
+              <ErrorMessage>{error.message}</ErrorMessage>
+            </FieldRow>
+          )}
           <FieldRow>
             <Button onPress={downloadDebugLog}>Download Debug Logs</Button>
           </FieldRow>

src/settings/useSubmitRageshake.js

@@ -1,4 +1,4 @@
-import { useCallback, useContext } from "react";
+import { useCallback, useContext, useState } from "react";
 import * as rageshake from "matrix-react-sdk/src/rageshake/rageshake";
 import pako from "pako";
 import { useClient } from "../ClientContext";
@@ -6,10 +6,23 @@ import { InspectorContext } from "../room/GroupCallInspector";
 
 export function useSubmitRageshake() {
   const { client } = useClient();
-  const [{ json, svg }] = useContext(InspectorContext);
+  const [{ json }] = useContext(InspectorContext);
+
+  const [{ sending, sent, error }, setState] = useState({
+    sending: false,
+    sent: false,
+    error: null,
+  });
 
   const submitRageshake = useCallback(
     async (opts) => {
+      if (sending) {
+        return;
+      }
+
+      try {
+        setState({ sending: true, sent: false, error: null });
+
         let userAgent = "UNKNOWN";
         if (window.navigator && window.navigator.userAgent) {
           userAgent = window.navigator.userAgent;
@@ -186,6 +199,12 @@ export function useSubmitRageshake() {
             body,
           }
         );
+
+        setState({ sending: false, sent: true, error: null });
+      } catch (error) {
+        setState({ sending: false, sent: false, error });
+        console.error(error);
+      }
     },
     [client]
   );
@@ -205,5 +224,5 @@ export function useSubmitRageshake() {
     }, 0);
   });
 
-  return { submitRageshake, downloadDebugLog };
+  return { submitRageshake, sending, sent, error, downloadDebugLog };
 }