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/features/room-nav/RoomNavItem.tsx

@@ -53,7 +53,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
     const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
 
     const handleMarkAsRead = () => {
-      markAsRead(room.roomId);
+      markAsRead(mx, room.roomId);
       requestClose();
     };
 

src/app/features/room/Room.tsx

@@ -11,10 +11,12 @@ import { PowerLevelsContextProvider, usePowerLevels } from '../../hooks/usePower
 import { useRoom } from '../../hooks/useRoom';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { markAsRead } from '../../../client/action/notifications';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 export function Room() {
   const { eventId } = useParams();
   const room = useRoom();
+  const mx = useMatrixClient();
 
   const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
   const screenSize = useScreenSizeContext();
@@ -25,7 +27,7 @@ export function Room() {
     useCallback(
       (evt) => {
         if (isKeyHotkey('escape', evt)) {
-          markAsRead(room.roomId);
+          markAsRead(mx, room.roomId);
         }
       },
       [room.roomId]

src/app/features/room/RoomTimeline.tsx

@@ -597,7 +597,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         // so timeline can be updated with evt like: edits, reactions etc
         if (atBottomRef.current) {
           if (document.hasFocus() && (!unreadInfo || mEvt.getSender() === mx.getUserId())) {
-            requestAnimationFrame(() => markAsRead(mEvt.getRoomId()));
+            requestAnimationFrame(() => markAsRead(mx, mEvt.getRoomId()));
           }
 
           if (document.hasFocus()) {
@@ -658,15 +658,15 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
 
   const tryAutoMarkAsRead = useCallback(() => {
     if (!unreadInfo) {
-      requestAnimationFrame(() => markAsRead(room.roomId));
+      requestAnimationFrame(() => markAsRead(mx, room.roomId));
       return;
     }
     const evtTimeline = getEventTimeline(room, unreadInfo.readUptoEventId);
     const latestTimeline = evtTimeline && getFirstLinkedTimeline(evtTimeline, Direction.Forward);
     if (latestTimeline === room.getLiveTimeline()) {
-      requestAnimationFrame(() => markAsRead(room.roomId));
+      requestAnimationFrame(() => markAsRead(mx, room.roomId));
     }
-  }, [room, unreadInfo]);
+  }, [mx, room, unreadInfo]);
 
   const debounceSetAtBottom = useDebounce(
     useCallback((entry: IntersectionObserverEntry) => {
@@ -832,7 +832,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   };
 
   const handleMarkAsRead = () => {
-    markAsRead(room.roomId);
+    markAsRead(mx, room.roomId);
   };
 
   const handleOpenReply: MouseEventHandler<HTMLButtonElement> = useCallback(

src/app/features/room/RoomTombstone.tsx

@@ -40,28 +40,30 @@ export function RoomTombstone({ roomId, body, replacementRoomId }: RoomTombstone
           </Text>
         )}
       </Box>
-      {replacementRoom?.getMyMembership() === Membership.Join ||
-      joinState.status === AsyncStatus.Success ? (
-        <Button onClick={handleOpen} size="300" variant="Success" fill="Solid" radii="300">
-          <Text size="B300">Open New Room</Text>
-        </Button>
-      ) : (
-        <Button
-          onClick={handleJoin}
-          size="300"
-          variant="Primary"
-          fill="Solid"
-          radii="300"
-          before={
-            joinState.status === AsyncStatus.Loading && (
-              <Spinner size="100" variant="Primary" fill="Solid" />
-            )
-          }
-          disabled={joinState.status === AsyncStatus.Loading}
-        >
-          <Text size="B300">Join New Room</Text>
-        </Button>
-      )}
+      <Box shrink="No">
+        {replacementRoom?.getMyMembership() === Membership.Join ||
+        joinState.status === AsyncStatus.Success ? (
+          <Button onClick={handleOpen} size="300" variant="Success" fill="Solid" radii="300">
+            <Text size="B300">Open New Room</Text>
+          </Button>
+        ) : (
+          <Button
+            onClick={handleJoin}
+            size="300"
+            variant="Primary"
+            fill="Solid"
+            radii="300"
+            before={
+              joinState.status === AsyncStatus.Loading && (
+                <Spinner size="100" variant="Primary" fill="Solid" />
+              )
+            }
+            disabled={joinState.status === AsyncStatus.Loading}
+          >
+            <Text size="B300">Join New Room</Text>
+          </Button>
+        )}
+      </Box>
     </RoomInputPlaceholder>
   );
 }

src/app/features/room/RoomViewHeader.tsx

@@ -74,7 +74,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(
     const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
 
     const handleMarkAsRead = () => {
-      markAsRead(room.roomId);
+      markAsRead(mx, room.roomId);
       requestClose();
     };
 

src/app/hooks/useAccountData.js

@@ -1,10 +1,9 @@
 /* eslint-disable import/prefer-default-export */
 import { useState, useEffect } from 'react';
-
-import initMatrix from '../../client/initMatrix';
+import { useMatrixClient } from './useMatrixClient';
 
 export function useAccountData(eventType) {
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const [event, setEvent] = useState(mx.getAccountData(eventType));
 
   useEffect(() => {
@@ -16,7 +15,7 @@ export function useAccountData(eventType) {
     return () => {
       mx.removeListener('accountData', handleChange);
     };
-  }, [eventType]);
+  }, [mx, eventType]);
 
   return event;
 }

src/app/hooks/useCommands.ts

@@ -92,9 +92,9 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
               return;
             }
           }
-          const devices = await Promise.all(userIds.map(hasDevices));
+          const devices = await Promise.all(userIds.map(uid => hasDevices(mx, uid)));
           const isEncrypt = devices.every((hasDevice) => hasDevice);
-          const result = await roomActions.createDM(userIds, isEncrypt);
+          const result = await roomActions.createDM(mx, userIds, isEncrypt);
           navigateRoom(result.room_id);
         },
       },
@@ -106,7 +106,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
           const roomIds = rawIds.filter(
             (idOrAlias) => isRoomId(idOrAlias) || isRoomAlias(idOrAlias)
           );
-          roomIds.map((id) => roomActions.join(id));
+          roomIds.map((id) => roomActions.join(mx, id));
         },
       },
       [Command.Leave]: {
@@ -127,31 +127,31 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         description: 'Invite user to room. Example: /invite userId1 userId2 [-r reason]',
         exe: async (payload) => {
           const { users, reason } = parseUsersAndReason(payload);
-          users.map((id) => roomActions.invite(room.roomId, id, reason));
+          users.map((id) => mx.invite(room.roomId, id, reason));
         },
       },
       [Command.DisInvite]: {
         name: Command.DisInvite,
         description: 'Disinvite user to room. Example: /disinvite userId1 userId2 [-r reason]',
         exe: async (payload) => {
           const { users, reason } = parseUsersAndReason(payload);
-          users.map((id) => roomActions.kick(room.roomId, id, reason));
+          users.map((id) => mx.kick(room.roomId, id, reason));
         },
       },
       [Command.Kick]: {
         name: Command.Kick,
         description: 'Kick user from room. Example: /kick userId1 userId2 [-r reason]',
         exe: async (payload) => {
           const { users, reason } = parseUsersAndReason(payload);
-          users.map((id) => roomActions.kick(room.roomId, id, reason));
+          users.map((id) => mx.kick(room.roomId, id, reason));
         },
       },
       [Command.Ban]: {
         name: Command.Ban,
         description: 'Ban user from room. Example: /ban userId1 userId2 [-r reason]',
         exe: async (payload) => {
           const { users, reason } = parseUsersAndReason(payload);
-          users.map((id) => roomActions.ban(room.roomId, id, reason));
+          users.map((id) => mx.ban(room.roomId, id, reason));
         },
       },
       [Command.UnBan]: {
@@ -160,7 +160,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         exe: async (payload) => {
           const rawIds = payload.split(' ');
           const users = rawIds.filter((id) => isUserId(id));
-          users.map((id) => roomActions.unban(room.roomId, id));
+          users.map((id) => mx.unban(room.roomId, id));
         },
       },
       [Command.Ignore]: {
@@ -169,7 +169,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         exe: async (payload) => {
           const rawIds = payload.split(' ');
           const userIds = rawIds.filter((id) => isUserId(id));
-          if (userIds.length > 0) roomActions.ignore(userIds);
+          if (userIds.length > 0) roomActions.ignore(mx, userIds);
         },
       },
       [Command.UnIgnore]: {
@@ -178,7 +178,7 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         exe: async (payload) => {
           const rawIds = payload.split(' ');
           const userIds = rawIds.filter((id) => isUserId(id));
-          if (userIds.length > 0) roomActions.unignore(userIds);
+          if (userIds.length > 0) roomActions.unignore(mx, userIds);
         },
       },
       [Command.MyRoomNick]: {
@@ -187,30 +187,30 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         exe: async (payload) => {
           const nick = payload.trim();
           if (nick === '') return;
-          roomActions.setMyRoomNick(room.roomId, nick);
+          roomActions.setMyRoomNick(mx, room.roomId, nick);
         },
       },
       [Command.MyRoomAvatar]: {
         name: Command.MyRoomAvatar,
         description: 'Change profile picture in current room. Example /myroomavatar mxc://xyzabc',
         exe: async (payload) => {
           if (payload.match(/^mxc:\/\/\S+$/)) {
-            roomActions.setMyRoomAvatar(room.roomId, payload);
+            roomActions.setMyRoomAvatar(mx, room.roomId, payload);
           }
         },
       },
       [Command.ConvertToDm]: {
         name: Command.ConvertToDm,
         description: 'Convert room to direct message',
         exe: async () => {
-          roomActions.convertToDm(room.roomId);
+          roomActions.convertToDm(mx, room.roomId);
         },
       },
       [Command.ConvertToRoom]: {
         name: Command.ConvertToRoom,
         description: 'Convert direct message to room',
         exe: async () => {
-          roomActions.convertToRoom(room.roomId);
+          roomActions.convertToRoom(mx, room.roomId);
         },
       },
     }),

src/app/hooks/useCrossSigningStatus.js

@@ -1,12 +1,12 @@
 /* eslint-disable import/prefer-default-export */
 import { useState, useEffect } from 'react';
 
-import initMatrix from '../../client/initMatrix';
 import { hasCrossSigningAccountData } from '../../util/matrixUtil';
+import { useMatrixClient } from './useMatrixClient';
 
 export function useCrossSigningStatus() {
-  const mx = initMatrix.matrixClient;
-  const [isCSEnabled, setIsCSEnabled] = useState(hasCrossSigningAccountData());
+  const mx = useMatrixClient();
+  const [isCSEnabled, setIsCSEnabled] = useState(hasCrossSigningAccountData(mx));
 
   useEffect(() => {
     if (isCSEnabled) return undefined;
@@ -20,6 +20,6 @@ export function useCrossSigningStatus() {
     return () => {
       mx.removeListener('accountData', handleAccountData);
     };
-  }, [isCSEnabled === false]);
+  }, [mx, isCSEnabled]);
   return isCSEnabled;
 }

src/app/hooks/useDeviceList.js

@@ -1,10 +1,9 @@
 /* eslint-disable import/prefer-default-export */
 import { useState, useEffect } from 'react';
-
-import initMatrix from '../../client/initMatrix';
+import { useMatrixClient } from './useMatrixClient';
 
 export function useDeviceList() {
-  const mx = initMatrix.matrixClient;
+  const mx = useMatrixClient();
   const [deviceList, setDeviceList] = useState(null);
 
   useEffect(() => {
@@ -27,6 +26,6 @@ export function useDeviceList() {
       mx.removeListener('crypto.devicesUpdated', handleDevicesUpdate);
       isMounted = false;
     };
-  }, []);
+  }, [mx]);
   return deviceList;
 }

src/app/hooks/useSyncState.ts

@@ -2,13 +2,13 @@ import { ClientEvent, ClientEventHandlerMap, MatrixClient } from 'matrix-js-sdk'
 import { useEffect } from 'react';
 
 export const useSyncState = (
-  mx: MatrixClient,
+  mx: MatrixClient | undefined,
   onChange: ClientEventHandlerMap[ClientEvent.Sync]
 ): void => {
   useEffect(() => {
-    mx.on(ClientEvent.Sync, onChange);
+    mx?.on(ClientEvent.Sync, onChange);
     return () => {
-      mx.removeListener(ClientEvent.Sync, onChange);
+      mx?.removeListener(ClientEvent.Sync, onChange);
     };
   }, [mx, onChange]);
 };

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>