status-im
/
dappconnect-sdks
mirror of https://github.com/status-im/dappconnect-sdks.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix context error and group chats msg loading (#179)

This commit is contained in:
Szymon Szlachtowicz 2022-01-10 13:44:02 +01:00 committed by GitHub
parent fe3c189f00
commit 7c0668d010
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 94 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
packages/react-chat/src/components/Chat/ChatCreation.tsx
View File

@ -34,69 +34,73 @@ export function ChatCreation({
const addMember = useCallback( const addMember = useCallback(
(member: string) => { (member: string) => {
setStyledGroup((prevMembers: string[]) => { setStyledGroup((prevMembers: string[]) => {
if (prevMembers.find((mem) => mem === member)) { if (
prevMembers.find((mem) => mem === member) ||
prevMembers.length >= 5
) {
return prevMembers; return prevMembers;
} else { } else {
return [...prevMembers, member]; return [...prevMembers, member];
} }
}); });
setQuery("");
}, },
[setStyledGroup, styledGroup] [setStyledGroup, styledGroup]
); );
const removeMember = (member: string) => { const removeMember = useCallback(
setStyledGroup((prev) => prev.filter((e) => e != member)); (member: string) => {
}; setStyledGroup((prev) => prev.filter((e) => e != member));
},
[setStyledGroup]
);
const createChat = (group: string[]) => { const createChat = useCallback(
if (identity) { (group: string[]) => {
const newGroup = group.slice(); if (identity) {
newGroup.push(bufToHex(identity.publicKey)); const newGroup = group.slice();
group.length > 1 newGroup.push(bufToHex(identity.publicKey));
? createGroupChat(newGroup) group.length > 1
: setChannel({ ? createGroupChat(newGroup)
id: newGroup[0], : setChannel({
name: newGroup[0], id: newGroup[0],
type: "dm", name: newGroup[0],
description: `Chatkey: ${newGroup[0]} `, type: "dm",
}); description: `Chatkey: ${newGroup[0]} `,
setChatState(ChatState.ChatBody); });
} setChatState(ChatState.ChatBody);
}; }
},
[identity, createGroupChat, setChannel]
);
return ( return (
<CreationWrapper> <CreationWrapper>
<CreationBar> <CreationBar>
<InputBar> <InputBar>
<InputText>To:</InputText> <InputText>To:</InputText>
{styledGroup.length > 0 && ( <StyledList>
<StyledList> {styledGroup.map((member) => (
{styledGroup.map((member) => ( <StyledMember key={member}>
<StyledMember key={member}> <StyledName>{member.slice(0, 10)}</StyledName>
<StyledName>{member.slice(0, 10)}</StyledName> <CloseButton onClick={() => removeMember(member)}>
<CloseButton onClick={() => removeMember(member)}> <CrossIcon memberView={true} />
<CrossIcon memberView={true} /> </CloseButton>
</CloseButton> </StyledMember>
</StyledMember> ))}
))} </StyledList>
</StyledList> {styledGroup.length < 5 && (
<SearchMembers>
<Input
value={query}
onInput={(e) => setQuery(e.currentTarget.value)}
/>
<SearchBlock
query={query}
discludeList={styledGroup}
onClick={addMember}
/>
</SearchMembers>
)} )}
<SearchMembers>
{styledGroup.length < 5 && (
<>
<Input
value={query}
onInput={(e) => setQuery(e.currentTarget.value)}
/>
{query && (
<SearchBlock
query={query}
discludeList={styledGroup}
onClick={addMember}
/>
)}
</>
)}
</SearchMembers>
{styledGroup.length === 5 && ( {styledGroup.length === 5 && (
<LimitAlert>5 user Limit reached</LimitAlert> <LimitAlert>5 user Limit reached</LimitAlert>
)} )}

6
packages/react-chat/src/components/Chat/ChatInput.tsx
View File

@ -47,11 +47,13 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
const inputRef = useRef<HTMLDivElement>(null); const inputRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
window.addEventListener("click", () => setShowEmoji(false)); if (showEmoji) {
window.addEventListener("click", () => setShowEmoji(false));
}
return () => { return () => {
window.removeEventListener("click", () => setShowEmoji(false)); window.removeEventListener("click", () => setShowEmoji(false));
}; };
}, []); }, [showEmoji]);
const image = useMemo( const image = useMemo(
() => (imageUint ? uintToImgUrl(imageUint) : ""), () => (imageUint ? uintToImgUrl(imageUint) : ""),

6
packages/react-chat/src/components/Members/MembersList.tsx
View File

@ -3,7 +3,7 @@ import { utils } from "status-communities/dist/cjs";
import { bufToHex } from "status-communities/dist/cjs/utils"; import { bufToHex } from "status-communities/dist/cjs/utils";
import styled from "styled-components"; import styled from "styled-components";
import { useIdentity, useNickname } from "../../contexts/identityProvider"; import { useIdentity } from "../../contexts/identityProvider";
import { useMessengerContext } from "../../contexts/messengerProvider"; import { useMessengerContext } from "../../contexts/messengerProvider";
import { useModal } from "../../contexts/modalProvider"; import { useModal } from "../../contexts/modalProvider";
import { buttonStyles } from "../Buttons/buttonStyle"; import { buttonStyles } from "../Buttons/buttonStyle";
@ -17,12 +17,10 @@ interface MembersListProps {
} }
export function MembersList({ switchShowMembers }: MembersListProps) { export function MembersList({ switchShowMembers }: MembersListProps) {
const { contacts } = useMessengerContext(); const { contacts, nickname } = useMessengerContext();
const identity = useIdentity(); const identity = useIdentity();
const { setModal } = useModal(LogoutModalName); const { setModal } = useModal(LogoutModalName);
const nickname = useNickname();
const userContacts = useMemo(() => { const userContacts = useMemo(() => {
if (identity) { if (identity) {
return Object.values(contacts).filter( return Object.values(contacts).filter(

4
packages/react-chat/src/components/Modals/LogoutModal.tsx
View File

@ -4,10 +4,10 @@ import styled from "styled-components";
import { import {
useIdentity, useIdentity,
useNickname,
useSetIdentity, useSetIdentity,
useSetNikcname, useSetNikcname,
} from "../../contexts/identityProvider"; } from "../../contexts/identityProvider";
import { useMessengerContext } from "../../contexts/messengerProvider";
import { useModal } from "../../contexts/modalProvider"; import { useModal } from "../../contexts/modalProvider";
import { ButtonNo, ButtonYes } from "../Buttons/buttonStyle"; import { ButtonNo, ButtonYes } from "../Buttons/buttonStyle";
import { UserLogo } from "../Members/UserLogo"; import { UserLogo } from "../Members/UserLogo";
@ -29,7 +29,7 @@ export const LogoutModal = () => {
const logout = useSetIdentity(); const logout = useSetIdentity();
const setNickname = useSetNikcname(); const setNickname = useSetNikcname();
const identity = useIdentity(); const identity = useIdentity();
const nickname = useNickname(); const { nickname } = useMessengerContext();
if (identity) { if (identity) {
return ( return (

2
packages/react-chat/src/components/SearchBlock.tsx
View File

@ -32,7 +32,7 @@ export const SearchBlock = ({
.filter((member) => !discludeList.includes(member.id)); .filter((member) => !discludeList.includes(member.id));
}, [query, discludeList, contacts]); }, [query, discludeList, contacts]);
if (searchList.length === 0) { if (searchList.length === 0 || !query) {
return null; return null;
} }
return ( return (

1
packages/react-chat/src/contexts/messengerProvider.tsx
View File

@ -25,6 +25,7 @@ const MessengerContext = createContext<MessengerType>({
createGroupChat: () => undefined, createGroupChat: () => undefined,
changeGroupChatName: () => undefined, changeGroupChatName: () => undefined,
addMembers: () => undefined, addMembers: () => undefined,
nickname: undefined,
}); });
export function useMessengerContext() { export function useMessengerContext() {

9
packages/react-chat/src/hooks/messenger/useContacts.ts
View File

@ -6,15 +6,14 @@ import {
} from "status-communities/dist/cjs"; } from "status-communities/dist/cjs";
import { bufToHex } from "status-communities/dist/cjs/utils"; import { bufToHex } from "status-communities/dist/cjs/utils";
import { useSetNikcname } from "../../contexts/identityProvider";
import { Contacts } from "../../models/Contact"; import { Contacts } from "../../models/Contact";
export function useContacts( export function useContacts(
messenger: Messenger | undefined, messenger: Messenger | undefined,
identity: Identity | undefined, identity: Identity | undefined,
nickname: string | undefined newNickname: string | undefined
) { ) {
const setNickname = useSetNikcname(); const [nickname, setNickname] = useState<string | undefined>(undefined);
const [internalContacts, setInternalContacts] = useState<{ const [internalContacts, setInternalContacts] = useState<{
[id: string]: { clock: number; nickname?: string }; [id: string]: { clock: number; nickname?: string };
}>({}); }>({});
@ -37,7 +36,7 @@ export function useContacts(
return { ...prev, [id]: { ...prev[id], nickname } }; return { ...prev, [id]: { ...prev[id], nickname } };
}); });
}, },
nickname newNickname
); );
return newContacts; return newContacts;
} }
@ -65,5 +64,5 @@ export function useContacts(
}); });
}, [internalContacts]); }, [internalContacts]);
return { contacts, setContacts, contactsClass }; return { contacts, setContacts, contactsClass, nickname };
} }

1
packages/react-chat/src/hooks/messenger/useGroupChats.ts
View File

@ -45,7 +45,6 @@ export function useGroupChats(
setChannels((prev) => { setChannels((prev) => {
return { ...prev, [channel.id]: channel }; return { ...prev, [channel.id]: channel };
}); });
setActiveChannel(channel);
}; };
const removeChat = (chat: GroupChat) => { const removeChat = (chat: GroupChat) => {
setChannels((prev) => { setChannels((prev) => {

34
packages/react-chat/src/hooks/messenger/useLoadPrevDay.ts
View File

@ -33,23 +33,29 @@ export function useLoadPrevDay(
loadingPreviousMessages.current[id] = true; loadingPreviousMessages.current[id] = true;
setLoadingMessages(true); setLoadingMessages(true);
let amountOfMessages = 0; let amountOfMessages = 0;
if (groupChat && groupChats) { let failed = true;
amountOfMessages = await groupChats.retrievePreviousMessages( try {
id, if (groupChat && groupChats) {
startTime, amountOfMessages = await groupChats.retrievePreviousMessages(
endTime id,
); startTime,
} else { endTime
amountOfMessages = await messenger.retrievePreviousMessages( );
id, } else {
startTime, amountOfMessages = await messenger.retrievePreviousMessages(
endTime id,
); startTime,
endTime
);
}
lastLoadTime.current[id] = startTime;
failed = false;
} catch {
failed = true;
} }
lastLoadTime.current[id] = startTime;
loadingPreviousMessages.current[id] = false; loadingPreviousMessages.current[id] = false;
setLoadingMessages(false); setLoadingMessages(false);
if (amountOfMessages === 0) { if (amountOfMessages === 0 && !failed) {
loadPrevDay(id, groupChat); loadPrevDay(id, groupChat);
} }
} }

8
packages/react-chat/src/hooks/messenger/useMessenger.ts
View File

@ -47,6 +47,7 @@ export type MessengerType = {
createGroupChat: (members: string[]) => void; createGroupChat: (members: string[]) => void;
changeGroupChatName: (name: string, chatId: string) => void; changeGroupChatName: (name: string, chatId: string) => void;
addMembers: (members: string[], chatId: string) => void; addMembers: (members: string[], chatId: string) => void;
nickname: string | undefined;
}; };
function useCreateMessenger(identity: Identity | undefined) { function useCreateMessenger(identity: Identity | undefined) {
@ -101,7 +102,7 @@ function useCreateCommunity(
export function useMessenger( export function useMessenger(
identity: Identity | undefined, identity: Identity | undefined,
nickname: string | undefined newNickname: string | undefined
) { ) {
const { communityKey } = useConfig(); const { communityKey } = useConfig();
const [activeChannel, setActiveChannel] = useState<ChannelData>({ const [activeChannel, setActiveChannel] = useState<ChannelData>({
@ -113,10 +114,10 @@ export function useMessenger(
const messenger = useCreateMessenger(identity); const messenger = useCreateMessenger(identity);
const { contacts, setContacts, contactsClass } = useContacts( const { contacts, setContacts, contactsClass, nickname } = useContacts(
messenger, messenger,
identity, identity,
nickname newNickname
); );
const { const {
@ -258,5 +259,6 @@ export function useMessenger(
createGroupChat, createGroupChat,
changeGroupChatName, changeGroupChatName,
addMembers, addMembers,
nickname,
}; };
} }

8
packages/status-communities/src/groupChats.ts
View File

@ -293,6 +293,10 @@ export class GroupChats {
async (message) => await this.decodeUpdateMessage(message, false) async (message) => await this.decodeUpdateMessage(message, false)
) )
); );
this.waku.relay.addObserver(
(message) => this.decodeUpdateMessage(message, true),
[topic]
);
await Promise.all( await Promise.all(
Object.values(this.chats).map(async (chat) => { Object.values(this.chats).map(async (chat) => {
if (!chat?.removed) { if (!chat?.removed) {
@ -301,10 +305,6 @@ export class GroupChats {
} }
}) })
); );
this.waku.relay.addObserver(
(message) => this.decodeUpdateMessage(message, true),
[topic]
);
} }
private async sendUpdateMessage( private async sendUpdateMessage(