Fix add contact and create MessengerProvider
Move all messenger logic and state from `Messenger.tsx` to a new context `MessengerProvider.tsx`.
Improve add contact logic to use a state in `MessengerContext` for the newContactId instead of a URL parameter. Remove `add-contact` route.
Improve messenger routing.
Fix remove contact.
GitLab: #171
Change-Id: Iea641deb12dbd339d03eff683b41834123a516ab
diff --git a/client/src/components/ConversationList.tsx b/client/src/components/ConversationList.tsx
index 316792b..684c7e5 100644
--- a/client/src/components/ConversationList.tsx
+++ b/client/src/components/ConversationList.tsx
@@ -20,17 +20,17 @@
import ListSubheader from '@mui/material/ListSubheader';
import Typography from '@mui/material/Typography';
import { Conversation } from 'jami-web-common';
-import { useEffect } from 'react';
+import { useContext, useEffect } from 'react';
+import { MessengerContext } from '../contexts/MessengerProvider';
import { useAppSelector } from '../redux/hooks';
import ConversationListItem from './ConversationListItem';
type ConversationListProps = {
- accountId: string;
conversations: Conversation[];
- search?: Conversation;
};
-export default function ConversationList(props: ConversationListProps) {
+export default function ConversationList({ conversations }: ConversationListProps) {
+ const { searchResult } = useContext(MessengerContext);
const { refresh } = useAppSelector((state) => state.userInfo);
useEffect(() => {
@@ -40,17 +40,17 @@
return (
<div className="rooms-list">
<List>
- {props.search instanceof Conversation && (
+ {searchResult && (
<div>
<ListSubheader>Public directory</ListSubheader>
- <ConversationListItem conversation={props.search} />
+ <ConversationListItem conversation={searchResult} />
<ListSubheader>Conversations</ListSubheader>
</div>
)}
- {props.conversations.map((conversation) => (
+ {conversations.map((conversation) => (
<ConversationListItem key={conversation.getId()} conversation={conversation} />
))}
- {props.conversations.length === 0 && (
+ {conversations.length === 0 && (
<div className="list-placeholder">
<GroupIcon color="disabled" fontSize="large" />
<Typography className="subtitle" variant="subtitle2">