132 lines
3.4 KiB
TypeScript
132 lines
3.4 KiB
TypeScript
import {
|
|
Avatar,
|
|
List,
|
|
ListItem,
|
|
ListItemAvatar,
|
|
ListItemButton,
|
|
ListItemSecondaryAction,
|
|
ListItemText,
|
|
ListSubheader,
|
|
Tooltip,
|
|
Typography,
|
|
} from '@mui/material';
|
|
import React, { useCallback } from 'react';
|
|
|
|
import Conversation from '@nirvana/core/models/conversation.model';
|
|
import { ConversationRow } from './ConversationList';
|
|
import { FiZap } from 'react-icons/fi';
|
|
import User from '@nirvana/core/models/user.model';
|
|
import useConversations from '../providers/ConversationProvider';
|
|
import useSearch from '../providers/SearchProvider';
|
|
import useTerminal from './Terminal';
|
|
|
|
export default function OmniSearchResults() {
|
|
const { handleStartConversation } = useConversations();
|
|
|
|
const { userResults: people, conversationResults: conversations, clearSearch } = useSearch();
|
|
|
|
const handleQuickDial = useCallback(
|
|
async (otherUser: User) => {
|
|
const succeededDialed = await handleStartConversation([otherUser]);
|
|
|
|
if (succeededDialed) {
|
|
clearSearch();
|
|
}
|
|
},
|
|
[handleStartConversation, clearSearch],
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<List
|
|
sx={{
|
|
pt: 2,
|
|
}}
|
|
subheader={
|
|
<ListSubheader
|
|
sx={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<Typography align={'center'} variant="subtitle2">
|
|
People
|
|
</Typography>
|
|
</ListSubheader>
|
|
}
|
|
>
|
|
<ListItem
|
|
sx={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
{people.length === 0 && (
|
|
<Typography align="center" variant="caption">
|
|
{`Can't find someone? Invite them!`}
|
|
</Typography>
|
|
)}
|
|
</ListItem>
|
|
|
|
{people.map((person) => (
|
|
<Tooltip key={`${person._id.toString()}-searchUsers`} title={'quick dial'}>
|
|
<ListItem>
|
|
<ListItemButton onClick={() => handleQuickDial(person)}>
|
|
<ListItemAvatar>
|
|
<Avatar alt={person.givenName} src={person.picture} />
|
|
</ListItemAvatar>
|
|
|
|
<ListItemText primary={person.name} secondary={person.email} />
|
|
|
|
<ListItemSecondaryAction sx={{ color: 'GrayText' }}>
|
|
<FiZap />
|
|
</ListItemSecondaryAction>
|
|
</ListItemButton>
|
|
</ListItem>
|
|
</Tooltip>
|
|
))}
|
|
</List>
|
|
|
|
<List
|
|
sx={{
|
|
pt: 2,
|
|
}}
|
|
subheader={
|
|
<ListSubheader
|
|
sx={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<Typography align={'center'} variant="subtitle2">
|
|
Conversations
|
|
</Typography>
|
|
</ListSubheader>
|
|
}
|
|
>
|
|
<ListItem
|
|
sx={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
{conversations.length === 0 && (
|
|
<Typography align="center" variant="caption">
|
|
{`Can't find a conversation? Just create one!`}
|
|
</Typography>
|
|
)}
|
|
</ListItem>
|
|
|
|
{conversations.map((conversation) => (
|
|
<Tooltip
|
|
key={`tooltip-${conversation._id.toString()}-searchConversations`}
|
|
title={'continue conversation'}
|
|
>
|
|
<ConversationRow conversation={conversation} onClick={clearSearch} />
|
|
</Tooltip>
|
|
))}
|
|
</List>
|
|
</>
|
|
);
|
|
}
|