fix highlighting elements in list on gaze
This commit is contained in:
parent
eef3e990d3
commit
18da11c3ea
@ -7,7 +7,7 @@ import {
|
||||
} from 'src/redux/slices/componentSlice';
|
||||
import { useAppSelector } from 'src/redux/hooks';
|
||||
import { getMessages } from 'src/redux/slices/minimapSlice';
|
||||
import { useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
type HistoryWidgetProps = {
|
||||
widget: HistoryWidgetType;
|
||||
@ -22,7 +22,13 @@ const HistoryWidget = ({ widget }: HistoryWidgetProps) => {
|
||||
);
|
||||
const activeElementID = useAppSelector(getSelectedElementID);
|
||||
|
||||
const highlightIndex = convoMessages.findIndex((message) => message.id === activeElementID)
|
||||
useEffect(() => {
|
||||
console.log('activeElementID: ', activeElementID);
|
||||
}, [activeElementID]);
|
||||
|
||||
const highlightIndex = convoMessages.findIndex(
|
||||
(message) => message.id === activeElementID,
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
|
@ -1,7 +1,12 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import Element from 'src/components/Element/Element';
|
||||
import { useAppDispatch } from 'src/redux/hooks';
|
||||
import { setActiveConvoID, setSelectedElementID } from 'src/redux/slices/componentSlice';
|
||||
import useGaze from 'src/hooks/useGaze';
|
||||
import { useAppDispatch, useAppSelector } from 'src/redux/hooks';
|
||||
import {
|
||||
setActiveConvoID,
|
||||
setSelectedElementID,
|
||||
} from 'src/redux/slices/componentSlice';
|
||||
import { getElementsInGaze } from 'src/redux/slices/gazeSlice';
|
||||
import type { Widget } from 'src/types/widget';
|
||||
|
||||
type ListWidgetProps = {
|
||||
@ -9,6 +14,15 @@ type ListWidgetProps = {
|
||||
};
|
||||
|
||||
const ListWidget = ({ widget }: ListWidgetProps) => {
|
||||
const elementsInGaze = useAppSelector(getElementsInGaze);
|
||||
|
||||
// just pick the first element in the gaze for now
|
||||
const elementInGazeId = elementsInGaze[0]?.id;
|
||||
|
||||
// useEffect(() => {
|
||||
// console.log('elementsInGaze: ', elementsInGaze);
|
||||
// }, [elementsInGaze]);
|
||||
|
||||
const className =
|
||||
'absolute p-2 flex flex-col gap-6 items-center overflow-scroll overflow-x-hidden overflow-y-hidden';
|
||||
|
||||
@ -21,16 +35,18 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(
|
||||
setActiveConvoID(
|
||||
sortedElementsByPriority[selectedElement].message?.conversationId ?? '',
|
||||
),
|
||||
dispatch(
|
||||
setSelectedElementID(sortedElementsByPriority[selectedElement].message?.id)
|
||||
)
|
||||
);
|
||||
}, [selectedElement]);
|
||||
// useEffect(() => {
|
||||
// dispatch(
|
||||
// setActiveConvoID(
|
||||
// sortedElementsByPriority[selectedElement].message?.conversationId ?? '',
|
||||
// ),
|
||||
// dispatch(
|
||||
// setSelectedElementID(
|
||||
// sortedElementsByPriority[selectedElement].message?.id,
|
||||
// ),
|
||||
// ),
|
||||
// );
|
||||
// }, [selectedElement]);
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -44,11 +60,12 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
|
||||
left: widget.x,
|
||||
}}
|
||||
>
|
||||
{sortedElementsByPriority.map((element, index) => {
|
||||
{sortedElementsByPriority.map((element) => {
|
||||
const style =
|
||||
selectedElement === index
|
||||
element.id === elementInGazeId
|
||||
? 'bg-[#444449] text-[28px] font-medium'
|
||||
: 'bg-[#323235] text-[24px]';
|
||||
|
||||
return (
|
||||
// ListWidget enforces a certain layout and style for its Elements
|
||||
<div
|
||||
@ -56,7 +73,6 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
|
||||
key={element.id}
|
||||
style={{ height: 80 }}
|
||||
className={`w-full text-white flex items-center justify-center rounded-xl p-3 ${style}`}
|
||||
onMouseEnter={() => setSelectedElement(index)} // temporary test
|
||||
>
|
||||
<Element element={element} styleClass="w-full h-full">
|
||||
{/* Nested children here if wanted.. */}
|
||||
|
Loading…
Reference in New Issue
Block a user