From 26ae83faac562e1fc694a5b025b27c0f76fbab3b Mon Sep 17 00:00:00 2001
From: Don Strawsburg <don@goforward.group>
Date: Sat, 18 Jan 2025 23:59:08 -0500
Subject: [PATCH] userProfile dynamic routes working

---
 src/actions/userActions.ts                | 13 +++---
 src/app/{userProfile => }/[uuid].tsx      | 31 ++++++++------
 src/app/userProfile/[uuid]/page.tsx       | 52 +++++++++++++++++++++++
 src/components/admin/UsersTable/index.tsx |  7 +--
 4 files changed, 78 insertions(+), 25 deletions(-)
 rename src/app/{userProfile => }/[uuid].tsx (73%)
 create mode 100644 src/app/userProfile/[uuid]/page.tsx

diff --git a/src/actions/userActions.ts b/src/actions/userActions.ts
index 188c284..296d5bd 100644
--- a/src/actions/userActions.ts
+++ b/src/actions/userActions.ts
@@ -1,4 +1,4 @@
-"use server";
+'use server';
 import { eq, not , asc} from "drizzle-orm";
 import { revalidatePath } from "next/cache";
 import { db } from "@db/index";
@@ -8,15 +8,18 @@ export const getData = async () => {
   const data = await db.select().from(users).orderBy(asc(users.last_name));
   return data;
 };
-
-export const getUserByEmail = async (email:string) => {
-  const data = await db.select().from(users).where(eq(users.email, email));
+export const getAllUsers = async () => {
+  const data = await db.select().from(users).orderBy(asc(users.last_name));
   return data;
 };
 
+export const getUserByEmail = async (email:string) => { 
+  return getData();
+};
+
 export const getUserByUUID = async (uuid:string) => {
   const data = await db.select().from(users).where(eq(users.uuid, uuid));
-  return data;
+  return data[0];
 };
 
 export const addUser = async ( first_name:  string, last_name: string, username: string,  email: string, password_hash : string) => {
diff --git a/src/app/userProfile/[uuid].tsx b/src/app/[uuid].tsx
similarity index 73%
rename from src/app/userProfile/[uuid].tsx
rename to src/app/[uuid].tsx
index ccde328..f6cad02 100644
--- a/src/app/userProfile/[uuid].tsx
+++ b/src/app/[uuid].tsx
@@ -1,30 +1,32 @@
 import { getUserByUUID } from "@actions/userActions";
 import { NextPage } from "next";
 import { Herr_Von_Muellerhoff } from "next/font/google";
-import { useRouter } from "next/router";
+
 import { useEffect, useState } from "react";
 import {db} from "@db/index";
+import router from "next/router";
 
-export default function UserProfilePage() {
-  const router = useRouter();
- // const { uuid } = router.query;
-  const uuid = "8ad8da5e-1ecd-402b-8211-bc93f2c3331a";
-const [user, setUser] = useState<{ uuid: string | null; id: string; username: string; email: string; emailVerifiedOn: Date | null; password_hash: string; first_name: string | null; last_name: string | null; full_name: string | null; buildPrivacySetting: string | null; }[] | null>(null);
-
-useEffect(() => {
-  if (uuid) {
-    getUserByUUID(uuid as string)
-      .then((user) => setUser(user))
-      .catch((error) => console.error("Error fetching user data:", error));
-  }
-}, [uuid]);
+export default function UserProfilePage(params: any) {
 
+ const { uuid } = router.query;
+//  const uuid = "8ad8da5e-1ecd-402b-8211-bc93f2c3331a";
+ // const [user, setUser] = useState<{ uuid: string | null; id: string; username: string; email: string; emailVerifiedOn: Date | null; password_hash: string; first_name: string | null; last_name: string | null; full_name: string | null; buildPrivacySetting: string | null; }[] | null>(null);
+let user:any = null;
+//useEffect(() => {
+//  if (uuid) {
+//     getUserByUUID(uuid as string)
+//      .then((user) => setUser(user))
+//      .catch((error) => console.error("Error fetching user data:", error));
+ // }
+//}, [uuid]);
+user = getUserByUUID(uuid as string)
 if (!user) {
   return <div>Loading...</div>;
 }
 
   return (
     <div className="p-4 pt-16 mx-auto max-w-screen-lg">
+      UUID Page
       {user[0].first_name} 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
    
@@ -36,6 +38,7 @@ if (!user) {
           <div className="bg-white rounded-lg shadow-md p-4 mb-6">
             <h2 className="text-xl font-semibold mb-4">Available From</h2>
             <div className="overflow-x-auto">
+              anything
             {/*   <table className="min-w-full table-auto">
                 <thead>
                   <tr className="bg-gray-50 border-b">
diff --git a/src/app/userProfile/[uuid]/page.tsx b/src/app/userProfile/[uuid]/page.tsx
new file mode 100644
index 0000000..1aaf1cc
--- /dev/null
+++ b/src/app/userProfile/[uuid]/page.tsx
@@ -0,0 +1,52 @@
+'use client';
+import { getUserByUUID } from "@actions/userActions";
+import { NextPage } from "next";
+import { Herr_Von_Muellerhoff } from "next/font/google";
+
+import { useEffect, useState } from "react";
+import { useParams, usePathname, useRouter } from "next/navigation";
+
+export default function UserProfilePage(props: any) {
+
+const router = useRouter();
+const params = useParams<{ uuid: string  }>() 
+const [user, setUser] = useState<{ uuid: string | null; id: string; username: string; email: string; emailVerifiedOn: Date | null; password_hash: string; first_name: string | null; last_name: string | null; full_name: string | null; isAdmin:boolean, buildPrivacySetting: string | null; } | null>(null);
+
+useEffect(() => {
+  if (params?.uuid) {
+    getUserByUUID(params?.uuid as unknown as string)
+      .then((user) => setUser(user))
+      .catch((error) => console.error("Error fetching user data:", error));
+ }
+}, [params?.uuid]);
+
+if (!params || !params.uuid || !user ) {
+  return <div>Loading...</div>;
+}
+  return (
+    <div className="p-4 pt-16 mx-auto max-w-screen-lg">
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+   
+        {/* User Info */}
+        <div>
+          <h1 className="text-3xl font-bold mb-4">   User Profile  </h1>
+          
+
+          <div className="bg-white rounded-lg shadow-md p-4 mb-6">
+            <h2 className="text-xl font-semibold mb-4">{user.first_name}{" "}{user.last_name} </h2>
+            <h2 className="text-xl font-semibold mb-4">{user.email}</h2>
+            <h2 className="text-xl font-semibold mb-4">{user.username} </h2>
+            <h2 className="text-xl font-semibold mb-4">{(user.isAdmin)? "True":"False"} </h2>
+            <h2 className="text-xl font-semibold mb-4">{user.first_name}{" "}{user.last_name} </h2>
+            <h2 className="text-xl font-semibold mb-4">{user.first_name}{" "}{user.last_name} </h2>
+            <div className="overflow-x-auto">
+        
+               </div>
+          </div>
+        </div>
+      </div>
+   
+    </div>
+  );
+}
diff --git a/src/components/admin/UsersTable/index.tsx b/src/components/admin/UsersTable/index.tsx
index aa04c42..8b8e96a 100644
--- a/src/components/admin/UsersTable/index.tsx
+++ b/src/components/admin/UsersTable/index.tsx
@@ -92,12 +92,7 @@ export default async function UsersTable(props: any) {
                   <tr key={item.uuid}>
                     <td className="whitespace-wrap flex items-center py-4 pl-4 pr-3 text-xs font-medium text-gray-900 ">
                   
-                      <Link href={{
-                        pathname: '/userProfile',
-                        query: {
-                          uuid: item.uuid,
-                        },
-                      }}><span className="pl-2"> {item.email}</span></Link>
+                      <Link href={`/userProfile/${item.uuid}`}><span className="pl-2"> {item.email}</span></Link>
                     </td>
                     <td className="whitespace-nowrap px-3 py-4 text-xs text-gray-900">
                       {item.first_name}