show unverified tab indicator on sidebar (#1862)

src/app/hooks/useDeviceList.ts

@@ -0,0 +1,35 @@
+/* eslint-disable import/prefer-default-export */
+import { useState, useEffect } from 'react';
+import { CryptoEvent, IMyDevice } from 'matrix-js-sdk';
+import { CryptoEventHandlerMap } from 'matrix-js-sdk/lib/crypto';
+import { useMatrixClient } from './useMatrixClient';
+
+export function useDeviceList() {
+  const mx = useMatrixClient();
+  const [deviceList, setDeviceList] = useState<IMyDevice[] | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const updateDevices = () =>
+      mx.getDevices().then((data) => {
+        if (!isMounted) return;
+        setDeviceList(data.devices || []);
+      });
+    updateDevices();
+
+    const handleDevicesUpdate: CryptoEventHandlerMap[CryptoEvent.DevicesUpdated] = (users) => {
+      const userId = mx.getUserId();
+      if (userId && users.includes(userId)) {
+        updateDevices();
+      }
+    };
+
+    mx.on(CryptoEvent.DevicesUpdated, handleDevicesUpdate);
+    return () => {
+      mx.removeListener(CryptoEvent.DevicesUpdated, handleDevicesUpdate);
+      isMounted = false;
+    };
+  }, [mx]);
+  return deviceList;
+}