hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor to integrate messageStore and unreadCounts

Browse Source
This commit is contained in:
Dan Ditomaso
2025-04-04 22:22:35 -04:00
committed by GitHub
parent c8c89fdc95
commit 4755c0eeb9
8 changed files with 118 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Dialog/RefreshKeysDialog/useRefreshKeysDialog.test.ts
+2 -2
View File
@@ -3,8 +3,8 @@ import { useRefreshKeysDialog } from "./useRefreshKeysDialog.ts";
import { beforeEach, describe, expect, it, Mock, vi } from "vitest";
import { useDevice } from "@core/stores/deviceStore.ts";
vi.mock("@core/stores/appStore.ts", () => ({
useAppStore: vi.fn(() => ({ activeChat: "chat-123" })),
vi.mock("@core/stores/messageStore.ts", () => ({
useMessageStore: vi.fn(() => ({ activeChat: "chat-123" })),
}));
vi.mock("@core/stores/deviceStore.ts", () => ({
src/components/Dialog/RefreshKeysDialog/useRefreshKeysDialog.ts
+2 -2
View File
@@ -1,10 +1,10 @@
import { useCallback } from "react";
import { useAppStore } from "@core/stores/appStore.ts";
import { useDevice } from "@core/stores/deviceStore.ts";
import { useMessageStore } from "@core/stores/messageStore.ts";
export function useRefreshKeysDialog() {
const { removeNode, setDialogOpen, clearNodeError, getNodeError } = useDevice();
const { activeChat } = useAppStore();
const { activeChat } = useMessageStore();
const handleNodeRemove = useCallback(() => {
const nodeWithError = getNodeError(activeChat);
src/core/stores/appStore.ts
+1 -19
View File
@@ -8,7 +8,6 @@ export interface RasterSource {
tileSize: number;
}
interface ErrorState {
field: string;
message: string;
@@ -19,12 +18,7 @@ interface ErrorState {
message: string;
}
export interface App {
unreadCounts: Map<number, number>;
setUnread: (id: number, count: number) => void;
}
export interface AppState {
interface AppState {
selectedDevice: number;
devices: {
id: number;
@@ -36,7 +30,6 @@ export interface AppState {
connectDialogOpen: boolean;
nodeNumDetails: number;
errors: ErrorState[];
unreadCounts: Map<number, number>;
setRasterSources: (sources: RasterSource[]) => void;
addRasterSource: (source: RasterSource) => void;
@@ -57,9 +50,6 @@ export interface AppState {
removeError: (field: string) => void;
clearErrors: () => void;
setNewErrors: (newErrors: ErrorState[]) => void;
// unread counts
setUnread: (id: number, count: number) => void;
}
export const useAppStore = create<AppState>()((set, get) => ({
@@ -72,7 +62,6 @@ export const useAppStore = create<AppState>()((set, get) => ({
nodeNumToBeRemoved: 0,
nodeNumDetails: 0,
errors: [],
unreadCounts: new Map([[0, 100],[2718471552, 1]]),
setRasterSources: (sources: RasterSource[]) => {
set(
@@ -173,11 +162,4 @@ export const useAppStore = create<AppState>()((set, get) => ({
}),
);
},
setUnread: (id: number, count: number) => {
set(
produce<AppState>((draft) => {
draft.unreadCounts.set(id, count);
})
);
}
}));
src/core/stores/deviceStore.ts
+32 -17
View File
@@ -74,7 +74,6 @@ export interface Device {
refreshKeys: boolean;
clearMessages: boolean;
};
unreadCounts: Map<number, number>;
setStatus: (status: Types.DeviceStatusEnum) => void;
@@ -102,11 +101,12 @@ export interface Device {
getDialogOpen: (dialog: DialogVariant) => boolean;
processPacket: (data: ProcessPacketParams) => void;
setMessageDraft: (message: string) => void;
setUnread: (id: number, count: number) => void;
setNodeError: (nodeNum: number, error: string) => void;
clearNodeError: (nodeNum: number) => void;
getNodeError: (nodeNum: number) => NodeError | undefined;
hasNodeError: (nodeNum: number) => boolean
incrementUnread: (nodeNum: number) => void;
resetUnread: (nodeNum: number) => void;
}
export interface DeviceState {
@@ -154,12 +154,13 @@ export const useDeviceStore = createStore<DeviceState>((set, get) => ({
unsafeRoles: false,
refreshKeys: false,
rebootOTA: false,
clearMessages: false,
},
pendingSettingsChanges: false,
messageDraft: "",
unreadCounts: new Map(),
nodeErrors: new Map(),
setStatus: (status: Types.DeviceStatusEnum) => {
set(
produce<DeviceState>((draft) => {
@@ -581,20 +582,6 @@ export const useDeviceStore = createStore<DeviceState>((set, get) => ({
}),
);
},
setUnread: (unread_id: number, count?: number) => {
set(
produce<DeviceState>((draft) => {
const device = draft.devices.get(id);
if (device) {
if (count == null) {
let currentCount = device.unreadCounts.get(unread_id) ?? 0;
count = currentCount + 1;
}
device.unreadCounts.set(unread_id, count);
}
})
);
},
setNodeError: (nodeNum, error) => {
set(
produce<DeviceState>((draft) => {
@@ -629,7 +616,35 @@ export const useDeviceStore = createStore<DeviceState>((set, get) => ({
}
return device.nodeErrors.has(nodeNum);
},
incrementUnread: (nodeNum: number) => {
set(
produce<DeviceState>((draft) => {
const device = draft.devices.get(id);
if (!device) {
console.warn(`incrementUnread: Device with ID ${id} not found.`);
return;
}
const currentCount = device.unreadCounts.get(nodeNum) ?? 0;
device.unreadCounts.set(nodeNum, currentCount + 1);
})
);
},
resetUnread: (nodeNum: number) => {
set(
produce<DeviceState>((draft) => {
const device = draft.devices.get(id);
if (!device) {
console.warn(`resetUnread: Device with ID ${id} not found.`);
return;
}
device.unreadCounts.set(nodeNum, 0);
if (device.unreadCounts.get(nodeNum) === 0) {
device.unreadCounts.delete(nodeNum);
}
})
);
},
});
}),
);
src/core/stores/messageStore.test.ts
+5 -6
View File
@@ -9,19 +9,15 @@ import {
let memoryStorage: Record<string, string> = {};
vi.mock('./storage/indexDB.ts', () => {
console.log("Mocking zustandIndexDBStorage...");
return {
zustandIndexDBStorage: {
getItem: vi.fn(async (name: string): Promise<string | null> => {
console.log(`Mock getItem: ${name}`, memoryStorage[name] ?? null);
return memoryStorage[name] ?? null;
}),
setItem: vi.fn(async (name: string, value: string): Promise<void> => {
console.log(`Mock setItem: ${name}`, value);
memoryStorage[name] = value;
}),
removeItem: vi.fn(async (name: string): Promise<void> => {
console.log(`Mock removeItem: ${name}`);
delete memoryStorage[name];
}),
},
@@ -211,11 +207,14 @@ describe('useMessageStore', () => {
expect(messages).toEqual([]);
});
it('should return empty array if myNodeNum is not provided for direct messages', () => {
it('should return combined direct messages when myNodeNum and otherNodeNum are provided', () => {
const messages = useMessageStore.getState().getMessages(MessageType.Direct, {
myNodeNum: myNodeNum, // Keep this
otherNodeNum: otherNodeNum1
});
expect(messages).toEqual([]);
expect(messages).toHaveLength(2);
expect(messages[0]).toEqual(directMessageToOther1);
expect(messages[1]).toEqual(directMessageFromOther1);
});
});
src/core/subscriptions.ts
+13 -10
View File
@@ -1,10 +1,8 @@
import type { Device } from "@core/stores/deviceStore.ts";
import { MeshDevice, Protobuf } from "@meshtastic/core";
import type { MessageStore, MessageType } from "@core/stores/messageStore.ts";
import { MessageType } from "@core/stores/messageStore.ts";
import type { MessageStore } from "@core/stores/messageStore.ts";
import PacketToMessageDTO from "@core/dto/PacketToMessageDTO.ts";
export const subscribeAll = (
device: Device,
connection: MeshDevice,
@@ -87,15 +85,20 @@ export const subscribeAll = (
connection.events.onMessagePacket.subscribe((messagePacket) => {
// incoming and outgoing messages are handled by this event listener
const dto = new PacketToMessageDTO(messagePacket, myNodeNum);
const message = dto.toMessage();
messsageStore.saveMessage(message);
message.type == MessageType.Direct
?
device.setUnread(messagePacket.from);
:
device.setUnread(messagePacket.channel);
messageStore.saveMessage(message);
if (message.type == MessageType.Direct) {
if (message.to === myNodeNum) {
device.incrementUnread(messagePacket.from);
}
} else if (message.type == MessageType.Broadcast) {
if (message.from !== myNodeNum) {
device.incrementUnread(message.channel);
}
}
});
connection.events.onTraceRoutePacket.subscribe((traceRoutePacket) => {
src/pages/Messages.tsx
+55 -48
View File
@@ -15,23 +15,27 @@ import { MessageInput } from "@components/PageComponents/Messages/MessageInput.t
import { cn } from "@core/utils/cn.ts";
import { MessageType, useMessageStore } from "@core/stores/messageStore.ts";
type NodeInfoWithUnread = Protobuf.Mesh.NodeInfo & { unreadCount: number };
export const MessagesPage = () => {
const { channels, nodes, hardware, hasNodeError, unreadCounts, setUnread } = useDevice();
const { channels, nodes, hardware, hasNodeError, unreadCounts, resetUnread } = useDevice();
const { getNodeNum, getMessages, setActiveChat, chatType, activeChat, setChatType } = useMessageStore()
const { toast } = useToast();
const [searchTerm, setSearchTerm] = useState<string>("");
const filteredNodes = Array.from(nodes.values()).filter((node) => {
if (node.num === hardware.myNodeNum) return false;
const nodeName = node.user?.longName ?? `!${numberToHexUnpadded(node.num)}`;
return nodeName.toLowerCase().includes(searchTerm.toLowerCase());
})
.map((node) => ({
...node,
unreadCount: unreadCounts.get(node.num) ?? 0
}))
.sort((a, b) => b.unreadCount - a.unreadCount);
const filteredNodes: NodeInfoWithUnread[] = Array.from(nodes.values())
.filter((node) => node.num !== hardware.myNodeNum)
.map((node) => ({
...node,
unreadCount: unreadCounts.get(node.num) ?? 0,
}))
.filter((node) => {
const nodeName = node.user?.longName ?? `!${numberToHexUnpadded(node.num)}`;
return nodeName.toLowerCase().includes(searchTerm.toLowerCase());
})
.sort((a, b) => b.unreadCount - a.unreadCount);
const allChannels = Array.from(channels.values());
const filteredChannels = allChannels.filter(
(ch) => ch.role !== Protobuf.Channel.Channel_Role.DISABLED,
@@ -55,47 +59,44 @@ export const MessagesPage = () => {
<SidebarButton
key={channel.index}
count={unreadCounts.get(channel.index)}
label={channel.settings?.name.length
? channel.settings?.name
: channel.index === 0
? "Primary"
: `Ch ${channel.index}`}
label={channel.settings?.name || (channel.index === 0 ? "Primary" : `Ch ${channel.index}`)}
active={activeChat === channel.index && chatType === MessageType.Broadcast}
onClick={() => {
setChatType(MessageType.Broadcast);
setActiveChat(channel.index);
setUnread(channel.index, 0);
resetUnread(channel.index);
}}
element={<HashIcon size={16} className="mr-2" />}
/>
))}
</SidebarSection>
<SidebarSection label="Nodes">
<div className="p-4">
<div className="p-1 mb-4">
<input
type="text"
placeholder="Search nodes..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full p-2 border border-slate-300 rounded-sm bg-white text-slate-900"
className="w-full p-2 border border-slate-300 rounded-sm bg-white text-slate-900 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div className="flex flex-col gap-4">
{filteredNodes.map((otherNode) => (
<div className="flex flex-col gap-3.5">
{filteredNodes.map((node) => (
<SidebarButton
count={unreadCounts.get(node.num)}
label={node.user?.longName ??
`!${numberToHexUnpadded(node.num)}`}
active={activeChat === otherNode.num && chatType === MessageType.Direct}
key={node.num}
label={node.user?.longName ?? `!${numberToHexUnpadded(node.num)}`}
count={node.unreadCount > 0 ? node.unreadCount : undefined}
active={activeChat === node.num && chatType === MessageType.Direct}
onClick={() => {
setChatType(MessageType.Direct);
setActiveChat(otherNode.num);
setUnread(otherNode.num, 0);
setActiveChat(node.num);
resetUnread(node.num);
}}
element={
<Avatar
text={otherNode?.user?.shortName ?? otherNode.num.toString()}
className={cn(hasNodeError(otherNode?.num) && "text-red-500")}
showError={hasNodeError(otherNode?.num)}
text={node.user?.shortName ?? node.num.toString()}
className={cn(hasNodeError(node.num) && "text-red-500")}
showError={hasNodeError(node.num)}
size="sm"
/>
}
@@ -107,26 +108,22 @@ export const MessagesPage = () => {
<div className="flex flex-col w-full h-full container mx-auto">
<PageLayout
className="flex flex-col h-full"
label={`Messages: ${MessageType.Broadcast && currentChannel
label={`Messages: ${isBroadcast && currentChannel
? getChannelName(currentChannel)
: chatType === MessageType.Direct && nodes.get(activeChat)
? (nodes.get(activeChat)?.user?.longName ?? nodeHex)
: "Loading..."
: isDirect && otherNode
? (otherNode.user?.longName ?? nodeHex)
: "Select a Chat"
}`}
actions={chatType === MessageType.Direct
actions={isDirect && otherNode
? [
{
icon: nodes.get(activeChat)?.user?.publicKey.length
? LockIcon
: LockOpenIcon,
iconClasses: nodes.get(activeChat)?.user?.publicKey.length
icon: otherNode.user?.publicKey?.length ? LockIcon : LockOpenIcon,
iconClasses: otherNode.user?.publicKey?.length
? "text-green-600"
: "text-yellow-300",
onClick() {
const targetNode = nodes.get(activeChat)?.num;
if (targetNode === undefined) return;
toast({
title: nodes.get(activeChat)?.user?.publicKey.length
title: otherNode.user?.publicKey?.length
? "Chat is using PKI encryption."
: "Chat is using PSK encryption.",
});
@@ -158,14 +155,24 @@ export const MessagesPage = () => {
</div>
</div>
)}
{!isBroadcast && !isDirect && (
<div className="flex items-center justify-center h-full text-slate-500">
Select a channel or node to start messaging.
</div>
)}
</div>
<div className="shrink-0 p-4 w-full dark:bg-slate-900">
<MessageInput
to={currentChat.type === MessageType.Direct ? activeChat : MessageType.Broadcast}
channel={currentChat.type === MessageType.Direct ? Types.ChannelNumber.Primary : currentChat.id}
maxBytes={200}
/>
{(isBroadcast || isDirect) ? (
<MessageInput
to={isDirect ? activeChat : MessageType.Broadcast}
channel={isDirect ? Types.ChannelNumber.Primary : currentChat.id}
maxBytes={200}
/>
) : (
<div className="text-center text-slate-400 italic">Select a chat to send a message.</div>
)}
</div>
</PageLayout>
</div>
src/pages/Nodes.tsx
+8 -11
View File
@@ -24,10 +24,9 @@ function shortNameFromNode(
): string {
const shortNameOfNode = node.user?.shortName ??
(node.user?.macaddr
? `${
base16
.stringify(node.user?.macaddr.subarray(4, 6) ?? [])
.toLowerCase()
? `${base16
.stringify(node.user?.macaddr.subarray(4, 6) ?? [])
.toLowerCase()
}`
: `${numberToHexUnpadded(node.num).slice(-4)}`);
return String(shortNameOfNode);
@@ -93,7 +92,7 @@ const NodesPage = (): JSX.Element => {
placeholder="Search nodes..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full p-2 border border-slate-300 rounded-sm bg-white text-slate-900"
className="w-full p-2 border border-slate-300 rounded-sm bg-white text-slate-900 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div className="overflow-y-auto h-full">
@@ -124,10 +123,9 @@ const NodesPage = (): JSX.Element => {
>
{node.user?.longName ??
(node.user?.macaddr
? `Meshtastic ${
base16
.stringify(node.user?.macaddr.subarray(4, 6) ?? [])
.toLowerCase()
? `Meshtastic ${base16
.stringify(node.user?.macaddr.subarray(4, 6) ?? [])
.toLowerCase()
}`
: `!${numberToHexUnpadded(node.num)}`)}
</h1>,
@@ -135,8 +133,7 @@ const NodesPage = (): JSX.Element => {
{node.lastHeard !== 0
? node.viaMqtt === false && node.hopsAway === 0
? "Direct"
: `${node.hopsAway?.toString()} ${
node.hopsAway > 1 ? "hops" : "hop"
: `${node.hopsAway?.toString()} ${node.hopsAway > 1 ? "hops" : "hop"
} away`
: "-"}
{node.viaMqtt === true ? ", via MQTT" : ""}