Rename ConversationListItem as ConversationSummaryListItem
Change-Id: I6e4f7186a5b4ee0f1b71e95adb7a5422c4aeed36
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>
);
};