From e2f03aaf81cfce858b176a25e2cdbd61a2769c71 Mon Sep 17 00:00:00 2001 From: Dan Ditomaso Date: Tue, 24 Jun 2025 18:19:26 -0400 Subject: [PATCH] feat: add dependency injection using tanstack context (#680) * feat: add dep injection using tanstack context * fixed small typo --- .gitignore | 3 +- .gitmodules | 3 ++ .../NodeDetailsDialog/NodeDetailsDialog.tsx | 1 + .../PageComponents/Messages/MessageItem.tsx | 6 +-- src/components/UI/Generator.tsx | 2 +- src/core/stores/deviceStore.ts | 20 +++++++++ src/index.tsx | 41 +++++++++++++------ src/pages/Messages.tsx | 10 ++--- src/routes.tsx | 39 ++++++++++++++---- 9 files changed, 95 insertions(+), 30 deletions(-) create mode 100644 .gitmodules diff --git a/.gitignore b/.gitignore index ec3dfc3a..76c403ce 100644 --- a/.gitignore +++ b/.gitignore @@ -4,4 +4,5 @@ stats.html .vercel .vite dev-dist -__screenshots__* \ No newline at end of file +__screenshots__* +*.diff \ No newline at end of file diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 00000000..1e24054e --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "src/core/connection"] + path = src/core/connection + url = https://github.com/meshtastic/js.git diff --git a/src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx b/src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx index 9a80194d..356ab3b1 100644 --- a/src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx +++ b/src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx @@ -82,6 +82,7 @@ export const NodeDetailsDialog = ({ function handleDirectMessage() { if (!node) return; navigate({ to: `/messages/direct/${node.num}` }); + setDialogOpen("nodeDetails", false); } function handleRequestPosition() { diff --git a/src/components/PageComponents/Messages/MessageItem.tsx b/src/components/PageComponents/Messages/MessageItem.tsx index dbcfd533..ee38e674 100644 --- a/src/components/PageComponents/Messages/MessageItem.tsx +++ b/src/components/PageComponents/Messages/MessageItem.tsx @@ -51,7 +51,7 @@ interface MessageItemProps { export const MessageItem = ({ message }: MessageItemProps) => { const { getNode } = useDevice(); const { getMyNodeNum } = useMessageStore(); - const { t, i18n } = useTranslation(); + const { t, i18n } = useTranslation("messages"); const MESSAGE_STATUS_MAP = useMemo( (): Record => ({ @@ -78,7 +78,7 @@ export const MessageItem = ({ message }: MessageItemProps) => { ); const UNKNOWN_STATUS = useMemo((): MessageStatusInfo => ({ - displayText: t("delveryStatus.unknown.displayText"), + displayText: t("deliveryStatus.unknown.displayText"), icon: AlertCircle, ariaLabel: t("deliveryStatus.unknown.label"), iconClassName: "text-red-500 dark:text-red-400", @@ -99,7 +99,7 @@ export const MessageItem = ({ message }: MessageItemProps) => { const { displayName, shortName, isFavorite } = useMemo(() => { const userIdHex = message.from.toString(16).toUpperCase().padStart(2, "0"); const last4 = userIdHex.slice(-4); - const fallbackName = t("message_item_fallbackName_withLastFour", { last4 }); + const fallbackName = t("fallbackName", { last4 }); const longName = messageUser?.user?.longName; const derivedShortName = messageUser?.user?.shortName || fallbackName; const derivedDisplayName = longName || derivedShortName; diff --git a/src/components/UI/Generator.tsx b/src/components/UI/Generator.tsx index 22fa2921..a2098037 100644 --- a/src/components/UI/Generator.tsx +++ b/src/components/UI/Generator.tsx @@ -70,7 +70,7 @@ const Generator = ( key: "bit8", }, { - text: t("security.empty"), + text: t("security.0bit"), value: "0", key: "bit0", }, diff --git a/src/core/stores/deviceStore.ts b/src/core/stores/deviceStore.ts index 5b8d20c0..21850517 100644 --- a/src/core/stores/deviceStore.ts +++ b/src/core/stores/deviceStore.ts @@ -114,6 +114,8 @@ export interface Device { hasNodeError: (nodeNum: number) => boolean; incrementUnread: (nodeNum: number) => void; resetUnread: (nodeNum: number) => void; + getUnreadCount: (nodeNum: number) => number; + getAllUnreadCount: () => number; getNodes: ( filter?: (node: Protobuf.Mesh.NodeInfo) => boolean, ) => Protobuf.Mesh.NodeInfo[]; @@ -664,6 +666,24 @@ export const useDeviceStore = createStore((set, get) => ({ }), ); }, + getUnreadCount: (nodeNum: number): number => { + const device = get().devices.get(id); + if (!device) { + return 0; + } + return device.unreadCounts.get(nodeNum) ?? 0; + }, + getAllUnreadCount: (): number => { + const device = get().devices.get(id); + if (!device) { + return 0; + } + let totalUnread = 0; + device.unreadCounts.forEach((count) => { + totalUnread += count; + }); + return totalUnread; + }, resetUnread: (nodeNum: number) => { set( produce((draft) => { diff --git a/src/index.tsx b/src/index.tsx index dbaafd39..e2661887 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,11 +1,15 @@ +import React from "react"; import "@app/index.css"; import { enableMapSet } from "immer"; import "maplibre-gl/dist/maplibre-gl.css"; -import { StrictMode, Suspense } from "react"; +import { Suspense } from "react"; import { createRoot } from "react-dom/client"; import "./i18n/config.ts"; import { createRouter, RouterProvider } from "@tanstack/react-router"; -import { routeTree } from "@app/routes.tsx"; +import { router } from "@app/routes.tsx"; +import { useAppStore } from "@core/stores/appStore.ts"; +import { useMessageStore } from "@core/stores/messageStore/index.ts"; +import { useTranslation } from "react-i18next"; declare module "@tanstack/react-router" { interface Register { @@ -16,16 +20,27 @@ declare module "@tanstack/react-router" { const container = document.getElementById("root") as HTMLElement; const root = createRoot(container); -enableMapSet(); +function IndexPage() { + enableMapSet(); + const appStore = useAppStore(); + const messageStore = useMessageStore(); + const translation = useTranslation(); -const router = createRouter({ - routeTree, -}); + const context = React.useMemo(() => ({ + stores: { + app: appStore, + message: messageStore, + }, + i18n: translation, + }), [appStore, messageStore]); -root.render( - - - - - , -); + return ( + + + + + + ); +} + +root.render(); diff --git a/src/pages/Messages.tsx b/src/pages/Messages.tsx index 96bb7b0e..51e7c6ca 100644 --- a/src/pages/Messages.tsx +++ b/src/pages/Messages.tsx @@ -47,7 +47,7 @@ export const MessagesPage = () => { getNodes, getNode, hasNodeError, - unreadCounts, + getUnreadCount, resetUnread, connection, } = useDevice(); @@ -105,7 +105,7 @@ export const MessagesPage = () => { }) .map((node) => ({ ...node, - unreadCount: unreadCounts.get(node.num) ?? 0, + unreadCount: getUnreadCount(node.num) ?? 0, })) .sort((a, b) => { const diff = b.unreadCount - a.unreadCount; @@ -211,7 +211,7 @@ export const MessagesPage = () => { {filteredChannels?.map((channel) => ( { ), [ filteredChannels, - unreadCounts, numericChatId, chatType, isCollapsed, + getUnreadCount, navigateToChat, resetUnread, t, @@ -249,7 +249,7 @@ export const MessagesPage = () => { () => (