Add redimentary group support

src/components/Avatar.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
-import { Room, User } from '../matrix-cypher';
+import { Group, Room, User } from '../matrix-cypher';
 
 import { getMediaQueryFromMCX } from '../utils/cypher-wrapper';
 import logo from '../imgs/chat-icon.svg';
@@ -35,12 +35,15 @@ const Avatar: React.FC<IProps> = ({ className, avatarUrl, label }: IProps) => {
         setSrc(avatarUrl);
     }, [avatarUrl]);
 
+    const _className = classNames('avatar', className, {
+        avatarNoCrop: src === logo,
+    });
     return (
         <img
             src={src}
             onError={(): void => setSrc(logo)}
             alt={label}
-            className={classNames('avatar', className)}
+            className={_className}
         />
     );
 };
@@ -73,4 +76,17 @@ export const RoomAvatar: React.FC<IPropsRoomAvatar> = ({
     />
 );
 
+interface IPropsGroupAvatar {
+    group: Group;
+}
+
+export const GroupAvatar: React.FC<IPropsGroupAvatar> = ({
+    group,
+}: IPropsGroupAvatar) => (
+    <Avatar
+        avatarUrl={getMediaQueryFromMCX(group.avatar_url)}
+        label={group.name}
+    />
+);
+
 export default Avatar;