Move to waypoints from location

src/pages/Messages/ChannelChat.tsx

@@ -45,19 +45,15 @@ export const ChannelChat = ({ channel }: ChannelChatProps): JSX.Element => {
         {channel.messages.map((message, index) => (
           <Message
             key={index}
-            messagePacket={message.message}
-            ack={message.ack}
-            rxTime={message.received}
+            message={message}
             lastMsgSameUser={
               index === 0
                 ? false
-                : channel.messages[index - 1].message.packet.from ===
-                  message.message.packet.from
+                : channel.messages[index - 1].packet.from ===
+                  message.packet.from
             }
             sender={
-              nodes.find(
-                (node) => node.data.num === message.message.packet.from
-              )?.data
+              nodes.find((node) => node.data.num === message.packet.from)?.data
             }
           />
         ))}

src/pages/Messages/Message.tsx

@@ -10,50 +10,47 @@ import {
   Text,
 } from "evergreen-ui";
 
+import type { AllMessageTypes } from "@app/core/stores/deviceStore.js";
+import { WaypointMessage } from "@app/pages/Messages/WaypointMessage.js";
 import { useDevice } from "@core/providers/useDevice.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
-import type { Protobuf, Types } from "@meshtastic/meshtasticjs";
-import { LocationMessage } from "@pages/Messages/LocationMessage.js";
+import type { Protobuf } from "@meshtastic/meshtasticjs";
 
 export interface MessageProps {
   lastMsgSameUser: boolean;
-  messagePacket: Types.MessagePacket;
-  ack: boolean;
-  rxTime: Date;
+  message: AllMessageTypes;
   sender?: Protobuf.NodeInfo;
 }
 
 export const Message = ({
   lastMsgSameUser,
-  messagePacket,
-  ack,
-  rxTime,
+  message,
   sender,
 }: MessageProps): JSX.Element => {
   const { setPeerInfoOpen, setActivePeer } = useDevice();
 
   const openPeer = (): void => {
-    setActivePeer(messagePacket.packet.from);
+    setActivePeer(message.packet.from);
     setPeerInfoOpen(true);
   };
 
   return lastMsgSameUser ? (
     <Pane display="flex" marginLeft={majorScale(3)}>
-      {ack ? (
+      {message.ack ? (
         <FullCircleIcon color="#9c9fab" marginY="auto" size={8} />
       ) : (
         <CircleIcon color="#9c9fab" marginY="auto" size={8} />
       )}
-      {messagePacket.location ? (
-        <LocationMessage location={messagePacket.location} />
+      {"waypointID" in message ? (
+        <WaypointMessage waypointID={message.waypointID} />
       ) : (
         <Text
-          color={ack ? "#474d66" : "#9c9fab"}
+          color={message.ack ? "#474d66" : "#9c9fab"}
           marginLeft={majorScale(2)}
           paddingLeft={majorScale(1)}
           borderLeft="3px solid #e6e6e6"
         >
-          {messagePacket.text}
+          {message.text}
         </Text>
       )}
     </Pane>
@@ -67,28 +64,28 @@ export const Message = ({
           {sender?.user?.longName ?? "UNK"}
         </Strong>
         <Small>
-          {rxTime.toLocaleTimeString(undefined, {
+          {new Date(message.packet.rxTime).toLocaleTimeString(undefined, {
             hour: "2-digit",
             minute: "2-digit",
           })}
         </Small>
       </Pane>
       <Pane display="flex" marginLeft={majorScale(1)}>
-        {ack ? (
+        {message.ack ? (
           <FullCircleIcon color="#9c9fab" marginY="auto" size={8} />
         ) : (
           <CircleIcon color="#9c9fab" marginY="auto" size={8} />
         )}
-        {messagePacket.location ? (
-          <LocationMessage location={messagePacket.location} />
+        {"waypointID" in message ? (
+          <WaypointMessage waypointID={message.waypointID} />
         ) : (
           <Text
-            color={ack ? "#474d66" : "#9c9fab"}
+            color={message.ack ? "#474d66" : "#9c9fab"}
             marginLeft={majorScale(2)}
             paddingLeft={majorScale(1)}
             borderLeft="3px solid #e6e6e6"
           >
-            {messagePacket.text}
+            {message.text}
           </Text>
         )}
       </Pane>

src/pages/Messages/NewLocationMessage.tsx

@@ -37,8 +37,8 @@ export const NewLocationMessage = (): JSX.Element => {
         <Button
           width="100%"
           onClick={() => {
-            void connection?.sendLocation(
-              Protobuf.Location.create({
+            void connection?.sendWaypoint(
+              Protobuf.Waypoint.create({
                 latitudeI: Math.floor(3.89103 * 1e7),
                 longitudeI: Math.floor(105.87005 * 1e7),
                 name: "TEST",

src/pages/Messages/WaypointMessage.tsx

@@ -10,16 +10,19 @@ import {
   Text,
 } from "evergreen-ui";
 
+import { useDevice } from "@app/core/providers/useDevice.js";
 import { toMGRS } from "@core/utils/toMGRS.js";
-import type { Protobuf } from "@meshtastic/meshtasticjs";
 
-export interface LocationMessageProps {
-  location: Protobuf.Location;
+export interface WaypointMessageProps {
+  waypointID: number;
 }
 
-export const LocationMessage = ({
-  location,
-}: LocationMessageProps): JSX.Element => {
+export const WaypointMessage = ({
+  waypointID,
+}: WaypointMessageProps): JSX.Element => {
+  const { waypoints } = useDevice();
+  const waypoint = waypoints.find((wp) => wp.id === waypointID);
+
   return (
     <Pane
       marginLeft={majorScale(2)}
@@ -36,12 +39,12 @@ export const LocationMessage = ({
         <LocateIcon color="#474d66" marginY="auto" />
         <Pane>
           <Pane display="flex" gap={majorScale(1)}>
-            <Heading>{location.name}</Heading>
+            <Heading>{waypoint?.name}</Heading>
             <Text color="orange">
-              {toMGRS(location.latitudeI, location.longitudeI)}
+              {toMGRS(waypoint?.latitudeI, waypoint?.longitudeI)}
             </Text>
           </Pane>
-          <Small>{location.description}</Small>
+          <Small>{waypoint?.description}</Small>
         </Pane>
       </Pane>
     </Pane>