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

…authenticated-user Made changes to two components - added request for private topics and messages. Changes have been made to display private topics and messages depending on the user's location.
Chat-Your-Way · Jul 12, 2024 · b0a8bfa · b0a8bfa
2 parents d1062ac + 9013e1f
commit b0a8bfa
Show file tree

Hide file tree

Showing 9 changed files with 237 additions and 109 deletions.
diff --git a/src/common/Topics/ChatsBlock/ChatItem/ChatItem.jsx b/src/common/Topics/ChatsBlock/ChatItem/ChatItem.jsx
@@ -41,13 +41,21 @@ const ChatItem = ({ isActive, data }) => {
           {isTopics ? (
             <TopicDesc title={data.name} />
           ) : (
-            <TopicDesc title={data.createdBy.nickname} />
+            <TopicDesc
+              title={
+                data.createdBy?.nickname ? data.createdBy.nickname : data.name
+              }
+            />
           )}
 
           {lastMessageContent && (
             <LastMessages
               userName={lastMessageContent.sentFrom}
-              message={lastMessageContent.lastMessage}
+              message={
+                lastMessageContent.lastMessage.length > 20
+                  ? `${lastMessageContent.lastMessage.slice(0, 20)}...`
+                  : lastMessageContent.lastMessage
+              }
               unreadedMessage={unreadedMessages}
               // isTyping={data.isTyping}
               lastMessageTime={getTime(lastMessageContent.timestamp)}

diff --git a/src/common/Topics/ChatsBlock/ChatsBlock.jsx b/src/common/Topics/ChatsBlock/ChatsBlock.jsx
@@ -4,7 +4,10 @@ import { memo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { useGetAllQuery } from '../../../redux/topics-operations';
+import {
+  useGetAllPrivateTopicsQuery,
+  useGetAllQuery,
+} from '../../../redux/topics-operations';
 import { useTopicsContext } from '../TopicsContext';
 import ChatItem from './ChatItem';
 import { ChatBlockDataHelper } from './ChatBlockDataHelper';
@@ -32,7 +35,12 @@ const ChatsBlock = ({ filter }) => {
   const { pathname } = useLocation();
   const path = pathname.includes('topics') ? 'topics' : 'notification';
   const accessTokenInStore = useSelector(selectAccessToken);
-  const { data, isLoading, isError, error } = useGetAllQuery(
+  const {
+    data: allTopicsData,
+    isLoading,
+    isError,
+    error,
+  } = useGetAllQuery(
     {
       filter,
       accessTokenInStore,
@@ -43,6 +51,18 @@ const ChatsBlock = ({ filter }) => {
       refetchOnReconnect: true,
     },
   );
+
+  const {
+    data: privateTopics,
+    currentData: currentPrivateTopics,
+    isFetching: isFetchingPrivateTopics,
+    error: privateTopicsError,
+  } = useGetAllPrivateTopicsQuery(accessTokenInStore, {
+    refetchOnMountOrArgChange: 10,
+    refetchOnFocus: true,
+    refetchOnReconnect: true,
+  });
+
   const { localLogOut } = useUser();
   const navigate = useNavigate();
   const dispatch = useDispatch();
@@ -59,21 +79,36 @@ const ChatsBlock = ({ filter }) => {
 
   return isLoading ? (
     <Loader />
+  ) : isTopics ? (
+    allTopicsData &&
+    // notificationsAllTopics.length !== 0 &&
+    allTopicsData.map((item) => {
+      const notification = notificationsAllTopics.find(
+        (notificationItem) => notificationItem.id === item.id,
+      );
+
+      return (
+        <StyledNavLink to={`../${path}/chat/${item.id}`} key={item.id}>
+          {/* <ChatItem data={item} notification={notification} /> */}
+          <ChatItem data={item} />
+        </StyledNavLink>
+      );
+    })
   ) : (
-    data &&
-      // notificationsAllTopics.length !== 0 &&
-      data.map((item) => {
-        const notification = notificationsAllTopics.find(
-          (notificationItem) => notificationItem.id === item.id,
-        );
+    privateTopics &&
+    // notificationsAllTopics.length !== 0 &&
+    privateTopics.map((item) => {
+      const notification = notificationsAllTopics.find(
+        (notificationItem) => notificationItem.id === item.id,
+      );
 
-        return (
-          <StyledNavLink to={`../${path}/chat/${item.id}`} key={item.id}>
-            {/* <ChatItem data={item} notification={notification} /> */}
-            <ChatItem data={item} />
-          </StyledNavLink>
-        );
-      })
+      return (
+        <StyledNavLink to={`../${path}/chat/${item.id}`} key={item.id}>
+          {/* <ChatItem data={item} notification={notification} /> */}
+          <ChatItem data={item} />
+        </StyledNavLink>
+      );
+    })
   );
 };
 

diff --git a/src/common/Topics/Topics.jsx b/src/common/Topics/Topics.jsx
@@ -5,7 +5,7 @@ import { TopicsWrapper } from './Topics.styled';
 import ChatsBlock from './ChatsBlock';
 import TopicsHeader from './TopicsHeader';
 
-const Topics = ({ handleBTNTopicFunc, handleBTNFunc }) => {
+const Topics = ({ handleBTNTopicFunc, handleModal }) => {
   const [filter, setFilter] = useState('all');
 
   const chatOpened = useSelector(selectChatOpened);
@@ -14,7 +14,7 @@ const Topics = ({ handleBTNTopicFunc, handleBTNFunc }) => {
   return (
     <TopicsWrapper chatOpened={chatOpened} contactsOpened={contactsOpened}>
       <TopicsHeader
-        handleBTNFunc={handleBTNFunc}
+        handleModal={handleModal}
         active={filter}
         setFilter={setFilter}
       />

diff --git a/src/common/Topics/TopicsHeader/ThemeBlock/ThemeBlock.jsx b/src/common/Topics/TopicsHeader/ThemeBlock/ThemeBlock.jsx
@@ -7,7 +7,7 @@ import { StyledBox } from './ThemeBlock.styled';
 import DefaultButton from '../../../../ui-kit/components/Button';
 import { ICONS } from '../../../../ui-kit/icons';
 
-const ThemeBlock = ({ isTopics, handleBTNFunc }) => {
+const ThemeBlock = ({ isTopics, handleModal }) => {
   const title = isTopics ? 'Теми' : 'Повідомлення';
 
   const chatOpened = useSelector(selectChatOpened);
@@ -20,7 +20,7 @@ const ThemeBlock = ({ isTopics, handleBTNFunc }) => {
         <DefaultButton
           label="Нова"
           endIcon={<ICONS.EDIT_SQUARE />}
-          handleClick={handleBTNFunc}
+          handleClick={handleModal}
         />
       )}
     </StyledBox>

diff --git a/src/common/Topics/TopicsHeader/TopicsHeader.jsx b/src/common/Topics/TopicsHeader/TopicsHeader.jsx
@@ -9,7 +9,7 @@ import TabsBlock from './TabsBlock';
 import { StyledBox, StyledSearchInput } from './TopicsHeader.styled';
 import { useTopicsContext } from '../TopicsContext';
 
-const TopicsHeader = ({ handleBTNFunc, active, setFilter }) => {
+const TopicsHeader = ({ handleModal, active, setFilter }) => {
   const { isTopics } = useTopicsContext();
 
   const chatOpened = useSelector(selectChatOpened);
@@ -18,7 +18,7 @@ const TopicsHeader = ({ handleBTNFunc, active, setFilter }) => {
 
   return (
     <>
-      <ThemeBlock isTopics={isTopics} handleBTNFunc={handleBTNFunc} />
+      <ThemeBlock isTopics={isTopics} handleModal={handleModal} />
       {isTopics && <TabsBlock active={active} setFilter={setFilter} />}
       <StyledBox>
         <StyledSearchInput