stats loading

src/app/create/db.tsx

@@ -11,7 +11,6 @@ export async function querydb(prevState: any, formData: FormData) {
 		const long_url = values.data.url;
 
 		let db = await initConnection();
-		console.log(db);
 		let url = await db.query(`
 		create url:[rand::string(8)] CONTENT {
 				long_url: string::replace(string::replace($long_url, "https://", ""), "http://", ""),
@@ -23,7 +22,6 @@ export async function querydb(prevState: any, formData: FormData) {
 
 		// @ts-ignore
 		url = url[0][0].id;
-		console.log("URL", url);
 
 		return { url: url };
 	} catch (e) {

src/app/create/schema.tsx

@@ -1,4 +1,3 @@
-"use server";
 import { z } from "zod";
 
 export const formSchema = z.object({

src/app/stats/db.tsx

@@ -9,8 +9,12 @@ export async function querydb() {
 		order by clicks desc
 		limit 50;
 		`);
+
+    // @ts-ignore
+    stats = stats[0];
+
     return stats;
   } catch (e) {
-    return;
+    return [];
   }
 }

src/app/stats/loading.tsx

@@ -6,11 +6,7 @@ import {
   CardTitle
 } from "@/components/ui/card";
 
-export default function GlobalError({
-  error,
-}: {
-  error: Error & { digest?: string }
-}) {
+export default function Loading() {
   return (
     <CardGrid max_rows={1}>
       <Card>

src/app/stats/page.tsx

@@ -1,16 +1,26 @@
-"use server";
+"use client";
 import CardGrid from "@/components/card-grid";
 import { Card } from "@/components/ui/card";
+import { useEffect, useState } from "react";
 import { columns } from "./columns";
 import { DataTable } from "./data-table";
 import { querydb } from "./db";
+import Loading from "./loading";
 
-export default async function StatsPage() {
-  let data = await querydb();
-  // @ts-ignore
-  data = data[0];
+export default function StatsPage() {
+  let [data, setData] = useState([]);
 
-  if (data !== undefined) {
+  useEffect(() => {
+    const fetchData = async () => {
+      const result = await querydb();
+      console.log(result);
+      // @ts-ignore
+      setData(result);
+    };
+    fetchData();
+  }, []);
+
+  if (data.length !== 0 && data !== undefined && data !== null) {
     const formatDate = (dateString: string | number | Date) => {
       const date = new Date(dateString);
       const day = String(date.getDate()).padStart(2, '0');
@@ -19,6 +29,7 @@ export default async function StatsPage() {
       return `${month}/${day}/${year}`;
     };
 
+    // @ts-ignore
     data = data.map(item => ({
       // @ts-ignore
       ...item,
@@ -31,7 +42,9 @@ export default async function StatsPage() {
     }));
   }
 
-  return (
+  return data.length === 0 ? (
+    <Loading />
+  ) : (
     <CardGrid max_rows={1}>
       <Card>
         {/* @ts-ignore */}

src/components/db-utils.tsx

@@ -5,7 +5,7 @@ const db = new Surreal();
 
 export async function initConnection(): Promise<Surreal> {
   try {
-    db.connect("http://" + process.env.DB_URL_PORT + "/rpc", {
+    db.connect("ws://" + process.env.DB_URL_PORT + "/rpc", {
       namespace: "url",
       database: "url",
       auth: {