From e4b6b9b86a181caf1b44f1106ca09e5cb33404a0 Mon Sep 17 00:00:00 2001
From: NexVeridian <NexVeridian@gmail.com>
Date: Sun, 18 Feb 2024 04:19:28 -0800
Subject: [PATCH] stats loading

---
 docker-compose.yml          |  6 +++---
 src/app/create/db.tsx       |  2 --
 src/app/create/schema.tsx   |  1 -
 src/app/stats/db.tsx        |  6 +++++-
 src/app/stats/loading.tsx   |  6 +-----
 src/app/stats/page.tsx      | 27 ++++++++++++++++++++-------
 src/components/db-utils.tsx |  2 +-
 7 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 6644956..80569f8 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -9,7 +9,7 @@ services:
         depends_on:
             - surrealdb
         networks:
-            - surrealdb
+            - surrealdb_network
 
     surrealdb:
         container_name: surrealdb
@@ -34,10 +34,10 @@ services:
         volumes:
             - ./data:/data
         networks:
-            - surrealdb
+            - surrealdb_network
 
 volumes:
     data:
 
 networks:
-    surrealdb:
+    surrealdb_network:
diff --git a/src/app/create/db.tsx b/src/app/create/db.tsx
index 4a76e96..3ab2ca8 100644
--- a/src/app/create/db.tsx
+++ b/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) {
diff --git a/src/app/create/schema.tsx b/src/app/create/schema.tsx
index 4e099f9..06f4a12 100644
--- a/src/app/create/schema.tsx
+++ b/src/app/create/schema.tsx
@@ -1,4 +1,3 @@
-"use server";
 import { z } from "zod";
 
 export const formSchema = z.object({
diff --git a/src/app/stats/db.tsx b/src/app/stats/db.tsx
index 6379895..d743da8 100644
--- a/src/app/stats/db.tsx
+++ b/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 [];
   }
 }
diff --git a/src/app/stats/loading.tsx b/src/app/stats/loading.tsx
index 30e8fe6..75f4650 100644
--- a/src/app/stats/loading.tsx
+++ b/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>
diff --git a/src/app/stats/page.tsx b/src/app/stats/page.tsx
index 590ad57..e5b96e7 100644
--- a/src/app/stats/page.tsx
+++ b/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 */}
diff --git a/src/components/db-utils.tsx b/src/components/db-utils.tsx
index 5ff5a04..d6507fb 100644
--- a/src/components/db-utils.tsx
+++ b/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: {