add: experimental persist data

apps/next/src/app/dashboard/test/[busId]/page.tsx

@@ -18,28 +18,20 @@ const BusLocationPage = (props: BusLocationPageProps) => {
 };
 
 export const Location = (props: { busId: string }) => {
-  const {
-    data: location,
-    isLoading,
-    isError,
-    error,
-  } = useBusLocationQuery(props.busId);
+  const { data: location, isError, error } = useBusLocationQuery(props.busId);
 
-  if (isLoading) return <p>Waiting for bus location...</p>;
   if (isError)
     return (
       <p className="grid h-dvh place-content-center place-items-center gap-4 text-destructive">
         An error has occurred: {error.message}
       </p>
     );
 
-  if (location) {
-    return (
-      <div className="max-w-[90dvw] overflow-x-scroll rounded-sm bg-destructive p-4 text-destructive-foreground">
-        <pre>{JSON.stringify(JSON.parse(location), null, 2)}</pre>
-      </div>
-    );
-  }
+  return (
+    <div className="max-w-[90dvw] overflow-x-scroll rounded-sm bg-destructive p-4 text-destructive-foreground">
+      <pre>{JSON.stringify(location)}</pre>
+    </div>
+  );
 };
 
 export default BusLocationPage;

packages/mqtt/package.json

@@ -27,6 +27,8 @@
   "dependencies": {
     "@tanstack/react-query": "^5.59.16",
     "mqtt": "^5.10.1",
-    "react": "^18.3.1"
+    "react": "^18.3.1",
+    "superjson": "2.2.1",
+    "zustand": "^5.0.1"
   }
 }

packages/mqtt/src/index.ts

@@ -2,3 +2,4 @@ export * from "./client";
 export * from "./provider";
 export * from "./service";
 export * from "./topics";
+export type * from "./types";

packages/mqtt/src/service.ts

@@ -1,18 +1,24 @@
 import { useQuery } from "@tanstack/react-query";
+import SuperJSON from "superjson";
 
+import type { BusData } from "./types";
 import { mqttClient as client } from "./client";
+import { useMqttStore } from "./store";
 import { getBusLocationTopic } from "./topics";
 
 export const useBusLocationQuery = (busId: string) => {
   const topic = getBusLocationTopic(busId);
+  const data = useMqttStore.getState().data;
+  const setData = useMqttStore.getState().setData;
 
   return useQuery({
     queryKey: [topic],
     queryFn: () => {
-      return new Promise<string>((resolve, reject) => {
+      return new Promise<BusData>((resolve, reject) => {
         client.on("message", (receivedTopic, payload) => {
           if (receivedTopic === topic) {
-            resolve(payload.toString());
+            setData(topic, SuperJSON.parse<BusData>(payload.toString()));
+            resolve(SuperJSON.parse<BusData>(payload.toString()));
           }
         });
 
@@ -27,6 +33,7 @@ export const useBusLocationQuery = (busId: string) => {
         });
       });
     },
+    initialData: data,
     refetchInterval: 1000 * 3,
     staleTime: Infinity,
   });

packages/mqtt/src/store.ts

@@ -0,0 +1,31 @@
+import { persist } from "zustand/middleware";
+import { createStore } from "zustand/vanilla";
+
+import type { BusData } from "./types";
+
+interface MqttStore {
+  data: BusData;
+  setData: (topic: string, data: BusData) => void;
+}
+
+export const useMqttStore = createStore<MqttStore>()(
+  persist(
+    (set) => ({
+      data: {
+        bus_id: "",
+        latitude: "",
+        longitude: "",
+        timestamp: "",
+        heading: "",
+        speed: "",
+      },
+      setData: (topic, data) =>
+        set((state) => ({
+          data: { ...state.data, [topic]: data },
+        })),
+    }),
+    {
+      name: "bus-data",
+    },
+  ),
+);

packages/mqtt/src/types.ts

@@ -0,0 +1,8 @@
+export interface BusData {
+  bus_id: string;
+  latitude: string;
+  longitude: string;
+  timestamp: string;
+  speed: string;
+  heading: string;
+}