add normal time format with relative date js

frontend/src/components/chatPage/ChatPage.jsx

@@ -47,7 +47,6 @@ export const ChatPage = () => {
 
     const [play] = useSound(getNotif, {volume: 0.005});
 
-console.log(newPrivateMessages)
     const axiosConfig =   {
         headers: {
             "Content-type": "multipart/form-data"

frontend/src/components/chatPage/generalChat/FindUserBox.jsx

@@ -14,7 +14,7 @@ export const FindUserBox = () => {
     return (
         <>
             <div className='online'>  
-                <div>Find users to write</div>
+                <div>Find users for chat</div>
                 <input style={{width:'80%'}}
                         value = {findUser} 
                         onChange={(e) => {

frontend/src/components/chatPage/messageForm/MessegaForm.jsx

@@ -10,7 +10,6 @@ import { MessageEditorMenu } from '../MessageEditorMenu.jsx';
 import imgBtn from '../../../assets/img/gg.png';
 import useSound from 'use-sound';
 import notifSound from '../../../assets/get.mp3'
-import { useMemo } from 'react';
 
 
 export const MessageForm = () => {
@@ -36,6 +35,8 @@ export const MessageForm = () => {
 
     const [play] = useSound(notifSound);
 
+
+
     useEffect(() => {
         if (!isEditing) {
             scrollToBottom((endMessages)) 
@@ -161,7 +162,7 @@ export const MessageForm = () => {
                         {isEditiedMessage && <i>Edited</i>}
                         <div className={ 
                                 (item.userName === user.userName)? 'myDate' :'date'}>
-                                {dateFormat(item).time}
+                                {dateFormat(item)}
                         </div>
                     </div>
                 )}

frontend/src/components/chatPage/utils/dateFormat.js

@@ -1,9 +1,30 @@
 export const dateFormat = (item) => {
-//need to change on  Moment js
-    const res = item.createDate.split('T');
-    const date = {
-        year : res[0],
-        time : res[1].slice(-13, -5)
-    }
-    return date;
-}  
+
+    const lang = navigator.language;
+    const rtf = new Intl.RelativeTimeFormat( lang, { numeric: 'auto' });
+
+    const dateSecDelta = Math.round((new Date(item.createDate).getTime() - Date.now())/1000) ;
+
+    const secondTimeMarkers = [60, 3600, 86400, 86400 * 7, 86400 * 30, 86400 * 365, Infinity];
+
+    const literalTimeMarkers = ['second','minute', 'hour', 'day', 'week', 'month' ,'year'];
+
+    const indexTime = secondTimeMarkers.findIndex(time => time > Math.abs(dateSecDelta))
+
+    const divisor = indexTime ? secondTimeMarkers[indexTime - 1] : 1 //for seconds if index 0 then seconds 
+
+    const test = rtf.format(Math.floor(dateSecDelta/divisor),literalTimeMarkers[indexTime])
+
+
+// //need to change on  Moment js
+//     const res = item.createDate.split('T');
+//     const date = {
+//         year : res[0],
+//         time : res[1].slice(-13, -5)
+//     }
+    return test;
+}  
+
+        //date formating
+
+