Remove avatars from frontend

webroot/js/components/chat/chat.js

@@ -43,14 +43,14 @@ export default class Chat extends Component {
 
   componentDidUpdate(prevProps, prevState) {
     const { username: prevName } = prevProps;
-    const { username, userAvatarImage } = this.props;
+    const { username } = this.props;
 
     const { messages: prevMessages } = prevState;
     const { messages } = this.state;
 
     // if username updated, send a message
     if (prevName !== username) {
-      this.sendUsernameChange(prevName, username, userAvatarImage);
+      this.sendUsernameChange(prevName, username);
     }
     // scroll to bottom of messages list when new ones come in
     if (messages.length > prevMessages.length) {
@@ -94,12 +94,11 @@ export default class Chat extends Component {
     });
   }
 
-  sendUsernameChange(oldName, newName, image) {
+  sendUsernameChange(oldName, newName) {
 		const nameChange = {
 			type: SOCKET_MESSAGE_TYPES.NAME_CHANGE,
 			oldName,
 			newName,
-			image,
 		};
 		this.websocket.send(nameChange);
   }
@@ -145,11 +144,10 @@ export default class Chat extends Component {
 		if (!content) {
 			return;
     }
-    const { username, userAvatarImage } = this.props;
+    const { username } = this.props;
     const message = {
       body: content,
 			author: username,
-			image: userAvatarImage,
 			type: SOCKET_MESSAGE_TYPES.CHAT,
     };
 		this.websocket.send(message);

webroot/js/components/chat/message.js

@@ -3,7 +3,6 @@ import htm from '/js/web_modules/htm.js';
 const html = htm.bind(h);
 
 import { messageBubbleColorForString } from '../../utils/user-colors.js';
-import { generateAvatar } from '../../utils/helpers.js';
 import { convertToText } from '../../utils/chat.js';
 import { SOCKET_MESSAGE_TYPES } from '../../utils/websocket.js';
 
@@ -12,23 +11,15 @@ export default class Message extends Component {
     const { message, username } = props;
     const { type } = message;
     if (type === SOCKET_MESSAGE_TYPES.CHAT) {
-      const { image, author, body, timestamp } = message;
+      const { author, body, timestamp } = message;
       const formattedMessage = formatMessageText(body, username);
-      const avatar = image || generateAvatar(author);
       const formattedTimestamp = formatTimestamp(timestamp);
 
       const authorColor = messageBubbleColorForString(author);
-      const avatarBgColor = { backgroundColor: authorColor };
       const authorTextColor = { color: authorColor };
       return (
         html`
           <div class="message flex flex-row items-start p-3">
-            <div
-              class="message-avatar rounded-full flex items-center justify-center mr-3"
-              style=${avatarBgColor}
-            >
-              <img src=${avatar} class="p-1" />
-            </div>
             <div class="message-content text-sm break-words w-full">
               <div class="message-author text-white font-bold" style=${authorTextColor}>
                 ${author}
@@ -44,17 +35,11 @@ export default class Message extends Component {
         </div>
       `);
     } else if (type === SOCKET_MESSAGE_TYPES.NAME_CHANGE) {
-      const { oldName, newName, image } = message;
+      const { oldName, newName } = message;
       return (
         html`
           <div class="message message-name-change flex items-center justify-start p-3">
             <div class="message-content flex flex-row items-center justify-center text-sm w-full">
-              <div
-                class="message-avatar rounded-full mr-3 bg-gray-900"
-              >
-                <img class="mr-2 p-1" src=${image} />
-              </div>
-
               <div class="text-white text-center opacity-50">
                 <span class="font-bold">${oldName}</span> is now known as <span class="font-bold">${newName}</span>.
               </div>

webroot/js/components/chat/username.js

@@ -2,8 +2,8 @@ import { h, Component, createRef } from '/js/web_modules/preact.js';
 import htm from '/js/web_modules/htm.js';
 const html = htm.bind(h);
 
-import { generateAvatar, setLocalStorage } from '../../utils/helpers.js';
-import { KEY_USERNAME, KEY_AVATAR } from '../../utils/constants.js';
+import { setLocalStorage } from '../../utils/helpers.js';
+import { KEY_USERNAME } from '../../utils/constants.js';
 
 export default class UsernameForm extends Component {
   constructor(props, context) {
@@ -47,11 +47,9 @@ export default class UsernameForm extends Component {
     let newName = this.textInput.current.value;
     newName = newName.trim();
     if (newName !== '' && newName !== curName) {
-      const newAvatar = generateAvatar(`${newName}${Date.now()}`);
       setLocalStorage(KEY_USERNAME, newName);
-      setLocalStorage(KEY_AVATAR, newAvatar);
       if (handleUsernameChange) {
-        handleUsernameChange(newName, newAvatar);
+        handleUsernameChange(newName);
       }
       this.handleHideForm();
     }
@@ -59,7 +57,7 @@ export default class UsernameForm extends Component {
   }
 
   render(props, state) {
-    const { username, userAvatarImage } = props;
+    const { username } = props;
     const { displayForm } = state;
 
     const narrowSpace = document.body.clientWidth < 640;
@@ -77,12 +75,6 @@ export default class UsernameForm extends Component {
       html`
         <div id="user-info">
           <div id="user-info-display" style=${styles.info} title="Click to update user name" class="flex flex-row justify-end items-center cursor-pointer py-2 px-4 overflow-hidden w-full opacity-1 transition-opacity duration-200 hover:opacity-75" onClick=${this.handleDisplayForm}>
-            <img
-              src=${userAvatarImage}
-              alt=""
-              id="username-avatar"
-              class="rounded-full bg-black bg-opacity-50 border border-solid border-gray-700 mr-2 h-8 w-8"
-            />
             <span id="username-display" class="text-indigo-600 text-xs font-semibold truncate overflow-hidden whitespace-no-wrap">${username}</span>
           </div>