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
This commit is contained in:
Ajay Bura
2024-07-22 16:17:19 +05:30
committed by GitHub
parent e046c59f7c
commit e2228a18c1
62 changed files with 609 additions and 510 deletions

View File

@@ -2,7 +2,6 @@ import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import './ProfileViewer.scss';
import initMatrix from '../../../client/initMatrix';
import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation';
import { openReusableContextMenu } from '../../../client/action/navigation';
@@ -36,9 +35,10 @@ import { useForceUpdate } from '../../hooks/useForceUpdate';
import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
import { useRoomNavigate } from '../../hooks/useRoomNavigate';
import { getDMRoomFor } from '../../utils/matrix';
import { useMatrixClient } from '../../hooks/useMatrixClient';
function ModerationTools({ roomId, userId }) {
const mx = initMatrix.matrixClient;
const mx = useMatrixClient();
const room = mx.getRoom(roomId);
const roomMember = room.getMember(userId);
@@ -56,13 +56,13 @@ function ModerationTools({ roomId, userId }) {
const handleKick = (e) => {
e.preventDefault();
const kickReason = e.target.elements['kick-reason']?.value.trim();
roomActions.kick(roomId, userId, kickReason !== '' ? kickReason : undefined);
mx.kick(roomId, userId, kickReason !== '' ? kickReason : undefined);
};
const handleBan = (e) => {
e.preventDefault();
const banReason = e.target.elements['ban-reason']?.value.trim();
roomActions.ban(roomId, userId, banReason !== '' ? banReason : undefined);
mx.ban(roomId, userId, banReason !== '' ? banReason : undefined);
};
return (
@@ -90,7 +90,7 @@ ModerationTools.propTypes = {
function SessionInfo({ userId }) {
const [devices, setDevices] = useState(null);
const [isVisible, setIsVisible] = useState(false);
const mx = initMatrix.matrixClient;
const mx = useMatrixClient();
useEffect(() => {
let isUnmounted = false;
@@ -111,7 +111,7 @@ function SessionInfo({ userId }) {
return () => {
isUnmounted = true;
};
}, [userId]);
}, [mx, userId]);
function renderSessionChips() {
if (!isVisible) return null;
@@ -139,7 +139,7 @@ function SessionInfo({ userId }) {
>
<Text variant="b2">{`View ${
devices?.length > 0
? `${devices.length} ${devices.length == 1 ? 'session' : 'sessions'}`
? `${devices.length} ${devices.length === 1 ? 'session' : 'sessions'}`
: 'sessions'
}`}</Text>
</MenuItem>
@@ -155,10 +155,10 @@ SessionInfo.propTypes = {
function ProfileFooter({ roomId, userId, onRequestClose }) {
const [isCreatingDM, setIsCreatingDM] = useState(false);
const [isIgnoring, setIsIgnoring] = useState(false);
const [isUserIgnored, setIsUserIgnored] = useState(initMatrix.matrixClient.isUserIgnored(userId));
const mx = useMatrixClient();
const [isUserIgnored, setIsUserIgnored] = useState(mx.isUserIgnored(userId));
const isMountedRef = useRef(true);
const mx = initMatrix.matrixClient;
const { navigateRoom } = useRoomNavigate();
const room = mx.getRoom(roomId);
const member = room.getMember(userId);
@@ -182,10 +182,10 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
};
useEffect(() => {
setIsUserIgnored(initMatrix.matrixClient.isUserIgnored(userId));
setIsUserIgnored(mx.isUserIgnored(userId));
setIsIgnoring(false);
setIsInviting(false);
}, [userId]);
}, [mx, userId]);
const openDM = async () => {
// Check and open if user already have a DM with userId.
@@ -199,7 +199,7 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
// Create new DM
try {
setIsCreatingDM(true);
const result = await roomActions.createDM(userId, await hasDevices(userId));
const result = await roomActions.createDM(mx, userId, await hasDevices(mx, userId));
onCreated(result.room_id);
} catch {
if (isMountedRef.current === false) return;
@@ -213,9 +213,9 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
try {
setIsIgnoring(true);
if (isIgnored) {
await roomActions.unignore([userId]);
await roomActions.unignore(mx, [userId]);
} else {
await roomActions.ignore([userId]);
await roomActions.ignore(mx, [userId]);
}
if (isMountedRef.current === false) return;
@@ -230,9 +230,9 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
try {
setIsInviting(true);
let isInviteSent = false;
if (isInvited) await roomActions.kick(roomId, userId);
if (isInvited) await mx.kick(roomId, userId);
else {
await roomActions.invite(roomId, userId);
await mx.invite(roomId, userId);
isInviteSent = true;
}
if (isMountedRef.current === false) return;
@@ -249,7 +249,7 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
{isCreatingDM ? 'Creating room...' : 'Message'}
</Button>
{isBanned && canIKick && (
<Button variant="positive" onClick={() => roomActions.unban(roomId, userId)}>
<Button variant="positive" onClick={() => mx.unban(roomId, userId)}>
Unban
</Button>
)}
@@ -306,7 +306,7 @@ function useToggleDialog() {
}
function useRerenderOnProfileChange(roomId, userId) {
const mx = initMatrix.matrixClient;
const mx = useMatrixClient();
const [, forceUpdate] = useForceUpdate();
useEffect(() => {
const handleProfileChange = (mEvent, member) => {
@@ -323,19 +323,19 @@ function useRerenderOnProfileChange(roomId, userId) {
mx.removeListener('RoomMember.powerLevel', handleProfileChange);
mx.removeListener('RoomMember.membership', handleProfileChange);
};
}, [roomId, userId]);
}, [mx, roomId, userId]);
}
function ProfileViewer() {
const [isOpen, roomId, userId, closeDialog, handleAfterClose] = useToggleDialog();
useRerenderOnProfileChange(roomId, userId);
const mx = initMatrix.matrixClient;
const mx = useMatrixClient();
const room = mx.getRoom(roomId);
const renderProfile = () => {
const roomMember = room.getMember(userId);
const username = roomMember ? getUsernameOfRoomMember(roomMember) : getUsername(userId);
const username = roomMember ? getUsernameOfRoomMember(roomMember) : getUsername(mx, userId);
const avatarMxc = roomMember?.getMxcAvatarUrl?.() || mx.getUser(userId)?.avatarUrl;
const avatarUrl =
avatarMxc && avatarMxc !== 'null' ? mx.mxcUrlToHttp(avatarMxc, 80, 80, 'crop') : null;
@@ -364,9 +364,9 @@ function ProfileViewer() {
'caution'
);
if (!isConfirmed) return;
roomActions.setPowerLevel(roomId, userId, newPowerLevel);
roomActions.setPowerLevel(mx, roomId, userId, newPowerLevel);
} else {
roomActions.setPowerLevel(roomId, userId, newPowerLevel);
roomActions.setPowerLevel(mx, roomId, userId, newPowerLevel);
}
};