diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx index 13f9d11c..6ee5f000 100644 --- a/src/pages/Messages.tsx +++ b/src/pages/Messages.tsx @@ -9,7 +9,13 @@ import { useDevice } from "@core/stores/deviceStore.ts"; import { Protobuf, Types } from "@meshtastic/core"; import { getChannelName } from "@pages/Channels.tsx"; import { HashIcon, LockIcon, LockOpenIcon } from "lucide-react"; -import { useCallback, useDeferredValue, useMemo, useState } from "react"; +import { + useCallback, + useDeferredValue, + useEffect, + useMemo, + useState, +} from "react"; import { MessageInput } from "@components/PageComponents/Messages/MessageInput.tsx"; import { cn } from "@core/utils/cn.ts"; import { @@ -21,6 +27,7 @@ import { useSidebar } from "@core/stores/sidebarStore.tsx"; import { Input } from "@components/UI/Input.tsx"; import { randId } from "@core/utils/randId.ts"; import { useTranslation } from "react-i18next"; +import { useNavigate, useParams } from "@tanstack/react-router"; type NodeInfoWithUnread = Protobuf.Mesh.NodeInfo & { unreadCount: number }; @@ -37,18 +44,46 @@ export const MessagesPage = () => { const { getMyNodeNum, getMessages, - setActiveChat, - chatType, - activeChat, - setChatType, setMessageState, } = useMessageStore(); + const params = useParams({ strict: false }); + const navigate = useNavigate(); const { toast } = useToast(); const { isCollapsed } = useSidebar(); const [searchTerm, setSearchTerm] = useState(""); const { t } = useTranslation(["messages", "channels", "ui"]); const deferredSearch = useDeferredValue(searchTerm); + const chatType = params.type === "direct" + ? MessageType.Direct + : params.type === "broadcast" + ? MessageType.Broadcast + : undefined; + const activeChat = params.chatId ? Number(params.chatId) : undefined; + + const allChannels = Array.from(channels.values()); + const filteredChannels = allChannels.filter( + (ch) => ch.role !== Protobuf.Channel.Channel_Role.DISABLED, + ); + const currentChannel = channels.get(activeChat); + const otherNode = getNode(activeChat); + + const isDirect = chatType === MessageType.Direct; + const isBroadcast = chatType === MessageType.Broadcast; + + const navigateToChat = useCallback((type: MessageType, chatId: number) => { + const typeParam = type === MessageType.Direct ? "direct" : "broadcast"; + navigate({ to: `/messages/${typeParam}/${chatId}` }); + }, [navigate]); + + // Redirect to default chat if no params are provided + useEffect(() => { + if (!params.type && !params.chatId && filteredChannels.length > 0) { + const defaultChannel = filteredChannels[0]; + navigateToChat(MessageType.Broadcast, defaultChannel.index); + } + }, [params.type, params.chatId, filteredChannels, navigateToChat]); + const filteredNodes = (): NodeInfoWithUnread[] => { const lowerCaseSearchTerm = deferredSearch.toLowerCase(); @@ -69,16 +104,6 @@ export const MessagesPage = () => { }); }; - const allChannels = Array.from(channels.values()); - const filteredChannels = allChannels.filter( - (ch) => ch.role !== Protobuf.Channel.Channel_Role.DISABLED, - ); - const currentChannel = channels.get(activeChat); - const otherNode = getNode(activeChat); - - const isDirect = chatType === MessageType.Direct; - const isBroadcast = chatType === MessageType.Broadcast; - const sendText = useCallback(async (message: string) => { const isDirect = chatType === MessageType.Direct; const toValue = isDirect ? activeChat : MessageType.Broadcast; @@ -191,8 +216,7 @@ export const MessagesPage = () => { active={activeChat === channel.index && chatType === MessageType.Broadcast} onClick={() => { - setChatType(MessageType.Broadcast); - setActiveChat(channel.index); + navigateToChat(MessageType.Broadcast, channel.index); resetUnread(channel.index); }} > @@ -210,8 +234,7 @@ export const MessagesPage = () => { activeChat, chatType, isCollapsed, - setActiveChat, - setChatType, + navigateToChat, resetUnread, ]); @@ -245,8 +268,7 @@ export const MessagesPage = () => { active={activeChat === node.num && chatType === MessageType.Direct} onClick={() => { - setChatType(MessageType.Direct); - setActiveChat(node.num); + navigateToChat(MessageType.Direct, node.num); resetUnread(node.num); }} > @@ -268,8 +290,7 @@ export const MessagesPage = () => { searchTerm, activeChat, chatType, - setActiveChat, - setChatType, + navigateToChat, resetUnread, hasNodeError, ], diff --git a/src/routes.tsx b/src/routes.tsx index cfae0c3b..3d23c781 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -24,6 +24,12 @@ const messagesRoute = createRoute({ component: MessagesPage, }); +const messagesWithParamsRoute = createRoute({ + getParentRoute: () => rootRoute, + path: "/messages/$type/$chatId", + component: MessagesPage, +}); + const mapRoute = createRoute({ getParentRoute: () => rootRoute, path: "/map", @@ -51,6 +57,7 @@ const nodesRoute = createRoute({ export const routeTree = rootRoute.addChildren([ indexRoute, messagesRoute, + messagesWithParamsRoute, mapRoute, configRoute, channelsRoute,