From 29af3cf5dec9165739a67e617f9c76c87ecc3b08 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Mon, 20 Jun 2022 11:42:03 -0500
Subject: [PATCH] handle escape and introducing shortcuts slowly

---
 .../desktop/src/providers/ConversationProvider.tsx   | 12 +++++++++++-
 packages/desktop/src/tree/ConversationList.tsx       |  2 +-
 packages/desktop/src/tree/FooterControls.tsx         |  3 ++-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/desktop/src/providers/ConversationProvider.tsx b/packages/desktop/src/providers/ConversationProvider.tsx
index 8f29903..7a739e7 100644
--- a/packages/desktop/src/providers/ConversationProvider.tsx
+++ b/packages/desktop/src/providers/ConversationProvider.tsx
@@ -23,9 +23,10 @@ import {
   getConversationById,
   getConversations,
 } from '../api/NirvanaApi';
-import { useAsyncFn, useEffectOnce, useUnmount } from 'react-use';
+import { useAsyncFn, useEffectOnce, useKeyPressEvent, useUnmount } from 'react-use';
 
 import CreateConversationRequest from '@nirvana/core/requests/CreateConversationRequest.request';
+import { KeyboardShortcuts } from '../util/keyboard';
 import Peer from 'simple-peer';
 import { Typography } from '@mui/material';
 import User from '@nirvana/core/models/user.model';
@@ -72,6 +73,8 @@ interface IConversationContext {
   selectConversation?: (conversationId: string, temporaryOverrideSort?: boolean) => Promise<void>;
 
   handleStartConversation?: (otherUsers: User[], conversationName?: string) => Promise<boolean>;
+
+  handleEscape?: () => void;
 }
 
 const ConversationContext = React.createContext<IConversationContext>({
@@ -382,6 +385,12 @@ export function ConversationProvider({ children }: { children: React.ReactNode }
     return [priorityConversations, inboxConversations];
   }, [conversationMap, user]);
 
+  const handleEscape = useCallback(() => {
+    selectConversation(undefined);
+  }, [selectConversation]);
+
+  useKeyPressEvent(KeyboardShortcuts.escape.shortcutKey, handleEscape);
+
   if (fetchState.error) {
     return (
       <Typography variant={'h6'} color={'danger'}>
@@ -399,6 +408,7 @@ export function ConversationProvider({ children }: { children: React.ReactNode }
         selectConversation,
         priorityConversations: masterConversations[0],
         inboxConversations: masterConversations[1],
+        handleEscape,
       }}
     >
       {children}
diff --git a/packages/desktop/src/tree/ConversationList.tsx b/packages/desktop/src/tree/ConversationList.tsx
index 411347e..0ca8d0b 100644
--- a/packages/desktop/src/tree/ConversationList.tsx
+++ b/packages/desktop/src/tree/ConversationList.tsx
@@ -79,7 +79,7 @@ export function ConversationList() {
       >
         <Stack direction={'column'} alignItems="center">
           <Typography align="center" variant="caption">
-            Have your favorites here for quick dialing
+            Add your favorites here for quick dialing
           </Typography>
         </Stack>
       </List>
diff --git a/packages/desktop/src/tree/FooterControls.tsx b/packages/desktop/src/tree/FooterControls.tsx
index 9efb9d1..0fe17ef 100644
--- a/packages/desktop/src/tree/FooterControls.tsx
+++ b/packages/desktop/src/tree/FooterControls.tsx
@@ -171,7 +171,7 @@ function OverlayConversation({
   masterConversation: MasterConversation;
   isSelected?: boolean;
 }) {
-  const { selectConversation } = useConversations();
+  const { selectConversation, handleEscape } = useConversations();
 
   const handleSelectConversation = useCallback(() => {
     selectConversation(masterConversation._id.toString(), false);
@@ -271,6 +271,7 @@ function OverlayConversation({
               color: 'GrayText',
             }}
             size="small"
+            onClick={handleEscape}
           >
             <FiX />
           </IconButton>