diff --git a/src/components/Widget/HistoryWidget.tsx b/src/components/Widget/HistoryWidget.tsx index 8bd6f53..afe8cea 100644 --- a/src/components/Widget/HistoryWidget.tsx +++ b/src/components/Widget/HistoryWidget.tsx @@ -1,13 +1,9 @@ import { type HistoryWidget as HistoryWidgetType } from 'src/types/widget'; import TableElement from '../Element/Simple/TableElement'; import HistoryMessageElement from '../Element/Complex/HistoryMessageElement'; -import { - getActiveConvoID, - getSelectedElementID, -} from 'src/redux/slices/componentSlice'; +import { getListHistoryChannel } from 'src/redux/slices/componentSlice'; import { useAppSelector } from 'src/redux/hooks'; import { getMessages } from 'src/redux/slices/minimapSlice'; -import { useEffect, useState } from 'react'; type HistoryWidgetProps = { widget: HistoryWidgetType; @@ -16,19 +12,15 @@ type HistoryWidgetProps = { const HistoryWidget = ({ widget }: HistoryWidgetProps) => { const { id, x, y, w, h } = widget; - const convoID = useAppSelector(getActiveConvoID); + const { activeConversationId } = useAppSelector(getListHistoryChannel); const convoMessages = useAppSelector(getMessages).filter( - (message) => message.conversationId === convoID, + (message) => message.conversationId === activeConversationId, ); - const activeElementID = useAppSelector(getSelectedElementID); - useEffect(() => { - console.log('activeElementID: ', activeElementID); - }, [activeElementID]); - - const highlightIndex = convoMessages.findIndex( - (message) => message.id === activeElementID, - ); + // const activeElementID = useAppSelector(getSelectedElementID); + // const highlightIndex = convoMessages.findIndex( + // (message) => message.id === activeElementID, + // ); return (
{ return ( { const elementsInGaze = useAppSelector(getElementsInGaze); + const dispatch = useAppDispatch(); // just pick the first element in the gaze for now + // FIX: should be fixed when gaze calculates overlapping area and picks element with greater overlapping const elementInGazeId = elementsInGaze[0]?.id; - // useEffect(() => { - // console.log('elementsInGaze: ', elementsInGaze); - // }, [elementsInGaze]); + useEffect(() => { + widget.elements.forEach((element) => { + if (element.id === elementInGazeId) { + // @ts-ignore + if (!element.message) { + // FIX: all elements should have a message (at least the ones in the list) + // at the minimu, they should have a conversationId attached to them? + console.error('Element does not have a message', element); + return; + } + + dispatch( + updateListHistoryChannel({ + // @ts-ignore + activeConversationId: element.message.conversationId, + }), + ); + } + }); + }, [elementInGazeId, dispatch, widget.elements]); const className = 'absolute p-2 flex flex-col gap-6 items-center overflow-scroll overflow-x-hidden overflow-y-hidden'; @@ -31,23 +47,6 @@ const ListWidget = ({ widget }: ListWidgetProps) => { (a, b) => a.priority! - b.priority!, ); - const [selectedElement, setSelectedElement] = useState(0); - - const dispatch = useAppDispatch(); - - // useEffect(() => { - // dispatch( - // setActiveConvoID( - // sortedElementsByPriority[selectedElement].message?.conversationId ?? '', - // ), - // dispatch( - // setSelectedElementID( - // sortedElementsByPriority[selectedElement].message?.id, - // ), - // ), - // ); - // }, [selectedElement]); - return (
{ elementInGaze: ElementInGaze, elementInGazeIndex: number, ) { - console.log('element in gaze'); + // add a check here to see if the element even has expirationIntervalMs property + // because if it does not, it means it never expires if (timeSomeMsAgo.toISOString() >= elementInGaze.timeEnteredGaze) { //has been in gaze for at least 100 ms console.log( @@ -61,6 +62,8 @@ const monitor = ({ dispatch }: MonitorProps) => { ) { gazeAndKey.elemsInGaze.forEach( function (elementInGaze, elementInGazeIndex) { + // add a check here to see if the element even has expirationIntervalMs property + // because if it does not, it means it never expires dispatch( updateElementExpiration(elementInGaze.widgetId, elementInGaze.id), ); //update the time until expiration diff --git a/src/redux/slices/componentSlice.ts b/src/redux/slices/componentSlice.ts index 59432a5..0c75ed0 100644 --- a/src/redux/slices/componentSlice.ts +++ b/src/redux/slices/componentSlice.ts @@ -1,18 +1,15 @@ import { createSlice } from '@reduxjs/toolkit'; import type { PayloadAction } from '@reduxjs/toolkit'; -import { type WidgetChannel } from 'src/types/support-types'; +import type { WidgetChannel, ListHistoryChannel } from 'src/types/channel'; type InitialState = { - widgetChannels: { - [key in WidgetChannel]: any; - }; + widgetChannels: WidgetChannel; }; const initialState: InitialState = { widgetChannels: { 'list-history': { - activeConvoID : "", - selectedElementID : "", + activeConversationId: '', }, }, }; @@ -21,24 +18,19 @@ export const componentSlice = createSlice({ name: 'componentContext', initialState, reducers: { - // add state updating functions here) - setActiveConvoID : (state, action : PayloadAction) => { - state.widgetChannels['list-history'].activeConvoID = action.payload; - }, - - setSelectedElementID : (state, action : PayloadAction) => { - state.widgetChannels['list-history'].selectedElementID = action.payload; + updateListHistoryChannel: ( + state, + action: PayloadAction, + ) => { + state.widgetChannels['list-history'] = action.payload; }, }, selectors: { - // add selector functions here (to get state values from the store) - getActiveConvoID : (state) => state.widgetChannels['list-history'].activeConvoID, - getSelectedElementID : (state) => state.widgetChannels['list-history'].selectedElementID, + getListHistoryChannel: (state) => state.widgetChannels['list-history'], }, }); -export const { setActiveConvoID, setSelectedElementID } = - componentSlice.actions; +export const { updateListHistoryChannel } = componentSlice.actions; -export const { getActiveConvoID, getSelectedElementID } = componentSlice.selectors; +export const { getListHistoryChannel } = componentSlice.selectors; diff --git a/src/redux/slices/minimapSlice.ts b/src/redux/slices/minimapSlice.ts index 0a3e266..e19cb77 100644 --- a/src/redux/slices/minimapSlice.ts +++ b/src/redux/slices/minimapSlice.ts @@ -204,9 +204,9 @@ export const minimapSlice = createSlice({ if (element.id === elementId) { // if element does not have an expiration interval, log an error if (!element.expirationIntervalMs) { - console.error( - `Element with id ${elementId} does not have an expiration interval`, - ); + // console.error( + // `Element with id ${elementId} does not have an expiration interval`, + // ); return; } diff --git a/src/types/channel.ts b/src/types/channel.ts new file mode 100644 index 0000000..f2e506a --- /dev/null +++ b/src/types/channel.ts @@ -0,0 +1,7 @@ +export type ListHistoryChannel = { + activeConversationId: string; +}; + +export type WidgetChannel = { + 'list-history': ListHistoryChannel; +}; diff --git a/src/types/support-types.ts b/src/types/support-types.ts index 2628be0..4d1dba6 100644 --- a/src/types/support-types.ts +++ b/src/types/support-types.ts @@ -45,5 +45,3 @@ export type WidgetCluster = { sectionIds?: LinkedSectionWidget[]; actions?: string[]; }; - -export type WidgetChannel = 'list-history';