Implement Profile Viewer (#130)

* Implement Profile Viewer

Fixes #111

* Make user avatar in chat clickable

* design progress

* Refactored code

* progress

* Updated chip comp

Signed-off-by: Ajay Bura <ajbura@gmail.com>

* Refactored ProfileViewer comp

Signed-off-by: Ajay Bura <ajbura@gmail.com>

* Added msg functionality in ProfileViewer

Signed-off-by: Ajay Bura <ajbura@gmail.com>

* Added Ignore functionality in ProfileViewer

Signed-off-by: Ajay Bura <ajbura@gmail.com>

* Fixed Ignore btn bug

Signed-off-by: Ajay Bura <ajbura@gmail.com>

* Refectored ProfileViewer comp

Signed-off-by: Ajay Bura <ajbura@gmail.com>

Co-authored-by: Ajay Bura <ajbura@gmail.com>

src/app/organisms/profile-viewer/ProfileViewer.jsx

@@ -0,0 +1,255 @@
+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 { selectRoom } from '../../../client/action/navigation';
+import * as roomActions from '../../../client/action/room';
+
+import { getUsername, getUsernameOfRoomMember, getPowerLabel } from '../../../util/matrixUtil';
+import colorMXID from '../../../util/colorMXID';
+
+import Text from '../../atoms/text/Text';
+import Chip from '../../atoms/chip/Chip';
+import IconButton from '../../atoms/button/IconButton';
+import Avatar from '../../atoms/avatar/Avatar';
+import Button from '../../atoms/button/Button';
+import Dialog from '../../molecules/dialog/Dialog';
+import SettingTile from '../../molecules/setting-tile/SettingTile';
+
+import ShieldEmptyIC from '../../../../public/res/ic/outlined/shield-empty.svg';
+import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+function SessionInfo({ userId }) {
+  const [devices, setDevices] = useState(null);
+  const mx = initMatrix.matrixClient;
+
+  useEffect(() => {
+    let isUnmounted = false;
+
+    async function loadDevices() {
+      try {
+        await mx.downloadKeys([userId], true);
+        const myDevices = mx.getStoredDevicesForUser(userId);
+
+        if (isUnmounted) return;
+        setDevices(myDevices);
+      } catch {
+        setDevices([]);
+      }
+    }
+    loadDevices();
+
+    return () => {
+      isUnmounted = true;
+    };
+  }, [userId]);
+
+  function renderSessionChips() {
+    return (
+      <div className="session-info__chips">
+        {devices === null && <Text variant="b3">Loading sessions...</Text>}
+        {devices?.length === 0 && <Text variant="b3">No session found.</Text>}
+        {devices !== null && (devices.map((device) => (
+          <Chip
+            key={device.deviceId}
+            iconSrc={ShieldEmptyIC}
+            text={device.getDisplayName() || device.deviceId}
+          />
+        )))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="session-info">
+      <SettingTile
+        title="Sessions"
+        content={renderSessionChips()}
+      />
+    </div>
+  );
+}
+
+SessionInfo.propTypes = {
+  userId: PropTypes.string.isRequired,
+};
+
+function ProfileFooter({ userId, onRequestClose }) {
+  const [isCreatingDM, setIsCreatingDM] = useState(false);
+  const [isIgnoring, setIsIgnoring] = useState(false);
+  const [isUserIgnored, setIsUserIgnored] = useState(initMatrix.matrixClient.isUserIgnored(userId));
+
+  const mx = initMatrix.matrixClient;
+  const isMountedRef = useRef(true);
+
+  useEffect(() => () => {
+    isMountedRef.current = false;
+  }, []);
+  useEffect(() => {
+    setIsUserIgnored(initMatrix.matrixClient.isUserIgnored(userId));
+  }, [userId]);
+
+  async function openDM() {
+    const directIds = [...initMatrix.roomList.directs];
+
+    // Check and open if user already have a DM with userId.
+    for (let i = 0; i < directIds.length; i += 1) {
+      const dRoom = mx.getRoom(directIds[i]);
+      const roomMembers = dRoom.getMembers();
+      if (roomMembers.length <= 2 && dRoom.currentState.members[userId]) {
+        selectRoom(directIds[i]);
+        onRequestClose();
+        return;
+      }
+    }
+
+    // Create new DM
+    try {
+      setIsCreatingDM(true);
+      const result = await roomActions.create({
+        isEncrypted: true,
+        isDirect: true,
+        invite: [userId],
+      });
+
+      if (isMountedRef.current === false) return;
+      setIsCreatingDM(false);
+      selectRoom(result.room_id);
+      onRequestClose();
+    } catch {
+      setIsCreatingDM(false);
+    }
+  }
+
+  async function toggleIgnore() {
+    const ignoredUsers = mx.getIgnoredUsers();
+    const uIndex = ignoredUsers.indexOf(userId);
+    if (uIndex >= 0) {
+      if (uIndex === -1) return;
+      ignoredUsers.splice(uIndex, 1);
+    } else ignoredUsers.push(userId);
+
+    try {
+      setIsIgnoring(true);
+      await mx.setIgnoredUsers(ignoredUsers);
+
+      if (isMountedRef.current === false) return;
+      setIsUserIgnored(uIndex < 0);
+      setIsIgnoring(false);
+    } catch {
+      setIsIgnoring(false);
+    }
+  }
+  return (
+    <div className="profile-viewer__buttons">
+      <Button
+        variant="primary"
+        onClick={openDM}
+        disabled={isCreatingDM}
+      >
+        {isCreatingDM ? 'Creating room...' : 'Message'}
+      </Button>
+      <Button>Mention</Button>
+      <Button
+        variant={isUserIgnored ? 'positive' : 'danger'}
+        onClick={toggleIgnore}
+        disabled={isIgnoring}
+      >
+        {
+          isUserIgnored
+            ? `${isIgnoring ? 'Unignoring...' : 'Unignore'}`
+            : `${isIgnoring ? 'Ignoring...' : 'Ignore'}`
+        }
+      </Button>
+    </div>
+  );
+}
+ProfileFooter.propTypes = {
+  userId: PropTypes.string.isRequired,
+  onRequestClose: PropTypes.func.isRequired,
+};
+
+function ProfileViewer() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [roomId, setRoomId] = useState(null);
+  const [userId, setUserId] = useState(null);
+
+  const mx = initMatrix.matrixClient;
+  const room = roomId ? mx.getRoom(roomId) : null;
+  let username = '';
+  if (room !== null) {
+    const roomMember = room.getMember(userId);
+    if (roomMember) username = getUsernameOfRoomMember(roomMember);
+    else username = getUsername(userId);
+  }
+
+  function loadProfile(uId, rId) {
+    setIsOpen(true);
+    setUserId(uId);
+    setRoomId(rId);
+  }
+
+  useEffect(() => {
+    navigation.on(cons.events.navigation.PROFILE_VIEWER_OPENED, loadProfile);
+    return () => {
+      navigation.removeListener(cons.events.navigation.PROFILE_VIEWER_OPENED, loadProfile);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) return;
+    setUserId(null);
+    setRoomId(null);
+  }, [isOpen]);
+
+  function renderProfile() {
+    const member = room.getMember(userId) || mx.getUser(userId);
+    const avatarMxc = member.getMxcAvatarUrl() || member.avatarUrl;
+
+    return (
+      <div className="profile-viewer">
+        <div className="profile-viewer__user">
+          <Avatar
+            imageSrc={!avatarMxc ? null : mx.mxcUrlToHttp(avatarMxc, 80, 80, 'crop')}
+            text={username.slice(0, 1)}
+            bgColor={colorMXID(userId)}
+            size="large"
+          />
+          <div className="profile-viewer__user__info">
+            <Text variant="s1">{username}</Text>
+            <Text variant="b2">{userId}</Text>
+          </div>
+          <div className="profile-viewer__user__role">
+            <Text variant="b3">Role</Text>
+            <Button iconSrc={ChevronBottomIC}>{getPowerLabel(member.powerLevel) || 'Member'}</Button>
+          </div>
+        </div>
+        <SessionInfo userId={userId} />
+        { userId !== mx.getUserId() && (
+          <ProfileFooter
+            userId={userId}
+            onRequestClose={() => setIsOpen(false)}
+          />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <Dialog
+      className="profile-viewer__dialog"
+      isOpen={isOpen}
+      title={`${username} in ${room?.name ?? ''}`}
+      onRequestClose={() => setIsOpen(false)}
+      contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />}
+    >
+      {isOpen && renderProfile()}
+    </Dialog>
+  );
+}
+
+export default ProfileViewer;