feat: Add search functionality for nodes in Messages and Nodes pages

This commit is contained in:
Connor Morgan
2024-11-24 22:17:17 -06:00
parent e78aa2df61
commit 79806cc6a2
2 changed files with 31 additions and 6 deletions
+15 -3
View File
@@ -20,9 +20,12 @@ export const MessagesPage = (): JSX.Element => {
const [activeChat, setActiveChat] = useState<number>(
Types.ChannelNumber.Primary,
);
const filteredNodes = Array.from(nodes.values()).filter(
(n) => n.num !== hardware.myNodeNum,
);
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());
});
const allChannels = Array.from(channels.values());
const filteredChannels = allChannels.filter(
(ch) => ch.role !== Protobuf.Channel.Channel_Role.DISABLED,
@@ -56,6 +59,15 @@ export const MessagesPage = (): JSX.Element => {
))}
</SidebarSection>
<SidebarSection label="Nodes">
<div className="p-4">
<input
type="text"
placeholder="Search nodes..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full p-2 border border-gray-300 rounded bg-white text-black"
/>
</div>
{filteredNodes.map((node) => (
<SidebarButton
key={node.num}