handle error in loading screen (#1823)

* handle client boot error in loading screen

* use sync state hook in client root

* add loading screen options

* removed extra condition in loading finish

* add sync connection status bar

src/app/molecules/global-notification/GlobalNotification.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import initMatrix from '../../../client/initMatrix';
 import { openReusableContextMenu } from '../../../client/action/navigation';
 import { getEventCords } from '../../../util/common';
 
@@ -14,6 +13,7 @@ import NotificationSelector from './NotificationSelector';
 import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
 
 import { useAccountData } from '../../hooks/useAccountData';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 export const notifType = {
   ON: 'on',
@@ -52,7 +52,7 @@ export function getTypeActions(type, highlightValue = false) {
 }
 
 function useGlobalNotif() {
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const pushRules = useAccountData('m.push_rules')?.getContent();
   const underride = pushRules?.global?.underride ?? [];
   const rulesToType = {

src/app/molecules/global-notification/IgnoreUserList.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import './IgnoreUserList.scss';
 
-import initMatrix from '../../../client/initMatrix';
 import * as roomActions from '../../../client/action/room';
 
 import Text from '../../atoms/text/Text';
@@ -14,10 +13,12 @@ import SettingTile from '../setting-tile/SettingTile';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
 import { useAccountData } from '../../hooks/useAccountData';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 function IgnoreUserList() {
   useAccountData('m.ignored_user_list');
-  const ignoredUsers = initMatrix.matrixClient.getIgnoredUsers();
+  const mx = useMatrixClient();
+  const ignoredUsers = mx.getIgnoredUsers();
 
   const handleSubmit = (evt) => {
     evt.preventDefault();
@@ -26,7 +27,7 @@ function IgnoreUserList() {
     const userIds = value.split(' ').filter((v) => v.match(/^@\S+:\S+$/));
     if (userIds.length === 0) return;
     ignoreInput.value = '';
-    roomActions.ignore(userIds);
+    roomActions.ignore(mx, userIds);
   };
 
   return (
@@ -49,7 +50,7 @@ function IgnoreUserList() {
                     key={uId}
                     text={uId}
                     iconColor={CrossIC}
-                    onClick={() => roomActions.unignore([uId])}
+                    onClick={() => roomActions.unignore(mx, [uId])}
                   />
                 ))}
               </div>

src/app/molecules/global-notification/KeywordNotification.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import './KeywordNotification.scss';
 
-import initMatrix from '../../../client/initMatrix';
 import { openReusableContextMenu } from '../../../client/action/navigation';
 import { getEventCords } from '../../../util/common';
 
@@ -21,6 +20,7 @@ import { useAccountData } from '../../hooks/useAccountData';
 import {
   notifType, typeToLabel, getActionType, getTypeActions,
 } from './GlobalNotification';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 const DISPLAY_NAME = '.m.rule.contains_display_name';
 const ROOM_PING = '.m.rule.roomnotif';
@@ -28,7 +28,7 @@ const USERNAME = '.m.rule.contains_user_name';
 const KEYWORD = 'keyword';
 
 function useKeywordNotif() {
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const pushRules = useAccountData('m.push_rules')?.getContent();
   const override = pushRules?.global?.override ?? [];
   const content = pushRules?.global?.content ?? [];

src/app/molecules/image-pack/ImagePack.jsx

@@ -4,7 +4,6 @@ import React, {
 import PropTypes from 'prop-types';
 import './ImagePack.scss';
 
-import initMatrix from '../../../client/initMatrix';
 import { openReusableDialog } from '../../../client/action/navigation';
 import { suffixRename } from '../../../util/common';
 
@@ -19,6 +18,7 @@ import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
 import ImagePackProfile from './ImagePackProfile';
 import ImagePackItem from './ImagePackItem';
 import ImagePackUpload from './ImagePackUpload';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 const renameImagePackItem = (shortcode) => new Promise((resolve) => {
   let isCompleted = false;
@@ -63,8 +63,7 @@ function getUsage(usage) {
   return 'both';
 }
 
-function isGlobalPack(roomId, stateKey) {
-  const mx = initMatrix.matrixClient;
+function isGlobalPack(mx, roomId, stateKey) {
   const globalContent = mx.getAccountData('im.ponies.emote_rooms')?.getContent();
   if (typeof globalContent !== 'object') return false;
 
@@ -75,13 +74,13 @@ function isGlobalPack(roomId, stateKey) {
 }
 
 function useRoomImagePack(roomId, stateKey) {
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const room = mx.getRoom(roomId);
 
-  const packEvent = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
-  const pack = useMemo(() => (
-    ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent())
-  ), [room, stateKey]);
+  const pack = useMemo(() => {
+    const packEvent = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
+    return ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent())
+  }, [room, stateKey]);
 
   const sendPackContent = (content) => {
     mx.sendStateEvent(roomId, 'im.ponies.room_emotes', content, stateKey);
@@ -94,14 +93,14 @@ function useRoomImagePack(roomId, stateKey) {
 }
 
 function useUserImagePack() {
-  const mx = initMatrix.matrixClient;
-  const packEvent = mx.getAccountData('im.ponies.user_emotes');
-  const pack = useMemo(() => (
-    ImagePackBuilder.parsePack(mx.getUserId(), packEvent?.getContent() ?? {
+  const mx = useMatrixClient();
+  const pack = useMemo(() => {
+    const packEvent = mx.getAccountData('im.ponies.user_emotes');
+    return ImagePackBuilder.parsePack(mx.getUserId(), packEvent?.getContent() ?? {
       pack: { display_name: 'Personal' },
       images: {},
     })
-  ), []);
+  }, [mx]);
 
   const sendPackContent = (content) => {
     mx.setAccountData('im.ponies.user_emotes', content);
@@ -223,10 +222,10 @@ function removeGlobalImagePack(mx, roomId, stateKey) {
 }
 
 function ImagePack({ roomId, stateKey, handlePackDelete }) {
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const room = mx.getRoom(roomId);
   const [viewMore, setViewMore] = useState(false);
-  const [isGlobal, setIsGlobal] = useState(isGlobalPack(roomId, stateKey));
+  const [isGlobal, setIsGlobal] = useState(isGlobalPack(mx, roomId, stateKey));
 
   const { pack, sendPackContent } = useRoomImagePack(roomId, stateKey);
 
@@ -331,7 +330,7 @@ ImagePack.propTypes = {
 };
 
 function ImagePackUser() {
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const [viewMore, setViewMore] = useState(false);
 
   const { pack, sendPackContent } = useUserImagePack();
@@ -397,7 +396,7 @@ function ImagePackUser() {
 
 function useGlobalImagePack() {
   const [, forceUpdate] = useReducer((count) => count + 1, 0);
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
 
   const roomIdToStateKeys = new Map();
   const globalContent = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? { rooms: {} };
@@ -419,13 +418,13 @@ function useGlobalImagePack() {
     return () => {
       mx.removeListener('accountData', handleEvent);
     };
-  }, []);
+  }, [mx]);
 
   return roomIdToStateKeys;
 }
 
 function ImagePackGlobal() {
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const roomIdToStateKeys = useGlobalImagePack();
 
   const handleChange = (roomId, stateKey) => {

src/app/molecules/image-pack/ImagePackUpload.jsx

@@ -2,7 +2,6 @@ import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './ImagePackUpload.scss';
 
-import initMatrix from '../../../client/initMatrix';
 import { scaleDownImage } from '../../../util/common';
 
 import Text from '../../atoms/text/Text';
@@ -10,9 +9,10 @@ import Button from '../../atoms/button/Button';
 import Input from '../../atoms/input/Input';
 import IconButton from '../../atoms/button/IconButton';
 import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 function ImagePackUpload({ onUpload }) {
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const inputRef = useRef(null);
   const shortcodeRef = useRef(null);
   const [imgFile, setImgFile] = useState(null);

src/app/molecules/image-upload/ImageUpload.jsx

@@ -2,7 +2,6 @@ import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './ImageUpload.scss';
 
-import initMatrix from '../../../client/initMatrix';
 
 import Text from '../../atoms/text/Text';
 import Avatar from '../../atoms/avatar/Avatar';
@@ -10,6 +9,7 @@ import Spinner from '../../atoms/spinner/Spinner';
 import RawIcon from '../../atoms/system-icons/RawIcon';
 
 import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 function ImageUpload({
   text, bgColor, imageSrc, onUpload, onRequestRemove,
@@ -17,12 +17,13 @@ function ImageUpload({
 }) {
   const [uploadPromise, setUploadPromise] = useState(null);
   const uploadImageRef = useRef(null);
+  const mx = useMatrixClient();
 
   async function uploadImage(e) {
     const file = e.target.files.item(0);
     if (file === null) return;
     try {
-      const uPromise = initMatrix.matrixClient.uploadContent(file);
+      const uPromise = mx.uploadContent(file);
       setUploadPromise(uPromise);
 
       const res = await uPromise;
@@ -35,7 +36,7 @@ function ImageUpload({
   }
 
   function cancelUpload() {
-    initMatrix.matrixClient.cancelUpload(uploadPromise);
+    mx.cancelUpload(uploadPromise);
     setUploadPromise(null);
     uploadImageRef.current.value = null;
   }

src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.jsx

@@ -3,7 +3,6 @@ import './ExportE2ERoomKeys.scss';
 
 import FileSaver from 'file-saver';
 
-import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import { encryptMegolmKeyFile } from '../../../util/cryptE2ERoomKeys';
 
@@ -13,8 +12,10 @@ import Input from '../../atoms/input/Input';
 import Spinner from '../../atoms/spinner/Spinner';
 
 import { useStore } from '../../hooks/useStore';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 function ExportE2ERoomKeys() {
+  const mx = useMatrixClient();
   const isMountStore = useStore();
   const [status, setStatus] = useState({
     isOngoing: false,
@@ -40,7 +41,7 @@ function ExportE2ERoomKeys() {
       type: cons.status.IN_FLIGHT,
     });
     try {
-      const keys = await initMatrix.matrixClient.exportRoomKeys();
+      const keys = await mx.exportRoomKeys();
       if (isMountStore.getItem()) {
         setStatus({
           isOngoing: true,

src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.jsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import './ImportE2ERoomKeys.scss';
 
-import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import { decryptMegolmKeyFile } from '../../../util/cryptE2ERoomKeys';
 
@@ -14,8 +13,10 @@ import Spinner from '../../atoms/spinner/Spinner';
 import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
 
 import { useStore } from '../../hooks/useStore';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 function ImportE2ERoomKeys() {
+  const mx = useMatrixClient();
   const isMountStore = useStore();
   const [keyFile, setKeyFile] = useState(null);
   const [status, setStatus] = useState({
@@ -45,7 +46,7 @@ function ImportE2ERoomKeys() {
           type: cons.status.IN_FLIGHT,
         });
       }
-      await initMatrix.matrixClient.importRoomKeys(JSON.parse(keys));
+      await mx.importRoomKeys(JSON.parse(keys));
       if (isMountStore.getItem()) {
         setStatus({
           isOngoing: false,

src/app/molecules/room-aliases/RoomAliases.jsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './RoomAliases.scss';
 
-import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import { Debounce } from '../../../util/common';
 import { isRoomAliasAvailable } from '../../../util/matrixUtil';
@@ -16,8 +15,10 @@ import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
 import SettingTile from '../setting-tile/SettingTile';
 
 import { useStore } from '../../hooks/useStore';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 function useValidate(hsString) {
+  const mx = useMatrixClient();
   const [debounce] = useState(new Debounce());
   const [validate, setValidate] = useState({ alias: null, status: cons.status.PRE_FLIGHT });
 
@@ -62,7 +63,7 @@ function useValidate(hsString) {
         msg: `validating ${alias}...`,
       });
 
-      const isValid = await isRoomAliasAvailable(alias);
+      const isValid = await isRoomAliasAvailable(mx, alias);
       setValidate(() => {
         if (e.target.value !== value) {
           return { alias: null, status: cons.status.PRE_FLIGHT };
@@ -79,8 +80,7 @@ function useValidate(hsString) {
   return [validate, setValidateToDefault, handleAliasChange];
 }
 
-function getAliases(roomId) {
-  const mx = initMatrix.matrixClient;
+function getAliases(mx, roomId) {
   const room = mx.getRoom(roomId);
 
   const main = room.getCanonicalAlias();
@@ -95,7 +95,7 @@ function getAliases(roomId) {
 }
 
 function RoomAliases({ roomId }) {
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const room = mx.getRoom(roomId);
   const userId = mx.getUserId();
   const hsString = userId.slice(userId.indexOf(':') + 1);
@@ -103,7 +103,7 @@ function RoomAliases({ roomId }) {
   const isMountedStore = useStore();
   const [isPublic, setIsPublic] = useState(false);
   const [isLocalVisible, setIsLocalVisible] = useState(false);
-  const [aliases, setAliases] = useState(getAliases(roomId));
+  const [aliases, setAliases] = useState(getAliases(mx, roomId));
   const [selectedAlias, setSelectedAlias] = useState(null);
   const [deleteAlias, setDeleteAlias] = useState(null);
   const [validate, setValidateToDefault, handleAliasChange] = useValidate(hsString);
@@ -140,7 +140,7 @@ function RoomAliases({ roomId }) {
     return () => {
       isUnmounted = true;
     };
-  }, [roomId]);
+  }, [mx, roomId]);
 
   const toggleDirectoryVisibility = () => {
     mx.setRoomDirectoryVisibility(roomId, isPublic ? 'private' : 'public');

src/app/molecules/room-emojis/RoomEmojis.jsx

@@ -2,7 +2,6 @@ import React, { useReducer, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './RoomEmojis.scss';
 
-import initMatrix from '../../../client/initMatrix';
 import { suffixRename } from '../../../util/common';
 
 import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
@@ -10,9 +9,10 @@ import Text from '../../atoms/text/Text';
 import Input from '../../atoms/input/Input';
 import Button from '../../atoms/button/Button';
 import ImagePack from '../image-pack/ImagePack';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 function useRoomPacks(room) {
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const [, forceUpdate] = useReducer((count) => count + 1, 0);
 
   const packEvents = room.currentState.getStateEvents('im.ponies.room_emotes');
@@ -75,7 +75,7 @@ function useRoomPacks(room) {
 }
 
 function RoomEmojis({ roomId }) {
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const room = mx.getRoom(roomId);
 
   const { usablePacks, createPack, deletePack } = useRoomPacks(room);

src/app/molecules/room-encryption/RoomEncryption.jsx

@@ -2,16 +2,16 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import './RoomEncryption.scss';
 
-import initMatrix from '../../../client/initMatrix';
 
 import Text from '../../atoms/text/Text';
 import Toggle from '../../atoms/button/Toggle';
 import SettingTile from '../setting-tile/SettingTile';
 
 import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 function RoomEncryption({ roomId }) {
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const room = mx.getRoom(roomId);
   const encryptionEvents = room.currentState.getStateEvents('m.room.encryption');
   const [isEncrypted, setIsEncrypted] = useState(encryptionEvents.length > 0);

src/app/molecules/room-history-visibility/RoomHistoryVisibility.jsx

@@ -2,11 +2,11 @@ import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import './RoomHistoryVisibility.scss';
 
-import initMatrix from '../../../client/initMatrix';
 
 import Text from '../../atoms/text/Text';
 import RadioButton from '../../atoms/button/RadioButton';
 import { MenuItem } from '../../atoms/context-menu/ContextMenu';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 const visibility = {
   WORLD_READABLE: 'world_readable',
@@ -33,38 +33,33 @@ const items = [{
   type: visibility.JOINED,
 }];
 
-function setHistoryVisibility(roomId, type) {
-  const mx = initMatrix.matrixClient;
-
-  return mx.sendStateEvent(
-    roomId, 'm.room.history_visibility',
-    {
-      history_visibility: type,
-    },
-  );
-}
 
 function useVisibility(roomId) {
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const room = mx.getRoom(roomId);
 
   const [activeType, setActiveType] = useState(room.getHistoryVisibility());
   useEffect(() => {
     setActiveType(room.getHistoryVisibility());
-  }, [roomId]);
+  }, [room]);
 
   const setVisibility = useCallback((item) => {
     if (item.type === activeType.type) return;
     setActiveType(item.type);
-    setHistoryVisibility(roomId, item.type);
-  }, [activeType, roomId]);
+    mx.sendStateEvent(
+      roomId, 'm.room.history_visibility',
+      {
+        history_visibility: item.type,
+      },
+    );
+  }, [mx, activeType, roomId]);
 
   return [activeType, setVisibility];
 }
 
 function RoomHistoryVisibility({ roomId }) {
   const [activeType, setVisibility] = useVisibility(roomId);
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const userId = mx.getUserId();
   const room = mx.getRoom(roomId);
   const { currentState } = room;

src/app/molecules/room-members/RoomMembers.jsx

@@ -4,7 +4,6 @@ import React, {
 import PropTypes from 'prop-types';
 import './RoomMembers.scss';
 
-import initMatrix from '../../../client/initMatrix';
 import colorMXID from '../../../util/colorMXID';
 import { openProfileViewer } from '../../../client/action/navigation';
 import { getUsernameOfRoomMember, getPowerLabel } from '../../../util/matrixUtil';
@@ -17,11 +16,11 @@ import Input from '../../atoms/input/Input';
 import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
 import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls';
 import PeopleSelector from '../people-selector/PeopleSelector';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 const PER_PAGE_MEMBER = 50;
 
-function normalizeMembers(members) {
-  const mx = initMatrix.matrixClient;
+function normalizeMembers(mx, members) {
   return members.map((member) => ({
     userId: member.userId,
     name: getUsernameOfRoomMember(member),
@@ -33,7 +32,7 @@ function normalizeMembers(members) {
 }
 
 function useMemberOfMembership(roomId, membership) {
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const room = mx.getRoom(roomId);
   const [members, setMembers] = useState([]);
 
@@ -45,6 +44,7 @@ function useMemberOfMembership(roomId, membership) {
       if (isLoadingMembers) return;
       if (event && event?.getRoomId() !== roomId) return;
       const memberOfMembership = normalizeMembers(
+        mx,
         room.getMembersWithMembership(membership)
           .sort(memberByAtoZ).sort(memberByPowerLevel),
       );
@@ -66,7 +66,7 @@ function useMemberOfMembership(roomId, membership) {
       mx.removeListener('RoomMember.membership', updateMemberList);
       mx.removeListener('RoomMember.powerLevel', updateMemberList);
     };
-  }, [membership]);
+  }, [mx, membership]);
 
   return [members];
 }

src/app/molecules/room-notification/RoomNotification.jsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import './RoomNotification.scss';
 
-import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 
 import Text from '../../atoms/text/Text';
@@ -14,6 +13,7 @@ import BellRingIC from '../../../../public/res/ic/outlined/bell-ring.svg';
 import BellPingIC from '../../../../public/res/ic/outlined/bell-ping.svg';
 import BellOffIC from '../../../../public/res/ic/outlined/bell-off.svg';
 import { getNotificationType } from '../../utils/room';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 const items = [
   {
@@ -38,8 +38,7 @@ const items = [
   },
 ];
 
-function setRoomNotifType(roomId, newType) {
-  const mx = initMatrix.matrixClient;
+function setRoomNotifType(mx, roomId, newType) {
   let roomPushRule;
   try {
     roomPushRule = mx.getRoomPushRule('global', roomId);
@@ -108,7 +107,7 @@ function setRoomNotifType(roomId, newType) {
 }
 
 function useNotifications(roomId) {
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const [activeType, setActiveType] = useState(getNotificationType(mx, roomId));
   useEffect(() => {
     setActiveType(getNotificationType(mx, roomId));
@@ -118,9 +117,9 @@ function useNotifications(roomId) {
     (item) => {
       if (item.type === activeType.type) return;
       setActiveType(item.type);
-      setRoomNotifType(roomId, item.type);
+      setRoomNotifType(mx, roomId, item.type);
     },
-    [activeType, roomId]
+    [mx, activeType, roomId]
   );
   return [activeType, setNotification];
 }

src/app/molecules/room-permissions/RoomPermissions.jsx

@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import './RoomPermissions.scss';
 
-import initMatrix from '../../../client/initMatrix';
 import { getPowerLabel } from '../../../util/matrixUtil';
 import { openReusableContextMenu } from '../../../client/action/navigation';
 import { getEventCords } from '../../../util/common';
@@ -16,6 +15,7 @@ import SettingTile from '../setting-tile/SettingTile';
 import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
 
 import { useForceUpdate } from '../../hooks/useForceUpdate';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 const permissionsInfo = {
   users_default: {
@@ -157,7 +157,7 @@ const spacePermsGroups = {
 
 function useRoomStateUpdate(roomId) {
   const [, forceUpdate] = useForceUpdate();
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
 
   useEffect(() => {
     const handleStateEvent = (event) => {
@@ -169,12 +169,12 @@ function useRoomStateUpdate(roomId) {
     return () => {
       mx.removeListener('RoomState.events', handleStateEvent);
     };
-  }, [roomId]);
+  }, [mx, roomId]);
 }
 
 function RoomPermissions({ roomId }) {
   useRoomStateUpdate(roomId);
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const room = mx.getRoom(roomId);
   const pLEvent = room.currentState.getStateEvents('m.room.power_levels')[0];
   const permissions = pLEvent.getContent();

src/app/molecules/room-profile/RoomProfile.jsx

@@ -4,7 +4,6 @@ import { useAtomValue } from 'jotai';
 import Linkify from 'linkify-react';
 import './RoomProfile.scss';
 
-import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import colorMXID from '../../../util/colorMXID';
 
@@ -22,6 +21,7 @@ import { useForceUpdate } from '../../hooks/useForceUpdate';
 import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
 import { mDirectAtom } from '../../state/mDirectList';
 import { LINKIFY_OPTS } from '../../plugins/react-custom-html-parser';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 function RoomProfile({ roomId }) {
   const isMountStore = useStore();
@@ -32,7 +32,7 @@ function RoomProfile({ roomId }) {
     type: cons.status.PRE_FLIGHT,
   });
 
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const mDirects = useAtomValue(mDirectAtom);
   const isDM = mDirects.has(roomId);
   let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
@@ -67,7 +67,7 @@ function RoomProfile({ roomId }) {
       });
       setIsEditing(false);
     };
-  }, [roomId]);
+  }, [mx, roomId]);
 
   const handleOnSubmit = async (e) => {
     e.preventDefault();

src/app/molecules/room-visibility/RoomVisibility.jsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import './RoomVisibility.scss';
 
-import initMatrix from '../../../client/initMatrix';
 
 import Text from '../../atoms/text/Text';
 import RadioButton from '../../atoms/button/RadioButton';
@@ -14,6 +13,7 @@ import HashGlobeIC from '../../../../public/res/ic/outlined/hash-globe.svg';
 import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
 import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
 import SpaceGlobeIC from '../../../../public/res/ic/outlined/space-globe.svg';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 const visibility = {
   INVITE: 'invite',
@@ -21,8 +21,7 @@ const visibility = {
   PUBLIC: 'public',
 };
 
-function setJoinRule(roomId, type) {
-  const mx = initMatrix.matrixClient;
+function setJoinRule(mx, roomId, type) {
   let allow;
   if (type === visibility.RESTRICTED) {
     const { currentState } = mx.getRoom(roomId);
@@ -46,26 +45,26 @@ function setJoinRule(roomId, type) {
 }
 
 function useVisibility(roomId) {
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const room = mx.getRoom(roomId);
 
   const [activeType, setActiveType] = useState(room.getJoinRule());
   useEffect(() => {
     setActiveType(room.getJoinRule());
-  }, [roomId]);
+  }, [room]);
 
   const setNotification = useCallback((item) => {
     if (item.type === activeType.type) return;
     setActiveType(item.type);
-    setJoinRule(roomId, item.type);
-  }, [activeType, roomId]);
+    setJoinRule(mx, roomId, item.type);
+  }, [mx, activeType, roomId]);
 
   return [activeType, setNotification];
 }
 
 function RoomVisibility({ roomId }) {
   const [activeType, setVisibility] = useVisibility(roomId);
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const room = mx.getRoom(roomId);
   const isSpace = room.isSpaceRoom();
   const { currentState } = room;

src/app/molecules/space-add-existing/SpaceAddExisting.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { useAtomValue } from 'jotai';
 import './SpaceAddExisting.scss';
 
-import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
 import { joinRuleToIconSrc, getIdServer, genRoomVia } from '../../../util/matrixUtil';
@@ -27,6 +26,7 @@ import { roomToParentsAtom } from '../../state/room/roomToParents';
 import { useDirects, useRooms, useSpaces } from '../../state/hooks/roomList';
 import { allRoomsAtom } from '../../state/room-list/roomList';
 import { mDirectAtom } from '../../state/mDirectList';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 function SpaceAddExistingContent({ roomId, spaces: onlySpaces }) {
   const mountStore = useStore(roomId);
@@ -35,7 +35,7 @@ function SpaceAddExistingContent({ roomId, spaces: onlySpaces }) {
   const [allRoomIds, setAllRoomIds] = useState([]);
   const [selected, setSelected] = useState([]);
   const [searchIds, setSearchIds] = useState(null);
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const roomIdToParents = useAtomValue(roomToParentsAtom);
   const mDirects = useAtomValue(mDirectAtom);
   const spaces = useSpaces(mx, allRoomsAtom);
@@ -48,7 +48,7 @@ function SpaceAddExistingContent({ roomId, spaces: onlySpaces }) {
       (rId) => rId !== roomId && !roomIdToParents.get(rId)?.has(roomId)
     );
     setAllRoomIds(allIds);
-  }, [roomId, onlySpaces]);
+  }, [spaces, rooms, directs, roomIdToParents, roomId, onlySpaces]);
 
   const toggleSelection = (rId) => {
     if (process !== null) return;
@@ -215,7 +215,7 @@ function useVisibilityToggle() {
 
 function SpaceAddExisting() {
   const [data, requestClose] = useVisibilityToggle();
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const room = mx.getRoom(data?.roomId);
 
   return (