From f1b2cb95a075330843c05b699554ee9ac90fbdd5 Mon Sep 17 00:00:00 2001 From: KostiantynU <115901013+KostiantynU@users.noreply.github.com> Date: Wed, 10 Jul 2024 23:15:33 +0300 Subject: [PATCH] Fix styles in some components. Added accessToken to some query --- src/components/Chat/Chat.jsx | 2 +- .../Chat/TopicSettingsMenu/TopicSettingsMenu.jsx | 2 +- .../Layouts/Header/HeaderUserInfo/HeaderUserInfo.jsx | 2 +- src/components/NewTopic/NewTopic.jsx | 9 ++++++++- .../FieldRadio/FieldRadio.jsx | 2 +- .../RegistrationPageComponent.styled.js | 10 +++++----- src/redux/chat-operations.js | 8 ++------ src/redux/topics-operations.js | 12 ++++++------ .../components/WhiteLayout/WhiteLayout.styled.js | 2 +- 9 files changed, 26 insertions(+), 23 deletions(-) diff --git a/src/components/Chat/Chat.jsx b/src/components/Chat/Chat.jsx index 1cd7e86..e8f25e3 100644 --- a/src/components/Chat/Chat.jsx +++ b/src/components/Chat/Chat.jsx @@ -92,7 +92,7 @@ const Chat = ({ children }) => { isFetching, error: messagesByTopicError, } = useGetMessagesByTopicQuery(topicId, { - refetchOnMountOrArgChange: 5, + refetchOnMountOrArgChange: 10, refetchOnFocus: true, refetchOnReconnect: true, }); diff --git a/src/components/Chat/TopicSettingsMenu/TopicSettingsMenu.jsx b/src/components/Chat/TopicSettingsMenu/TopicSettingsMenu.jsx index 3db7778..950291b 100644 --- a/src/components/Chat/TopicSettingsMenu/TopicSettingsMenu.jsx +++ b/src/components/Chat/TopicSettingsMenu/TopicSettingsMenu.jsx @@ -84,7 +84,7 @@ const TopicSettingsMenu = ({ topicId, subscribeStatus }) => { const handleRemoveFavourite = async () => { try { - const { error } = await removeFavourite(topicId); + const { error } = await removeFavourite({ topicId, accessTokenInStore }); if (error) { alert('Виникла помилка під час видалення теми з улюблених'); } else { diff --git a/src/components/Layouts/Header/HeaderUserInfo/HeaderUserInfo.jsx b/src/components/Layouts/Header/HeaderUserInfo/HeaderUserInfo.jsx index 8700f41..41bec2c 100644 --- a/src/components/Layouts/Header/HeaderUserInfo/HeaderUserInfo.jsx +++ b/src/components/Layouts/Header/HeaderUserInfo/HeaderUserInfo.jsx @@ -47,7 +47,7 @@ const HeaderUserInfo = () => { const notificationsAllTopics = useSelector(selectAllTopicsNotifications); const avatarsArray = Object.values(Avatars); - const isTablet = useMediaQuery({ query: '(min-width: 769px' }); + const isTablet = useMediaQuery({ query: '(min-width: 768px' }); if (error?.data?.httpStatus === 'UNAUTHORIZED') { alert( diff --git a/src/components/NewTopic/NewTopic.jsx b/src/components/NewTopic/NewTopic.jsx index 1df868f..6f33cb9 100644 --- a/src/components/NewTopic/NewTopic.jsx +++ b/src/components/NewTopic/NewTopic.jsx @@ -9,6 +9,9 @@ import { } from './NewTopic.styled'; import NewTopicInput from './NewTopicInput'; import { useCreateMutation } from '../../redux/topics-operations'; +import { useDispatch, useSelector } from 'react-redux'; +import { selectAccessToken } from '../../redux/authOperatonsToolkit/authOperationsThunkSelectors'; +import localLogOutUtil from '../../utils/localLogOutUtil'; const defaultValues = { topicName: '', @@ -23,6 +26,9 @@ function NewTopic({ closeModal }) { formState: { errors }, } = useForm({ mode: 'all', defaultValues: defaultValues }); + const dispatch = useDispatch(); + const accessTokenInStore = useSelector(selectAccessToken); + const [topicName, setTopicName] = useState(); const [tags, setTags] = useState(); @@ -44,12 +50,13 @@ function NewTopic({ closeModal }) { .filter((el) => (el !== '') & (el !== '#')); const newTopic = { topicName: topicName.trim(), tags: formattedTags }; try { - const { data } = await create(newTopic); + const { data } = await create({ newTopic, accessTokenInStore }); if (data) { closeModal(); alert(`Тема "${data.topicName}" успішно створена`); } else { alert('Виникла помилка під час створення теми'); + localLogOutUtil(dispatch); } } catch (error) { console.error(error); diff --git a/src/components/RegistrationPageComponent/FieldRadio/FieldRadio.jsx b/src/components/RegistrationPageComponent/FieldRadio/FieldRadio.jsx index b7f06af..275fea6 100644 --- a/src/components/RegistrationPageComponent/FieldRadio/FieldRadio.jsx +++ b/src/components/RegistrationPageComponent/FieldRadio/FieldRadio.jsx @@ -8,7 +8,7 @@ export const FieldRadio = ({ id, control, avatarId }) => { const avatarsList = Object.entries(Avatars).map((item) => { return { id: item[0].replace('Avatar', ''), Logo: item[1] }; }); - const isTablet = useMediaQuery({ query: '(min-width: 769px)' }); + const isTablet = useMediaQuery({ query: '(min-width: 768px)' }); const isExtraSmallScreen = useMediaQuery({ query: '(max-width: 560px)' }); const checkedValue = avatarId ? avatarId.toString() : '3'; diff --git a/src/components/RegistrationPageComponent/RegistrationPageComponent.styled.js b/src/components/RegistrationPageComponent/RegistrationPageComponent.styled.js index 21c07d2..a3d8fb8 100644 --- a/src/components/RegistrationPageComponent/RegistrationPageComponent.styled.js +++ b/src/components/RegistrationPageComponent/RegistrationPageComponent.styled.js @@ -8,9 +8,9 @@ export const RegistrationWrapper = styled(Box)` flex-direction: column; align-items: center; margin: auto; - padding-bottom: 30px; + padding-bottom: 50px; - @media screen and (min-width: 769px) { + @media screen and (min-width: 768px) { align-items: flex-start; padding: 30px; } @@ -33,7 +33,7 @@ export const LogoIcon = styled(ICONS.LOGO)` height: 87px; } - @media screen and (min-width: 769px) { + @media screen and (min-width: 768px) { display: none; margin: 0 0 122px 0; height: 87px; @@ -54,7 +54,7 @@ export const RegistrationForm = styled.form` // ===== COMMON STYLES export const RegistrationInputWrapper = styled(Box)` position: relative; - margin: 3px 0 19px 0; + margin: 3px 0 20px 0; `; export const RegistrationLabel = styled(Typography)` @@ -85,7 +85,7 @@ export const RegistrationInput = styled(InputBase, { height: 46px; } - @media screen and (min-width: 769px) { + @media screen and (min-width: 768px) { width: ${(p) => (p.inputWidth ? p.inputWidth : '400px')}; } `; diff --git a/src/redux/chat-operations.js b/src/redux/chat-operations.js index a9304dc..5633167 100644 --- a/src/redux/chat-operations.js +++ b/src/redux/chat-operations.js @@ -181,17 +181,13 @@ export const subscribeToAllTopicsNotify = () => { // // console.log('message', message); // const parsedAllTopicsNotifications = JSON.parse(message.body); // // console.log('parsedAllTopicsNotifications', parsedAllTopicsNotifications); - // dispatch(setAllTopicsNotifications(parsedAllTopicsNotifications)); + // dispatch(setAllTopicsNotifications(parsedAllTopicsNotifications)); const subscriptionToAllNotify = await client.subscribe( subToAllTopicsNotificationsDest, (message) => { const parsedAllTopicsNotifications = JSON.parse(message.body); - dispatch( - setAllTopicsNotifications( - message.id ? [{ name: `${message.id}` }] : [{ name: 'test' }], - ), - ); + dispatch(setAllTopicsNotifications(parsedAllTopicsNotifications)); }, ); dispatch(setSubscribedAllTopicsNotify(true)); diff --git a/src/redux/topics-operations.js b/src/redux/topics-operations.js index c7ce3eb..9704385 100644 --- a/src/redux/topics-operations.js +++ b/src/redux/topics-operations.js @@ -7,15 +7,15 @@ const topicsApi = createApi({ tagTypes: ['Topics'], endpoints: (builder) => ({ create: builder.mutation({ - query: (body) => ({ + query: ({ newTopic, accessTokenInStore }) => ({ url: '/topics/create', method: 'POST', headers: { Referer: Referer, 'Content-Type': 'application/json', - Authorization: `Bearer ${localStorage.getItem('accessToken')}`, + Authorization: `Bearer ${accessTokenInStore}`, }, - body: JSON.stringify(body), + body: JSON.stringify(newTopic), }), invalidatesTags: ['Topics'], }), @@ -48,13 +48,13 @@ const topicsApi = createApi({ }), removeFavourite: builder.mutation({ - query: (id) => ({ - url: `/topics/${id}/favourite/remove`, + query: ({ topicId, accessTokenInStore }) => ({ + url: `/topics/${topicId}/favourite/remove`, method: 'PATCH', headers: { Referer: Referer, 'Content-Type': 'application/json', - Authorization: `Bearer ${localStorage.getItem('accessToken')}`, + Authorization: `Bearer ${accessTokenInStore}`, }, }), invalidatesTags: ['Topics'], diff --git a/src/ui-kit/components/WhiteLayout/WhiteLayout.styled.js b/src/ui-kit/components/WhiteLayout/WhiteLayout.styled.js index 03fb837..2fd0551 100644 --- a/src/ui-kit/components/WhiteLayout/WhiteLayout.styled.js +++ b/src/ui-kit/components/WhiteLayout/WhiteLayout.styled.js @@ -28,7 +28,7 @@ export const WhiteLayoutStyled = styled(Box, { display: flex; flex-direction: column; justify-content: center; - // align-items: center; + align-items: center; // width: ${(p) => (p.width ? p.width : '75vw')}; max-width: 624px; // height: ${(p) => (p.height ? p.height : '70vh')};