client/src/components/MessageWrapper.tsx

@@ -3,7 +3,6 @@ import { getMessages } from '@controllers/MessageController';
 import { useQuery } from '@tanstack/react-query';
 import { toastError } from '@controllers/Toasts';
 import ScrollToBottom from './ScrollToBottom';
-import { api } from '../main';
 
 const MessageWrapper = () => {
   const {
@@ -11,14 +10,6 @@ const MessageWrapper = () => {
     isLoading,
     isError,
   } = useQuery(['messages'], getMessages, {
-    onSuccess: (data) => {
-      data.map((message: any) => {
-        if (message.image) {
-          message.image = api.slice(0, -4) + message.image;
-        }
-      });
-      return data;
-    },
     onError: (error) => {
       toastError(error as string);
     },

client/src/components/NewMessage.tsx

@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 import { FaPlus, FaTimes } from 'react-icons/fa';
 import { newMessage } from '@controllers/MessageController';
 
@@ -8,7 +8,6 @@ const NewMessage = () => {
   const [image, setImage] = useState('');
   const queryClient = useQueryClient();
   const [preview, setPreview] = useState('');
-  const imageRef = useRef<HTMLInputElement>(null);
 
   const handleImageSelect = (e: any) => {
     setImage(e.target.value);
@@ -38,9 +37,6 @@ const NewMessage = () => {
     setMessage('');
     setImage('');
     setPreview('');
-    if (imageRef.current) {
-      imageRef.current.value = '';
-    }
   };
 
   const handleRemoveImage = () => {
@@ -78,7 +74,6 @@ const NewMessage = () => {
               className="hidden"
               {...(image !== '' && { value: image })}
               onChange={handleImageSelect}
-              ref={imageRef}
             />
           </div>
 

client/src/components/ScrollToBottom.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useState } from 'react';
 import { FaChevronDown } from 'react-icons/fa';
 
 const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; className?: string }) => {
@@ -12,37 +12,21 @@ const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; cla
     }
   }, []);
 
-  useMemo(() => {
+  useEffect(() => {
-    if (node) {
+    const container = document.querySelector('main > div');
-      const container = document.querySelector('main > div');
+    container?.addEventListener('scroll', () => {
-      container?.addEventListener('DOMNodeInserted', (e) => {
+      if (node?.getBoundingClientRect() && node.getBoundingClientRect().y >= window.innerHeight) {
-        if (!(e.target as Element).classList.contains('message')) return;
+        setShow(true);
-        if (node?.getBoundingClientRect() && node.getBoundingClientRect().y >= window.innerHeight) {
+      } else {
-          node?.scrollIntoView({ behavior: 'smooth' });
+        setShow(false);
-        }
+      }
-      });
+    });
-
+    container?.addEventListener('DOMNodeInserted', (e) => {
-      container?.querySelectorAll('.message > div > img').forEach((img) => {
+      if (!(e.target as Element).classList.contains('message')) return;
-        img.addEventListener('load', () => {
+      if (node?.getBoundingClientRect() && node.getBoundingClientRect().y >= window.innerHeight) {
-          if (node?.getBoundingClientRect() && node.getBoundingClientRect().y >= window.innerHeight) {
+        node?.scrollIntoView({ behavior: 'smooth' });
-            node?.scrollIntoView({ behavior: 'smooth' });
+      }
-          }
+    });
-        });
-      });
-
-      const observer = new IntersectionObserver(
-        ([entry]) => {
-          if (entry.isIntersecting) {
-            setShow(false);
-          } else {
-            setShow(true);
-          }
-        },
-        { threshold: 1 }
-      );
-      observer.observe(node);
-      return () => observer.disconnect();
-    }
   }, [node]);
 
   return (
@@ -59,7 +43,7 @@ const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; cla
         <span className="popup-btn block 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" />
         </span>
-        <span className="sr-only">Descendre en bas de la page</span>
+        <span className='sr-only'>Descendre en bas de la page</span>
       </button>
     </>
   );

client/src/controllers/UserController.ts

@@ -132,6 +132,9 @@ export const changeUserInfo = async (userId: string, formData: FormData) => {
       newPassword,
     }),
   });
+  if (!response.ok) {
+    return {error: response.statusText};
+  }
   const data = await response.json();
   if (data.error) {
     return {error: data.error};