Add tabs for conversation invitations
Change-Id: I657630c84b4e5f315ccc1b062f28087cd994d2cd
diff --git a/client/src/components/ConversationList.tsx b/client/src/components/ConversationList.tsx
index 3320110..2792fd4 100644
--- a/client/src/components/ConversationList.tsx
+++ b/client/src/components/ConversationList.tsx
@@ -15,42 +15,26 @@
* License along with this program. If not, see
* <https://www.gnu.org/licenses/>.
*/
-import { GroupRounded as GroupIcon, SearchRounded } from '@mui/icons-material';
-import { InputBase } from '@mui/material';
-import List from '@mui/material/List';
-import ListSubheader from '@mui/material/ListSubheader';
-import Typography from '@mui/material/Typography';
-import { Stack } from '@mui/system';
+import { SearchRounded } from '@mui/icons-material';
+import { InputBase, List, Stack } from '@mui/material';
import { ChangeEvent, useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
-import { useContactsSearchQuery } from '../services/contactQueries';
import { useConversationsSummariesQuery } from '../services/conversationQueries';
import { SquareButton } from './Button';
import ContactSearchResultList from './ContactSearchResultList';
import ConversationListItem from './ConversationListItem';
-import LoadingPage from './Loading';
import { PeopleGroupIcon } from './SvgIcon';
+import { Tab, TabPanel, Tabs, TabsList } from './Tabs';
export default function ConversationList() {
const { t } = useTranslation();
-
const [searchFilter, setSearchFilter] = useState('');
- const conversationsSummariesQuery = useConversationsSummariesQuery();
- const contactsSearchQuery = useContactsSearchQuery(searchFilter);
-
- const conversationsSummaries = conversationsSummariesQuery.data;
- const contactsSearchResult = contactsSearchQuery.data;
-
const handleInputChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
setSearchFilter(event.target.value);
}, []);
- if (!conversationsSummaries) {
- return <LoadingPage />;
- }
-
return (
<Stack>
<Stack direction="row">
@@ -65,24 +49,46 @@
/>
<SquareButton aria-label="start swarm" Icon={PeopleGroupIcon} />
</Stack>
- <List>
- {contactsSearchResult && contactsSearchResult.length > 0 && (
- <>
- <ListSubheader>{t('search_results')}</ListSubheader>
- <ContactSearchResultList contacts={contactsSearchResult} />
- <ListSubheader>{t('conversations')}</ListSubheader>
- </>
- )}
- {conversationsSummaries.map((conversationSummary) => (
- <ConversationListItem key={conversationSummary.id} conversationSummary={conversationSummary} />
- ))}
- {conversationsSummaries.length === 0 && (
- <Stack>
- <GroupIcon color="disabled" fontSize="large" />
- <Typography variant="subtitle2">{t('no_conversations')}</Typography>
- </Stack>
- )}
- </List>
+ {searchFilter ? <ContactSearchResultList searchFilter={searchFilter} /> : <ConversationTabs />}
</Stack>
);
}
+
+const ConversationTabs = () => {
+ const { t } = useTranslation();
+ const invitations = [];
+
+ return (
+ <Tabs defaultValue={0}>
+ {invitations.length !== 0 && (
+ <TabsList>
+ <Tab>{t('conversations')}</Tab>
+ <Tab>{t('invitations')}</Tab>
+ </TabsList>
+ )}
+ <ConversationsTabPanel />
+ <InvitationsTabPanel />
+ </Tabs>
+ );
+};
+
+const ConversationsTabPanel = () => {
+ const conversationsSummariesQuery = useConversationsSummariesQuery();
+ const conversationsSummaries = conversationsSummariesQuery.data;
+
+ return (
+ <TabPanel value={0}>
+ <List>
+ {conversationsSummaries?.map((conversationSummary) => (
+ <ConversationListItem key={conversationSummary.id} conversationSummary={conversationSummary} />
+ ))}
+ </List>
+ </TabPanel>
+ );
+};
+
+const InvitationsTabPanel = () => {
+ const { t } = useTranslation();
+
+ return <TabPanel value={1}>{t('invitations')}</TabPanel>;
+};