import './ProfileEditor.scss';
-// TODO Fix bug that prevents 'Save' button from enabling up until second changed.
function ProfileEditor({ userId }) {
const [isEditing, setIsEditing] = useState(false);
const mx = initMatrix.matrixClient;
const user = mx.getUser(mx.getUserId());
+ const fallbackUsername = userId.match(/^@?(\S+):(\S+)$/)[1];
const displayNameRef = useRef(null);
const [avatarSrc, setAvatarSrc] = useState(user.avatarUrl ? mx.mxcUrlToHttp(user.avatarUrl, 80, 80, 'crop') : null);
const renderInfo = () => (
<div className="profile-editor__info" style={{ marginBottom: avatarSrc ? '24px' : '0' }}>
<div>
- <Text variant="h2" primary weight="medium">{twemojify(username)}</Text>
+ <Text variant="h2" primary weight="medium">{twemojify(username) ?? fallbackUsername}</Text>
<IconButton
src={PencilIC}
size="extra-small"
return (
<div className="profile-editor">
<ImageUpload
- text={username}
+ text={username ?? fallbackUsername}
bgColor={colorMXID(userId)}
imageSrc={avatarSrc}
onUpload={handleAvatarUpload}
}
content={(
<>
- <Text variant="b3">
- Last activity
- <span style={{ color: 'var(--tc-surface-normal)' }}>
- {dateFormat(new Date(lastTS), ' hh:MM TT, dd/mm/yyyy')}
- </span>
- {lastIP ? ` at ${lastIP}` : ''}
- </Text>
+ {lastTS && (
+ <Text variant="b3">
+ Last activity
+ <span style={{ color: 'var(--tc-surface-normal)' }}>
+ {dateFormat(new Date(lastTS), ' hh:MM TT, dd/mm/yyyy')}
+ </span>
+ {lastIP ? ` at ${lastIP}` : ''}
+ </Text>
+ )}
{isCurrentDevice && (
<Text style={{ marginTop: 'var(--sp-ultra-tight)' }} variant="b3">
{`Session Key: ${initMatrix.matrixClient.getDeviceEd25519Key().match(/.{1,4}/g).join(' ')}`}