From a68929c0b45d2bfe432f10bfee34be801145fb7e Mon Sep 17 00:00:00 2001 From: Monalisha Mishra <42746736+mishramonalisha76@users.noreply.github.com> Date: Mon, 1 Apr 2024 20:18:02 +0530 Subject: [PATCH] Group fixes (#1182) * fix: fixed group minor issues * fix: fixed group fiex --- .../src/app/ChatUITest/ChatPreviewList.tsx | 2 +- .../src/app/ChatUITest/ChatProfile.tsx | 2 +- .../chat/ChatPreviewList/ChatPreviewList.tsx | 31 +++- .../chat/ChatProfile/GroupInfoModal.tsx | 1 + .../chat/ChatProfile/PendingMembers.tsx | 24 ++- .../chat/UserProfile/UserProfile.tsx | 164 +++++++++--------- .../components/chat/reusables/AddWallets.tsx | 12 +- .../src/lib/hooks/chat/useCreateGatedGroup.ts | 1 + .../src/lib/hooks/chat/usePushChatStream.ts | 1 + 9 files changed, 143 insertions(+), 95 deletions(-) diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreviewList.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreviewList.tsx index 6c4cb9569..4eea73143 100644 --- a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreviewList.tsx +++ b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatPreviewList.tsx @@ -158,7 +158,7 @@ const ChatPreviewListTest = () => { onLoading={(loadingData) => { console.log("loading data: ", loadingData) }} onPaging={(chats) => { console.log("paging chats are: ", chats) }} onPreload={(chats) => { console.log("preload chats are: ", chats) }} - prefillChatPreviewList={prefill} + // prefillChatPreviewList={prefill} // listType='SEARCH' // searchParamter='0x56A734ba4C7c7b117774C9aAcCEf521eBE66d65b' /> diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatProfile.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatProfile.tsx index 3c82c76f7..3912db56d 100644 --- a/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatProfile.tsx +++ b/packages/examples/sdk-frontend-react/src/app/ChatUITest/ChatProfile.tsx @@ -7,7 +7,7 @@ export const ChatProfileTest = () => { left component} chatProfileRightHelperComponent={
right component
} - chatId='monalisha.wallet' + chatId='4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68' // chatId='36baf37e441fdd94e23406c6c716fc4e91a93a9ee68e070cd5b054534dbe09a6' /> diff --git a/packages/uiweb/src/lib/components/chat/ChatPreviewList/ChatPreviewList.tsx b/packages/uiweb/src/lib/components/chat/ChatPreviewList/ChatPreviewList.tsx index bdadad48e..1833e4eb3 100644 --- a/packages/uiweb/src/lib/components/chat/ChatPreviewList/ChatPreviewList.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatPreviewList/ChatPreviewList.tsx @@ -99,7 +99,7 @@ export const ChatPreviewList: React.FC = ( // set ref const listInnerRef = useRef(null); - const { chatStream, chatRequestStream, chatAcceptStream } = + const { chatStream, chatRequestStream, chatAcceptStream, groupCreateStream } = usePushChatStream(); // Helper Functions @@ -151,6 +151,23 @@ export const ChatPreviewList: React.FC = ( }); }; + //Transform group creation stream + const transformGroupCreationStream: (item: any) => void = async (item: any) => { + const transformedItem: IChatPreviewPayload = { + chatId:item?.chatId, + chatPic: item?.meta.image, + chatParticipant: item?.meta.name, + chatGroup: true, + chatTimestamp: undefined, + chatMsg: { + messageType: '', + messageContent: '', + } + } + addChatItems([transformedItem]); + } + + // Transform stream message const transformStreamMessage: (item: any) => void = async (item: any) => { if (!user) { @@ -566,6 +583,18 @@ export const ChatPreviewList: React.FC = ( } } }, [chatStream]); + + useEffect(() => { + if ( + Object.keys(groupCreateStream).length > 0 && + groupCreateStream.constructor === Object + ) { + if (options.listType === CONSTANTS.CHAT.LIST_TYPE.CHATS) { + transformGroupCreationStream(groupCreateStream); + } + } + }, [groupCreateStream]); + useEffect(() => { if ( Object.keys(chatRequestStream).length > 0 && diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx index edc84ee61..deced2777 100644 --- a/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx +++ b/packages/uiweb/src/lib/components/chat/ChatProfile/GroupInfoModal.tsx @@ -449,6 +449,7 @@ const GroupInformation = ({ /> )} ; acceptedMembers: ChatMemberProfile[]; chatId: string; + theme: IChatTheme; }; const UPDATE_KEYS = { @@ -89,7 +90,6 @@ export const PendingMembers = ({ })); // eslint-disable-next-line no-use-before-define }, [isInViewportPending]); - if (pendingMembers && pendingMembers.length) { return ( @@ -115,7 +115,8 @@ export const PendingMembers = ({ maxHeight="10rem" overflow="hidden auto" justifyContent="start" - borderRadius="16px" + borderRadius="12px" + theme={theme} > {showPendingRequests && pendingMembers && @@ -143,7 +144,7 @@ export const PendingMembers = ({ ))} {pendingMemberPaginationData.loading && (
- +
)}
@@ -160,6 +161,7 @@ export const AcceptedMembers = ({ setAcceptedMemberPaginationData, acceptedMemberPaginationData, chatId, + theme, }: AcceptedMembersProps) => { const { account } = useChatData(); const acceptedMemberPageRef = useRef(null); @@ -302,7 +304,6 @@ export const AcceptedMembers = ({ }; useClickAway(dropdownRef, () => setSelectedMemberAddress(null)); - console.debug(acceptedMembers); if (acceptedMembers && acceptedMembers.length) { return ( {acceptedMembers.map((item, index) => ( {acceptedMemberPaginationData.loading && (
- +
)} @@ -393,6 +395,16 @@ const Badge = styled.div` font-weight: 700; `; -const ProfileSection = styled(Section)` +const ProfileSection = styled(Section)<{ theme: IChatTheme }>` height: fit-content; + &::-webkit-scrollbar-thumb { + background: transparent; + border-radius: 10px; + } + &::-webkit-scrollbar-button { + height: 20px; + } + &::-webkit-scrollbar { + width: 0px; + } `; diff --git a/packages/uiweb/src/lib/components/chat/UserProfile/UserProfile.tsx b/packages/uiweb/src/lib/components/chat/UserProfile/UserProfile.tsx index 69347da0c..a1b8a82c3 100644 --- a/packages/uiweb/src/lib/components/chat/UserProfile/UserProfile.tsx +++ b/packages/uiweb/src/lib/components/chat/UserProfile/UserProfile.tsx @@ -15,13 +15,17 @@ import useChatProfile from '../../../hooks/chat/useChatProfile'; import { useClickAway } from '../../../hooks'; import { UpdateUserProfileModal } from './UpdateUserProfileModal'; -import { CoreContractChainId, InfuraAPIKey, ProfilePicture, device } from '../../../config'; +import { + CoreContractChainId, + InfuraAPIKey, + ProfilePicture, + device, +} from '../../../config'; import VerticalEllipsisIcon from '../../../icons/VerticalEllipsis.svg'; import UserProfileIcon from '../../../icons/userCircleGear.svg'; import { IChatTheme, UserProfileProps } from '../exportedTypes'; import { MODAL_BACKGROUND_TYPE, MODAL_POSITION_TYPE } from '../../../types'; - /** * @interface IThemeProps * this interface is used for defining the props for styled components @@ -30,22 +34,22 @@ interface IThemeProps { theme?: IChatTheme; } -export const UserProfile : React.FC = ({ +export const UserProfile: React.FC = ({ updateUserProfileModalBackground = MODAL_BACKGROUND_TYPE.OVERLAY, - updateUserProfileModalPositionType = MODAL_POSITION_TYPE.GLOBAL + updateUserProfileModalPositionType = MODAL_POSITION_TYPE.GLOBAL, }) => { - const { account, user ,env} = useChatData(); + const { account, user, env } = useChatData(); const [userProfile, setUserProfile] = useState(); - const [web3Name,setWeb3Name] = useState(null); + const [web3Name, setWeb3Name] = useState(null); const [options, setOptions] = useState(); - const [showUpdateUserProfileModal,setShowUpdateUserProfileModal] = useState(false); + const [showUpdateUserProfileModal, setShowUpdateUserProfileModal] = + useState(false); const DropdownRef = useRef(null); const provider = new ethers.providers.InfuraProvider( CoreContractChainId[env], InfuraAPIKey ); - const theme = useContext(ThemeContext); const { fetchChatProfile } = useChatProfile(); @@ -53,12 +57,11 @@ export const UserProfile : React.FC = ({ useEffect(() => { (async () => { - const fetchedUser = await fetchChatProfile({user}); + const fetchedUser = await fetchChatProfile({ user }); if (fetchedUser) { const result = await resolveNewEns(fetchedUser?.wallets, provider, env); setWeb3Name(result); setUserProfile(fetchedUser); - } })(); }, [account, user]); @@ -68,72 +71,78 @@ export const UserProfile : React.FC = ({ return ( <> - - - {userProfile && ( -
- setOptions(true)} - /> - -
- )} - {options && ( - setShowUpdateUserProfileModal(true)}> - - - - Edit Profile - - - )} - {showUpdateUserProfileModal && ( - + + {userProfile && ( +
+ setOptions(true)} /> - )} - - - - +
+ )} + {options && ( + setShowUpdateUserProfileModal(true)} + > + + + + Edit Profile + + + )} + {showUpdateUserProfileModal && ( + + )} + + + ); }; @@ -141,13 +150,12 @@ export const UserProfile : React.FC = ({ const Conatiner = styled(Section)` border: ${(props) => props.theme.border?.userProfile}; box-sizing: border-box; - `; const DropDownBar = styled.div` position: absolute; - bottom: 40px; - right:20px; + bottom: 13px; + right: 29px; cursor: pointer; display: block; min-width: 170px; @@ -170,4 +178,4 @@ const DropDownItem = styled(Span)` const TextItem = styled(Span)` white-space: nowrap; overflow: hidden; -`; \ No newline at end of file +`; diff --git a/packages/uiweb/src/lib/components/chat/reusables/AddWallets.tsx b/packages/uiweb/src/lib/components/chat/reusables/AddWallets.tsx index 092155fa8..34f80303b 100644 --- a/packages/uiweb/src/lib/components/chat/reusables/AddWallets.tsx +++ b/packages/uiweb/src/lib/components/chat/reusables/AddWallets.tsx @@ -179,7 +179,7 @@ export const AddWallets = ({ onSubmit()} isLoading={isLoading} - memberListCount={memberList?.length > 0} + // memberListCount={memberList?.length > 0} theme={theme} > {!isLoading ? submitButtonTitle : ''}{' '} @@ -246,15 +246,11 @@ const ModalConfirmButton = styled.button< margin: 60px 0 0 0; width: 197px; background: ${(props) => - props.memberListCount - ? props.theme.backgroundColor!.buttonBackground - : props.theme.backgroundColor!.buttonDisableBackground}; + props.theme.backgroundColor!.buttonBackground}; color: ${(props) => - props.memberListCount - ? props.theme.textColor!.buttonText - : props.theme.textColor!.buttonDisableText}; + props.theme.textColor!.buttonText}; border: ${(props) => - props.memberListCount ? 'none' : props.theme.border!.modal}; + 'none'}; min-width: 50%; box-sizing: border-box; cursor: pointer; diff --git a/packages/uiweb/src/lib/hooks/chat/useCreateGatedGroup.ts b/packages/uiweb/src/lib/hooks/chat/useCreateGatedGroup.ts index b2faff05f..25ff2253f 100644 --- a/packages/uiweb/src/lib/hooks/chat/useCreateGatedGroup.ts +++ b/packages/uiweb/src/lib/hooks/chat/useCreateGatedGroup.ts @@ -11,6 +11,7 @@ export const useCreateGatedGroup = () => { const createGatedGroup = useCallback( async (groupInfoType:GrouInfoType,rules: any) => { setLoading(true); + console.debug('user in create group ',user) try { const payload = { description:groupInfoType.groupDescription, diff --git a/packages/uiweb/src/lib/hooks/chat/usePushChatStream.ts b/packages/uiweb/src/lib/hooks/chat/usePushChatStream.ts index c76a137bb..51dff22f4 100644 --- a/packages/uiweb/src/lib/hooks/chat/usePushChatStream.ts +++ b/packages/uiweb/src/lib/hooks/chat/usePushChatStream.ts @@ -68,6 +68,7 @@ export const usePushChatStream = () => { // Listen for group info stream?.on(CONSTANTS.STREAM.CHAT_OPS, (chatops: any) => { + console.debug(chatops) if (chatops.event === 'chat.group.update') { setGroupUpdateStream(chatops); }