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

DM's and layout fixes

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-02-13 16:38:39 +11:00
parent 0245a95fa9
commit 1a4efc17d7
20 changed files with 964 additions and 817 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Sidebar/ButtonNav.tsx
+3 -3
View File
@@ -4,8 +4,8 @@ import { FiMessageCircle, FiSettings } from 'react-icons/fi';
import { RiMindMap, RiRoadMapLine } from 'react-icons/ri';
import { VscExtensions } from 'react-icons/vsc';
import { toggleMobileNav } from '@app/core/slices/appSlice.js';
import { useAppDispatch } from '@app/hooks/useAppDispatch.js';
import { toggleMobileNav } from '@app/core/slices/appSlice';
import { useAppDispatch } from '@app/hooks/useAppDispatch';
import { routes, useRoute } from '@core/router';
import { NavLinkButton } from './NavLinkButton';
@@ -21,7 +21,7 @@ export const ButtonNav = ({
const dispatch = useAppDispatch();
return (
<div className="z-10 flex justify-between border-t border-gray-300 px-6 py-2 dark:border-gray-600 dark:bg-primaryDark">
<div className="z-30 flex justify-between border-t border-gray-300 px-6 py-2 dark:border-gray-600 dark:bg-primaryDark">
<div
onClick={(): void => {
dispatch(toggleMobileNav());
src/components/layout/Sidebar/Settings/Channels.tsx
+15 -16
View File
@@ -9,7 +9,6 @@ import {
} from 'react-icons/ri';
import { ListItem } from '@app/components/generic/ListItem';
import type { ChannelData } from '@app/core/slices/meshtasticSlice';
import { connection } from '@core/connection';
import { useAppSelector } from '@hooks/useAppSelector';
import { Checkbox, Input, Select, Tooltip } from '@meshtastic/components';
@@ -19,19 +18,19 @@ export const Channels = (): JSX.Element => {
const channels = useAppSelector((state) => state.meshtastic.radio.channels);
const adminChannel =
channels.find(
(channel) => channel.channel.role === Protobuf.Channel_Role.PRIMARY,
(channel) => channel.role === Protobuf.Channel_Role.PRIMARY,
) ?? channels[0];
const [usePreset, setUsePreset] = React.useState(true);
const [loading, setLoading] = React.useState(false);
const [selectedChannel, setSelectedChannel] = React.useState<
ChannelData | undefined
Protobuf.Channel | undefined
>();
const { register, handleSubmit, reset, formState } = useForm<
DeepOmit<Protobuf.Channel, 'psk'>
>({
defaultValues: {
...adminChannel.channel,
...adminChannel,
},
});
@@ -42,7 +41,7 @@ export const Channels = (): JSX.Element => {
...data,
settings: {
...data.settings,
psk: adminChannel.channel.settings?.psk,
psk: adminChannel.settings?.psk,
},
});
@@ -111,7 +110,7 @@ export const Channels = (): JSX.Element => {
)}
{channels.map((channel) => (
<ListItem
key={channel.channel.index}
key={channel.index}
onClick={(): void => {
setSelectedChannel(channel);
}}
@@ -121,23 +120,23 @@ export const Channels = (): JSX.Element => {
[
Protobuf.Channel_Role.SECONDARY,
Protobuf.Channel_Role.PRIMARY,
].find((role) => role === channel.channel.role)
].find((role) => role === channel.role)
? 'bg-green-500'
: 'bg-gray-400'
}`}
/>
}
selected={selectedChannel?.channel.index === channel.channel.index}
selected={selectedChannel?.index === channel.index}
selectedIcon={<FiExternalLink />}
actions={
<Tooltip content={`MQTT Status`}>
<div className="rounded-md p-2">
{channel.channel.settings?.uplinkEnabled &&
channel.channel.settings?.downlinkEnabled ? (
{channel.settings?.uplinkEnabled &&
channel.settings?.downlinkEnabled ? (
<RiArrowUpDownLine className="p-0.5 group-active:scale-90" />
) : channel.channel.settings?.uplinkEnabled ? (
) : channel.settings?.uplinkEnabled ? (
<RiArrowUpLine className="p-0.5 group-active:scale-90" />
) : channel.channel.settings?.downlinkEnabled ? (
) : channel.settings?.downlinkEnabled ? (
<RiArrowDownLine className="p-0.5 group-active:scale-90" />
) : (
<FiX className="p-0.5" />
@@ -147,11 +146,11 @@ export const Channels = (): JSX.Element => {
}
>
<div>
{channel.channel.settings?.name.length
? channel.channel.settings.name
: channel.channel.role === Protobuf.Channel_Role.PRIMARY
{channel.settings?.name.length
? channel.settings.name
: channel.role === Protobuf.Channel_Role.PRIMARY
? 'Primary'
: `Channel: ${channel.channel.index}`}
: `Channel: ${channel.index}`}
</div>
</ListItem>
))}
src/components/layout/Sidebar/Settings/radio/channels/panels/ChannelsGroup.tsx
+10 -10
View File
@@ -17,21 +17,21 @@ export const ChannelsGroup = (): JSX.Element => {
<>
{channels.map((channel) => {
return (
<div key={channel.channel.index}>
<div key={channel.index}>
<CollapsibleSection
title={
channel.channel.settings?.name.length
? channel.channel.settings.name
: channel.channel.role === Protobuf.Channel_Role.PRIMARY
channel.settings?.name.length
? channel.settings.name
: channel.role === Protobuf.Channel_Role.PRIMARY
? 'Primary'
: `Channel: ${channel.channel.index}`
: `Channel: ${channel.index}`
}
icon={
<div
className={`h-3 w-3 rounded-full ${
channel.channel.role === Protobuf.Channel_Role.PRIMARY
channel.role === Protobuf.Channel_Role.PRIMARY
? 'bg-orange-500'
: channel.channel.role === Protobuf.Channel_Role.SECONDARY
: channel.role === Protobuf.Channel_Role.SECONDARY
? 'bg-green-500'
: 'bg-gray-500'
}`}
@@ -46,9 +46,9 @@ export const ChannelsGroup = (): JSX.Element => {
}
>
<>
{/* <DebugPanel channel={channel.channel} /> */}
{/* <QRCodePanel channel={channel.channel} /> */}
<SettingsPanel channel={channel.channel} />
{/* <DebugPanel channel={channel} /> */}
{/* <QRCodePanel channel={channel} /> */}
<SettingsPanel channel={channel} />
</>
</CollapsibleSection>
</div>
src/components/layout/Sidebar/index.tsx
+15 -17
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { useAppSelector } from '@app/hooks/useAppSelector.js';
import { useAppSelector } from '@app/hooks/useAppSelector';
import { ButtonNav } from './ButtonNav';
import { Settings } from './Settings/Index';
@@ -15,23 +15,21 @@ export const Sidebar = ({ children }: SidebarProps): JSX.Element => {
const appState = useAppSelector((state) => state.app);
return (
<div className="flex flex-grow">
<div
className={`absolute h-full w-full flex-grow flex-col pb-6 md:relative md:flex md:w-96 md:pb-0 ${
appState.mobileNavOpen ? 'flex' : 'hidden'
}`}
>
<div className="flex h-full w-full flex-col shadow-xl dark:bg-primaryDark">
<div className="relative flex-grow gap-1">
<div className="absolute h-full w-full">{children}</div>
<Settings open={settingsOpen} setOpen={setSettingsOpen} />
</div>
<ButtonNav
toggleSettingsOpen={(): void => {
setSettingsOpen(!settingsOpen);
}}
/>
<div
className={`absolute z-20 h-full w-full flex-grow flex-col md:relative md:flex md:w-96 ${
appState.mobileNavOpen ? 'flex' : 'hidden'
}`}
>
<div className="flex h-full w-full flex-col shadow-xl dark:bg-primaryDark">
<div className="relative flex-grow gap-1">
<div className="absolute h-full w-full">{children}</div>
<Settings open={settingsOpen} setOpen={setSettingsOpen} />
</div>
<ButtonNav
toggleSettingsOpen={(): void => {
setSettingsOpen(!settingsOpen);
}}
/>
</div>
</div>
);
src/components/layout/Sidebar/sections/SidebarOverlay.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export const SidebarOverlay = ({
<AnimatePresence>
{open && (
<m.div
className="absolute z-10 flex h-full w-full flex-col bg-gray-100 dark:bg-primaryDark"
className="absolute z-30 flex h-full w-full flex-col bg-gray-100 dark:bg-primaryDark"
animate={direction === 'x' ? { translateX: 0 } : { translateY: 0 }}
initial={
direction === 'x' ? { translateX: '-100%' } : { translateY: '100%' }
src/components/layout/index.tsx
+11 -9
View File
@@ -21,16 +21,18 @@ export const Layout = ({
children,
}: LayoutProps): JSX.Element => {
return (
<div className="flex w-full bg-gray-100 dark:bg-secondaryDark md:overflow-hidden md:shadow-xl">
<Sidebar>
<div className="flex gap-2 border-b border-gray-300 p-2 dark:border-gray-600">
<IconButton icon={icon} />
<div className="my-auto text-lg font-medium dark:text-white">
{title}
<div className="relative flex w-full bg-gray-100 dark:bg-secondaryDark md:overflow-hidden md:shadow-xl">
<div className="flex flex-grow">
<Sidebar>
<div className="flex gap-2 border-b border-gray-300 p-2 dark:border-gray-600">
<IconButton icon={icon} />
<div className="my-auto text-lg font-medium dark:text-white">
{title}
</div>
</div>
</div>
<div className="flex flex-col gap-2">{sidebarContents}</div>
</Sidebar>
<div className="flex flex-col gap-2">{sidebarContents}</div>
</Sidebar>
</div>
<ErrorBoundary FallbackComponent={ErrorFallback}>
{children}
</ErrorBoundary>
src/components/menu/BottomNav.tsx
+1 -2
View File
@@ -36,8 +36,7 @@ export const BottomNav = (): JSX.Element => {
const appState = useAppSelector((state) => state.app);
const primaryChannelSettings = useAppSelector(
(state) => state.meshtastic.radio.channels,
).find((channel) => channel.channel.role === Protobuf.Channel_Role.PRIMARY)
?.channel.settings;
).find((channel) => channel.role === Protobuf.Channel_Role.PRIMARY)?.settings;
return (
<div className="z-20 flex justify-between border-t border-gray-300 bg-white dark:border-gray-600 dark:bg-secondaryDark">
src/components/modals/VersionInfo.tsx
-1
View File
@@ -40,7 +40,6 @@ export const VersionInfo = ({
// }`,
// fetcher,
// );
// console.log(data);
return (
<AnimatePresence>
src/core/connection.ts
+5 -3
View File
@@ -1,6 +1,7 @@
import { connType } from '@core/slices/appSlice';
import {
addChannel,
addChat,
addMessage,
addNode,
addPosition,
@@ -86,7 +87,6 @@ const registerListeners = (): void => {
SettingsManager.debugMode = Protobuf.LogRecord_Level.TRACE;
connection.onMeshPacket.subscribe((packet) => {
console.log(packet);
store.dispatch(
addRoute({
from: packet.from,
@@ -127,6 +127,7 @@ const registerListeners = (): void => {
connection.onNodeInfoPacket.subscribe(
(nodeInfoPacket): void | { payload: Protobuf.NodeInfo; type: string } => {
store.dispatch(addNode(nodeInfoPacket.data));
store.dispatch(addChat(nodeInfoPacket.data.num));
},
);
@@ -134,6 +135,9 @@ const registerListeners = (): void => {
switch (adminPacket.data.variant.oneofKind) {
case 'getChannelResponse':
store.dispatch(addChannel(adminPacket.data.variant.getChannelResponse));
store.dispatch(
addChat(adminPacket.data.variant.getChannelResponse.index),
);
break;
case 'getRadioResponse':
if (adminPacket.data.variant.getRadioResponse.preferences) {
@@ -153,8 +157,6 @@ const registerListeners = (): void => {
);
connection.onRoutingPacket.subscribe((routingPacket) => {
console.log(routingPacket);
store.dispatch(
updateLastInteraction({
id: routingPacket.packet.from,
src/core/slices/meshtasticSlice.ts
+45 -53
View File
@@ -9,13 +9,7 @@ export interface MessageWithAck {
}
export interface Chat {
id: number; //Channel or user id (for dm's)
messages: MessageWithAck[];
}
export interface ChannelData {
channel: Protobuf.Channel;
lastChatInterraction: Date;
lastInterraction: Date;
messages: MessageWithAck[];
}
@@ -27,6 +21,10 @@ interface CurrentPosition {
satsInView: number;
}
type ChatEntries = {
[key in number]: Chat;
};
interface Route {
from: number;
to: number;
@@ -46,7 +44,7 @@ export interface Node {
}
export interface Radio {
channels: ChannelData[];
channels: Protobuf.Channel[];
preferences: Protobuf.RadioConfig_UserPreferences;
hardware: Protobuf.MyNodeInfo;
}
@@ -59,7 +57,7 @@ interface MeshtasticState {
radio: Radio;
hostOverrideEnabled: boolean;
hostOverride: string;
chats: Chat[];
chats: ChatEntries;
}
const initialState: MeshtasticState = {
@@ -77,7 +75,7 @@ const initialState: MeshtasticState = {
hostOverrideEnabled:
localStorage.getItem('hostOverrideEnabled') === 'true' ?? false,
hostOverride: localStorage.getItem('hostOverride') ?? '',
chats: [],
chats: {},
};
export const meshtasticSlice = createSlice({
@@ -167,24 +165,16 @@ export const meshtasticSlice = createSlice({
addChannel: (state, action: PayloadAction<Protobuf.Channel>) => {
if (
state.radio.channels.findIndex(
(channel) => channel.channel.index === action.payload.index,
(channel) => channel.index === action.payload.index,
) !== -1
) {
state.radio.channels = state.radio.channels.map((channel) => {
return channel.channel.index === action.payload.index
? {
channel: action.payload,
lastChatInterraction: new Date(),
messages: channel.messages,
}
return channel.index === action.payload.index
? action.payload
: channel;
});
} else {
state.radio.channels.push({
channel: action.payload,
lastChatInterraction: new Date(),
messages: [],
});
state.radio.channels.push(action.payload);
}
},
addRoute: (state, action: PayloadAction<Route>) => {
@@ -195,27 +185,10 @@ export const meshtasticSlice = createSlice({
(route) =>
route.from === action.payload.from && route.to === action.payload.to,
);
console.log(exists);
if (exists === -1) {
node?.routes.push(action.payload);
}
// node?.routes.map((route) => {
// if (
// ) {
// node?.routes.push(action.payload);
// }
// });
// if (node) {
// node.routes = node.routes.map((route) => {
// return route.from === action.payload.from &&
// route.to === action.payload.to
// ? action.payload
// : route;
// });
// }
},
setPreferences: (
state,
@@ -224,21 +197,38 @@ export const meshtasticSlice = createSlice({
state.radio.preferences = action.payload;
},
addMessage: (state, action: PayloadAction<MessageWithAck>) => {
const channelIndex = state.radio.channels.findIndex(
(channel) =>
channel.channel.index === action.payload.message.packet.channel,
console.log(action.payload);
console.log(
`${action.payload.message.packet.from} -> ${action.payload.message.packet.to}`,
);
state.radio.channels[channelIndex].messages.push(action.payload);
state.radio.channels[channelIndex].lastChatInterraction = new Date();
state.chats[action.payload.message.packet.channel].lastInterraction =
new Date();
if (action.payload.message.packet.to === 0xffffffff) {
console.log('boradcast');
state.chats[action.payload.message.packet.channel].messages.push(
action.payload,
);
} else {
console.log('dm');
const dmIndex =
action.payload.message.packet.from === state.radio.hardware.myNodeNum
? action.payload.message.packet.to
: action.payload.message.packet.from;
state.chats[dmIndex].messages.push(action.payload);
}
},
ackMessage: (
state,
action: PayloadAction<{ channel: number; messageId: number }>,
action: PayloadAction<{ chatIndex: number; messageId: number }>,
) => {
const channelIndex = state.radio.channels.findIndex(
(channel) => channel.channel.index === action.payload.channel,
);
state.radio.channels[channelIndex].messages.map((message) => {
console.log(action.payload);
state.chats[action.payload.chatIndex].messages.map((message) => {
if (message.message.packet.id === action.payload.messageId) {
message.ack = true;
}
@@ -269,10 +259,11 @@ export const meshtasticSlice = createSlice({
// connection.disconnect();
}
},
addChat: (state, action: PayloadAction<Chat>) => {
if (state.chats.findIndex((chat) => chat.id === action.payload.id)) {
state.chats.push(action.payload);
}
addChat: (state, action: PayloadAction<number>) => {
state.chats[action.payload] = {
messages: [],
lastInterraction: new Date(),
};
},
resetState: (state) => {
state.deviceStatus = Types.DeviceStatusEnum.DEVICE_DISCONNECTED;
@@ -300,6 +291,7 @@ export const {
updateLastInteraction,
setHostOverrideEnabled,
setHostOverride,
addChat,
resetState,
} = meshtasticSlice.actions;
src/pages/Extensions/Info.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import React from 'react';
import { m } from 'framer-motion';
import JSONPretty from 'react-json-pretty';
import { useAppSelector } from '@app/hooks/useAppSelector.js';
import { useAppSelector } from '@app/hooks/useAppSelector';
import { Hashicon } from '@emeraldpay/hashicon-react';
export const Info = (): JSX.Element => {
src/pages/Map/MapContainer.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ export const MapContainer = (): JSX.Element => {
return (
<div className="relative flex h-full w-full">
<div className="absolute right-0 z-20 m-4 space-y-2 rounded-md border border-gray-300 bg-white p-2 shadow-md dark:border-gray-600 dark:bg-primaryDark">
<div className="absolute right-0 z-10 m-4 space-y-2 rounded-md border border-gray-300 bg-white p-2 shadow-md dark:border-gray-600 dark:bg-primaryDark">
<IconButton
active={mapState.style === 'Satellite'}
onClick={(): void => {
src/pages/Messages/ChannelChat.tsx
+111
View File
@@ -0,0 +1,111 @@
import React from 'react';
import { m } from 'framer-motion';
import { FiSettings } from 'react-icons/fi';
import { MdPublic } from 'react-icons/md';
import TimeAgo from 'timeago-react';
import { SidebarItem } from '@components/layout/Sidebar/SidebarItem';
import { Hashicon } from '@emeraldpay/hashicon-react';
import { useAppSelector } from '@hooks/useAppSelector';
import { IconButton, Tooltip } from '@meshtastic/components';
import { Protobuf } from '@meshtastic/meshtasticjs';
export interface ChannelChatProps {
channel: Protobuf.Channel;
selectedIndex: number;
setSelectedIndex: (index: number) => void;
}
export const ChannelChat = ({
channel,
selectedIndex,
setSelectedIndex,
}: ChannelChatProps): JSX.Element => {
const myNodeNum = useAppSelector(
(state) => state.meshtastic.radio.hardware,
).myNodeNum;
const nodes = useAppSelector((state) => state.meshtastic.nodes).filter(
(node) => node.number !== myNodeNum,
);
const chats = useAppSelector((state) => state.meshtastic.chats);
const channels = useAppSelector(
(state) => state.meshtastic.radio.channels,
).filter((ch) => ch.role !== Protobuf.Channel_Role.DISABLED);
return (
<SidebarItem
key={channel.index}
selected={channel.index === selectedIndex}
setSelected={(): void => {
setSelectedIndex(channel.index);
}}
actions={<IconButton icon={<FiSettings />} />}
>
<Tooltip
content={
channel.settings?.name.length
? channel.settings.name
: `CH: ${channel.index}`
}
>
<div className="flex h-8 w-8 rounded-full bg-gray-200 dark:bg-primaryDark dark:text-white">
<div className="m-auto">
{channel.role === Protobuf.Channel_Role.PRIMARY ? (
<MdPublic />
) : (
<p>
{channel.settings?.name.length
? channel.settings.name.substring(0, 3).toUpperCase()
: `CH: ${channel.index}`}
</p>
)}
</div>
</div>
</Tooltip>
{chats[channel.index]?.messages.length ? (
<>
<div className="mx-2 flex h-8">
{[
...new Set(
chats[channel.index]?.messages.flatMap(({ message }) => [
message.packet.from,
]),
),
]
.sort()
.map((nodeId) => {
return (
<Tooltip
key={nodeId}
content={
nodes.find((node) => node.number === nodeId)?.user
?.longName ?? 'UNK'
}
>
<div className="flex h-full">
<m.div
whileHover={{ scale: 1.1 }}
className="my-auto -ml-2"
>
<Hashicon value={nodeId.toString()} size={20} />
</m.div>
</div>
</Tooltip>
);
})}
</div>
<div className="my-auto ml-auto text-xs font-semibold dark:text-gray-400">
{chats[channel.index].messages.length ? (
<TimeAgo datetime={chats[channel.index].lastInterraction} />
) : (
<div>No messages</div>
)}
</div>
</>
) : (
<div className="my-auto dark:text-white">No messages</div>
)}
</SidebarItem>
);
};
src/pages/Messages/DmChat.tsx
+40
View File
@@ -0,0 +1,40 @@
import React from 'react';
import { FiSettings } from 'react-icons/fi';
import { SidebarItem } from '@components/layout/Sidebar/SidebarItem';
import type { Node } from '@core/slices/meshtasticSlice';
import { Hashicon } from '@emeraldpay/hashicon-react';
import { IconButton } from '@meshtastic/components';
export interface DmChatProps {
node: Node;
selectedIndex: number;
setSelectedIndex: (index: number) => void;
}
export const DmChat = ({
node,
selectedIndex,
setSelectedIndex,
}: DmChatProps): JSX.Element => {
return (
<SidebarItem
key={node.number}
selected={node.number === selectedIndex}
setSelected={(): void => {
setSelectedIndex(node.number);
}}
actions={<IconButton icon={<FiSettings />} />}
>
<div className="flex dark:text-white">
<div className="m-auto">
<Hashicon value={node.number.toString()} size={32} />
</div>
</div>
<div className="my-auto mr-auto font-semibold dark:text-white">
{node.user?.longName ?? 'Unknown'}
</div>
</SidebarItem>
);
};
src/pages/Messages/Message.tsx
+19 -9
View File
@@ -1,5 +1,7 @@
import type React from 'react';
import { FiClock } from 'react-icons/fi';
import type { Node } from '@app/core/slices/meshtasticSlice';
import { Hashicon } from '@emeraldpay/hashicon-react';
import { Tooltip } from '@meshtastic/components';
@@ -23,9 +25,11 @@ export const Message = ({
<div className="group mb-3 hover:bg-gray-200 dark:hover:bg-primaryDark">
{lastMsgSameUser ? (
<div
className={`mx-6 -mt-3 flex gap-2 ${lastMsgSameUser ? '' : 'py-1'}`}
className={`mx-6 -mt-3 flex justify-between ${
lastMsgSameUser ? '' : 'py-1'
}`}
>
<div className="flex">
<div className="flex gap-2">
<Tooltip content={rxTime.toString()}>
<div className="my-auto ml-auto w-8 pt-1 text-xs text-transparent dark:group-hover:text-gray-400">
{rxTime
@@ -37,14 +41,20 @@ export const Message = ({
.replace('PM', '')}
</div>
</Tooltip>
<div
className={`my-auto dark:text-gray-300 ${
ack ? '' : 'animate-pulse dark:text-gray-500'
}`}
>
{message}
</div>
</div>
<div
className={`my-auto dark:text-gray-300 ${
ack ? '' : 'animate-pulse dark:text-gray-500'
}`}
>
{message}
</div>
<Tooltip content="Response time">
<div className="flex gap-1 pt-1 text-xs text-transparent dark:group-hover:text-gray-400">
<FiClock className="mt-0.5" />
<div>25s</div>
</div>
</Tooltip>
</div>
) : (
<div className="mx-6 flex gap-2">
src/pages/Messages/MessageBar.tsx
+23 -8
View File
@@ -7,23 +7,38 @@ import { useAppSelector } from '@hooks/useAppSelector';
import { Input } from '@meshtastic/components';
export interface MessageBarProps {
channelIndex: number;
chatIndex: number;
}
export const MessageBar = ({ channelIndex }: MessageBarProps): JSX.Element => {
export const MessageBar = ({ chatIndex }: MessageBarProps): JSX.Element => {
const dispatch = useAppDispatch();
const ready = useAppSelector((state) => state.meshtastic.ready);
const meshtasticState = useAppSelector((state) => state.meshtastic);
const [isChannel, setIsChannel] = React.useState(false);
React.useState(() => {
setIsChannel(
meshtasticState.radio.channels.findIndex(
(channel) => channel.index === chatIndex,
) !== -1,
);
});
const [currentMessage, setCurrentMessage] = React.useState('');
const sendMessage = (): void => {
if (ready) {
if (meshtasticState.ready) {
void connection.sendText(
currentMessage,
undefined,
isChannel ? undefined : chatIndex,
true,
channelIndex--,
isChannel ? chatIndex-- : 0,
(id) => {
dispatch(ackMessage({ channel: channelIndex--, messageId: id }));
dispatch(
ackMessage({
chatIndex: isChannel ? chatIndex-- : chatIndex,
messageId: id,
}),
);
return Promise.resolve();
},
@@ -45,7 +60,7 @@ export const MessageBar = ({ channelIndex }: MessageBarProps): JSX.Element => {
type="text"
minLength={2}
placeholder="Enter Message"
disabled={!ready}
disabled={!meshtasticState.ready}
value={currentMessage}
onChange={(e): void => {
setCurrentMessage(e.target.value);
src/pages/Messages/index.tsx
+51 -110
View File
@@ -1,27 +1,30 @@
import React from 'react';
import { m } from 'framer-motion';
import { FiHash, FiMessageCircle, FiSettings } from 'react-icons/fi';
import { MdPublic } from 'react-icons/md';
import TimeAgo from 'timeago-react';
import { FiHash, FiMessageCircle } from 'react-icons/fi';
import { Layout } from '@app/components/layout';
import { SidebarItem } from '@components/layout/Sidebar/SidebarItem';
import { Hashicon } from '@emeraldpay/hashicon-react';
import { useAppSelector } from '@hooks/useAppSelector';
import { IconButton, Tooltip } from '@meshtastic/components';
import { IconButton } from '@meshtastic/components';
import { Protobuf } from '@meshtastic/meshtasticjs';
import { ChannelChat } from './ChannelChat';
import { DmChat } from './DmChat';
import { Message } from './Message';
import { MessageBar } from './MessageBar';
export const Messages = (): JSX.Element => {
const [selectedChatIndex, setSelectedChatIndex] = React.useState<number>(0);
const chatRef = React.useRef<HTMLDivElement>(null);
const myNodeNum = useAppSelector(
(state) => state.meshtastic.radio.hardware,
).myNodeNum;
const nodes = useAppSelector((state) => state.meshtastic.nodes);
const chats = useAppSelector((state) => state.meshtastic.chats);
const channels = useAppSelector(
(state) => state.meshtastic.radio.channels,
).filter((ch) => ch.channel.role !== Protobuf.Channel_Role.DISABLED);
const [channelIndex, setChannelIndex] = React.useState(0);
const chatRef = React.useRef<HTMLDivElement>(null);
).filter((ch) => ch.role !== Protobuf.Channel_Role.DISABLED);
React.useEffect(() => {
if (chatRef.current) {
@@ -35,92 +38,29 @@ export const Messages = (): JSX.Element => {
icon={<FiMessageCircle />}
sidebarContents={
<div className="flex flex-col gap-2">
{nodes.map((node) => (
<SidebarItem
key={node.number}
selected={false}
setSelected={(): void => {
void Promise.resolve();
}}
actions={<IconButton icon={<FiSettings />} />}
>
<div className="flex dark:text-white">
<div className="m-auto">
<Hashicon value={node.number.toString()} size={32} />
</div>
</div>
<div className="my-auto mr-auto font-semibold dark:text-white">
{node.user?.longName ?? 'Unknown'}
</div>
</SidebarItem>
))}
<div className="mx-2 rounded-md border-2 border-gray-300 dark:border-gray-600" />
{channels.map((channel) => (
<SidebarItem
key={channel.channel.index}
selected={channelIndex === channel.channel.index}
setSelected={(): void => {
setChannelIndex(channel.channel.index);
}}
actions={<IconButton icon={<FiSettings />} />}
>
<div className="flex h-8 w-8 rounded-full bg-gray-200 dark:bg-primaryDark dark:text-white">
<div className="m-auto">
{channel.channel.role === Protobuf.Channel_Role.PRIMARY ? (
<MdPublic />
) : (
<p>
{channel.channel.settings?.name.length
? channel.channel.settings.name
.substring(0, 3)
.toUpperCase()
: `CH: ${channel.channel.index}`}
</p>
)}
</div>
</div>
{channel.messages.length ? (
<>
<div className="mx-2 flex h-8">
{[
...new Set(
channel.messages.flatMap(({ message }) => [
message.packet.from,
]),
),
]
.sort()
.map((nodeId) => {
return (
<Tooltip
key={nodeId}
content={
nodes.find((node) => node.number === nodeId)?.user
?.longName ?? 'UNK'
}
>
<div className="flex h-full">
<m.div
whileHover={{ scale: 1.1 }}
className="my-auto -ml-2"
>
<Hashicon value={nodeId.toString()} size={20} />
</m.div>
</div>
</Tooltip>
);
})}
</div>
<TimeAgo
className="my-auto ml-auto text-xs font-semibold dark:text-gray-400"
datetime={channel.lastChatInterraction}
/>
</>
) : (
<div className="my-auto dark:text-white">No messages</div>
)}
</SidebarItem>
))}
{nodes
.filter((node) => node.number !== myNodeNum)
.map((node) => (
<DmChat
key={node.number}
node={node}
selectedIndex={selectedChatIndex}
setSelectedIndex={setSelectedChatIndex}
/>
))}
{nodes.length !== 0 && channels.length !== 0 && (
<div className="mx-2 rounded-md border-2 border-gray-300 dark:border-gray-600" />
)}
{channels
.filter((channel) => channel.settings?.name !== 'admin')
.map((channel) => (
<ChannelChat
key={channel.index}
channel={channel}
selectedIndex={selectedChatIndex}
setSelectedIndex={setSelectedChatIndex}
/>
))}
</div>
}
>
@@ -128,14 +68,13 @@ export const Messages = (): JSX.Element => {
<div className="flex w-full justify-between border-b border-gray-300 px-2 dark:border-gray-600 dark:text-gray-300">
<div className="my-auto flex gap-2 py-2 text-sm">
<IconButton icon={<FiHash className="h-4 w-4" />} />
<div className="my-auto">
{channels[channelIndex]?.channel.settings?.name.length
? channels[channelIndex]?.channel.settings?.name
: channels[channelIndex]?.channel.role ===
Protobuf.Channel_Role.PRIMARY
{/* <div className="my-auto">
{channels[channelIndex]?.settings?.name.length
? channels[channelIndex]?.settings?.name
: channels[channelIndex]?.role === Protobuf.Channel_Role.PRIMARY
? 'Primary'
: `Channel: ${channels[channelIndex]?.channel.index}`}
</div>
: `Channel: ${channels[channelIndex]?.index}`}
</div> */}
</div>
</div>
<div
@@ -143,7 +82,7 @@ export const Messages = (): JSX.Element => {
className="flex flex-grow flex-col space-y-2 overflow-y-auto border-b border-gray-300 bg-white pb-6 dark:border-gray-600 dark:bg-secondaryDark"
>
<div className="mt-auto">
{channels[channelIndex]?.messages.map((message, index) => (
{chats[selectedChatIndex]?.messages.map((message, index) => (
<Message
key={index}
message={message.message.data}
@@ -152,17 +91,19 @@ export const Messages = (): JSX.Element => {
lastMsgSameUser={
index === 0
? false
: channels[channelIndex]?.messages[index - 1].message.packet
.from === message.message.packet.from
: chats[selectedChatIndex].messages[index - 1].message
.packet.from === message.message.packet.from
}
sender={nodes.find(
(node) => node.number === message.message.packet.from,
)}
sender={nodes.find((node) => {
console.log(message);
return node.number === message.message.packet.from;
})}
/>
))}
</div>
</div>
<MessageBar channelIndex={channelIndex} />
<MessageBar chatIndex={selectedChatIndex} />
</div>
</Layout>
);
src/pages/Nodes/NodeCard.tsx
+54 -52
View File
@@ -52,59 +52,61 @@ export const NodeCard = ({
);
}, [node.currentPosition]);
return (
<SidebarItem
selected={selected}
setSelected={setSelected}
actions={
<>
<IconButton
disabled={PositionConfidence === 'none'}
onClick={(e): void => {
e.stopPropagation();
setSelected();
if (PositionConfidence !== 'none' && node.currentPosition) {
map?.flyTo({
center: new mapbox.LngLat(
node.currentPosition.longitudeI / 1e7,
node.currentPosition.latitudeI / 1e7,
),
zoom: 16,
});
<>
<SidebarItem
selected={selected}
setSelected={setSelected}
actions={
<>
<IconButton
disabled={PositionConfidence === 'none'}
onClick={(e): void => {
e.stopPropagation();
setSelected();
if (PositionConfidence !== 'none' && node.currentPosition) {
map?.flyTo({
center: new mapbox.LngLat(
node.currentPosition.longitudeI / 1e7,
node.currentPosition.latitudeI / 1e7,
),
zoom: 16,
});
}
}}
icon={
PositionConfidence === 'high' ? (
<MdGpsFixed />
) : PositionConfidence === 'low' ? (
<MdGpsNotFixed />
) : (
<MdGpsOff />
)
}
}}
icon={
PositionConfidence === 'high' ? (
<MdGpsFixed />
) : PositionConfidence === 'low' ? (
<MdGpsNotFixed />
) : (
<MdGpsOff />
)
}
/>
<IconButton
onClick={(e): void => {
e.stopPropagation();
setInfoOpen(true);
}}
icon={<FiAlignLeft />}
/>
</>
}
>
<div className="flex dark:text-white">
<div className="m-auto">
<Hashicon value={node.number.toString()} size={32} />
/>
<IconButton
onClick={(e): void => {
e.stopPropagation();
setInfoOpen(true);
}}
icon={<FiAlignLeft />}
/>
</>
}
>
<div className="flex dark:text-white">
<div className="m-auto">
<Hashicon value={node.number.toString()} size={32} />
</div>
</div>
</div>
<div className="my-auto mr-auto text-xs font-semibold dark:text-gray-400">
{node.lastHeard.getTime()
? node.lastHeard.toLocaleTimeString(undefined, {
hour: '2-digit',
minute: '2-digit',
})
: 'Never'}
</div>
<div className="my-auto mr-auto text-xs font-semibold dark:text-gray-400">
{node.lastHeard.getTime()
? node.lastHeard.toLocaleTimeString(undefined, {
hour: '2-digit',
minute: '2-digit',
})
: 'Never'}
</div>
</SidebarItem>
<SidebarOverlay
title={`Node ${node.user?.longName ?? 'UNK'} `}
open={infoOpen}
@@ -134,6 +136,6 @@ export const NodeCard = ({
</>
</CollapsibleSection>
</SidebarOverlay>
</SidebarItem>
</>
);
};