Rename ConversationListItem as ConversationSummaryListItem
Change-Id: I6e4f7186a5b4ee0f1b71e95adb7a5422c4aeed36
diff --git a/client/src/components/ContactSearchResultList.tsx b/client/src/components/ContactSearchResultList.tsx
index d0593ae..d0c9598 100644
--- a/client/src/components/ContactSearchResultList.tsx
+++ b/client/src/components/ContactSearchResultList.tsx
@@ -24,7 +24,7 @@
import { useAddContactMutation, useContactsSearchQuery } from '../services/contactQueries';
import { useConversationsSummariesQuery } from '../services/conversationQueries';
import ConversationAvatar from './ConversationAvatar';
-import ConversationListItem from './ConversationListItem';
+import { ConversationSummaryList } from './ConversationSummaryList';
import { CustomListItemButton } from './CustomListItemButton';
import { useDialogHandler } from './Dialog';
import LoadingPage from './Loading';
@@ -63,9 +63,7 @@
{conversationsSummaries && conversationsSummaries.length > 0 && (
<>
<ListSubheader>{t('conversations')}</ListSubheader>
- {conversationsSummaries.map((conversationSummary) => (
- <ConversationListItem key={conversationSummary.id} conversationSummary={conversationSummary} />
- ))}
+ <ConversationSummaryList conversationsSummaries={conversationsSummaries} />
</>
)}
</List>
diff --git a/client/src/components/ConversationList.tsx b/client/src/components/ConversationList.tsx
index 1ce22dc..ee4a36e 100644
--- a/client/src/components/ConversationList.tsx
+++ b/client/src/components/ConversationList.tsx
@@ -16,15 +16,15 @@
* <https://www.gnu.org/licenses/>.
*/
import { SearchRounded } from '@mui/icons-material';
-import { InputBase, List, Stack } from '@mui/material';
+import { InputBase, Stack } from '@mui/material';
import { ChangeEvent, useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useConversationRequestsQuery, useConversationsSummariesQuery } from '../services/conversationQueries';
import { SquareButton } from './Button';
import ContactSearchResultList from './ContactSearchResultList';
-import ConversationListItem from './ConversationListItem';
import { ConversationRequestList } from './ConversationRequestList';
+import { ConversationSummaryList } from './ConversationSummaryList';
import { PeopleGroupIcon } from './SvgIcon';
import { Tab, TabPanel, TabPanelProps, Tabs, TabsList, TabsProps } from './Tabs';
@@ -56,20 +56,20 @@
}
const ConversationTabs = () => {
- const conversationsTabIndex = 0;
+ const summariesTabIndex = 0;
const invitationsTabIndex = 1;
const { t } = useTranslation();
const conversationRequestsQuery = useConversationRequestsQuery();
const conversationRequestsLength = conversationRequestsQuery.data?.length;
const [isShowingTabMenu, setIsShowingTabMenu] = useState(false);
- const [tabIndex, setTabIndex] = useState(conversationsTabIndex);
+ const [tabIndex, setTabIndex] = useState(summariesTabIndex);
useEffect(() => {
const newIsShowingTabMenu = !!conversationRequestsLength;
setIsShowingTabMenu(newIsShowingTabMenu);
if (!newIsShowingTabMenu) {
- setTabIndex(conversationsTabIndex);
+ setTabIndex(summariesTabIndex);
}
}, [conversationRequestsLength]);
@@ -80,7 +80,7 @@
}, []);
return (
- <Tabs defaultValue={conversationsTabIndex} value={tabIndex} onChange={onChange}>
+ <Tabs defaultValue={summariesTabIndex} value={tabIndex} onChange={onChange}>
{isShowingTabMenu && (
<TabsList>
<Tab>{t('conversations')}</Tab>
@@ -89,23 +89,19 @@
</Tab>
</TabsList>
)}
- <ConversationsTabPanel value={conversationsTabIndex} />
+ <SummariesTabPanel value={summariesTabIndex} />
<InvitationsTabPanel value={invitationsTabIndex} />
</Tabs>
);
};
-const ConversationsTabPanel = (props: TabPanelProps) => {
+const SummariesTabPanel = (props: TabPanelProps) => {
const conversationsSummariesQuery = useConversationsSummariesQuery();
- const conversationsSummaries = conversationsSummariesQuery.data;
+ const conversationsSummaries = conversationsSummariesQuery.data || [];
return (
<TabPanel {...props}>
- <List>
- {conversationsSummaries?.map((conversationSummary) => (
- <ConversationListItem key={conversationSummary.id} conversationSummary={conversationSummary} />
- ))}
- </List>
+ <ConversationSummaryList conversationsSummaries={conversationsSummaries} />
</TabPanel>
);
};
diff --git a/client/src/components/ConversationListItem.tsx b/client/src/components/ConversationSummaryList.tsx
similarity index 93%
rename from client/src/components/ConversationListItem.tsx
rename to client/src/components/ConversationSummaryList.tsx
index e3803a2..f8e3d22 100644
--- a/client/src/components/ConversationListItem.tsx
+++ b/client/src/components/ConversationSummaryList.tsx
@@ -15,7 +15,7 @@
* License along with this program. If not, see
* <https://www.gnu.org/licenses/>.
*/
-import { Box, Stack, Typography } from '@mui/material';
+import { Box, List, Stack, Typography } from '@mui/material';
import dayjs from 'dayjs';
import { IConversationSummary } from 'jami-web-common';
import { QRCodeCanvas } from 'qrcode.react';
@@ -39,11 +39,25 @@
import { PopoverListItemData } from './PopoverList';
import { AudioCallIcon, CancelIcon, MessageIcon, PersonIcon, VideoCallIcon } from './SvgIcon';
-type ConversationListItemProps = {
+type ConversationSummaryListProps = {
+ conversationsSummaries: IConversationSummary[];
+};
+
+export const ConversationSummaryList = ({ conversationsSummaries }: ConversationSummaryListProps) => {
+ return (
+ <List>
+ {conversationsSummaries?.map((conversationSummary) => (
+ <ConversationSummaryListItem key={conversationSummary.id} conversationSummary={conversationSummary} />
+ ))}
+ </List>
+ );
+};
+
+type ConversationSummaryListItemProps = {
conversationSummary: IConversationSummary;
};
-export default function ConversationListItem({ conversationSummary }: ConversationListItemProps) {
+const ConversationSummaryListItem = ({ conversationSummary }: ConversationSummaryListItemProps) => {
const { account } = useAuthContext();
const {
urlParams: { conversationId: selectedConversationId },
@@ -85,7 +99,7 @@
/>
</Box>
);
-}
+};
type SecondaryTextProps = {
conversationSummary: IConversationSummary;
@@ -129,7 +143,7 @@
return message.body;
}
default: {
- console.error(`${ConversationListItem.name} received an unexpected lastMessage type: ${message.type}`);
+ console.error(`${ConversationSummaryListItem.name} received an unexpected lastMessage type: ${message.type}`);
return '';
}
}