diff --git a/packages/desktop/src/components/ConversationList.tsx b/packages/desktop/src/components/ConversationList.tsx index f23b295..75193ae 100644 --- a/packages/desktop/src/components/ConversationList.tsx +++ b/packages/desktop/src/components/ConversationList.tsx @@ -15,13 +15,14 @@ import { Typography, } from '@mui/material'; import { FiActivity, FiCircle, FiSun } from 'react-icons/fi'; -import React, { useCallback } from 'react'; +import React, { useCallback, useMemo } from 'react'; +import { useKeyPressEvent, useRendersCount } from 'react-use'; import Conversation from '@nirvana/core/src/models/conversation.model'; import ConversationLabel from '../subcomponents/ConversationLabel'; +import KeyboardShortcutLabel from './KeyboardShortcutLabel'; import { SUPPORT_DISPLAY_NAME } from '../util/support'; import useAuth from '../providers/AuthProvider'; -import { useRendersCount } from 'react-use'; import useTerminal from './Terminal'; // sort conversations based on the different data sources: type, conversations, audio clips, etc. @@ -69,10 +70,11 @@ export function ConversationList({ lookingForSomeone = false }: { lookingForSome > {lookingForSomeone && } - {Object.values(conversationMap).map((currentConversation) => ( + {Object.values(conversationMap).map((currentConversation, index) => ( ))} @@ -94,18 +96,37 @@ export function ConversationList({ lookingForSomeone = false }: { lookingForSome ); } -export function ConversationRow({ conversation }: { conversation: Conversation }) { +/** + * + * @param index is used for keyboard shortcut if this convo row is in a list + * @returns + */ +export function ConversationRow({ + conversation, + index, +}: { + conversation: Conversation; + index?: number; +}) { const { user } = useAuth(); const { getUser, selectedConversation, selectConversation } = useTerminal(); const rendersCount = useRendersCount(); console.warn('RENDER COUNT | CONVERSATION LIST ROW | ', rendersCount); + const keyboardShortcut = useMemo(() => index + 1, [index]); + + const handleSelectConversation = useCallback( + () => selectConversation(conversation.id), + [conversation.id, selectConversation], + ); + useKeyPressEvent(`${keyboardShortcut.toString()}`, handleSelectConversation); + return ( selectConversation(conversation.id)} + onClick={handleSelectConversation} > {conversation.membersInRoom?.length > 0 ? ( @@ -117,13 +138,14 @@ export function ConversationRow({ conversation }: { conversation: Conversation } )} - + + - + diff --git a/packages/desktop/src/components/KeyboardShortcutLabel.tsx b/packages/desktop/src/components/KeyboardShortcutLabel.tsx index 72d22ae..03979a7 100644 --- a/packages/desktop/src/components/KeyboardShortcutLabel.tsx +++ b/packages/desktop/src/components/KeyboardShortcutLabel.tsx @@ -1,5 +1,6 @@ -import React from 'react'; import { Box, Paper, Typography } from '@mui/material'; + +import React from 'react'; import { blueGrey } from '@mui/material/colors'; export default function KeyboardShortcutLabel({ label }: { label: string }) { @@ -10,7 +11,6 @@ export default function KeyboardShortcutLabel({ label }: { label: string }) { sx={{ px: 1, py: 0.25, - border: `1px solid`, bgcolor: blueGrey[50], color: blueGrey[300], }}