Add rageshake request modal

src/settings/SettingsModal.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { Modal } from "../Modal";
 import styles from "./SettingsModal.module.css";
 import { TabContainer, TabItem } from "../tabs/Tabs";
@@ -8,10 +8,9 @@ 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, ErrorMessage } from "../input/Input";
+import { FieldRow, InputField } from "../input/Input";
 import { Button } from "../button";
-import { useSubmitRageshake } from "./useSubmitRageshake";
-import { Subtitle } from "../typography/Typography";
+import { useDownloadDebugLog } from "./rageshake";
 
 export function SettingsModal({
   client,
@@ -28,10 +27,7 @@ export function SettingsModal({
     setVideoInput,
   } = useMediaHandler(client);
 
-  const [description, setDescription] = useState("");
-
-  const { submitRageshake, sending, sent, error, downloadDebugLog } =
-    useSubmitRageshake();
+  const downloadDebugLog = useDownloadDebugLog();
 
   return (
     <Modal
@@ -96,31 +92,6 @@ export function SettingsModal({
               onChange={(e) => setShowInspector(e.target.checked)}
             />
           </FieldRow>
-          <Subtitle>Feedback</Subtitle>
-          <FieldRow>
-            <InputField
-              id="description"
-              name="description"
-              label="Description"
-              type="text"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-            />
-          </FieldRow>
-          <FieldRow>
-            <Button onPress={() => submitRageshake({ description })}>
-              {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/rageshake.js

@@ -1,8 +1,9 @@
-import { useCallback, useContext, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import * as rageshake from "matrix-react-sdk/src/rageshake/rageshake";
 import pako from "pako";
 import { useClient } from "../ClientContext";
 import { InspectorContext } from "../room/GroupCallInspector";
+import { useModalTriggerState } from "../Modal";
 
 export function useSubmitRageshake() {
   const { client } = useClient();
@@ -171,24 +172,26 @@ export function useSubmitRageshake() {
           } catch (e) {}
         }
 
-        const logs = await rageshake.getLogsForReport();
+        if (opts.sendLogs) {
+          const logs = await rageshake.getLogsForReport();
 
-        for (const entry of logs) {
-          // encode as UTF-8
-          let buf = new TextEncoder().encode(entry.lines);
+          for (const entry of logs) {
+            // encode as UTF-8
+            let buf = new TextEncoder().encode(entry.lines);
 
-          // compress
-          buf = pako.gzip(buf);
+            // compress
+            buf = pako.gzip(buf);
 
-          body.append("compressed-log", new Blob([buf]), entry.id);
-        }
+            body.append("compressed-log", new Blob([buf]), entry.id);
+          }
 
-        if (json) {
-          body.append(
-            "file",
-            new Blob([JSON.stringify(json)], { type: "text/plain" }),
-            "groupcall.txt"
-          );
+          if (json) {
+            body.append(
+              "file",
+              new Blob([JSON.stringify(json)], { type: "text/plain" }),
+              "groupcall.txt"
+            );
+          }
         }
 
         await fetch(
@@ -209,6 +212,17 @@ export function useSubmitRageshake() {
     [client]
   );
 
+  return {
+    submitRageshake,
+    sending,
+    sent,
+    error,
+  };
+}
+
+export function useDownloadDebugLog() {
+  const [{ json }] = useContext(InspectorContext);
+
   const downloadDebugLog = useCallback(() => {
     const blob = new Blob([JSON.stringify(json)], { type: "application/json" });
     const url = URL.createObjectURL(blob);
@@ -222,7 +236,47 @@ export function useSubmitRageshake() {
       URL.revokeObjectURL(url);
       el.parentNode.removeChild(el);
     }, 0);
-  });
+  }, [json]);
 
-  return { submitRageshake, sending, sent, error, downloadDebugLog };
+  return downloadDebugLog;
+}
+
+export function useRageshakeRequest() {
+  const { client } = useClient();
+
+  const sendRageshakeRequest = useCallback(
+    (roomId) => {
+      client.sendEvent(roomId, "org.matrix.rageshake_request", {});
+    },
+    [client]
+  );
+
+  return sendRageshakeRequest;
+}
+
+export function useRageshakeRequestModal(roomId) {
+  const { modalState, modalProps } = useModalTriggerState();
+  const { client } = useClient();
+
+  useEffect(() => {
+    const onEvent = (event) => {
+      const type = event.getType();
+
+      if (
+        type === "org.matrix.rageshake_request" &&
+        roomId === event.getRoomId() &&
+        client.getUserId() !== event.getSender()
+      ) {
+        modalState.open();
+      }
+    };
+
+    client.on("event", onEvent);
+
+    return () => {
+      client.removeListener("event", onEvent);
+    };
+  }, [modalState.open, roomId]);
+
+  return { modalState, modalProps };
 }