(chore) remove outdated code (#1765)

* optimize room typing members hook

* remove unused code - WIP

* remove old code from initMatrix

* remove twemojify function

* remove old sanitize util

* delete old markdown util

* delete Math atom component

* uninstall unused dependencies

* remove old notification system

* decrypt message in inbox notification center and fix refresh in background

* improve notification

---------

Co-authored-by: Krishan <33421343+kfiven@users.noreply.github.com>

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

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { useAtomValue } from 'jotai';
+import Linkify from 'linkify-react';
 import './RoomProfile.scss';
 
-import { twemojify } from '../../../util/twemojify';
-
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import colorMXID from '../../../util/colorMXID';
@@ -20,6 +20,8 @@ import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
 import { useStore } from '../../hooks/useStore';
 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';
 
 function RoomProfile({ roomId }) {
   const isMountStore = useStore();
@@ -31,9 +33,12 @@ function RoomProfile({ roomId }) {
   });
 
   const mx = initMatrix.matrixClient;
-  const isDM = initMatrix.roomList.directs.has(roomId);
+  const mDirects = useAtomValue(mDirectAtom);
+  const isDM = mDirects.has(roomId);
   let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
-  avatarSrc = isDM ? mx.getRoom(roomId).getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc;
+  avatarSrc = isDM
+    ? mx.getRoom(roomId).getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop')
+    : avatarSrc;
   const room = mx.getRoom(roomId);
   const { currentState } = room;
   const roomName = room.name;
@@ -47,15 +52,14 @@ function RoomProfile({ roomId }) {
 
   useEffect(() => {
     isMountStore.setItem(true);
-    const { roomList } = initMatrix;
-    const handleProfileUpdate = (rId) => {
-      if (roomId !== rId) return;
+    const handleStateEvent = (mEvent) => {
+      if (mEvent.event.room_id !== roomId) return;
       forceUpdate();
     };
 
-    roomList.on(cons.events.roomList.ROOM_PROFILE_UPDATED, handleProfileUpdate);
+    mx.on('RoomState.events', handleStateEvent);
     return () => {
-      roomList.removeListener(cons.events.roomList.ROOM_PROFILE_UPDATED, handleProfileUpdate);
+      mx.removeListener('RoomState.events', handleStateEvent);
       isMountStore.setItem(false);
       setStatus({
         msg: null,
@@ -122,7 +126,7 @@ function RoomProfile({ roomId }) {
         'Remove avatar',
         'Are you sure that you want to remove room avatar?',
         'Remove',
-        'caution',
+        'caution'
       );
       if (isConfirmed) {
         await mx.sendStateEvent(roomId, 'm.room.avatar', { url }, '');
@@ -132,15 +136,45 @@ function RoomProfile({ roomId }) {
 
   const renderEditNameAndTopic = () => (
     <form className="room-profile__edit-form" onSubmit={handleOnSubmit}>
-      {canChangeName && <Input value={roomName} name="room-name" disabled={status.type === cons.status.IN_FLIGHT} label="Name" />}
-      {canChangeTopic && <Input value={roomTopic} name="room-topic" disabled={status.type === cons.status.IN_FLIGHT} minHeight={100} resizable label="Topic" />}
-      {(!canChangeName || !canChangeTopic) && <Text variant="b3">{`You have permission to change ${room.isSpaceRoom() ? 'space' : 'room'} ${canChangeName ? 'name' : 'topic'} only.`}</Text>}
-      { status.type === cons.status.IN_FLIGHT && <Text variant="b2">{status.msg}</Text>}
-      { status.type === cons.status.SUCCESS && <Text style={{ color: 'var(--tc-positive-high)' }} variant="b2">{status.msg}</Text>}
-      { status.type === cons.status.ERROR && <Text style={{ color: 'var(--tc-danger-high)' }} variant="b2">{status.msg}</Text>}
-      { status.type !== cons.status.IN_FLIGHT && (
+      {canChangeName && (
+        <Input
+          value={roomName}
+          name="room-name"
+          disabled={status.type === cons.status.IN_FLIGHT}
+          label="Name"
+        />
+      )}
+      {canChangeTopic && (
+        <Input
+          value={roomTopic}
+          name="room-topic"
+          disabled={status.type === cons.status.IN_FLIGHT}
+          minHeight={100}
+          resizable
+          label="Topic"
+        />
+      )}
+      {(!canChangeName || !canChangeTopic) && (
+        <Text variant="b3">{`You have permission to change ${
+          room.isSpaceRoom() ? 'space' : 'room'
+        } ${canChangeName ? 'name' : 'topic'} only.`}</Text>
+      )}
+      {status.type === cons.status.IN_FLIGHT && <Text variant="b2">{status.msg}</Text>}
+      {status.type === cons.status.SUCCESS && (
+        <Text style={{ color: 'var(--tc-positive-high)' }} variant="b2">
+          {status.msg}
+        </Text>
+      )}
+      {status.type === cons.status.ERROR && (
+        <Text style={{ color: 'var(--tc-danger-high)' }} variant="b2">
+          {status.msg}
+        </Text>
+      )}
+      {status.type !== cons.status.IN_FLIGHT && (
         <div>
-          <Button type="submit" variant="primary">Save</Button>
+          <Button type="submit" variant="primary">
+            Save
+          </Button>
           <Button onClick={handleCancelEditing}>Cancel</Button>
         </div>
       )}
@@ -148,10 +182,15 @@ function RoomProfile({ roomId }) {
   );
 
   const renderNameAndTopic = () => (
-    <div className="room-profile__display" style={{ marginBottom: avatarSrc && canChangeAvatar ? '24px' : '0' }}>
+    <div
+      className="room-profile__display"
+      style={{ marginBottom: avatarSrc && canChangeAvatar ? '24px' : '0' }}
+    >
       <div>
-        <Text variant="h2" weight="medium" primary>{twemojify(roomName)}</Text>
-        { (canChangeName || canChangeTopic) && (
+        <Text variant="h2" weight="medium" primary>
+          {roomName}
+        </Text>
+        {(canChangeName || canChangeTopic) && (
           <IconButton
             src={PencilIC}
             size="extra-small"
@@ -161,15 +200,21 @@ function RoomProfile({ roomId }) {
         )}
       </div>
       <Text variant="b3">{room.getCanonicalAlias() || room.roomId}</Text>
-      {roomTopic && <Text variant="b2">{twemojify(roomTopic, undefined, true)}</Text>}
+      {roomTopic && (
+        <Text variant="b2">
+          <Linkify options={LINKIFY_OPTS}>{roomTopic}</Linkify>
+        </Text>
+      )}
     </div>
   );
 
   return (
     <div className="room-profile">
       <div className="room-profile__content">
-        { !canChangeAvatar && <Avatar imageSrc={avatarSrc} text={roomName} bgColor={colorMXID(roomId)} size="large" />}
-        { canChangeAvatar && (
+        {!canChangeAvatar && (
+          <Avatar imageSrc={avatarSrc} text={roomName} bgColor={colorMXID(roomId)} size="large" />
+        )}
+        {canChangeAvatar && (
           <ImageUpload
             text={roomName}
             bgColor={colorMXID(roomId)}