Browse Source
* Add favourite icon to node Avatar * Favourites WIP * Save isFavorite and isIgnored to device * Fix spelling * Clean up * Always sort favorites first * Add unread count to "Messages" top level menu * Renaming, UI tweaks * Add hook tests * Handle undefined node betterpull/620/head v2.6.4
philon-
1 year ago
committed by
GitHub
GitHub
15 changed files with 700 additions and 257 deletions
@ -1,120 +0,0 @@ |
|||||
import { toast } from "../../core/hooks/useToast.ts"; |
|
||||
import { useAppStore } from "../../core/stores/appStore.ts"; |
|
||||
import { useDevice } from "../../core/stores/deviceStore.ts"; |
|
||||
import { |
|
||||
Dialog, |
|
||||
DialogClose, |
|
||||
DialogContent, |
|
||||
DialogHeader, |
|
||||
DialogTitle, |
|
||||
} from "../UI/Dialog.tsx"; |
|
||||
import type { Protobuf } from "@meshtastic/core"; |
|
||||
import { numberToHexUnpadded } from "@noble/curves/abstract/utils"; |
|
||||
import { TrashIcon } from "lucide-react"; |
|
||||
|
|
||||
import { Button } from "../UI/Button.tsx"; |
|
||||
import { |
|
||||
MessageType, |
|
||||
useMessageStore, |
|
||||
} from "../../core/stores/messageStore/index.ts"; |
|
||||
|
|
||||
export interface NodeOptionsDialogProps { |
|
||||
node: Protobuf.Mesh.NodeInfo | undefined; |
|
||||
open: boolean; |
|
||||
onOpenChange: () => void; |
|
||||
} |
|
||||
|
|
||||
export const NodeOptionsDialog = ({ |
|
||||
node, |
|
||||
open, |
|
||||
onOpenChange, |
|
||||
}: NodeOptionsDialogProps) => { |
|
||||
const { setDialogOpen, connection, setActivePage } = useDevice(); |
|
||||
const { |
|
||||
setNodeNumToBeRemoved, |
|
||||
setNodeNumDetails, |
|
||||
} = useAppStore(); |
|
||||
const { setChatType, setActiveChat } = useMessageStore(); |
|
||||
|
|
||||
if (!node) return null; |
|
||||
|
|
||||
const longName = node?.user?.longName ?? |
|
||||
(node ? `!${numberToHexUnpadded(node?.num)}` : "Unknown"); |
|
||||
const shortName = node?.user?.shortName ?? |
|
||||
(node ? `${numberToHexUnpadded(node?.num).substring(0, 4)}` : "UNK"); |
|
||||
|
|
||||
function handleDirectMessage() { |
|
||||
setChatType(MessageType.Direct); |
|
||||
setActiveChat(node.num); |
|
||||
setActivePage("messages"); |
|
||||
} |
|
||||
|
|
||||
function handleRequestPosition() { |
|
||||
toast({ |
|
||||
title: "Requesting position, please wait...", |
|
||||
}); |
|
||||
connection?.requestPosition(node.num).then(() => |
|
||||
toast({ |
|
||||
title: "Position request sent.", |
|
||||
}) |
|
||||
); |
|
||||
onOpenChange(); |
|
||||
} |
|
||||
|
|
||||
function handleTraceroute() { |
|
||||
toast({ |
|
||||
title: "Sending Traceroute, please wait...", |
|
||||
}); |
|
||||
connection?.traceRoute(node.num).then(() => |
|
||||
toast({ |
|
||||
title: "Traceroute sent.", |
|
||||
}) |
|
||||
); |
|
||||
onOpenChange(); |
|
||||
} |
|
||||
|
|
||||
return ( |
|
||||
<Dialog open={open} onOpenChange={onOpenChange}> |
|
||||
<DialogContent aria-describedby={undefined}> |
|
||||
<DialogClose /> |
|
||||
<DialogHeader> |
|
||||
<DialogTitle>{`${longName} (${shortName})`}</DialogTitle> |
|
||||
</DialogHeader> |
|
||||
<div className="flex flex-col space-y-1"> |
|
||||
<div> |
|
||||
<Button onClick={handleDirectMessage}>Direct Message</Button> |
|
||||
</div> |
|
||||
<div> |
|
||||
<Button onClick={handleRequestPosition}>Request Position</Button> |
|
||||
</div> |
|
||||
<div> |
|
||||
<Button onClick={handleTraceroute}>Trace Route</Button> |
|
||||
</div> |
|
||||
<div> |
|
||||
<Button |
|
||||
key="remove" |
|
||||
variant="destructive" |
|
||||
onClick={() => { |
|
||||
setNodeNumToBeRemoved(node?.num); |
|
||||
setDialogOpen("nodeRemoval", true); |
|
||||
}} |
|
||||
> |
|
||||
<TrashIcon /> |
|
||||
Remove |
|
||||
</Button> |
|
||||
</div> |
|
||||
<div> |
|
||||
<Button |
|
||||
onClick={() => { |
|
||||
setNodeNumDetails(node?.num); |
|
||||
setDialogOpen("nodeDetails", true); |
|
||||
}} |
|
||||
> |
|
||||
More Details |
|
||||
</Button> |
|
||||
</div> |
|
||||
</div> |
|
||||
</DialogContent> |
|
||||
</Dialog> |
|
||||
); |
|
||||
}; |
|
||||
@ -0,0 +1,93 @@ |
|||||
|
import { act, renderHook } from "@testing-library/react"; |
||||
|
import { beforeEach, describe, expect, it, vi } from "vitest"; |
||||
|
import { useFavoriteNode } from "./useFavoriteNode.ts"; |
||||
|
import { Protobuf } from "@meshtastic/core"; |
||||
|
|
||||
|
const mockNode = { |
||||
|
num: 1234, |
||||
|
user: { |
||||
|
longName: "Test Node", |
||||
|
}, |
||||
|
isFavorite: true, |
||||
|
} as unknown | Protobuf.Mesh.NodeInfo; |
||||
|
|
||||
|
const mockUpdateFavorite = vi.fn(); |
||||
|
const mockGetNode = vi.fn(() => mockNode); |
||||
|
const mockToast = vi.fn(); |
||||
|
|
||||
|
vi.mock("@core/stores/deviceStore.ts", () => ({ |
||||
|
useDevice: () => ({ |
||||
|
updateFavorite: mockUpdateFavorite, |
||||
|
getNode: mockGetNode, |
||||
|
}), |
||||
|
})); |
||||
|
|
||||
|
vi.mock("@core/hooks/useToast.ts", () => ({ |
||||
|
useToast: () => ({ |
||||
|
toast: mockToast, |
||||
|
}), |
||||
|
})); |
||||
|
|
||||
|
describe("useFavoriteNode hook", () => { |
||||
|
beforeEach(() => { |
||||
|
vi.clearAllMocks(); |
||||
|
}); |
||||
|
|
||||
|
it("calls updateFavorite and shows correct toast", () => { |
||||
|
const { result } = renderHook(() => useFavoriteNode()); |
||||
|
|
||||
|
act(() => { |
||||
|
result.current.updateFavorite({ nodeNum: 1234, isFavorite: true }); |
||||
|
}); |
||||
|
|
||||
|
expect(mockUpdateFavorite).toHaveBeenCalledWith(1234, true); |
||||
|
expect(mockGetNode).toHaveBeenCalledWith(1234); |
||||
|
expect(mockToast).toHaveBeenCalledWith({ |
||||
|
title: "Added Test Node to favorites", |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
it("handles removal case", () => { |
||||
|
const { result } = renderHook(() => useFavoriteNode()); |
||||
|
|
||||
|
act(() => { |
||||
|
result.current.updateFavorite({ nodeNum: 1234, isFavorite: false }); |
||||
|
}); |
||||
|
|
||||
|
expect(mockUpdateFavorite).toHaveBeenCalledWith(1234, false); |
||||
|
expect(mockGetNode).toHaveBeenCalledWith(1234); |
||||
|
expect(mockToast).toHaveBeenCalledWith({ |
||||
|
title: "Removed Test Node from favorites", |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
it("falls back to 'node' if longName is missing", () => { |
||||
|
mockGetNode.mockReturnValueOnce({ |
||||
|
num: 5678, |
||||
|
user: {}, |
||||
|
}); // no longName
|
||||
|
|
||||
|
const { result } = renderHook(() => useFavoriteNode()); |
||||
|
|
||||
|
act(() => { |
||||
|
result.current.updateFavorite({ nodeNum: 5678, isFavorite: true }); |
||||
|
}); |
||||
|
|
||||
|
expect(mockToast).toHaveBeenCalledWith({ |
||||
|
title: "Added node to favorites", |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
it("falls back to 'node' if getNode returns undefined", () => { |
||||
|
mockGetNode.mockReturnValueOnce(undefined); |
||||
|
|
||||
|
const { result } = renderHook(() => useFavoriteNode()); |
||||
|
|
||||
|
act(() => { |
||||
|
result.current.updateFavorite({ nodeNum: 9999, isFavorite: false }); |
||||
|
}); |
||||
|
|
||||
|
expect(mockUpdateFavorite).not.toHaveBeenCalled(); |
||||
|
expect(mockToast).not.toHaveBeenCalled(); |
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,31 @@ |
|||||
|
import { useCallback } from "react"; |
||||
|
import { useDevice } from "@core/stores/deviceStore.ts"; |
||||
|
import { useToast } from "@core/hooks/useToast.ts"; |
||||
|
|
||||
|
interface FavoriteNodeOptions { |
||||
|
nodeNum: number; |
||||
|
isFavorite: boolean; |
||||
|
} |
||||
|
|
||||
|
export function useFavoriteNode() { |
||||
|
const { updateFavorite, getNode } = useDevice(); |
||||
|
const { toast } = useToast(); |
||||
|
|
||||
|
const updateFavoriteCB = useCallback( |
||||
|
({ nodeNum, isFavorite }: FavoriteNodeOptions) => { |
||||
|
const node = getNode(nodeNum); |
||||
|
if (!node) return; |
||||
|
|
||||
|
updateFavorite(nodeNum, isFavorite); |
||||
|
|
||||
|
toast({ |
||||
|
title: `${isFavorite ? "Added" : "Removed"} ${ |
||||
|
node?.user?.longName ?? "node" |
||||
|
} ${isFavorite ? "to" : "from"} favorites`,
|
||||
|
}); |
||||
|
}, |
||||
|
[updateFavorite, getNode], |
||||
|
); |
||||
|
|
||||
|
return { updateFavorite: updateFavoriteCB }; |
||||
|
} |
||||
@ -0,0 +1,96 @@ |
|||||
|
import { act, renderHook } from "@testing-library/react"; |
||||
|
import { beforeEach, describe, expect, it, vi } from "vitest"; |
||||
|
import { useIgnoreNode } from "./useIgnoreNode.ts"; |
||||
|
import { Protobuf } from "@meshtastic/core"; |
||||
|
|
||||
|
const mockNode = { |
||||
|
num: 1234, |
||||
|
user: { |
||||
|
longName: "Test Node", |
||||
|
}, |
||||
|
isIgnored: true, |
||||
|
} as unknown | Protobuf.Mesh.NodeInfo; |
||||
|
|
||||
|
const mockUpdateIgnore = vi.fn(); |
||||
|
const mockGetNode = vi.fn(() => mockNode); |
||||
|
const mockToast = vi.fn(); |
||||
|
|
||||
|
vi.mock("@core/stores/deviceStore.ts", () => ({ |
||||
|
useDevice: () => ({ |
||||
|
updateIgnored: mockUpdateIgnore, |
||||
|
getNode: mockGetNode, |
||||
|
}), |
||||
|
})); |
||||
|
|
||||
|
vi.mock("@core/hooks/useToast.ts", () => ({ |
||||
|
useToast: () => ({ |
||||
|
toast: mockToast, |
||||
|
}), |
||||
|
})); |
||||
|
|
||||
|
describe("useIgnoreNode hook", () => { |
||||
|
beforeEach(() => { |
||||
|
vi.clearAllMocks(); |
||||
|
}); |
||||
|
|
||||
|
it("calls updateIgnored and shows correct toast", () => { |
||||
|
const { result } = renderHook(() => useIgnoreNode()); |
||||
|
|
||||
|
act(() => { |
||||
|
result.current.updateIgnored({ nodeNum: 1234, isIgnored: true }); |
||||
|
}); |
||||
|
|
||||
|
expect(mockUpdateIgnore).toHaveBeenCalledWith(1234, true); |
||||
|
expect(mockGetNode).toHaveBeenCalledWith(1234); |
||||
|
expect(mockToast).toHaveBeenCalledWith({ |
||||
|
title: "Added Test Node to ignore list", |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
it("handles removal case", () => { |
||||
|
const { result } = renderHook(() => useIgnoreNode()); |
||||
|
|
||||
|
act(() => { |
||||
|
result.current.updateIgnored({ |
||||
|
nodeNum: 1234, |
||||
|
isIgnored: false, |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
expect(mockUpdateIgnore).toHaveBeenCalledWith(1234, false); |
||||
|
expect(mockGetNode).toHaveBeenCalledWith(1234); |
||||
|
expect(mockToast).toHaveBeenCalledWith({ |
||||
|
title: "Removed Test Node from ignore list", |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
it("falls back to 'node' if longName is missing", () => { |
||||
|
mockGetNode.mockReturnValueOnce({ |
||||
|
num: 5678, |
||||
|
user: {}, |
||||
|
}); // no longName
|
||||
|
|
||||
|
const { result } = renderHook(() => useIgnoreNode()); |
||||
|
|
||||
|
act(() => { |
||||
|
result.current.updateIgnored({ nodeNum: 5678, isIgnored: true }); |
||||
|
}); |
||||
|
|
||||
|
expect(mockToast).toHaveBeenCalledWith({ |
||||
|
title: "Added node to ignore list", |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
it("falls back to 'node' if getNode returns undefined", () => { |
||||
|
mockGetNode.mockReturnValueOnce(undefined); |
||||
|
|
||||
|
const { result } = renderHook(() => useIgnoreNode()); |
||||
|
|
||||
|
act(() => { |
||||
|
result.current.updateIgnored({ nodeNum: 9999, isIgnored: false }); |
||||
|
}); |
||||
|
|
||||
|
expect(mockUpdateIgnore).not.toHaveBeenCalled(); |
||||
|
expect(mockToast).not.toHaveBeenCalled(); |
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,31 @@ |
|||||
|
import { useCallback } from "react"; |
||||
|
import { useDevice } from "@core/stores/deviceStore.ts"; |
||||
|
import { useToast } from "@core/hooks/useToast.ts"; |
||||
|
|
||||
|
interface IgnoreNodeOptions { |
||||
|
nodeNum: number; |
||||
|
isIgnored: boolean; |
||||
|
} |
||||
|
|
||||
|
export function useIgnoreNode() { |
||||
|
const { updateIgnored, getNode } = useDevice(); |
||||
|
const { toast } = useToast(); |
||||
|
|
||||
|
const updateIgnoredCB = useCallback( |
||||
|
({ nodeNum, isIgnored }: IgnoreNodeOptions) => { |
||||
|
const node = getNode(nodeNum); |
||||
|
if (!node) return; |
||||
|
|
||||
|
updateIgnored(nodeNum, isIgnored); |
||||
|
|
||||
|
toast({ |
||||
|
title: `${isIgnored ? "Added" : "Removed"} ${ |
||||
|
node?.user?.longName ?? "node" |
||||
|
} ${isIgnored ? "to" : "from"} ignore list`,
|
||||
|
}); |
||||
|
}, |
||||
|
[updateIgnored, getNode], |
||||
|
); |
||||
|
|
||||
|
return { updateIgnored: updateIgnoredCB }; |
||||
|
} |
||||
Loading…
Reference in new issue