diff --git a/src/components/Chat/ChatContainer.tsx b/src/components/Chat/ChatContainer.tsx index 399e5a4..2823b83 100644 --- a/src/components/Chat/ChatContainer.tsx +++ b/src/components/Chat/ChatContainer.tsx @@ -1,16 +1,14 @@ -import React, { useState } from "react"; -import InfiniteScroll from "react-infinite-scroller"; import { MainContainer, ChatContainer, MessageList, Message, MessageInput, - Avatar -} from "@chatscope/chat-ui-kit-react"; -import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css"; + Avatar, +} from '@chatscope/chat-ui-kit-react'; +import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css'; -export const ChatContainerComp = ({messages}) => { +export const ChatContainerComp = ({ messages }) => { // const [messages, setMessages] = useState([ // { id: 1, text: "Hello! How are you?", sender: "Joe"}, // { id: 2, text: "I'm good, thank you!", sender: "Me" } @@ -26,31 +24,31 @@ export const ChatContainerComp = ({messages}) => { // }; return ( -
+
- - {messages.map((msg) => ( - - {msg.direction === "incoming" && } - - ))} - - + + {messages.map((msg) => ( + + {msg.direction === 'incoming' && ( + + )} + + ))} + +
); }; - - diff --git a/src/components/Chat/ChatList.tsx b/src/components/Chat/ChatList.tsx index ef32e7e..e6353bb 100644 --- a/src/components/Chat/ChatList.tsx +++ b/src/components/Chat/ChatList.tsx @@ -1,23 +1,15 @@ -import React, { - useCallback, - useState, - useEffect, - useRef, - useMemo, -} from "react"; -import { useVirtualizer } from "@tanstack/react-virtual"; -import { MessageItem } from "./MessageItem"; -import { subscribeToEvent, unsubscribeFromEvent } from "../../utils/events"; -import { useInView } from "react-intersection-observer"; -import { Box, Typography } from "@mui/material"; -import { ChatOptions } from "./ChatOptions"; -import ErrorBoundary from "../../common/ErrorBoundary"; +import { useCallback, useState, useEffect, useRef, useMemo } from 'react'; +import { useVirtualizer } from '@tanstack/react-virtual'; +import { MessageItem } from './MessageItem'; +import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events'; +import { Box, Typography, useTheme } from '@mui/material'; +import { ChatOptions } from './ChatOptions'; +import ErrorBoundary from '../../common/ErrorBoundary'; export const ChatList = ({ initialMessages, myAddress, tempMessages, - chatId, onReply, onEdit, handleReaction, @@ -29,7 +21,7 @@ export const ChatList = ({ enableMentions, openQManager, hasSecretKey, - isPrivate + isPrivate, }) => { const parentRef = useRef(); const [messages, setMessages] = useState(initialMessages); @@ -42,33 +34,32 @@ export const ChatList = ({ // Initialize the virtualizer const rowVirtualizer = useVirtualizer({ count: messages.length, - getItemKey: (index) => messages[index]?.tempSignature || messages[index].signature, + getItemKey: (index) => + messages[index]?.tempSignature || messages[index].signature, getScrollElement: () => parentRef?.current, estimateSize: useCallback(() => 80, []), // Provide an estimated height of items, adjust this as needed overscan: 10, // Number of items to render outside the visible area to improve smoothness }); - const isAtBottom = useMemo(()=> { + const isAtBottom = useMemo(() => { if (parentRef.current && rowVirtualizer?.isScrolling !== undefined) { const { scrollTop, scrollHeight, clientHeight } = parentRef.current; - const atBottom = scrollTop + clientHeight >= scrollHeight - 10; // Adjust threshold as needed - return atBottom - } + const atBottom = scrollTop + clientHeight >= scrollHeight - 10; // Adjust threshold as needed + return atBottom; + } - return false - - }, [rowVirtualizer?.isScrolling]) + return false; + }, [rowVirtualizer?.isScrolling]); useEffect(() => { if (!parentRef.current || rowVirtualizer?.isScrolling === undefined) return; - if(isAtBottom){ + if (isAtBottom) { if (scrollingIntervalRef.current) { clearTimeout(scrollingIntervalRef.current); } setShowScrollDownButton(false); return; - } else - if (rowVirtualizer?.isScrolling) { + } else if (rowVirtualizer?.isScrolling) { if (scrollingIntervalRef.current) { clearTimeout(scrollingIntervalRef.current); } @@ -108,7 +99,13 @@ export const ChatList = ({ setTimeout(() => { const hasUnreadMessages = totalMessages.some( - (msg) => msg.unread && !msg?.chatReference && !msg?.isTemp && (!msg?.chatReference && msg?.timestamp > lastSeenUnreadMessageTimestamp.current || 0) + (msg) => + msg.unread && + !msg?.chatReference && + !msg?.isTemp && + ((!msg?.chatReference && + msg?.timestamp > lastSeenUnreadMessageTimestamp.current) || + 0) ); if (parentRef.current) { const { scrollTop, scrollHeight, clientHeight } = parentRef.current; @@ -136,9 +133,9 @@ export const ChatList = ({ const index = initialMsgs ? initialMsgs.length - 1 : messages.length - 1; if (rowVirtualizer) { if (divideIndex) { - rowVirtualizer.scrollToIndex(divideIndex, { align: "start" }); + rowVirtualizer.scrollToIndex(divideIndex, { align: 'start' }); } else { - rowVirtualizer.scrollToIndex(index, { align: "end" }); + rowVirtualizer.scrollToIndex(index, { align: 'end' }); } } handleMessageSeen(); @@ -152,7 +149,7 @@ export const ChatList = ({ })) ); setShowScrollButton(false); - lastSeenUnreadMessageTimestamp.current = Date.now() + lastSeenUnreadMessageTimestamp.current = Date.now(); }, []); const sentNewMessageGroupFunc = useCallback(() => { @@ -166,9 +163,9 @@ export const ChatList = ({ }, [messages]); useEffect(() => { - subscribeToEvent("sent-new-message-group", sentNewMessageGroupFunc); + subscribeToEvent('sent-new-message-group', sentNewMessageGroupFunc); return () => { - unsubscribeFromEvent("sent-new-message-group", sentNewMessageGroupFunc); + unsubscribeFromEvent('sent-new-message-group', sentNewMessageGroupFunc); }; }, [sentNewMessageGroupFunc]); @@ -181,21 +178,24 @@ export const ChatList = ({ const goToMessage = useCallback((idx) => { rowVirtualizer.scrollToIndex(idx); }, []); + + const theme = useTheme(); + return (
- {rowVirtualizer.getVirtualItems().map((virtualRow) => { const index = virtualRow.index; let message = messages[index] || null; // Safeguard against undefined @@ -231,7 +230,7 @@ export const ChatList = ({ let reply = null; let reactions = null; let isUpdating = false; - + try { // Safeguard for message existence if (message) { @@ -239,16 +238,19 @@ export const ChatList = ({ replyIndex = messages.findIndex( (msg) => msg?.signature === message?.repliedTo ); - + if (message?.repliedTo && replyIndex !== -1) { reply = { ...(messages[replyIndex] || {}) }; if (chatReferences?.[reply?.signature]?.edit) { - reply.decryptedData = chatReferences[reply?.signature]?.edit; - reply.text = chatReferences[reply?.signature]?.edit?.message; - reply.editTimestamp = chatReferences[reply?.signature]?.edit?.timestamp + reply.decryptedData = + chatReferences[reply?.signature]?.edit; + reply.text = + chatReferences[reply?.signature]?.edit?.message; + reply.editTimestamp = + chatReferences[reply?.signature]?.edit?.timestamp; } } - + // GroupDirectId logic if (message?.message && message?.groupDirectId) { replyIndex = messages.findIndex( @@ -264,24 +266,34 @@ export const ChatList = ({ status: message?.status, }; } - + // Check for reactions and edits if (chatReferences?.[message.signature]) { - reactions = chatReferences[message.signature]?.reactions || null; - - if (chatReferences[message.signature]?.edit?.message && message?.text) { - message.text = chatReferences[message.signature]?.edit?.message; - message.isEdit = true - message.editTimestamp = chatReferences[message.signature]?.edit?.timestamp + reactions = + chatReferences[message.signature]?.reactions || null; + + if ( + chatReferences[message.signature]?.edit?.message && + message?.text + ) { + message.text = + chatReferences[message.signature]?.edit?.message; + message.isEdit = true; + message.editTimestamp = + chatReferences[message.signature]?.edit?.timestamp; } - if (chatReferences[message.signature]?.edit?.messageText && message?.messageText) { - message.messageText = chatReferences[message.signature]?.edit?.messageText; - message.isEdit = true - message.editTimestamp = chatReferences[message.signature]?.edit?.timestamp + if ( + chatReferences[message.signature]?.edit?.messageText && + message?.messageText + ) { + message.messageText = + chatReferences[message.signature]?.edit?.messageText; + message.isEdit = true; + message.editTimestamp = + chatReferences[message.signature]?.edit?.timestamp; } - } - + // Check if message is updating if ( tempChatReferences?.some( @@ -292,34 +304,37 @@ export const ChatList = ({ } } } catch (error) { - console.error("Error processing message:", error, { index, message }); + console.error('Error processing message:', error, { + index, + message, + }); // Gracefully handle the error by providing fallback data message = null; reply = null; reactions = null; } - // Render fallback if message is null + // Render fallback if message is null if (!message) { - return ( -
- Error loading message. -
- ); - } + return ( +
+ Error loading message. +
+ ); + } return (
- Error loading content: Invalid Data } > - - + +
); })} -
@@ -377,17 +390,17 @@ export const ChatList = ({
{enableMentions && (hasSecretKey || isPrivate === false) && ( { return convert(htmlString, { wordwrap: false, // Disable word wrapping })?.toLowerCase(); }; + const cache = new CellMeasurerCache({ fixedWidth: true, defaultHeight: 50, }); -export const ChatOptions = ({ messages : untransformedMessages, goToMessage, members, myName, selectedGroup, openQManager, isPrivate }) => { - const [mode, setMode] = useState("default"); - const [searchValue, setSearchValue] = useState(""); +export const ChatOptions = ({ + messages: untransformedMessages, + goToMessage, + members, + myName, + selectedGroup, + openQManager, + isPrivate, +}) => { + const [mode, setMode] = useState('default'); + const [searchValue, setSearchValue] = useState(''); const [selectedMember, setSelectedMember] = useState(0); - + const theme = useTheme(); const parentRef = useRef(); const parentRefMentions = useRef(); - const [lastMentionTimestamp, setLastMentionTimestamp] = useState(null) - const [debouncedValue, setDebouncedValue] = useState(""); // Debounced value - const messages = useMemo(()=> { - return untransformedMessages?.map((item)=> { - if(item?.messageText){ - let transformedMessage = item?.messageText + const [lastMentionTimestamp, setLastMentionTimestamp] = useState(null); + const [debouncedValue, setDebouncedValue] = useState(''); // Debounced value + const messages = useMemo(() => { + return untransformedMessages?.map((item) => { + if (item?.messageText) { + let transformedMessage = item?.messageText; try { - transformedMessage = generateHTML(item?.messageText, [ - StarterKit, - Underline, - Highlight, - Mention - ]) - return { - ...item, - messageText: transformedMessage - } + transformedMessage = generateHTML(item?.messageText, [ + StarterKit, + Underline, + Highlight, + Mention, + ]); + return { + ...item, + messageText: transformedMessage, + }; } catch (error) { // error } - } else return item - }) - }, [untransformedMessages]) + } else return item; + }); + }, [untransformedMessages]); + const getTimestampMention = async () => { try { return new Promise((res, rej) => { - window.sendMessage("getTimestampMention") - .then((response) => { - if (!response?.error) { - if(response && selectedGroup && response[selectedGroup]){ - setLastMentionTimestamp(response[selectedGroup]) - - - - - - } - - res(response); - return; - } - rej(response.error); - }) - .catch((error) => { - rej(error.message || "An error occurred"); - }); - + window + .sendMessage('getTimestampMention') + .then((response) => { + if (!response?.error) { + if (response && selectedGroup && response[selectedGroup]) { + setLastMentionTimestamp(response[selectedGroup]); + } + res(response); + return; + } + rej(response.error); + }) + .catch((error) => { + rej(error.message || 'An error occurred'); + }); }); - } catch (error) {} + } catch (error) { + console.log(error); + } }; - useEffect(()=> { - if(mode === 'mentions' && selectedGroup){ - window.sendMessage("addTimestampMention", { - timestamp: Date.now(), - groupId: selectedGroup - }).then((res)=> { - getTimestampMention() - }).catch((error) => { - console.error("Failed to add timestamp:", error.message || "An error occurred"); + useEffect(() => { + if (mode === 'mentions' && selectedGroup) { + window + .sendMessage('addTimestampMention', { + timestamp: Date.now(), + groupId: selectedGroup, + }) + .then((res) => { + getTimestampMention(); + }) + .catch((error) => { + console.error( + 'Failed to add timestamp:', + error.message || 'An error occurred' + ); }); } - }, [mode, selectedGroup]) + }, [mode, selectedGroup]); - useEffect(()=> { - getTimestampMention() - }, []) + useEffect(() => { + getTimestampMention(); + }, []); // Debounce logic useEffect(() => { @@ -151,32 +159,39 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem .filter( (message) => message?.senderName === selectedMember && - extractTextFromHTML(isPrivate ? message?.messageText : message?.decryptedData?.message)?.includes( - debouncedValue.toLowerCase() - ) + extractTextFromHTML( + isPrivate ? message?.messageText : message?.decryptedData?.message + )?.includes(debouncedValue.toLowerCase()) ) ?.sort((a, b) => b?.timestamp - a?.timestamp); } return messages .filter((message) => - extractTextFromHTML(isPrivate === false ? message?.messageText : message?.decryptedData?.message)?.includes(debouncedValue.toLowerCase()) + extractTextFromHTML( + isPrivate === false + ? message?.messageText + : message?.decryptedData?.message + )?.includes(debouncedValue.toLowerCase()) ) ?.sort((a, b) => b?.timestamp - a?.timestamp); }, [debouncedValue, messages, selectedMember, isPrivate]); const mentionList = useMemo(() => { - if(!messages || messages.length === 0 || !myName) return [] - if(isPrivate === false){ + if (!messages || messages.length === 0 || !myName) return []; + if (isPrivate === false) { return messages - .filter((message) => - extractTextFromHTML(message?.messageText)?.includes(`@${myName?.toLowerCase()}`) - ) - ?.sort((a, b) => b?.timestamp - a?.timestamp); - + .filter((message) => + extractTextFromHTML(message?.messageText)?.includes( + `@${myName?.toLowerCase()}` + ) + ) + ?.sort((a, b) => b?.timestamp - a?.timestamp); } return messages .filter((message) => - extractTextFromHTML(message?.decryptedData?.message)?.includes(`@${myName?.toLowerCase()}`) + extractTextFromHTML(message?.decryptedData?.message)?.includes( + `@${myName?.toLowerCase()}` + ) ) ?.sort((a, b) => b?.timestamp - a?.timestamp); }, [messages, myName, isPrivate]); @@ -203,60 +218,54 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem overscan: 10, // Number of items to render outside the visible area to improve smoothness }); - - - if (mode === "mentions") { + if (mode === 'mentions') { return ( { - setMode("default"); + setMode('default'); }} sx={{ - cursor: "pointer", - color: "white", + cursor: 'pointer', + color: theme.palette.text.primary, }} /> - - - {mentionList?.length === 0 && ( No results @@ -264,72 +273,77 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem )}
- {rowVirtualizerMentions.getVirtualItems().map((virtualRow) => { - const index = virtualRow.index; - let message = mentionList[index]; - return ( -
- - -
- ); - })} + {rowVirtualizerMentions + .getVirtualItems() + .map((virtualRow) => { + const index = virtualRow.index; + let message = mentionList[index]; + return ( +
+ +
+ ); + })}
@@ -340,47 +354,46 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem ); } - if (mode === "search") { + if (mode === 'search') { return ( { - setMode("default"); + setMode('default'); }} sx={{ - cursor: "pointer", - color: "white", + cursor: 'pointer', + color: theme.palette.text.primary, }} /> @@ -392,8 +405,8 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem sx={{ ml: 1, flex: 1 }} placeholder="Search chat text" inputProps={{ - "aria-label": "Search for apps", - fontSize: "16px", + 'aria-label': 'Search for apps', + fontSize: '16px', fontWeight: 400, }} /> @@ -402,7 +415,7 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem {searchValue && ( { - setSearchValue(""); + setSearchValue(''); }} > @@ -411,52 +424,51 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem - - {!!selectedMember && ( - { - setSelectedMember(0); - }} sx={{ - cursor: "pointer", - color: "white", + alignItems: 'center', + display: 'flex', + justifyContent: 'space-between', + padding: '10px', }} - /> - )} - - - + > + + {!!selectedMember && ( + { + setSelectedMember(0); + }} + sx={{ + cursor: 'pointer', + color: theme.palette.text.primary, + }} + /> + )} + + {debouncedValue && searchedList?.length === 0 && ( No results @@ -464,79 +476,81 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem )}
{rowVirtualizer.getVirtualItems().map((virtualRow) => { const index = virtualRow.index; let message = searchedList[index]; return ( -
- - Error loading content: Invalid Data - - } - > - + + Error loading content: Invalid Data + + } + > +
- ); })}
@@ -551,46 +565,58 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem return ( - { - setMode("search") - }}> + { + setMode('search'); + }} + > SEARCH} + title={ + + SEARCH + + } placement="left" arrow - sx={{ fontSize: "24" }} + sx={{ fontSize: '24' }} slotProps={{ tooltip: { sx: { - color: "#ffffff", - backgroundColor: "#444444", + color: theme.palette.text.primary, + backgroundColor: theme.palette.background.default, }, }, arrow: { sx: { - color: "#444444", + color: theme.palette.text.secondary, }, }, }} @@ -598,157 +624,188 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem - { - setMode("default") - setSearchValue('') - setSelectedMember(0) - openQManager() - }}> + { + setMode('default'); + setSearchValue(''); + setSelectedMember(0); + openQManager(); + }} + > Q-MANAGER} + title={ + + Q-MANAGER + + } placement="left" arrow - sx={{ fontSize: "24" }} + sx={{ fontSize: '24' }} slotProps={{ tooltip: { sx: { - color: "#ffffff", - backgroundColor: "#444444", + color: theme.palette.text.primary, + backgroundColor: theme.palette.background.default, }, }, arrow: { sx: { - color: "#444444", + color: theme.palette.text.secondary, }, }, }} > - + - - { - setMode("mentions") - setSearchValue('') - setSelectedMember(0) - }}> - MENTIONED} - placement="left" - arrow - sx={{ fontSize: "24" }} - slotProps={{ - tooltip: { - sx: { - color: "#ffffff", - backgroundColor: "#444444", - }, - }, - arrow: { - sx: { - color: "#444444", - }, - }, + + { + setMode('mentions'); + setSearchValue(''); + setSelectedMember(0); }} > - 0 && (!lastMentionTimestamp || lastMentionTimestamp < mentionList[0]?.timestamp) ? 'var(--unread)' : 'white' - }} /> - - - + + MENTIONED + + } + placement="left" + arrow + sx={{ fontSize: '24' }} + slotProps={{ + tooltip: { + sx: { + color: theme.palette.text.primary, + backgroundColor: theme.palette.background.default, + }, + }, + arrow: { + sx: { + color: theme.palette.text.secondary, + }, + }, + }} + > + 0 && + (!lastMentionTimestamp || + lastMentionTimestamp < mentionList[0]?.timestamp) + ? 'var(--unread)' + : 'white', + }} + /> + + - - ); }; - -const ShowMessage = ({message, goToMessage, messages})=> { +const ShowMessage = ({ message, goToMessage, messages }) => { + const theme = useTheme(); return ( - - - - - {message?.senderName?.charAt(0)} - - - {message?.senderName} - - - - - {formatTimestamp(message.timestamp)} - { - const findMsgIndex = messages.findIndex( - (item) => - item?.signature === message?.signature - ); - if (findMsgIndex !== -1) { - goToMessage(findMsgIndex); - } - }} - > - {message?.messageText && ( - - )} - {message?.decryptedData?.message && ( -

" - } - /> - )} - - - - ) -} \ No newline at end of file + + + + + {message?.senderName?.charAt(0)} + + + {message?.senderName} + + + + + + + + {formatTimestamp(message.timestamp)} + + { + const findMsgIndex = messages.findIndex( + (item) => item?.signature === message?.signature + ); + if (findMsgIndex !== -1) { + goToMessage(findMsgIndex); + } + }} + > + {message?.messageText && ( + + )} + {message?.decryptedData?.message && ( +

'} + /> + )} + + + ); +}; diff --git a/src/components/Group/AddGroup.tsx b/src/components/Group/AddGroup.tsx index aea8ae1..1e5962b 100644 --- a/src/components/Group/AddGroup.tsx +++ b/src/components/Group/AddGroup.tsx @@ -29,15 +29,14 @@ import { getFee } from '../../background'; import { MyContext, isMobile } from '../../App'; import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events'; -export const Label = styled('label')( - ({ theme }) => ` +export const Label = styled('label')` + display: block; font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; - display: block; - margin-bottom: 4px; font-weight: 400; - ` -); + margin-bottom: 4px; +`; + const Transition = React.forwardRef(function Transition( props: TransitionProps & { children: React.ReactElement; diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx index 6351f2b..afd3abc 100644 --- a/src/components/Group/Group.tsx +++ b/src/components/Group/Group.tsx @@ -7,6 +7,7 @@ import { ListItemAvatar, ListItemText, Typography, + useTheme, } from '@mui/material'; import React, { useCallback, @@ -477,22 +478,20 @@ export const Group = ({ } setIsOpenSideViewGroups((prev) => !prev); }; + useEffect(() => { timestampEnterDataRef.current = timestampEnterData; }, [timestampEnterData]); - useEffect(() => { isFocusedRef.current = isFocused; }, [isFocused]); useEffect(() => { groupSectionRef.current = groupSection; }, [groupSection]); - useEffect(() => { selectedGroupRef.current = selectedGroup; setSelectedGroupId(selectedGroup?.groupId); }, [selectedGroup]); - useEffect(() => { selectedDirectRef.current = selectedDirect; }, [selectedDirect]); @@ -852,6 +851,7 @@ export const Group = ({ Object.keys(groupsProperties) ) ) { + // TODO: empty block. Check it! } else { getGroupsProperties(myAddress); } @@ -976,6 +976,7 @@ export const Group = ({ console.log(error); } }; + useEffect(() => { if ( !initiatedGetMembers.current && @@ -1524,6 +1525,7 @@ export const Group = ({ setMobileViewMode('home'); } if (!isMobile) { + // TODO: empty block. Check it! } setDesktopViewMode('home'); @@ -1601,27 +1603,29 @@ export const Group = ({ } }; + const theme = useTheme(); + const renderDirects = () => { return (
{!isMobile && ( @@ -1664,8 +1668,8 @@ export const Group = ({ directChatHasUnread ? 'var(--unread)' : desktopSideView === 'directs' - ? 'white' - : 'rgba(250, 250, 250, 0.5)' + ? theme.palette.text.primary + : theme.palette.text.secondary } label="Messaging" selected={desktopSideView === 'directs'} @@ -1676,8 +1680,8 @@ export const Group = ({ directChatHasUnread ? 'var(--unread)' : desktopSideView === 'directs' - ? 'white' - : 'rgba(250, 250, 250, 0.5)' + ? theme.palette.text.primary + : theme.palette.text.secondary } /> @@ -1687,12 +1691,12 @@ export const Group = ({
{directs.map((direct: any) => ( @@ -1731,11 +1735,14 @@ export const Group = ({ width: '100%', flexDirection: 'column', cursor: 'pointer', - border: '1px #232428 solid', + borderColor: theme.palette.primary, + borderWidth: '1px', + borderStyle: 'solid', padding: '2px', borderRadius: '2px', background: - direct?.address === selectedDirect?.address && 'white', + direct?.address === selectedDirect?.address && + theme.palette.background.default, }} > @@ -1767,7 +1774,7 @@ export const Group = ({ style: { color: direct?.address === selectedDirect?.address && - 'black', + theme.palette.text.primary, textWrap: 'wrap', overflow: 'hidden', }, @@ -1776,7 +1783,7 @@ export const Group = ({ style: { color: direct?.address === selectedDirect?.address && - 'black', + theme.palette.text.primary, fontSize: '12px', }, }} @@ -1821,7 +1828,7 @@ export const Group = ({ > New Chat @@ -1840,7 +1847,7 @@ export const Group = ({ flexDirection: 'column', alignItems: 'flex-start', height: isMobile ? `calc(${rootHeight} - 45px)` : '100%', - background: !isMobile && 'var(--bg-primary)', + background: !isMobile && theme.palette.background.default, borderRadius: !isMobile && '0px 15px 15px 0px', }} > @@ -1864,8 +1871,8 @@ export const Group = ({ groupChatHasUnread || groupsAnnHasUnread ? 'var(--unread)' : desktopSideView === 'groups' - ? 'white' - : 'rgba(250, 250, 250, 0.5)' + ? theme.palette.text.primary + : theme.palette.text.secondary } label="Groups" selected={desktopSideView === 'groups'} @@ -1877,8 +1884,8 @@ export const Group = ({ groupChatHasUnread || groupsAnnHasUnread ? 'var(--unread)' : desktopSideView === 'groups' - ? 'white' - : 'rgba(250, 250, 250, 0.5)' + ? theme.palette.text.primary + : theme.palette.text.secondary } /> @@ -1894,8 +1901,8 @@ export const Group = ({ directChatHasUnread ? 'var(--unread)' : desktopSideView === 'directs' - ? 'white' - : 'rgba(250, 250, 250, 0.5)' + ? theme.palette.text.primary + : theme.palette.text.secondary } label="Messaging" selected={desktopSideView === 'directs'} @@ -1906,8 +1913,8 @@ export const Group = ({ directChatHasUnread ? 'var(--unread)' : desktopSideView === 'directs' - ? 'white' - : 'rgba(250, 250, 250, 0.5)' + ? theme.palette.text.primary + : theme.palette.text.secondary } /> @@ -1917,15 +1924,15 @@ export const Group = ({
{groups.map((group: any) => ( @@ -1967,14 +1974,17 @@ export const Group = ({ }} sx={{ display: 'flex', - width: '100%', - flexDirection: 'column', - cursor: 'pointer', - border: '1px #232428 solid', - padding: '2px', - borderRadius: '2px', background: - group?.groupId === selectedGroup?.groupId && 'white', + group?.groupId === selectedGroup?.groupId && + theme.palette.background.default, + borderColor: theme.palette.primary, + borderRadius: '2px', + borderStyle: 'solid', + borderWidth: '1px', + cursor: 'pointer', + flexDirection: 'column', + padding: '2px', + width: '100%', }} > {groupsProperties[group?.groupId]?.isOpen === false ? ( - // - // {group.groupName?.charAt(0)} - // )} {chatMode === 'groups' && ( @@ -2115,7 +2116,7 @@ export const Group = ({ > Group Mgmt @@ -2132,7 +2133,7 @@ export const Group = ({ > @@ -2149,7 +2150,7 @@ export const Group = ({ > New Chat @@ -2166,6 +2167,7 @@ export const Group = ({ myAddress={myAddress} setIsLoadingGroups={setIsLoadingGroups} /> + {!isMobile && @@ -2207,6 +2209,7 @@ export const Group = ({ desktopViewMode === 'chat' && desktopSideView !== 'directs' && renderGroups()} + {!isMobile && desktopViewMode === 'chat' && desktopSideView === 'directs' && @@ -2230,26 +2233,26 @@ export const Group = ({ {isMobile && ( @@ -2264,10 +2267,10 @@ export const Group = ({ { setSelectedDirect(null); - setNewChat(false); }} setMobileViewModeKeepOpen={setMobileViewModeKeepOpen} @@ -2319,18 +2319,18 @@ export const Group = ({ {desktopViewMode === 'chat' && !selectedGroup && ( No group selected @@ -2423,12 +2423,12 @@ export const Group = ({ !secretKeyPublishDate && (
{' '} @@ -2550,9 +2550,9 @@ export const Group = ({ { const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState( @@ -37,11 +32,14 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => { setGroupsWithJoinRequests(resMoreData); } catch (error) { + console.log(error); } finally { setLoading(false); } }; + const theme = useTheme(); + React.useEffect(() => { if (myAddress) { getJoinRequests(); @@ -51,57 +49,65 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => { return ( setIsExpanded((prev)=> !prev)} + onClick={() => setIsExpanded((prev) => !prev)} > - Group Invites {groupsWithJoinRequests?.length > 0 && ` (${groupsWithJoinRequests?.length})`} + Group Invites{' '} + {groupsWithJoinRequests?.length > 0 && + ` (${groupsWithJoinRequests?.length})`} - {isExpanded ? : ( - - )} + {isExpanded ? ( + + ) : ( + + )} + {loading && groupsWithJoinRequests.length === 0 && ( @@ -110,18 +116,18 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => { {!loading && groupsWithJoinRequests.length === 0 && ( Nothing to display @@ -130,11 +136,11 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => { )} @@ -142,13 +148,13 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => { return ( { setOpenAddGroup(true); setTimeout(() => { - executeEvent("openGroupInvitesRequest", {}); + executeEvent('openGroupInvitesRequest', {}); }, 300); }} disablePadding @@ -156,8 +162,8 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => { @@ -166,8 +172,8 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {