style: prettify json test value

apps/next/src/app/dashboard/layout.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+
+import { MqttProvider } from "@ubus/mqtt";
+
+interface DashboardLayoutProps {
+  children: ReactNode | JSX.Element;
+}
+
+const DashboardLayout = (props: DashboardLayoutProps) => {
+  return (
+    <MqttProvider>
+      <main className="h-full w-full border">{props.children}</main>
+    </MqttProvider>
+  );
+};
+
+export default DashboardLayout;

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { MqttProvider, useBusLocationQuery } from "@ubus/mqtt";
+import { useBusLocationQuery } from "@ubus/mqtt";
 
 interface BusLocationPageProps {
   params: {
@@ -10,31 +10,31 @@ interface BusLocationPageProps {
 
 const BusLocationPage = (props: BusLocationPageProps) => {
   return (
-    <MqttProvider>
-      <BusLocationContent {...props} />
-    </MqttProvider>
+    <div className="grid h-dvh place-content-center place-items-center gap-4">
+      <h1>Bus Location</h1>
+      <Location busId={props.params.busId} />
+    </div>
   );
 };
 
-const BusLocationContent = (props: BusLocationPageProps) => {
-  const { data: location, error } = useBusLocationQuery(props.params.busId);
+export const Location = (props: { busId: string }) => {
+  const { data: location, isLoading, error } = useBusLocationQuery(props.busId);
 
-  // if (isLoading) return <p>Loading...</p>;
+  if (isLoading) return <p>Waiting for bus location...</p>;
   if (error)
     return (
       <p className="grid h-dvh place-content-center place-items-center gap-4 text-destructive">
         An error has occurred: {error.message}
       </p>
     );
 
-  return (
-    <div className="grid h-dvh place-content-center place-items-center gap-4">
-      <h1>Bus Location</h1>
-      <p>
-        {location ? `Current Location: ${location}` : "Waiting for location..."}
-      </p>
-    </div>
-  );
+  if (location) {
+    return (
+      <div className="rounded-sm bg-destructive p-4 text-destructive-foreground">
+        <pre>{JSON.stringify(JSON.parse(location), null, 2)}</pre>
+      </div>
+    );
+  }
 };
 
 export default BusLocationPage;

packages/mqtt/src/provider.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";