From 72bd70b4b7a6a88000ec761412e543441dca707c Mon Sep 17 00:00:00 2001
From: saeidex <ebrahim.khalil.nayeem@gmail.com>
Date: Tue, 5 Nov 2024 14:05:18 +0600
Subject: [PATCH] style: prettify json test value

---
 apps/next/src/app/dashboard/layout.tsx        | 17 +++++++++++
 .../src/app/dashboard/test/[busId]/page.tsx   | 30 +++++++++----------
 packages/mqtt/src/provider.ts                 |  2 ++
 3 files changed, 34 insertions(+), 15 deletions(-)
 create mode 100644 apps/next/src/app/dashboard/layout.tsx

diff --git a/apps/next/src/app/dashboard/layout.tsx b/apps/next/src/app/dashboard/layout.tsx
new file mode 100644
index 0000000..dfa63aa
--- /dev/null
+++ b/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;
diff --git a/apps/next/src/app/dashboard/test/[busId]/page.tsx b/apps/next/src/app/dashboard/test/[busId]/page.tsx
index c8d1fda..f4d88c0 100644
--- a/apps/next/src/app/dashboard/test/[busId]/page.tsx
+++ b/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,16 +10,17 @@ 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">
@@ -27,14 +28,13 @@ const BusLocationContent = (props: BusLocationPageProps) => {
       </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;
diff --git a/packages/mqtt/src/provider.ts b/packages/mqtt/src/provider.ts
index 60109da..ea375f0 100644
--- a/packages/mqtt/src/provider.ts
+++ b/packages/mqtt/src/provider.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";