Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-04-29 22:37:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add theme

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-18 19:16:45 +02:00
parent af1d44990a
commit 2013561db7
6 changed files with 845 additions and 773 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/Chat/ChatContainer.tsx
View File

@ -1,16 +1,14 @@
import React, { useState } from "react";
import InfiniteScroll from "react-infinite-scroller";
import { import {
MainContainer, MainContainer,
ChatContainer, ChatContainer,
MessageList, MessageList,
Message, Message,
MessageInput, MessageInput,
Avatar Avatar,
} from "@chatscope/chat-ui-kit-react"; } from '@chatscope/chat-ui-kit-react';
import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css"; import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
export const ChatContainerComp = ({messages}) => { export const ChatContainerComp = ({ messages }) => {
// const [messages, setMessages] = useState([ // const [messages, setMessages] = useState([
// { id: 1, text: "Hello! How are you?", sender: "Joe"}, // { id: 1, text: "Hello! How are you?", sender: "Joe"},
// { id: 2, text: "I'm good, thank you!", sender: "Me" } // { id: 2, text: "I'm good, thank you!", sender: "Me" }
@ -26,25 +24,27 @@ export const ChatContainerComp = ({messages}) => {
// }; // };
return ( return (
<div style={{ height: "500px", width: "300px" }}> <div style={{ height: '500px', width: '300px' }}>
<MainContainer> <MainContainer>
<ChatContainer> <ChatContainer>
<MessageList> <MessageList>
{messages.map((msg) => ( {messages.map((msg) => (
<Message <Message
key={msg.id} key={msg.id}
model={{ model={{
message: msg.text, message: msg.text,
sentTime: "just now", sentTime: 'just now',
sender: msg.senderName, sender: msg.senderName,
direction: 'incoming', direction: 'incoming',
position: "single" position: 'single',
}} }}
> >
{msg.direction === "incoming" && <Avatar name={msg.senderName} />} {msg.direction === 'incoming' && (
</Message> <Avatar name={msg.senderName} />
))} )}
</MessageList> </Message>
))}
</MessageList>
<MessageInput placeholder="Type a message..." /> <MessageInput placeholder="Type a message..." />
</ChatContainer> </ChatContainer>
@ -52,5 +52,3 @@ export const ChatContainerComp = ({messages}) => {
</div> </div>
); );
}; };

279
src/components/Chat/ChatList.tsx
View File

@ -1,23 +1,15 @@
import React, { import { useCallback, useState, useEffect, useRef, useMemo } from 'react';
useCallback, import { useVirtualizer } from '@tanstack/react-virtual';
useState, import { MessageItem } from './MessageItem';
useEffect, import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
useRef, import { Box, Typography, useTheme } from '@mui/material';
useMemo, import { ChatOptions } from './ChatOptions';
} from "react"; import ErrorBoundary from '../../common/ErrorBoundary';
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";
export const ChatList = ({ export const ChatList = ({
initialMessages, initialMessages,
myAddress, myAddress,
tempMessages, tempMessages,
chatId,
onReply, onReply,
onEdit, onEdit,
handleReaction, handleReaction,
@ -29,7 +21,7 @@ export const ChatList = ({
enableMentions, enableMentions,
openQManager, openQManager,
hasSecretKey, hasSecretKey,
isPrivate isPrivate,
}) => { }) => {
const parentRef = useRef(); const parentRef = useRef();
const [messages, setMessages] = useState(initialMessages); const [messages, setMessages] = useState(initialMessages);
@ -42,33 +34,32 @@ export const ChatList = ({
// Initialize the virtualizer // Initialize the virtualizer
const rowVirtualizer = useVirtualizer({ const rowVirtualizer = useVirtualizer({
count: messages.length, count: messages.length,
getItemKey: (index) => messages[index]?.tempSignature || messages[index].signature, getItemKey: (index) =>
messages[index]?.tempSignature || messages[index].signature,
getScrollElement: () => parentRef?.current, getScrollElement: () => parentRef?.current,
estimateSize: useCallback(() => 80, []), // Provide an estimated height of items, adjust this as needed 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 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) { if (parentRef.current && rowVirtualizer?.isScrolling !== undefined) {
const { scrollTop, scrollHeight, clientHeight } = parentRef.current; const { scrollTop, scrollHeight, clientHeight } = parentRef.current;
const atBottom = scrollTop + clientHeight >= scrollHeight - 10; // Adjust threshold as needed const atBottom = scrollTop + clientHeight >= scrollHeight - 10; // Adjust threshold as needed
return atBottom return atBottom;
} }
return false return false;
}, [rowVirtualizer?.isScrolling]);
}, [rowVirtualizer?.isScrolling])
useEffect(() => { useEffect(() => {
if (!parentRef.current || rowVirtualizer?.isScrolling === undefined) return; if (!parentRef.current || rowVirtualizer?.isScrolling === undefined) return;
if(isAtBottom){ if (isAtBottom) {
if (scrollingIntervalRef.current) { if (scrollingIntervalRef.current) {
clearTimeout(scrollingIntervalRef.current); clearTimeout(scrollingIntervalRef.current);
} }
setShowScrollDownButton(false); setShowScrollDownButton(false);
return; return;
} else } else if (rowVirtualizer?.isScrolling) {
if (rowVirtualizer?.isScrolling) {
if (scrollingIntervalRef.current) { if (scrollingIntervalRef.current) {
clearTimeout(scrollingIntervalRef.current); clearTimeout(scrollingIntervalRef.current);
} }
@ -108,7 +99,13 @@ export const ChatList = ({
setTimeout(() => { setTimeout(() => {
const hasUnreadMessages = totalMessages.some( 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) { if (parentRef.current) {
const { scrollTop, scrollHeight, clientHeight } = parentRef.current; const { scrollTop, scrollHeight, clientHeight } = parentRef.current;
@ -136,9 +133,9 @@ export const ChatList = ({
const index = initialMsgs ? initialMsgs.length - 1 : messages.length - 1; const index = initialMsgs ? initialMsgs.length - 1 : messages.length - 1;
if (rowVirtualizer) { if (rowVirtualizer) {
if (divideIndex) { if (divideIndex) {
rowVirtualizer.scrollToIndex(divideIndex, { align: "start" }); rowVirtualizer.scrollToIndex(divideIndex, { align: 'start' });
} else { } else {
rowVirtualizer.scrollToIndex(index, { align: "end" }); rowVirtualizer.scrollToIndex(index, { align: 'end' });
} }
} }
handleMessageSeen(); handleMessageSeen();
@ -152,7 +149,7 @@ export const ChatList = ({
})) }))
); );
setShowScrollButton(false); setShowScrollButton(false);
lastSeenUnreadMessageTimestamp.current = Date.now() lastSeenUnreadMessageTimestamp.current = Date.now();
}, []); }, []);
const sentNewMessageGroupFunc = useCallback(() => { const sentNewMessageGroupFunc = useCallback(() => {
@ -166,9 +163,9 @@ export const ChatList = ({
}, [messages]); }, [messages]);
useEffect(() => { useEffect(() => {
subscribeToEvent("sent-new-message-group", sentNewMessageGroupFunc); subscribeToEvent('sent-new-message-group', sentNewMessageGroupFunc);
return () => { return () => {
unsubscribeFromEvent("sent-new-message-group", sentNewMessageGroupFunc); unsubscribeFromEvent('sent-new-message-group', sentNewMessageGroupFunc);
}; };
}, [sentNewMessageGroupFunc]); }, [sentNewMessageGroupFunc]);
@ -181,21 +178,24 @@ export const ChatList = ({
const goToMessage = useCallback((idx) => { const goToMessage = useCallback((idx) => {
rowVirtualizer.scrollToIndex(idx); rowVirtualizer.scrollToIndex(idx);
}, []); }, []);
const theme = useTheme();
return ( return (
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
width: "100%", height: '100%',
height: "100%", width: '100%',
}} }}
> >
<div <div
style={{ style={{
height: "100%", display: 'flex',
position: "relative", flexDirection: 'column',
display: "flex", height: '100%',
flexDirection: "column", position: 'relative',
width: "100%", width: '100%',
}} }}
> >
<div <div
@ -203,27 +203,26 @@ export const ChatList = ({
className="List" className="List"
style={{ style={{
flexGrow: 1, flexGrow: 1,
overflow: "auto", overflow: 'auto',
position: "relative", position: 'relative',
display: "flex", display: 'flex',
height: "0px", height: '0px',
}} }}
> >
<div <div
style={{ style={{
height: rowVirtualizer.getTotalSize(), height: rowVirtualizer.getTotalSize(),
width: "100%", width: '100%',
}} }}
> >
<div <div
style={{ style={{
position: "absolute",
top: 0,
left: 0, left: 0,
width: "100%", position: 'absolute',
top: 0,
width: '100%',
}} }}
> >
{rowVirtualizer.getVirtualItems().map((virtualRow) => { {rowVirtualizer.getVirtualItems().map((virtualRow) => {
const index = virtualRow.index; const index = virtualRow.index;
let message = messages[index] || null; // Safeguard against undefined let message = messages[index] || null; // Safeguard against undefined
@ -243,9 +242,12 @@ export const ChatList = ({
if (message?.repliedTo && replyIndex !== -1) { if (message?.repliedTo && replyIndex !== -1) {
reply = { ...(messages[replyIndex] || {}) }; reply = { ...(messages[replyIndex] || {}) };
if (chatReferences?.[reply?.signature]?.edit) { if (chatReferences?.[reply?.signature]?.edit) {
reply.decryptedData = chatReferences[reply?.signature]?.edit; reply.decryptedData =
reply.text = chatReferences[reply?.signature]?.edit?.message; chatReferences[reply?.signature]?.edit;
reply.editTimestamp = chatReferences[reply?.signature]?.edit?.timestamp reply.text =
chatReferences[reply?.signature]?.edit?.message;
reply.editTimestamp =
chatReferences[reply?.signature]?.edit?.timestamp;
} }
} }
@ -267,19 +269,29 @@ export const ChatList = ({
// Check for reactions and edits // Check for reactions and edits
if (chatReferences?.[message.signature]) { if (chatReferences?.[message.signature]) {
reactions = chatReferences[message.signature]?.reactions || null; reactions =
chatReferences[message.signature]?.reactions || null;
if (chatReferences[message.signature]?.edit?.message && message?.text) { if (
message.text = chatReferences[message.signature]?.edit?.message; chatReferences[message.signature]?.edit?.message &&
message.isEdit = true message?.text
message.editTimestamp = chatReferences[message.signature]?.edit?.timestamp ) {
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) { if (
message.messageText = chatReferences[message.signature]?.edit?.messageText; chatReferences[message.signature]?.edit?.messageText &&
message.isEdit = true message?.messageText
message.editTimestamp = chatReferences[message.signature]?.edit?.timestamp ) {
message.messageText =
chatReferences[message.signature]?.edit?.messageText;
message.isEdit = true;
message.editTimestamp =
chatReferences[message.signature]?.edit?.timestamp;
} }
} }
// Check if message is updating // Check if message is updating
@ -292,34 +304,37 @@ export const ChatList = ({
} }
} }
} catch (error) { } 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 // Gracefully handle the error by providing fallback data
message = null; message = null;
reply = null; reply = null;
reactions = null; reactions = null;
} }
// Render fallback if message is null // Render fallback if message is null
if (!message) { if (!message) {
return ( return (
<div <div
key={virtualRow.index} key={virtualRow.index}
style={{ style={{
position: "absolute", position: 'absolute',
top: 0, top: 0,
left: "50%", left: '50%',
transform: `translateY(${virtualRow.start}px) translateX(-50%)`, transform: `translateY(${virtualRow.start}px) translateX(-50%)`,
width: "100%", width: '100%',
padding: "10px 0", padding: '10px 0',
display: "flex", display: 'flex',
alignItems: "center", alignItems: 'center',
flexDirection: "column", flexDirection: 'column',
gap: "5px", gap: '5px',
}} }}
> >
<Typography>Error loading message.</Typography> <Typography>Error loading message.</Typography>
</div> </div>
); );
} }
return ( return (
<div <div
@ -327,49 +342,47 @@ export const ChatList = ({
ref={rowVirtualizer.measureElement} //measure dynamic row height ref={rowVirtualizer.measureElement} //measure dynamic row height
key={message.signature} key={message.signature}
style={{ style={{
position: "absolute", alignItems: 'center',
display: 'flex',
flexDirection: 'column',
gap: '5px',
left: '50%', // Move to the center horizontally
overscrollBehavior: 'none',
padding: '10px 0',
position: 'absolute',
top: 0, top: 0,
left: "50%", // Move to the center horizontally
transform: `translateY(${virtualRow.start}px) translateX(-50%)`, // Adjust for centering transform: `translateY(${virtualRow.start}px) translateX(-50%)`, // Adjust for centering
width: "100%", // Control width (90% of the parent) width: '100%', // Control width (90% of the parent)
padding: "10px 0",
display: "flex",
alignItems: "center",
overscrollBehavior: "none",
flexDirection: "column",
gap: "5px",
}} }}
> >
<ErrorBoundary <ErrorBoundary
fallback={ fallback={
<Typography> <Typography>
Error loading content: Invalid Data Error loading content: Invalid Data
</Typography> </Typography>
} }
> >
<MessageItem <MessageItem
isLast={index === messages.length - 1} isLast={index === messages.length - 1}
lastSignature={lastSignature} lastSignature={lastSignature}
message={message} message={message}
onSeen={handleMessageSeen} onSeen={handleMessageSeen}
isTemp={!!message?.isTemp} isTemp={!!message?.isTemp}
myAddress={myAddress} myAddress={myAddress}
onReply={onReply} onReply={onReply}
onEdit={onEdit} onEdit={onEdit}
reply={reply} reply={reply}
replyIndex={replyIndex} replyIndex={replyIndex}
scrollToItem={goToMessage} scrollToItem={goToMessage}
handleReaction={handleReaction} handleReaction={handleReaction}
reactions={reactions} reactions={reactions}
isUpdating={isUpdating} isUpdating={isUpdating}
isPrivate={isPrivate} isPrivate={isPrivate}
/>
/> </ErrorBoundary>
</ErrorBoundary>
</div> </div>
); );
})} })}
</div> </div>
</div> </div>
</div> </div>
@ -377,17 +390,17 @@ export const ChatList = ({
<button <button
onClick={() => scrollToBottom()} onClick={() => scrollToBottom()}
style={{ style={{
backgroundColor: 'var(--unread)',
border: 'none',
borderRadius: '20px',
bottom: 20, bottom: 20,
position: "absolute", color: theme.palette.text.primary,
cursor: 'pointer',
outline: 'none',
padding: '10px 20px',
position: 'absolute',
right: 20, right: 20,
backgroundColor: "var(--unread)",
color: "black",
padding: "10px 20px",
borderRadius: "20px",
cursor: "pointer",
zIndex: 10, zIndex: 10,
border: "none",
outline: "none",
}} }}
> >
Scroll to Unread Messages Scroll to Unread Messages
@ -397,18 +410,18 @@ export const ChatList = ({
<button <button
onClick={() => scrollToBottom()} onClick={() => scrollToBottom()}
style={{ style={{
backgroundColor: theme.palette.background.default,
border: 'none',
borderRadius: '20px',
bottom: 20, bottom: 20,
position: "absolute", color: theme.palette.text.primary,
cursor: 'pointer',
fontSize: '16px',
outline: 'none',
padding: '10px 20px',
position: 'absolute',
right: 20, right: 20,
backgroundColor: "var(--Mail-Background)",
color: "white",
padding: "10px 20px",
borderRadius: "20px",
cursor: "pointer",
zIndex: 10, zIndex: 10,
border: "none",
outline: "none",
fontSize: "16px",
}} }}
> >
Scroll to bottom Scroll to bottom
@ -417,7 +430,7 @@ export const ChatList = ({
</div> </div>
{enableMentions && (hasSecretKey || isPrivate === false) && ( {enableMentions && (hasSecretKey || isPrivate === false) && (
<ChatOptions <ChatOptions
openQManager={openQManager} openQManager={openQManager}
messages={messages} messages={messages}
goToMessage={goToMessage} goToMessage={goToMessage}
members={members} members={members}

895
src/components/Chat/ChatOptions.tsx
View File

File diff suppressed because it is too large Load Diff

11
src/components/Group/AddGroup.tsx
View File

@ -29,15 +29,14 @@ import { getFee } from '../../background';
import { MyContext, isMobile } from '../../App'; import { MyContext, isMobile } from '../../App';
import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events'; import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
export const Label = styled('label')( export const Label = styled('label')`
({ theme }) => ` display: block;
font-family: 'IBM Plex Sans', sans-serif; font-family: 'IBM Plex Sans', sans-serif;
font-size: 14px; font-size: 14px;
display: block;
margin-bottom: 4px;
font-weight: 400; font-weight: 400;
` margin-bottom: 4px;
); `;
const Transition = React.forwardRef(function Transition( const Transition = React.forwardRef(function Transition(
props: TransitionProps & { props: TransitionProps & {
children: React.ReactElement; children: React.ReactElement;

229
src/components/Group/Group.tsx
View File

@ -7,6 +7,7 @@ import {
ListItemAvatar, ListItemAvatar,
ListItemText, ListItemText,
Typography, Typography,
useTheme,
} from '@mui/material'; } from '@mui/material';
import React, { import React, {
useCallback, useCallback,
@ -477,22 +478,20 @@ export const Group = ({
} }
setIsOpenSideViewGroups((prev) => !prev); setIsOpenSideViewGroups((prev) => !prev);
}; };
useEffect(() => { useEffect(() => {
timestampEnterDataRef.current = timestampEnterData; timestampEnterDataRef.current = timestampEnterData;
}, [timestampEnterData]); }, [timestampEnterData]);
useEffect(() => { useEffect(() => {
isFocusedRef.current = isFocused; isFocusedRef.current = isFocused;
}, [isFocused]); }, [isFocused]);
useEffect(() => { useEffect(() => {
groupSectionRef.current = groupSection; groupSectionRef.current = groupSection;
}, [groupSection]); }, [groupSection]);
useEffect(() => { useEffect(() => {
selectedGroupRef.current = selectedGroup; selectedGroupRef.current = selectedGroup;
setSelectedGroupId(selectedGroup?.groupId); setSelectedGroupId(selectedGroup?.groupId);
}, [selectedGroup]); }, [selectedGroup]);
useEffect(() => { useEffect(() => {
selectedDirectRef.current = selectedDirect; selectedDirectRef.current = selectedDirect;
}, [selectedDirect]); }, [selectedDirect]);
@ -852,6 +851,7 @@ export const Group = ({
Object.keys(groupsProperties) Object.keys(groupsProperties)
) )
) { ) {
// TODO: empty block. Check it!
} else { } else {
getGroupsProperties(myAddress); getGroupsProperties(myAddress);
} }
@ -976,6 +976,7 @@ export const Group = ({
console.log(error); console.log(error);
} }
}; };
useEffect(() => { useEffect(() => {
if ( if (
!initiatedGetMembers.current && !initiatedGetMembers.current &&
@ -1524,6 +1525,7 @@ export const Group = ({
setMobileViewMode('home'); setMobileViewMode('home');
} }
if (!isMobile) { if (!isMobile) {
// TODO: empty block. Check it!
} }
setDesktopViewMode('home'); setDesktopViewMode('home');
@ -1601,27 +1603,29 @@ export const Group = ({
} }
}; };
const theme = useTheme();
const renderDirects = () => { const renderDirects = () => {
return ( return (
<div <div
style={{ style={{
display: 'flex',
width: isMobile ? '100%' : '380px',
flexDirection: 'column',
alignItems: 'flex-start', alignItems: 'flex-start',
height: isMobile ? `calc(${rootHeight} - 45px)` : '100%', background: theme.palette.background.default,
background: 'var(--bg-primary)',
borderRadius: '0px 15px 15px 0px', borderRadius: '0px 15px 15px 0px',
display: 'flex',
flexDirection: 'column',
height: isMobile ? `calc(${rootHeight} - 45px)` : '100%',
width: isMobile ? '100%' : '380px',
}} }}
> >
{!isMobile && ( {!isMobile && (
<Box <Box
sx={{ sx={{
width: '100%',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center',
display: 'flex', display: 'flex',
gap: '10px', gap: '10px',
justifyContent: 'center',
width: '100%',
}} }}
> >
<ButtonBase <ButtonBase
@ -1634,8 +1638,8 @@ export const Group = ({
groupChatHasUnread || groupsAnnHasUnread groupChatHasUnread || groupsAnnHasUnread
? 'var(--unread)' ? 'var(--unread)'
: desktopSideView === 'groups' : desktopSideView === 'groups'
? 'white' ? theme.palette.text.primary
: 'rgba(250, 250, 250, 0.5)' : theme.palette.text.secondary
} }
label="Groups" label="Groups"
selected={desktopSideView === 'groups'} selected={desktopSideView === 'groups'}
@ -1647,8 +1651,8 @@ export const Group = ({
groupChatHasUnread || groupsAnnHasUnread groupChatHasUnread || groupsAnnHasUnread
? 'var(--unread)' ? 'var(--unread)'
: desktopSideView === 'groups' : desktopSideView === 'groups'
? 'white' ? theme.palette.text.primary
: 'rgba(250, 250, 250, 0.5)' : theme.palette.text.secondary
} }
/> />
</IconWrapper> </IconWrapper>
@ -1664,8 +1668,8 @@ export const Group = ({
directChatHasUnread directChatHasUnread
? 'var(--unread)' ? 'var(--unread)'
: desktopSideView === 'directs' : desktopSideView === 'directs'
? 'white' ? theme.palette.text.primary
: 'rgba(250, 250, 250, 0.5)' : theme.palette.text.secondary
} }
label="Messaging" label="Messaging"
selected={desktopSideView === 'directs'} selected={desktopSideView === 'directs'}
@ -1676,8 +1680,8 @@ export const Group = ({
directChatHasUnread directChatHasUnread
? 'var(--unread)' ? 'var(--unread)'
: desktopSideView === 'directs' : desktopSideView === 'directs'
? 'white' ? theme.palette.text.primary
: 'rgba(250, 250, 250, 0.5)' : theme.palette.text.secondary
} }
/> />
</IconWrapper> </IconWrapper>
@ -1687,12 +1691,12 @@ export const Group = ({
<div <div
style={{ style={{
display: 'flex',
width: '100%',
flexDirection: 'column',
alignItems: 'flex-start', alignItems: 'flex-start',
display: 'flex',
flexDirection: 'column',
flexGrow: 1, flexGrow: 1,
overflowY: 'auto', overflowY: 'auto',
width: '100%',
}} }}
> >
{directs.map((direct: any) => ( {directs.map((direct: any) => (
@ -1731,11 +1735,14 @@ export const Group = ({
width: '100%', width: '100%',
flexDirection: 'column', flexDirection: 'column',
cursor: 'pointer', cursor: 'pointer',
border: '1px #232428 solid', borderColor: theme.palette.primary,
borderWidth: '1px',
borderStyle: 'solid',
padding: '2px', padding: '2px',
borderRadius: '2px', borderRadius: '2px',
background: background:
direct?.address === selectedDirect?.address && 'white', direct?.address === selectedDirect?.address &&
theme.palette.background.default,
}} }}
> >
<Box <Box
@ -1748,8 +1755,8 @@ export const Group = ({
<ListItemAvatar> <ListItemAvatar>
<Avatar <Avatar
sx={{ sx={{
background: '#232428', background: theme.palette.background.default,
color: 'white', color: theme.palette.text.primary,
}} }}
alt={direct?.name || direct?.address} alt={direct?.name || direct?.address}
> >
@ -1767,7 +1774,7 @@ export const Group = ({
style: { style: {
color: color:
direct?.address === selectedDirect?.address && direct?.address === selectedDirect?.address &&
'black', theme.palette.text.primary,
textWrap: 'wrap', textWrap: 'wrap',
overflow: 'hidden', overflow: 'hidden',
}, },
@ -1776,7 +1783,7 @@ export const Group = ({
style: { style: {
color: color:
direct?.address === selectedDirect?.address && direct?.address === selectedDirect?.address &&
'black', theme.palette.text.primary,
fontSize: '12px', fontSize: '12px',
}, },
}} }}
@ -1821,7 +1828,7 @@ export const Group = ({
> >
<CreateIcon <CreateIcon
sx={{ sx={{
color: 'white', color: theme.palette.text.primary,
}} }}
/> />
New Chat New Chat
@ -1840,7 +1847,7 @@ export const Group = ({
flexDirection: 'column', flexDirection: 'column',
alignItems: 'flex-start', alignItems: 'flex-start',
height: isMobile ? `calc(${rootHeight} - 45px)` : '100%', height: isMobile ? `calc(${rootHeight} - 45px)` : '100%',
background: !isMobile && 'var(--bg-primary)', background: !isMobile && theme.palette.background.default,
borderRadius: !isMobile && '0px 15px 15px 0px', borderRadius: !isMobile && '0px 15px 15px 0px',
}} }}
> >
@ -1864,8 +1871,8 @@ export const Group = ({
groupChatHasUnread || groupsAnnHasUnread groupChatHasUnread || groupsAnnHasUnread
? 'var(--unread)' ? 'var(--unread)'
: desktopSideView === 'groups' : desktopSideView === 'groups'
? 'white' ? theme.palette.text.primary
: 'rgba(250, 250, 250, 0.5)' : theme.palette.text.secondary
} }
label="Groups" label="Groups"
selected={desktopSideView === 'groups'} selected={desktopSideView === 'groups'}
@ -1877,8 +1884,8 @@ export const Group = ({
groupChatHasUnread || groupsAnnHasUnread groupChatHasUnread || groupsAnnHasUnread
? 'var(--unread)' ? 'var(--unread)'
: desktopSideView === 'groups' : desktopSideView === 'groups'
? 'white' ? theme.palette.text.primary
: 'rgba(250, 250, 250, 0.5)' : theme.palette.text.secondary
} }
/> />
</IconWrapper> </IconWrapper>
@ -1894,8 +1901,8 @@ export const Group = ({
directChatHasUnread directChatHasUnread
? 'var(--unread)' ? 'var(--unread)'
: desktopSideView === 'directs' : desktopSideView === 'directs'
? 'white' ? theme.palette.text.primary
: 'rgba(250, 250, 250, 0.5)' : theme.palette.text.secondary
} }
label="Messaging" label="Messaging"
selected={desktopSideView === 'directs'} selected={desktopSideView === 'directs'}
@ -1906,8 +1913,8 @@ export const Group = ({
directChatHasUnread directChatHasUnread
? 'var(--unread)' ? 'var(--unread)'
: desktopSideView === 'directs' : desktopSideView === 'directs'
? 'white' ? theme.palette.text.primary
: 'rgba(250, 250, 250, 0.5)' : theme.palette.text.secondary
} }
/> />
</IconWrapper> </IconWrapper>
@ -1917,15 +1924,15 @@ export const Group = ({
<div <div
style={{ style={{
display: 'flex',
width: '100%',
flexDirection: 'column',
alignItems: 'flex-start', alignItems: 'flex-start',
display: 'flex',
flexDirection: 'column',
flexGrow: 1, flexGrow: 1,
overflowY: 'auto',
visibility: chatMode === 'directs' && 'hidden',
position: chatMode === 'directs' && 'fixed',
left: chatMode === 'directs' && '-1000px', left: chatMode === 'directs' && '-1000px',
overflowY: 'auto',
position: chatMode === 'directs' && 'fixed',
visibility: chatMode === 'directs' && 'hidden',
width: '100%',
}} }}
> >
{groups.map((group: any) => ( {groups.map((group: any) => (
@ -1967,14 +1974,17 @@ export const Group = ({
}} }}
sx={{ sx={{
display: 'flex', display: 'flex',
width: '100%',
flexDirection: 'column',
cursor: 'pointer',
border: '1px #232428 solid',
padding: '2px',
borderRadius: '2px',
background: 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%',
}} }}
> >
<ContextMenu <ContextMenu
@ -1984,22 +1994,22 @@ export const Group = ({
> >
<Box <Box
sx={{ sx={{
alignItems: 'center',
display: 'flex', display: 'flex',
width: '100%', width: '100%',
alignItems: 'center',
}} }}
> >
<ListItemAvatar> <ListItemAvatar>
{groupsProperties[group?.groupId]?.isOpen === false ? ( {groupsProperties[group?.groupId]?.isOpen === false ? (
<Box <Box
sx={{ sx={{
width: '40px',
height: '40px',
borderRadius: '50%',
background: '#232428',
display: 'flex',
alignItems: 'center', alignItems: 'center',
background: theme.palette.background.default,
borderRadius: '50%',
display: 'flex',
height: '40px',
justifyContent: 'center', justifyContent: 'center',
width: '40px',
}} }}
> >
<LockIcon <LockIcon
@ -2011,13 +2021,13 @@ export const Group = ({
) : ( ) : (
<Box <Box
sx={{ sx={{
width: '40px',
height: '40px',
borderRadius: '50%',
background: '#232428',
display: 'flex',
alignItems: 'center', alignItems: 'center',
background: theme.palette.background.default,
borderRadius: '50%',
display: 'flex',
height: '40px',
justifyContent: 'center', justifyContent: 'center',
width: '40px',
}} }}
> >
<NoEncryptionGmailerrorredIcon <NoEncryptionGmailerrorredIcon
@ -2026,15 +2036,6 @@ export const Group = ({
}} }}
/> />
</Box> </Box>
// <Avatar
// sx={{
// background: "#232428",
// color: "white",
// }}
// alt={group?.groupName}
// >
// {group.groupName?.charAt(0)}
// </Avatar>
)} )}
</ListItemAvatar> </ListItemAvatar>
<ListItemText <ListItemText
@ -2050,14 +2051,14 @@ export const Group = ({
style: { style: {
color: color:
group?.groupId === selectedGroup?.groupId && group?.groupId === selectedGroup?.groupId &&
'black', theme.palette.text.primary,
}, },
}} // Change the color of the primary text }} // Change the color of the primary text
secondaryTypographyProps={{ secondaryTypographyProps={{
style: { style: {
color: color:
group?.groupId === selectedGroup?.groupId && group?.groupId === selectedGroup?.groupId &&
'black', theme.palette.text.primary,
fontSize: '12px', fontSize: '12px',
}, },
}} }}
@ -2100,10 +2101,10 @@ export const Group = ({
<div <div
style={{ style={{
display: 'flex', display: 'flex',
width: '100%', gap: '10px',
justifyContent: 'center', justifyContent: 'center',
padding: '10px', padding: '10px',
gap: '10px', width: '100%',
}} }}
> >
{chatMode === 'groups' && ( {chatMode === 'groups' && (
@ -2115,7 +2116,7 @@ export const Group = ({
> >
<AddCircleOutlineIcon <AddCircleOutlineIcon
sx={{ sx={{
color: 'white', color: theme.palette.text.primary,
}} }}
/> />
Group Mgmt Group Mgmt
@ -2132,7 +2133,7 @@ export const Group = ({
> >
<PersonOffIcon <PersonOffIcon
sx={{ sx={{
color: 'white', color: theme.palette.text.primary,
}} }}
/> />
</CustomButton> </CustomButton>
@ -2149,7 +2150,7 @@ export const Group = ({
> >
<CreateIcon <CreateIcon
sx={{ sx={{
color: 'white', color: theme.palette.text.primary,
}} }}
/> />
New Chat New Chat
@ -2166,6 +2167,7 @@ export const Group = ({
myAddress={myAddress} myAddress={myAddress}
setIsLoadingGroups={setIsLoadingGroups} setIsLoadingGroups={setIsLoadingGroups}
/> />
<CustomizedSnackbars <CustomizedSnackbars
open={openSnack} open={openSnack}
setOpen={setOpenSnack} setOpen={setOpenSnack}
@ -2175,11 +2177,11 @@ export const Group = ({
<div <div
style={{ style={{
display: 'flex',
width: '100%',
height: isMobile ? '100%' : '100%',
flexDirection: 'row',
alignItems: 'flex-start', alignItems: 'flex-start',
display: 'flex',
flexDirection: 'row',
height: isMobile ? '100%' : '100%',
width: '100%',
}} }}
> >
{!isMobile && {!isMobile &&
@ -2207,6 +2209,7 @@ export const Group = ({
desktopViewMode === 'chat' && desktopViewMode === 'chat' &&
desktopSideView !== 'directs' && desktopSideView !== 'directs' &&
renderGroups()} renderGroups()}
{!isMobile && {!isMobile &&
desktopViewMode === 'chat' && desktopViewMode === 'chat' &&
desktopSideView === 'directs' && desktopSideView === 'directs' &&
@ -2230,26 +2233,26 @@ export const Group = ({
{isMobile && ( {isMobile && (
<Box <Box
sx={{ sx={{
display: 'flex',
alignItems: 'center', alignItems: 'center',
width: '100%', display: 'flex',
marginTop: '14px',
justifyContent: 'center',
height: '15px', height: '15px',
justifyContent: 'center',
marginTop: '14px',
width: '100%',
}} }}
> >
<Box <Box
sx={{ sx={{
display: 'flex',
alignItems: 'center', alignItems: 'center',
display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
width: '320px', width: '320px',
}} }}
> >
<Box <Box
sx={{ sx={{
display: 'flex',
alignItems: 'center', alignItems: 'center',
display: 'flex',
width: '50px', width: '50px',
}} }}
> >
@ -2264,10 +2267,10 @@ export const Group = ({
<Box <Box
sx={{ sx={{
display: 'flex',
alignItems: 'center', alignItems: 'center',
width: '50px', display: 'flex',
justifyContent: 'flex-end', justifyContent: 'flex-end',
width: '50px',
}} }}
> >
<ButtonBase <ButtonBase
@ -2284,17 +2287,15 @@ export const Group = ({
)} )}
<Box <Box
sx={{ sx={{
position: 'absolute', background: theme.palette.background.default,
right: !(desktopViewMode === 'chat') ? 'unset' : '0px',
bottom: !(desktopViewMode === 'chat') ? 'unset' : '0px', bottom: !(desktopViewMode === 'chat') ? 'unset' : '0px',
top: !(desktopViewMode === 'chat') ? 'unset' : '0px',
background: '#27282c',
zIndex: 5,
height: isMobile && `calc(${rootHeight} - 45px)`, height: isMobile && `calc(${rootHeight} - 45px)`,
opacity: !(desktopViewMode === 'chat') ? 0 : 1,
left: !(desktopViewMode === 'chat') ? '-100000px' : '0px', left: !(desktopViewMode === 'chat') ? '-100000px' : '0px',
opacity: !(desktopViewMode === 'chat') ? 0 : 1,
position: 'absolute',
right: !(desktopViewMode === 'chat') ? 'unset' : '0px',
top: !(desktopViewMode === 'chat') ? 'unset' : '0px',
zIndex: 5,
}} }}
> >
<ChatDirect <ChatDirect
@ -2308,7 +2309,6 @@ export const Group = ({
balance={balance} balance={balance}
close={() => { close={() => {
setSelectedDirect(null); setSelectedDirect(null);
setNewChat(false); setNewChat(false);
}} }}
setMobileViewModeKeepOpen={setMobileViewModeKeepOpen} setMobileViewModeKeepOpen={setMobileViewModeKeepOpen}
@ -2319,18 +2319,18 @@ export const Group = ({
{desktopViewMode === 'chat' && !selectedGroup && ( {desktopViewMode === 'chat' && !selectedGroup && (
<Box <Box
sx={{ sx={{
width: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
display: 'flex',
height: '100%', height: '100%',
justifyContent: 'center',
width: '100%',
}} }}
> >
<Typography <Typography
sx={{ sx={{
fontSize: '14px', fontSize: '14px',
fontWeight: 400, fontWeight: 400,
color: 'rgba(255, 255, 255, 0.2)', color: theme.palette.text.primary,
}} }}
> >
No group selected No group selected
@ -2423,12 +2423,12 @@ export const Group = ({
!secretKeyPublishDate && ( !secretKeyPublishDate && (
<div <div
style={{ style={{
display: 'flex',
width: '100%',
height: '100%',
flexDirection: 'column',
alignItems: 'flex-start', alignItems: 'flex-start',
display: 'flex',
flexDirection: 'column',
height: '100%',
padding: '20px', padding: '20px',
width: '100%',
}} }}
> >
{' '} {' '}
@ -2550,9 +2550,9 @@ export const Group = ({
<Box <Box
sx={{ sx={{
bottom: '25px',
display: 'flex', display: 'flex',
position: 'absolute', position: 'absolute',
bottom: '25px',
right: '25px', right: '25px',
zIndex: 100, zIndex: 100,
}} }}
@ -2602,24 +2602,23 @@ export const Group = ({
<> <>
<Box <Box
sx={{ sx={{
background: theme.palette.background.default,
bottom: !(desktopViewMode === 'chat') ? 'unset' : '0px',
height: isMobile && `calc(${rootHeight} - 45px)`,
left: !(desktopViewMode === 'chat') ? '-100000px' : '0px',
opacity: !(desktopViewMode === 'chat') ? 0 : 1,
position: 'absolute', position: 'absolute',
right: !(desktopViewMode === 'chat') ? 'unset' : '0px', right: !(desktopViewMode === 'chat') ? 'unset' : '0px',
bottom: !(desktopViewMode === 'chat') ? 'unset' : '0px',
top: !(desktopViewMode === 'chat') ? 'unset' : '0px', top: !(desktopViewMode === 'chat') ? 'unset' : '0px',
background: '#27282c',
zIndex: 5, zIndex: 5,
height: isMobile && `calc(${rootHeight} - 45px)`,
opacity: !(desktopViewMode === 'chat') ? 0 : 1,
left: !(desktopViewMode === 'chat') ? '-100000px' : '0px',
}} }}
> >
<Box <Box
sx={{ sx={{
position: 'relative',
flexGrow: 1,
display: 'flex', display: 'flex',
flexGrow: 1,
height: '100%', height: '100%',
position: 'relative',
}} }}
> >
<ChatDirect <ChatDirect

138
src/components/Group/GroupInvites.tsx
View File

@ -1,22 +1,17 @@
import * as React from "react"; import * as React from 'react';
import List from "@mui/material/List"; import List from '@mui/material/List';
import ListItem from "@mui/material/ListItem"; import ListItem from '@mui/material/ListItem';
import ListItemButton from "@mui/material/ListItemButton"; import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from "@mui/material/ListItemIcon"; import ListItemText from '@mui/material/ListItemText';
import ListItemText from "@mui/material/ListItemText"; import IconButton from '@mui/material/IconButton';
import Checkbox from "@mui/material/Checkbox"; import GroupAddIcon from '@mui/icons-material/GroupAdd';
import IconButton from "@mui/material/IconButton"; import { executeEvent } from '../../utils/events';
import CommentIcon from "@mui/icons-material/Comment"; import { Box, ButtonBase, Collapse, Typography, useTheme } from '@mui/material';
import InfoIcon from "@mui/icons-material/Info"; import { getGroupNames } from './UserListOfInvites';
import GroupAddIcon from "@mui/icons-material/GroupAdd"; import { CustomLoader } from '../../common/CustomLoader';
import { executeEvent } from "../../utils/events"; import { getBaseApiReact, isMobile } from '../../App';
import { Box, ButtonBase, Collapse, Typography } from "@mui/material"; import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { Spacer } from "../../common/Spacer"; import ExpandLessIcon from '@mui/icons-material/ExpandLess';
import { getGroupNames } from "./UserListOfInvites";
import { CustomLoader } from "../../common/CustomLoader";
import { getBaseApiReact, isMobile } from "../../App";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
export const GroupInvites = ({ myAddress, setOpenAddGroup }) => { export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState( const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState(
@ -37,11 +32,14 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
setGroupsWithJoinRequests(resMoreData); setGroupsWithJoinRequests(resMoreData);
} catch (error) { } catch (error) {
console.log(error);
} finally { } finally {
setLoading(false); setLoading(false);
} }
}; };
const theme = useTheme();
React.useEffect(() => { React.useEffect(() => {
if (myAddress) { if (myAddress) {
getJoinRequests(); getJoinRequests();
@ -51,57 +49,65 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
return ( return (
<Box <Box
sx={{ sx={{
width: "100%", alignItems: 'center',
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
alignItems: "center", width: '100%',
}} }}
> >
<ButtonBase <ButtonBase
sx={{ sx={{
width: "322px", display: 'flex',
display: "flex", flexDirection: 'row',
flexDirection: "row",
padding: "0px 20px",
gap: '10px', gap: '10px',
justifyContent: 'flex-start' justifyContent: 'flex-start',
padding: '0px 20px',
width: '322px',
}} }}
onClick={()=> setIsExpanded((prev)=> !prev)} onClick={() => setIsExpanded((prev) => !prev)}
> >
<Typography <Typography
sx={{ sx={{
fontSize: "1rem", fontSize: '1rem',
}} }}
> >
Group Invites {groupsWithJoinRequests?.length > 0 && ` (${groupsWithJoinRequests?.length})`} Group Invites{' '}
{groupsWithJoinRequests?.length > 0 &&
` (${groupsWithJoinRequests?.length})`}
</Typography> </Typography>
{isExpanded ? <ExpandLessIcon sx={{ {isExpanded ? (
marginLeft: 'auto' <ExpandLessIcon
}} /> : ( sx={{
<ExpandMoreIcon sx={{ marginLeft: 'auto',
marginLeft: 'auto' }}
}}/> />
)} ) : (
<ExpandMoreIcon
sx={{
marginLeft: 'auto',
}}
/>
)}
</ButtonBase> </ButtonBase>
<Collapse in={isExpanded} timeout="auto" unmountOnExit> <Collapse in={isExpanded} timeout="auto" unmountOnExit>
<Box <Box
sx={{ sx={{
width: "322px", bgcolor: theme.palette.background.paper,
height: isMobile ? "165px" : "250px", borderRadius: '19px',
display: 'flex',
display: "flex", flexDirection: 'column',
flexDirection: "column", height: isMobile ? '165px' : '250px',
bgcolor: "background.paper", padding: '20px',
padding: "20px", width: '322px',
borderRadius: "19px",
}} }}
> >
{loading && groupsWithJoinRequests.length === 0 && ( {loading && groupsWithJoinRequests.length === 0 && (
<Box <Box
sx={{ sx={{
width: "100%", display: 'flex',
display: "flex", justifyContent: 'center',
justifyContent: "center", width: '100%',
}} }}
> >
<CustomLoader /> <CustomLoader />
@ -110,18 +116,18 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
{!loading && groupsWithJoinRequests.length === 0 && ( {!loading && groupsWithJoinRequests.length === 0 && (
<Box <Box
sx={{ sx={{
width: "100%", alignItems: 'center',
display: "flex", display: 'flex',
justifyContent: "center", height: '100%',
alignItems: "center", justifyContent: 'center',
height: "100%", width: '100%',
}} }}
> >
<Typography <Typography
sx={{ sx={{
fontSize: "11px", color: theme.palette.text.primary,
fontSize: '11px',
fontWeight: 400, fontWeight: 400,
color: "rgba(255, 255, 255, 0.2)",
}} }}
> >
Nothing to display Nothing to display
@ -130,11 +136,11 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
)} )}
<List <List
sx={{ sx={{
width: "100%", width: '100%',
maxWidth: 360, maxWidth: 360,
bgcolor: "background.paper", bgcolor: theme.palette.background.paper,
maxHeight: "300px", maxHeight: '300px',
overflow: "auto", overflow: 'auto',
}} }}
className="scrollable-container" className="scrollable-container"
> >
@ -142,13 +148,13 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
return ( return (
<ListItem <ListItem
sx={{ sx={{
marginBottom: "20px", marginBottom: '20px',
}} }}
key={group?.groupId} key={group?.groupId}
onClick={() => { onClick={() => {
setOpenAddGroup(true); setOpenAddGroup(true);
setTimeout(() => { setTimeout(() => {
executeEvent("openGroupInvitesRequest", {}); executeEvent('openGroupInvitesRequest', {});
}, 300); }, 300);
}} }}
disablePadding disablePadding
@ -156,8 +162,8 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
<IconButton edge="end" aria-label="comments"> <IconButton edge="end" aria-label="comments">
<GroupAddIcon <GroupAddIcon
sx={{ sx={{
color: "white", color: theme.palette.text.primary,
fontSize: "18px", fontSize: '18px',
}} }}
/> />
</IconButton> </IconButton>
@ -166,8 +172,8 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
<ListItemButton disableRipple role={undefined} dense> <ListItemButton disableRipple role={undefined} dense>
<ListItemText <ListItemText
sx={{ sx={{
"& .MuiTypography-root": { '& .MuiTypography-root': {
fontSize: "13px", fontSize: '13px',
fontWeight: 400, fontWeight: 400,
}, },
}} }}