replace channelSlice with communicationSlice

src/components/Widget/HistoryWidget.tsx

@@ -1,10 +1,9 @@
-import { type HistoryWidget as HistoryWidgetType } from 'src/types/widget';
-import TableElement from '../Element/Simple/TableElement';
-import HistoryMessageElement from '../Element/Complex/HistoryMessageElement';
-import { getChannel } from 'src/redux/slices/channelSlice';
 import { useAppSelector } from 'src/redux/hooks';
+import { type HistoryWidget as HistoryWidgetType } from 'src/types/widget';
+import TableElement from 'src/components/Element/Simple/TableElement';
+import HistoryMessageElement from 'src/components/Element/Complex/HistoryMessageElement';
 import { getConversationMessages } from 'src/redux/slices/minimapSlice';
-import type { ListHistoryChannel } from 'src/types/channel';
+import { getCommunication } from 'src/redux/slices/communicationSlice';
 
 type HistoryWidgetProps = {
   widget: HistoryWidgetType;
@@ -12,12 +11,7 @@ type HistoryWidgetProps = {
 
 const HistoryWidget = ({ widget }: HistoryWidgetProps) => {
   const { id, x, y, w, h } = widget;
-
-  const listHistoryChannel = useAppSelector((state) =>
-    getChannel(state, 'list-history'),
-  );
-  const { data: { activeConversationId = '' } = {} } =
-    (listHistoryChannel as ListHistoryChannel) || {};
+  const { activeConversationId } = useAppSelector(getCommunication);
 
   const convoMessages = useAppSelector((state) =>
     getConversationMessages(state, activeConversationId),

src/components/Widget/ListWidget.tsx

@@ -1,9 +1,11 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import Element from 'src/components/Element/Element';
 import { useAppDispatch, useAppSelector } from 'src/redux/hooks';
-import { getChannel, updateChannel } from 'src/redux/slices/channelSlice';
+import {
+  updateCommunication,
+  getCommunication,
+} from 'src/redux/slices/communicationSlice';
 import { getElementsInGaze, getGazesAndKeys } from 'src/redux/slices/gazeSlice';
-import type { ListHistoryChannel } from 'src/types/channel';
 import type { Widget } from 'src/types/widget';
 
 type ListWidgetProps = {
@@ -16,11 +18,7 @@ const GAP_BETWEEN_ELEMENTS = 6;
 const ListWidget = ({ widget }: ListWidgetProps) => {
   const elementsInGaze = useAppSelector(getElementsInGaze);
   const gazesAndKeys = useAppSelector(getGazesAndKeys);
-  const listHistoryChannel = useAppSelector((state) =>
-    getChannel(state, 'list-history'),
-  );
-  const { data: { activeElementId = '' } = {} } =
-    (listHistoryChannel as ListHistoryChannel) || {};
+  const { activeElementId } = useAppSelector(getCommunication);
 
   // const listCapacity = Math.floor(
   //   widget.h / (LIST_ELEMENT_HEIGHT + GAP_BETWEEN_ELEMENTS) - 1,
@@ -85,14 +83,11 @@ const ListWidget = ({ widget }: ListWidgetProps) => {
         }
 
         dispatch(
-          updateChannel({
-            id: 'list-history',
-            data: {
-              // @ts-ignore
-              activeConversationId: element.message.conversationId,
-              activeElementId: element.id,
-            },
-          } satisfies ListHistoryChannel),
+          updateCommunication({
+            // @ts-ignore
+            activeConversationId: element.message.conversationId,
+            activeElementId: element.id,
+          }),
         );
       }
     });

src/redux/slices/channelSlice.ts

@@ -1,30 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-import type { PayloadAction } from '@reduxjs/toolkit';
-import type { ChannelDictionary, Channel, ChannelId } from 'src/types/channel';
-
-type InitialState = {
-  widgetChannels: ChannelDictionary;
-};
-
-const initialState: InitialState = {
-  widgetChannels: {},
-};
-
-export const channelSlice = createSlice({
-  name: 'channel',
-  initialState,
-  reducers: {
-    updateChannel: (state, action: PayloadAction<Channel>) => {
-      state.widgetChannels[action.payload.id] = action.payload;
-    },
-  },
-
-  selectors: {
-    getChannel: (state, channelId: ChannelId) =>
-      state.widgetChannels[channelId],
-  },
-});
-
-export const { updateChannel } = channelSlice.actions;
-
-export const { getChannel } = channelSlice.selectors;

src/redux/slices/communicationSlice.ts

@@ -0,0 +1,31 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+
+export type CommunicationState = {
+  activeConversationId: string;
+  activeElementId: string;
+};
+
+const initialState: CommunicationState = {
+  activeConversationId: '',
+  activeElementId: '',
+};
+
+export const communicationSlice = createSlice({
+  name: 'communication',
+  initialState,
+  reducers: {
+    updateCommunication: (state, action: PayloadAction<CommunicationState>) => {
+      state.activeConversationId = action.payload.activeConversationId;
+      state.activeElementId = action.payload.activeElementId;
+    },
+  },
+  selectors: {
+    getCommunication: (state) => state,
+    getActiveConversationId: (state) => state.activeConversationId,
+    getActiveElementId: (state) => state.activeElementId,
+  },
+});
+
+export const { updateCommunication } = communicationSlice.actions;
+export const { getCommunication, getActiveConversationId, getActiveElementId } =
+  communicationSlice.selectors;

src/redux/store.ts

@@ -7,12 +7,12 @@ import {
 } from 'redux-state-sync';
 import { minimapSlice } from './slices/minimapSlice';
 import { gazeSlice } from './slices/gazeSlice';
-import { channelSlice } from './slices/channelSlice';
+import { communicationSlice } from './slices/communicationSlice';
 
 // pass in slices to combine into combineSlices()
 // `combineSlices` automatically combines the reducers using
 // their `reducerPath`s, therefore we no longer need to call `combineReducers`.
-const rootReducer = combineSlices(minimapSlice, gazeSlice, channelSlice);
+const rootReducer = combineSlices(minimapSlice, gazeSlice, communicationSlice);
 
 // Infer the `RootState` type from the root reducer
 type RootState = ReturnType<typeof rootReducer>;

src/types/channel.ts

@@ -1,27 +0,0 @@
-// ~~~~~ Channel Ids ~~~~~
-type ListHistoryChannelId = 'list-history';
-type ChannelId = ListHistoryChannelId; // add more as needed
-
-// ~~~~~ Channel Types ~~~~~
-type ListHistoryChannel = {
-  id: ListHistoryChannelId;
-  data: {
-    activeConversationId: string;
-    activeElementId: string;
-  };
-};
-
-type Channel = ListHistoryChannel; // add more as needed
-
-// ~~~~~ Dictionary ~~~~~
-type ChannelDictionary = {
-  [key in ChannelId]?: Channel;
-};
-
-export type {
-  ListHistoryChannel,
-  ListHistoryChannelId,
-  ChannelDictionary,
-  Channel,
-  ChannelId,
-};