Chat 240 display unread messages

src/common/Topics/ChatsBlock/ChatsBlock.jsx

@@ -78,9 +78,11 @@ const ChatsBlock = ({ filter, searchInputValue }) => {
     dispatch(subscribeOnlineOrTypingStatus());
     dispatch(fetchOnlineContacts(accessTokenInStore));
 
-    return () => {
-      dispatch(unSubscribeOnlineOrTypingStatus());
-    };
+    // I'm not sure that I need to unsubscribe from online and typing user status, but
+    // this code will be here for some time.
+    // return () => {
+    //   dispatch(unSubscribeOnlineOrTypingStatus());
+    // };
   }, [dispatch, accessTokenInStore]);
 
   useEffect(() => {

src/components/Chat/Chat.jsx

@@ -101,6 +101,7 @@ const Chat = ({ children }) => {
 
   const currentPageRef = useRef(1);
   const totalPagesRef = useRef(0);
+  const typingTimerId = useRef(null);
 
   const accessTokenInStore = useSelector(selectAccessToken);
 
@@ -498,9 +499,13 @@ const Chat = ({ children }) => {
     // }
   };
 
-  const onChangeInput = (event) => {
-    setIsTyping(true);
-    changeTypingStatus({ isTyping: false, topicId: topicId });
+  const onChangeInput = () => {
+    dispatch(changeTypingStatus({ isTyping: true, topicId: topicId }));
+
+    clearTimeout(typingTimerId.current);
+    typingTimerId.current = setTimeout(() => {
+      dispatch(changeTypingStatus({ isTyping: false, topicId: topicId }));
+    }, 2000);
   };
 
   const subscribeStatus = () => {
@@ -871,7 +876,7 @@ const Chat = ({ children }) => {
                   type="text" //!
                   maxRows={3}
                   placeholder={'Введіть повідомлення...'}
-                  onChange={throttle(onChangeInput, 1000)}
+                  onChange={throttle(onChangeInput, 2000)}
                   onKeyDown={(event) => {
                     if (event.key === 'Enter' && !event.shiftKey) {
                       event.preventDefault();

src/components/Chat/Chat.styled.js

@@ -4,6 +4,7 @@ import { ICONS } from '../../ui-kit/icons';
 
 // export const ChatWrap = styled(Box)`
 export const ChatWrap = styled.div`
+  position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -16,7 +17,7 @@ export const ChatWrap = styled.div`
   box-sizing: border-box;
 
   /* padding: 6px 6px 21px; */ // Old rule
-  padding: 6px;
+  /* padding: 0 6px 6px 6px; */
   border-radius: 16px;
   background-color: ${(p) => p.theme.palette.primary.white};
   overflow-y: auto;
@@ -26,7 +27,7 @@ export const ChatWrap = styled.div`
   @media screen and (min-width: 768px) {
     max-width: 648px;
     height: 74vh;
-    padding: 8px 8px 16px;
+    /* padding: 0 8px 16px; */
   }
 
   @media screen and (min-width: calc(834px - 0.02px)) and (max-width: calc(1200px - 0.03px)) {
@@ -39,17 +40,26 @@ export const ChatWrap = styled.div`
     max-width: 730px;
     /* height: calc(100vh - 297px); */
     height: 75vh;
-    padding: 8px 10px 16px;
+    /* padding: 0 10px 16px; */
   }
 `;
 
 export const ChatHeader = styled(Box)`
+  position: sticky;
+  top: 0;
   /* display: flex;
   justify-content: space-between; */
   display: grid;
   grid-template-columns: 2fr 2fr 50px;
-
   margin-bottom: 16px;
+  padding: 6px 6px 0;
+  background-color: ${(p) => p.theme.palette.primary.white};
+  @media screen and (min-width: 768px) {
+    padding: 8px 8px 0;
+  }
+  @media screen and (min-width: 1200px) {
+    padding: 8px 10px 0;
+  }
 `;
 
 export const UserBox = styled(Box)`
@@ -97,7 +107,7 @@ export const ChatSectionWrap = styled(Box)`
 export const ChatSection = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 2 px;
+  gap: 2px;
 `;
 
 export const MessageContainer = styled.div`
@@ -178,9 +188,19 @@ export const TextMessage = styled(Box)`
 `;
 
 export const InputBox = styled(Box)`
+  position: sticky;
+  bottom: 0;
   display: flex;
-  position: relative;
+  /* position: relative; */
   align-items: center;
+  padding: 0px 0px 6px;
+  background-color: ${(p) => p.theme.palette.primary.white};
+  @media screen and (min-width: 768px) {
+    padding: 0px 8px 10px;
+  }
+  @media screen and (min-width: 1200px) {
+    padding: 0px 10px 16px;
+  }
 `;
 
 export const ChatInputStyled = styled(TextareaAutosize)`
@@ -199,7 +219,7 @@ export const ChatInputStyled = styled(TextareaAutosize)`
 export const ChatInputIconBox = styled(Box)`
   display: flex;
   position: absolute;
-  bottom: 8px;
+  bottom: 25px;
   right: 20px;
   gap: 10px;
 `;

src/components/RegistrationPageComponent/RegistrationPageComponent.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import { useForm } from 'react-hook-form';
 import { FieldText } from './FieldText/FieldText';
 import { FieldPassword } from './FieldPassword/FieldPassword';
@@ -69,10 +70,13 @@ function RegistrationPageComponent() {
       // localStorage.setItem('accessToken', registrationData.accessToken);
       // localStorage.setItem('refreshToken', registrationData.refreshToken);
       if (isSuccess) {
-        if (registrationData.registrationStatus === 'successfull') {
-          dispatch(setUserInfo(userData));
-          navigate(PATH.VERIFICATION_EMAIL);
-        }
+        dispatch(setUserInfo(userData));
+        navigate(PATH.VERIFICATION_EMAIL);
+        // This is an old code below - it was time when two tokens was used.
+        // if (registrationData.registrationStatus === 'successfull') {
+        // dispatch(setUserInfo(userData));
+        // navigate(PATH.VERIFICATION_EMAIL);
+        // }
       }
     } catch (error) {
       console.error('Виникла помилка під час заповнення форми:', error);

src/redux/chat-operations.js

@@ -370,8 +370,17 @@ export const unSubscribeOnlineOrTypingStatus = () => {
 };
 
 export const changeTypingStatus = ({ isTyping = false, topicId }) => {
-  client.publish({
-    destination: `${sendIsTypingDest}/${isTyping}`,
-    body: JSON.stringify({ topicId }),
-  });
+  return async (dispatch) => {
+    try {
+      client.publish({
+        destination: `${sendIsTypingDest}/${isTyping}`,
+        body: JSON.stringify({ topicId }),
+      });
+
+      dispatch(setTypingStatus(isTyping));
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log('error in change typingStatus', error);
+    }
+  };
 };

src/ui-kit/components/Avatar/Avatar.styled.jsx

@@ -10,6 +10,7 @@ const sizePicker = {
 };
 
 export const AvatarStyled = styled(Avatar)`
+  position: static;
   ${(p) => sizePicker[p.size]};
   padding: 0;
   border: ${(p) => (p.current === 'true' ? '1px solid #353535' : 'none')};

src/utils/stompClient.js

@@ -30,17 +30,17 @@ function createClientInstance({ dispatch, accessTokenInStore }) {
       }
     },
     onDisconnect: () => {
-      // dispatch(setConnected(false));
+      dispatch(setConnected(false));
       // console.log('This is onDisconnect CLG', event);
       localLogOutUtil(dispatch);
     },
     onWebSocketError: () => {
       // console.log('This is onWSError CLG');
       localLogOutUtil(dispatch);
     },
-    // onStompError: errorFrame => {
-    //   console.log('StompErrorFrame', errorFrame);
-    // },
+    onStompError: () => {
+      // console.log('StompErrorFrame', errorFrame);
+    },
     webSocketFactory: function () {
       //   return socket;
       return new SockJS(