From fead9255c9dc444dcb047849b4c32896eb50a7c9 Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Sat, 5 Feb 2022 14:19:39 -0800
Subject: [PATCH] starting keyboard shortcuts and all

---
 .../Conversations/PriorityConvoRow.tsx        | 40 +++++++++++++++----
 .../KeyboardShortcutHandler.tsx               |  8 ++--
 .../components/MainTabsOrPages/Priority.tsx   | 29 +++++++++++++-
 .../components/MainTabsOrPages/Sidebar.tsx    |  4 +-
 4 files changed, 65 insertions(+), 16 deletions(-)

diff --git a/packages/web/components/Conversations/PriorityConvoRow.tsx b/packages/web/components/Conversations/PriorityConvoRow.tsx
index 4bd8608..d6dd56d 100644
--- a/packages/web/components/Conversations/PriorityConvoRow.tsx
+++ b/packages/web/components/Conversations/PriorityConvoRow.tsx
@@ -1,5 +1,5 @@
 import { Avatar, Tooltip } from "antd";
-import { useRecoilValue } from "recoil";
+import { useRecoilState, useRecoilValue } from "recoil";
 import {
   checkIncomingMessageSelector,
   selectedPriorityConvoAtom,
@@ -7,14 +7,23 @@ import {
 import Conversation from "../../../common/models/conversation";
 import { MasterAvatarGroupWithUserFetch } from "../UserDetails/MasterAvatarGroup";
 import moment from "moment";
-import { FaMicrophoneAlt, FaPlay } from "react-icons/fa";
+import {
+  FaCaretRight,
+  FaCircle,
+  FaMicrophoneAlt,
+  FaPlay,
+} from "react-icons/fa";
+import { useCallback } from "react";
+import { FaAngleRight } from "react-icons/fa";
 
 export default function PriorityConvoRow(props: {
   conversation: Conversation;
   itemIndex: number;
 }) {
   // figure out if this is a selectedConvo
-  const selectedConvo = useRecoilValue(selectedPriorityConvoAtom);
+  const [selectedConvo, setSelectedConvo] = useRecoilState(
+    selectedPriorityConvoAtom
+  );
 
   const isSelected = selectedConvo == props.conversation.id ? true : false;
 
@@ -26,10 +35,15 @@ export default function PriorityConvoRow(props: {
   // todo: implement method in conversation
   // const isOneonOne =
 
+  const handleSelectConvo = useCallback(() => {
+    setSelectedConvo(props.conversation.id);
+  }, [props.conversation]);
+
   return (
     <span
+      onClick={handleSelectConvo}
       className={`group flex flex-row items-center rounded-lg p-2 w-full transition-all hover:cursor-pointer ${
-        isSelected && "bg-slate-50 shadow-lg scale-125"
+        isSelected && "bg-slate-50 shadow-lg scale-125 w-[25rem]"
       }`}
     >
       <MasterAvatarGroupWithUserFetch
@@ -48,8 +62,13 @@ justify-center rounded-lg text-slate-400 font-bold hover:cursor-pointer text-xs"
           </span>
         </span>
 
-        <span className="text-slate-300 text-xs">
-          {moment(props.conversation.lastActivityDate.toDate()).fromNow()}
+        <span className="flex flex-row">
+          {isNewIncoming && (
+            <FaCircle className="ml-2 text-orange-500 mr-2 animate-pulse text-[0.75rem]" />
+          )}
+          <span className="text-slate-300 text-xs">
+            {moment(props.conversation.lastActivityDate.toDate()).fromNow()}
+          </span>
         </span>
       </span>
 
@@ -57,7 +76,7 @@ justify-center rounded-lg text-slate-400 font-bold hover:cursor-pointer text-xs"
         <>
           <Tooltip title={"Record by pressing and holding R on keyboard."}>
             <span className="ml-auto p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaMicrophoneAlt className="ml-auto text-md text-orange-800" />
+              <FaMicrophoneAlt className="ml-auto text-lg text-orange-800" />
             </span>
           </Tooltip>
 
@@ -65,7 +84,12 @@ justify-center rounded-lg text-slate-400 font-bold hover:cursor-pointer text-xs"
             title={"Play last convo chunk by pressing SPACE on keyboard."}
           >
             <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
-              <FaPlay className="ml-auto text-md text-emerald-800" />
+              <FaPlay className="ml-auto text-lg text-emerald-800" />
+            </span>
+          </Tooltip>
+          <Tooltip title={"View Details"}>
+            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
+              <FaAngleRight className="ml-auto text-md text-slate-400" />
             </span>
           </Tooltip>
         </>
diff --git a/packages/web/components/MainTabsOrPages/KeyboardShortcutHandler.tsx b/packages/web/components/MainTabsOrPages/KeyboardShortcutHandler.tsx
index eda46ed..2154ffc 100644
--- a/packages/web/components/MainTabsOrPages/KeyboardShortcutHandler.tsx
+++ b/packages/web/components/MainTabsOrPages/KeyboardShortcutHandler.tsx
@@ -4,13 +4,13 @@ import { GlobalHotKeys, KeyMap, configure } from "react-hotkeys";
 import { selectedPriorityConvoAtom } from "../../recoil/main";
 import { useSetRecoilState } from "recoil";
 
-configure({
-  ignoreTags: [],
-});
-
 export default function KeyboardShortcutHandler() {
   const router = useRouter();
 
+  configure({
+    ignoreTags: [],
+  });
+
   const setSelectedPriorityConvo = useSetRecoilState(selectedPriorityConvoAtom);
 
   const handleEscape = () => {
diff --git a/packages/web/components/MainTabsOrPages/Priority.tsx b/packages/web/components/MainTabsOrPages/Priority.tsx
index c752d59..b67b26e 100644
--- a/packages/web/components/MainTabsOrPages/Priority.tsx
+++ b/packages/web/components/MainTabsOrPages/Priority.tsx
@@ -13,7 +13,7 @@ import {
   selectedPriorityConvoAtom,
 } from "../../recoil/main";
 import PriorityConvoRow from "../Conversations/PriorityConvoRow";
-import { GlobalHotKeys, HotKeys } from "react-hotkeys";
+import { configure, GlobalHotKeys, HotKeys, KeyMap } from "react-hotkeys";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 
@@ -62,12 +62,37 @@ export default function Priority() {
     }
   };
 
-  const keyMap = {
+  configure({
+    ignoreTags: ["input", "select", "textarea"],
+  });
+
+  const startRecording = () => {
+    toast.loading("speaking to Patels");
+  };
+
+  const stopRecording = () => {
+    console.log("stop recording");
+    toast.dismiss();
+  };
+
+  const keyMap: KeyMap = {
     SELECT_PRIORITY_CONVO: ["1", "2", "3", "4", "5", "6", "7", "8"],
+    START_RECORDING: {
+      name: "START RECORDING",
+      sequence: "r",
+      action: "keydown",
+    },
+    STOP_RECORDING: {
+      name: "STOP RECORDING",
+      sequence: "r",
+      action: "keyup",
+    },
   };
 
   const handlers = {
     SELECT_PRIORITY_CONVO: selectingPriorityConvoHandler,
+    START_RECORDING: startRecording,
+    STOP_RECORDING: stopRecording,
   };
 
   return (
diff --git a/packages/web/components/MainTabsOrPages/Sidebar.tsx b/packages/web/components/MainTabsOrPages/Sidebar.tsx
index 4226aff..41e1382 100644
--- a/packages/web/components/MainTabsOrPages/Sidebar.tsx
+++ b/packages/web/components/MainTabsOrPages/Sidebar.tsx
@@ -165,10 +165,10 @@ function Sidebar() {
           />
 
           <span className="text-md text-slate-400 font-semibold group-hover:text-slate-600">
-            Drawer
+            Drawer{" "}
           </span>
 
-          <span className="text-emerald-700 bg-emerald-200 bg-opacity-20 p-1 rounded-md text-xs font-semibold flex items-center flex-row space-x-1">
+          <span className="ml-2 text-emerald-700 bg-emerald-200 bg-opacity-20 p-1 rounded-md text-xs font-semibold flex items-center flex-row space-x-1">
             <HiSpeakerphone />
             <span>new</span>
           </span>