Refactor all of Devtools and tidy it up (#8097)

src/components/views/dialogs/devtools/VerificationExplorer.tsx

@@ -0,0 +1,101 @@
+/*
+Copyright 2022 Michael Telatynski <7t3chguy@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useContext, useEffect, useState } from "react";
+import {
+    PHASE_CANCELLED,
+    PHASE_DONE,
+    PHASE_READY,
+    PHASE_REQUESTED,
+    PHASE_STARTED,
+    PHASE_UNSENT,
+    VerificationRequest,
+    VerificationRequestEvent,
+} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import { CryptoEvent } from "matrix-js-sdk/src/crypto";
+
+import { useTypedEventEmitter, useTypedEventEmitterState } from "../../../../hooks/useEventEmitter";
+import { _t, _td } from "../../../../languageHandler";
+import MatrixClientContext from "../../../../contexts/MatrixClientContext";
+import BaseTool, { DevtoolsContext, IDevtoolsProps } from "./BaseTool";
+
+const PHASE_MAP = {
+    [PHASE_UNSENT]: _td("Unsent"),
+    [PHASE_REQUESTED]: _td("Requested"),
+    [PHASE_READY]: _td("Ready"),
+    [PHASE_DONE]: _td("Done"),
+    [PHASE_STARTED]: _td("Started"),
+    [PHASE_CANCELLED]: _td("Cancelled"),
+};
+
+const VerificationRequestExplorer: React.FC<{
+    txnId: string;
+    request: VerificationRequest;
+}> = ({ txnId, request }) => {
+    const [, updateState] = useState();
+    const [timeout, setRequestTimeout] = useState(request.timeout);
+
+    /* Re-render if something changes state */
+    useTypedEventEmitter(request, VerificationRequestEvent.Change, updateState);
+
+    /* Keep re-rendering if there's a timeout */
+    useEffect(() => {
+        if (request.timeout == 0) return;
+
+        /* Note that request.timeout is a getter, so its value changes */
+        const id = setInterval(() => {
+            setRequestTimeout(request.timeout);
+        }, 500);
+
+        return () => { clearInterval(id); };
+    }, [request]);
+
+    return (<div className="mx_DevTools_VerificationRequest">
+        <dl>
+            <dt>{ _t("Transaction") }</dt>
+            <dd>{ txnId }</dd>
+            <dt>{ _t("Phase") }</dt>
+            <dd>{ PHASE_MAP[request.phase] || request.phase }</dd> // TODO
+            <dt>{ _t("Timeout") }</dt>
+            <dd>{ Math.floor(timeout / 1000) }</dd>
+            <dt>{ _t("Methods") }</dt>
+            <dd>{ request.methods && request.methods.join(", ") }</dd>
+            <dt>{ _t("Requester") }</dt>
+            <dd>{ request.requestingUserId }</dd>
+            <dt>{ _t("Observe only") }</dt>
+            <dd>{ JSON.stringify(request.observeOnly) }</dd>
+        </dl>
+    </div>);
+};
+
+const VerificationExplorer = ({ onBack }: IDevtoolsProps) => {
+    const cli = useContext(MatrixClientContext);
+    const context = useContext(DevtoolsContext);
+
+    const requests = useTypedEventEmitterState(cli, CryptoEvent.VerificationRequest, () => {
+        return cli.crypto.inRoomVerificationRequests["requestsByRoomId"]?.get(context.room.roomId)
+            ?? new Map<string, VerificationRequest>();
+    });
+
+    return <BaseTool onBack={onBack}>
+        { Array.from(requests.entries()).reverse().map(([txnId, request]) =>
+            <VerificationRequestExplorer txnId={txnId} request={request} key={txnId} />,
+        ) }
+        { requests.size < 1 && _t("No verification requests found") }
+    </BaseTool>;
+};
+
+export default VerificationExplorer;