Sacha Weatherstone
4 years ago
20 changed files with 952 additions and 805 deletions
File diff suppressed because it is too large
@ -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> |
|||
); |
|||
}; |
|||
@ -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> |
|||
); |
|||
}; |
|||
Loading…
Reference in new issue