From 430076c6f0bb9587cb02456ad1109765b7222eb6 Mon Sep 17 00:00:00 2001 From: KostiantynU <115901013+KostiantynU@users.noreply.github.com> Date: Fri, 22 Nov 2024 22:16:10 +0200 Subject: [PATCH 1/2] 1. Unsubscribing from online status disabled. 2. Disabled check the successfull response from the server in registration progres - only success response left. 3. Added change typing status processing. 4. Changed position fo avatar DIV to relative, because changed the position of the chat header --- src/common/Topics/ChatsBlock/ChatsBlock.jsx | 8 +++++--- src/components/Chat/Chat.jsx | 13 +++++++++---- src/components/Chat/Chat.styled.js | 13 ++++++++----- .../RegistrationPageComponent.jsx | 12 ++++++++---- src/redux/chat-operations.js | 17 +++++++++++++---- src/ui-kit/components/Avatar/Avatar.styled.jsx | 1 + src/utils/stompClient.js | 8 ++++---- 7 files changed, 48 insertions(+), 24 deletions(-) diff --git a/src/common/Topics/ChatsBlock/ChatsBlock.jsx b/src/common/Topics/ChatsBlock/ChatsBlock.jsx index dbf997f..eb04c64 100644 --- a/src/common/Topics/ChatsBlock/ChatsBlock.jsx +++ b/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(() => { diff --git a/src/components/Chat/Chat.jsx b/src/components/Chat/Chat.jsx index a6bf16f..670a778 100644 --- a/src/components/Chat/Chat.jsx +++ b/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(); diff --git a/src/components/Chat/Chat.styled.js b/src/components/Chat/Chat.styled.js index d68de7c..1b82468 100644 --- a/src/components/Chat/Chat.styled.js +++ b/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,16 +40,18 @@ 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; - + background-color: white; margin-bottom: 16px; `; @@ -97,7 +100,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` diff --git a/src/components/RegistrationPageComponent/RegistrationPageComponent.jsx b/src/components/RegistrationPageComponent/RegistrationPageComponent.jsx index c9deb3d..c0dd7f9 100644 --- a/src/components/RegistrationPageComponent/RegistrationPageComponent.jsx +++ b/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); diff --git a/src/redux/chat-operations.js b/src/redux/chat-operations.js index 030bc65..ec958f4 100644 --- a/src/redux/chat-operations.js +++ b/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); + } + }; }; diff --git a/src/ui-kit/components/Avatar/Avatar.styled.jsx b/src/ui-kit/components/Avatar/Avatar.styled.jsx index e187fce..1605aec 100644 --- a/src/ui-kit/components/Avatar/Avatar.styled.jsx +++ b/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')}; diff --git a/src/utils/stompClient.js b/src/utils/stompClient.js index d48b89b..b69c1b0 100644 --- a/src/utils/stompClient.js +++ b/src/utils/stompClient.js @@ -30,7 +30,7 @@ function createClientInstance({ dispatch, accessTokenInStore }) { } }, onDisconnect: () => { - // dispatch(setConnected(false)); + dispatch(setConnected(false)); // console.log('This is onDisconnect CLG', event); localLogOutUtil(dispatch); }, @@ -38,9 +38,9 @@ function createClientInstance({ dispatch, accessTokenInStore }) { // 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( From 00f6e9b2e6d081ea7c38eb5817d458989118f20e Mon Sep 17 00:00:00 2001 From: KostiantynU <115901013+KostiantynU@users.noreply.github.com> Date: Sat, 23 Nov 2024 15:32:33 +0200 Subject: [PATCH 2/2] Changed styles for the chat window --- src/components/Chat/Chat.styled.js | 29 +++++++++++++++++++++++------ 1 file changed, 23 insertions(+), 6 deletions(-) diff --git a/src/components/Chat/Chat.styled.js b/src/components/Chat/Chat.styled.js index 1b82468..d941272 100644 --- a/src/components/Chat/Chat.styled.js +++ b/src/components/Chat/Chat.styled.js @@ -17,7 +17,7 @@ export const ChatWrap = styled.div` box-sizing: border-box; /* padding: 6px 6px 21px; */ // Old rule - padding: 0 6px 6px 6px; + /* padding: 0 6px 6px 6px; */ border-radius: 16px; background-color: ${(p) => p.theme.palette.primary.white}; overflow-y: auto; @@ -27,7 +27,7 @@ export const ChatWrap = styled.div` @media screen and (min-width: 768px) { max-width: 648px; height: 74vh; - padding: 0 8px 16px; + /* padding: 0 8px 16px; */ } @media screen and (min-width: calc(834px - 0.02px)) and (max-width: calc(1200px - 0.03px)) { @@ -40,7 +40,7 @@ export const ChatWrap = styled.div` max-width: 730px; /* height: calc(100vh - 297px); */ height: 75vh; - padding: 0 10px 16px; + /* padding: 0 10px 16px; */ } `; @@ -51,8 +51,15 @@ export const ChatHeader = styled(Box)` justify-content: space-between; */ display: grid; grid-template-columns: 2fr 2fr 50px; - background-color: white; 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)` @@ -181,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)` @@ -202,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; `;