list element selection using KeyQ

src/components/Widget/HistoryWidget.tsx

@@ -5,7 +5,10 @@ import {
   getConversation,
   updateNumUnreadMessages,
 } from 'src/redux/slices/conversationSlice';
-import { getCommunication } from 'src/redux/slices/communicationSlice';
+import {
+  getActiveConversationId,
+  getCommunication,
+} from 'src/redux/slices/communicationSlice';
 import MessageNumber from 'src/ui/history/MessageNumber';
 import { useEffect } from 'react';
 
@@ -15,7 +18,7 @@ type HistoryWidgetProps = {
 
 const HistoryWidget = ({ widget }: HistoryWidgetProps) => {
   const { id, x, y, w, h, elements } = widget;
-  const { activeConversationId } = useAppSelector(getCommunication);
+  const activeConversationId = useAppSelector(getActiveConversationId);
 
   const dispatch = useAppDispatch();
   const conversation = useAppSelector((state) =>
@@ -24,6 +27,11 @@ const HistoryWidget = ({ widget }: HistoryWidgetProps) => {
   const messages = conversation?.messages ? [...conversation.messages] : [];
   const numMessages = messages.length || 0;
 
+  // useEffect(() => {
+  //   console.log(activeConversationId);
+  //   console.log(conversation);
+  // }, [activeConversationId, conversation]);
+
   // const activeElementID = useAppSelector(getSelectedElementID);
   // const highlightIndex = convoMessages.findIndex(
   //   (message) => message.id === activeElementID,

src/components/Widget/ListWidget.tsx

@@ -25,10 +25,11 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
 
   const elementsInGaze = useAppSelector(getElementsInGaze);
   const gazesAndKeys = useAppSelector(getGazesAndKeys);
-  const { activeElementId } = useAppSelector(getCommunication);
+  const { activeElementId, activeConversationId } =
+    useAppSelector(getCommunication);
 
   const [convoElements, setConvoElements] = useState<Element[]>([]);
-  const [selectedElementId, setSelectedElementId] = useState<string>('');
+  const [selectedElement, setSelectedElement] = useState<Element>();
 
   // const listCapacity = Math.floor(
   //   widget.h / (LIST_ELEMENT_HEIGHT + GAP_BETWEEN_ELEMENTS) - 1,
@@ -77,35 +78,53 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
 
   // change selected element in list of arrow up or arrow down
   useEffect(() => {
-    if (
-      gazesAndKeys.some((gazeAndKey) => gazeAndKey.keyPress === 'ArrowDown')
-    ) {
+    if (gazesAndKeys.some((gazeAndKey) => gazeAndKey.keyPress === 'KeyS')) {
       const currSelectedElemIndex =
         convoElements.findIndex(
-          (element) => element.id === selectedElementId,
+          (element) => element.id === selectedElement?.id,
         ) || 0;
 
       if (currSelectedElemIndex < convoElements.length - 1) {
-        setSelectedElementId(convoElements[currSelectedElemIndex + 1].id);
+        setSelectedElement(convoElements[currSelectedElemIndex + 1]);
 
         // scroll down here if needed?
       }
     } else if (
-      gazesAndKeys.some((gazeAndKey) => gazeAndKey.keyPress === 'ArrowUp')
+      gazesAndKeys.some((gazeAndKey) => gazeAndKey.keyPress === 'KeyW')
     ) {
       const currSelectedElemIndex =
         convoElements.findIndex(
-          (element) => element.id === selectedElementId,
+          (element) => element.id === selectedElement?.id,
         ) || 0;
 
       if (currSelectedElemIndex > 0) {
-        setSelectedElementId(convoElements[currSelectedElemIndex - 1].id);
+        setSelectedElement(convoElements[currSelectedElemIndex - 1]);
 
         // scroll up here if needed?
       }
     }
   }, [gazesAndKeys, convoElements]);
 
+  useEffect(() => {
+    if (gazesAndKeys.some((gazeAndKey) => gazeAndKey.keyPress === 'KeyQ')) {
+      if (
+        selectedElement &&
+        // @ts-ignore
+        selectedElement.conversationId &&
+        // @ts-ignore
+        selectedElement.conversation !== activeConversationId
+      ) {
+        dispatch(
+          updateCommunication({
+            // @ts-ignore
+            activeConversationId: selectedElement.conversationId,
+            activeElementId: selectedElement.id,
+          }),
+        );
+      }
+    }
+  }, [gazesAndKeys, selectedElement, activeConversationId, dispatch]);
+
   // scrolling the list
   // useEffect(() => {
   //   // don't scroll if the list is not in gaze
@@ -221,7 +240,7 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
 
         // style for active element (element due to which the history widget is open)
         const activeElementStyle =
-          element.id === selectedElementId
+          element.id === selectedElement?.id
             ? 'bg-[#444449] text-[28px] font-medium border-4 border-white'
             : '';