handle error for image and add alt atribute

client/src/components/Avatar.tsx

@@ -6,28 +6,21 @@ const Avatar = ({ user }: any) => {
   const initials = user.firstName[0] + user.lastName[0];
   const gravatarUrl = gravatar.url(user.email, { s: '64', r: 'x', d: '404' }, true);
   const avatarUi = `https://ui-avatars.com/api/?name=${initials}&background=0D8ABC&color=fff&size=64`;
-  const [avatar, setAvatar] = useState(avatarUi);
-  const [firstLoad, setFirstLoad] = useState(true);
+  const [error, setError] = useState(false);
 
-  if (firstLoad) {
-    fetch(gravatarUrl)
-      .then((response) => {
-        if (response.ok) {
-          setAvatar(gravatarUrl);
-        }
-        setFirstLoad(false);
-      })
-      .catch((e) => {
-        setFirstLoad(false);
-      });
-  }
+  const handleError = (err: any) => {
+    if (!error) {
+      setError(true);
+    }
+  };
 
   return (
     <div className="avatar shrink-0">
       <Image
-        src={avatar}
-        alt="avatar"
+        src={!error ? gravatarUrl : avatarUi}
+        alt={`avatar ${user.firstName} ${user.lastName}`}
         className="rounded-full w-12 h-12 md:w-16 md:h-16 transition-all cursor-pointer"
+        onError={handleError}
       />
     </div>
   );

client/src/components/Image.tsx

@@ -2,14 +2,17 @@ import { useState } from 'react';
 import { FaTimes } from 'react-icons/fa';
 import Modal from './Modal';
 
-const Image = ({ src, alt, className }: { src: string; alt?: string; className?: string }) => {
+const Image = ({ src, alt, className, onError }: { src: string; alt?: string; className?: string, onError?: (err: any) => void }) => {
   const [error, setError] = useState(false);
   const [modal, setModal] = useState(false);
 
-  const onError = () => {
+  const handleError = (err: any) => {
     if (!error) {
       setError(true);
     }
+    if (onError) {
+      onError(err);
+    }
   };
 
   const onClick = () => {
@@ -26,18 +29,18 @@ const Image = ({ src, alt, className }: { src: string; alt?: string; className?:
               onClick={() => setModal(!modal)}
             />
             <img
-              src={error ? 'https://via.placeholder.com/150' : src}
+              src={(error && onError === undefined) ? 'https://via.placeholder.com/150' : src}
               alt={alt}
-              onError={onError}
+              onError={handleError}
               className={className}
             />
           </Modal>
         </div>
       )}
       <img
-        src={error ? 'https://via.placeholder.com/150' : src}
+        src={(error && onError === undefined) ? 'https://via.placeholder.com/150' : src}
         alt={alt}
-        onError={onError}
+        onError={handleError}
         className={className}
         onClick={onClick}
       />

client/src/components/Like.tsx

@@ -24,6 +24,7 @@ const Like = ({ messageId, isLiked }: { messageId: string; isLiked: boolean }) =
     <button
       className="absolute -bottom-10 right-0 mb-2 rounded-full bg-grey-dark shadow-lg shadow-slate-900 cursor-pointer"
       onClick={like}
+      value="like"
     >
       <FaThumbsUp className={'fill-red-light text-xl  w-10 h-10 p-2.5' + (isLiked ? ' fill-red' : '')} />
     </button>

client/src/components/ScrollToBottom.tsx

@@ -38,6 +38,7 @@ const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; cla
       <button
         onClick={() => node?.scrollIntoView({ behavior: 'smooth' })}
         className={'absolute right-3 ' + (show ? 'animate-show bottom-3 block' : 'animate-hide hidden bottom-0 -mb-10')}
+        value="Scroll to bottom"
       >
         <div className="popup-btn cursor-pointer rounded-full shadow-lg shadow-slate-900 bg-grey-dark hover:bg-grey-light transition-all">
           <FaChevronDown className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />