db create

src/app/create/db.tsx

@@ -0,0 +1,19 @@
+"use server";
+import { z } from "zod";
+import { formSchema } from "./page";
+
+export async function querydb(values: z.infer<typeof formSchema>) {
+	// let db = await initConnection();
+	// let url = await db.query(`
+	// create url:[rand::string(8)] CONTENT {
+	// 		long_url: string::replace($long_url, "http://", "https://"),
+	// 		clicks: 0,
+	// 		date_added: time::now(),
+	// 		date_accessed: <future> { time::now() }
+	// } return id[0];
+	// `, { long_url: values.url });
+	let url = "test";
+
+	console.log(values.url, url)
+	return url;
+}

src/app/create/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -16,18 +16,23 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useFormState } from "react-dom";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
+import { querydb } from "./db";
 
-const formSchema = z.object({
+export const formSchema = z.object({
   url: z.string().min(4,
     { message: "The URL must be at least 4 characters long" }
   ).max(100
     , { message: "The URL must be at most 100 characters long" }),
-})
+});
+const initialState = {
+  message: null,
+}
 
 export default function Home() {
-
+  const [state, formAction] = useFormState(querydb, initialState);
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -35,10 +40,6 @@ export default function Home() {
     },
   })
 
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    console.log(values)
-  }
-
   return (
     <div className="hidden items-start justify-center gap-6 rounded-lg p-8 md:grid lg:grid-cols-1 xl:grid-cols-1">
       <Card>
@@ -47,15 +48,15 @@ export default function Home() {
         </CardHeader>
         <CardContent>
           <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <form action={form.handleSubmit(querydb)} className="space-y-8">
               <FormField
                 control={form.control}
                 name="url"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Enter url</FormLabel>
+                    <FormLabel>Enter a url</FormLabel>
                     <FormControl>
-                      <Input placeholder="shadcn" {...field} />
+                      <Input placeholder="nexveridian.com" {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -64,6 +65,7 @@ export default function Home() {
               <Button type="submit">Submit</Button>
             </form>
           </Form>
+
         </CardContent>
       </Card>
     </div >

src/app/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 import {
   Card,
   CardHeader,

src/components/dark-mode-toggle.tsx

@@ -1,4 +1,4 @@
-"use client";
+"use client";;
 import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
 import { useTheme } from "next-themes";
 

src/components/db-utils.tsx

@@ -0,0 +1,23 @@
+import { Surreal } from 'surrealdb.js';
+require('dotenv');
+
+const db = new Surreal();
+
+export async function initConnection(): Promise<Surreal> {
+	try {
+		db.connect(process.env.DB_PORT + '/rpc', {
+			namespace: 'url',
+			database: 'url',
+
+			auth: {
+				username: process.env.DB_USER,
+				password: process.env.DB_PASSWORD,
+				scope: '',
+			},
+		});
+	} catch (e) {
+		console.error('ERROR', e);
+	}
+
+	return db;
+}

src/components/theme-provider.tsx

@@ -1,4 +1,4 @@
-"use client";
+"use client";;
 import { ThemeProvider as NextThemesProvider } from "next-themes";
 import { type ThemeProviderProps } from "next-themes/dist/types";