Merge pull request #97 from Chat-Your-Way/CHAT-236-Interface-for-non-…

…authenticated-user Fix styles in some components. Added accessToken to some query
Chat-Your-Way · Jul 11, 2024 · d1062ac · d1062ac
2 parents 49414bf + f1b2cb9
commit d1062ac
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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')};