status-im
/
status-web
mirror of https://github.com/status-im/status-web.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(
(member: string) => {
setStyledGroup((prevMembers: string[]) => {
if (prevMembers.find((mem) => mem === member)) {
if (
prevMembers.find((mem) => mem === member) ||
prevMembers.length >= 5
) {
return prevMembers;
} else {
return [...prevMembers, member];
}
});
setQuery("");
},
[setStyledGroup, styledGroup]
);
const removeMember = (member: string) => {
setStyledGroup((prev) => prev.filter((e) => e != member));
};
const removeMember = useCallback(
(member: string) => {
setStyledGroup((prev) => prev.filter((e) => e != member));
},
[setStyledGroup]
);
const createChat = (group: string[]) => {
if (identity) {
const newGroup = group.slice();
newGroup.push(bufToHex(identity.publicKey));
group.length > 1
? createGroupChat(newGroup)
: setChannel({
id: newGroup[0],
name: newGroup[0],
type: "dm",
description: `Chatkey: ${newGroup[0]} `,
});
setChatState(ChatState.ChatBody);
}
};
const createChat = useCallback(
(group: string[]) => {
if (identity) {
const newGroup = group.slice();
newGroup.push(bufToHex(identity.publicKey));
group.length > 1
? createGroupChat(newGroup)
: setChannel({
id: newGroup[0],
name: newGroup[0],
type: "dm",
description: `Chatkey: ${newGroup[0]} `,
});
setChatState(ChatState.ChatBody);
}
},
[identity, createGroupChat, setChannel]
);
return (
<CreationWrapper>
<CreationBar>
<InputBar>
<InputText>To:</InputText>
{styledGroup.length > 0 && (
<StyledList>
{styledGroup.map((member) => (
<StyledMember key={member}>
<StyledName>{member.slice(0, 10)}</StyledName>
<CloseButton onClick={() => removeMember(member)}>
<CrossIcon memberView={true} />
</CloseButton>
</StyledMember>
))}
</StyledList>
<StyledList>
{styledGroup.map((member) => (
<StyledMember key={member}>
<StyledName>{member.slice(0, 10)}</StyledName>
<CloseButton onClick={() => removeMember(member)}>
<CrossIcon memberView={true} />
</CloseButton>
</StyledMember>
))}
</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 && (
<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);
useEffect(() => {
window.addEventListener("click", () => setShowEmoji(false));
if (showEmoji) {
window.addEventListener("click", () => setShowEmoji(false));
}
return () => {
window.removeEventListener("click", () => setShowEmoji(false));
};
}, []);
}, [showEmoji]);
const image = useMemo(
() => (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 styled from "styled-components";
import { useIdentity, useNickname } from "../../contexts/identityProvider";
import { useIdentity } from "../../contexts/identityProvider";
import { useMessengerContext } from "../../contexts/messengerProvider";
import { useModal } from "../../contexts/modalProvider";
import { buttonStyles } from "../Buttons/buttonStyle";
@ -17,12 +17,10 @@ interface MembersListProps {
}
export function MembersList({ switchShowMembers }: MembersListProps) {
const { contacts } = useMessengerContext();
const { contacts, nickname } = useMessengerContext();
const identity = useIdentity();
const { setModal } = useModal(LogoutModalName);
const nickname = useNickname();
const userContacts = useMemo(() => {
if (identity) {
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 {
useIdentity,
useNickname,
useSetIdentity,
useSetNikcname,
} from "../../contexts/identityProvider";
import { useMessengerContext } from "../../contexts/messengerProvider";
import { useModal } from "../../contexts/modalProvider";
import { ButtonNo, ButtonYes } from "../Buttons/buttonStyle";
import { UserLogo } from "../Members/UserLogo";
@ -29,7 +29,7 @@ export const LogoutModal = () => {
const logout = useSetIdentity();
const setNickname = useSetNikcname();
const identity = useIdentity();
const nickname = useNickname();
const { nickname } = useMessengerContext();
if (identity) {
return (

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

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

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

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

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

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

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

@ -33,23 +33,29 @@ export function useLoadPrevDay(
loadingPreviousMessages.current[id] = true;
setLoadingMessages(true);
let amountOfMessages = 0;
if (groupChat && groupChats) {
amountOfMessages = await groupChats.retrievePreviousMessages(
id,
startTime,
endTime
);
} else {
amountOfMessages = await messenger.retrievePreviousMessages(
id,
startTime,
endTime
);
let failed = true;
try {
if (groupChat && groupChats) {
amountOfMessages = await groupChats.retrievePreviousMessages(
id,
startTime,
endTime
);
} else {
amountOfMessages = await messenger.retrievePreviousMessages(
id,
startTime,
endTime
);
}
lastLoadTime.current[id] = startTime;
failed = false;
} catch {
failed = true;
}
lastLoadTime.current[id] = startTime;
loadingPreviousMessages.current[id] = false;
setLoadingMessages(false);
if (amountOfMessages === 0) {
if (amountOfMessages === 0 && !failed) {
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;
changeGroupChatName: (name: string, chatId: string) => void;
addMembers: (members: string[], chatId: string) => void;
nickname: string | undefined;
};
function useCreateMessenger(identity: Identity | undefined) {
@ -101,7 +102,7 @@ function useCreateCommunity(
export function useMessenger(
identity: Identity | undefined,
nickname: string | undefined
newNickname: string | undefined
) {
const { communityKey } = useConfig();
const [activeChannel, setActiveChannel] = useState<ChannelData>({
@ -113,10 +114,10 @@ export function useMessenger(
const messenger = useCreateMessenger(identity);
const { contacts, setContacts, contactsClass } = useContacts(
const { contacts, setContacts, contactsClass, nickname } = useContacts(
messenger,
identity,
nickname
newNickname
);
const {
@ -258,5 +259,6 @@ export function useMessenger(
createGroupChat,
changeGroupChatName,
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)
)
);
this.waku.relay.addObserver(
(message) => this.decodeUpdateMessage(message, true),
[topic]
);
await Promise.all(
Object.values(this.chats).map(async (chat) => {
if (!chat?.removed) {
@ -301,10 +305,6 @@ export class GroupChats {
}
})
);
this.waku.relay.addObserver(
(message) => this.decodeUpdateMessage(message, true),
[topic]
);
}
private async sendUpdateMessage(