DM's and layout fixes

2022-02-13 16:38:39 +11:00
parent 0245a95fa9
commit 1a4efc17d7
20 changed files with 964 additions and 817 deletions
@@ -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>
+  );
+};