highlight current element

src/components/Widget/HistoryWidget.tsx

@@ -1,9 +1,13 @@
 import { type HistoryWidget as HistoryWidgetType } from 'src/types/widget';
 import TableElement from '../Element/Simple/TableElement';
 import HistoryMessageElement from '../Element/Complex/HistoryMessageElement';
-import { getActiveConvoID } from 'src/redux/slices/componentSlice';
+import {
+  getActiveConvoID,
+  getSelectedElementID,
+} from 'src/redux/slices/componentSlice';
 import { useAppSelector } from 'src/redux/hooks';
 import { getMessages } from 'src/redux/slices/minimapSlice';
+import { useState } from 'react';
 
 type HistoryWidgetProps = {
   widget: HistoryWidgetType;
@@ -16,6 +20,9 @@ const HistoryWidget = ({ widget }: HistoryWidgetProps) => {
   const convoMessages = useAppSelector(getMessages).filter(
     (message) => message.conversationId === convoID,
   );
+  const activeElementID = useAppSelector(getSelectedElementID);
+
+  const highlightIndex = convoMessages.findIndex((message) => message.id === activeElementID)
 
   return (
     <div
@@ -30,10 +37,10 @@ const HistoryWidget = ({ widget }: HistoryWidgetProps) => {
               return (
                 <HistoryMessageElement
                   index={convoMessages.length - index}
-                  isActive={true}
+                  isActive={highlightIndex === convoMessages.length - 1 - index}
                   title={`ACA-${message.data.detectedByAca}`}
                   header="Request to attack"
-                  desc = {`Approval for ${message.data.attackWeapon.type} attack`}
+                  desc={`Approval for ${message.data.attackWeapon.type} attack`}
                   tableContent={
                     <TableElement
                       element={{
@@ -70,7 +77,6 @@ const HistoryWidget = ({ widget }: HistoryWidgetProps) => {
               return;
           }
         })}
-
       </div>
     </div>
   );

src/components/Widget/ListWidget.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import Element from 'src/components/Element/Element';
 import { useAppDispatch } from 'src/redux/hooks';
-import { setActiveConvoID } from 'src/redux/slices/componentSlice';
+import { setActiveConvoID, setSelectedElementID } from 'src/redux/slices/componentSlice';
 import type { Widget } from 'src/types/widget';
 
 type ListWidgetProps = {
@@ -26,6 +26,9 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
       setActiveConvoID(
         sortedElementsByPriority[selectedElement].message?.conversationId ?? '',
       ),
+      dispatch(
+        setSelectedElementID(sortedElementsByPriority[selectedElement].message?.id)
+      )
     );
   }, [selectedElement]);
 

src/redux/slices/componentSlice.ts

@@ -3,10 +3,12 @@ import type { PayloadAction } from '@reduxjs/toolkit';
 
 type InitialState = {
   activeConvoID : string;
+  selectedElementID : string;
 };
 
 const initialState: InitialState = {
     activeConvoID : "",
+    selectedElementID : "",
 };
 
 export const componentSlice = createSlice({
@@ -16,17 +18,21 @@ export const componentSlice = createSlice({
     // add state updating functions here)
     setActiveConvoID : (state, action : PayloadAction<string>) => {
         state.activeConvoID = action.payload;
-        console.log(action.payload);
-    }
+    },
+
+    setSelectedElementID : (state, action : PayloadAction<string>) => {
+        state.selectedElementID = action.payload;
+    },
   },
 
   selectors: {
     // add selector functions here (to get state values from the store)
     getActiveConvoID : (state) => state.activeConvoID,
+    getSelectedElementID : (state) => state.selectedElementID,
   },
 });
 
-export const { setActiveConvoID } =
+export const { setActiveConvoID, setSelectedElementID } =
   componentSlice.actions;
 
-export const { getActiveConvoID } = componentSlice.selectors;
+export const { getActiveConvoID, getSelectedElementID } = componentSlice.selectors;