feat: communities view page and datatable

src/app/(auth)/community/new/page.tsx

@@ -21,6 +21,8 @@ import { Layout, LayoutBody } from "@/components/custom/Layout";
 import { useFormState, useFormStatus } from "react-dom";
 import { createCommunity } from "@/app/actions";
 import { useEffect } from "react";
+import { getQueryClient } from "@/lib/get-query-client";
+import { tags } from "@/lib/tags";
 
 const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
 const ACCEPTED_IMAGE_TYPES = [
@@ -139,22 +141,20 @@ export default function CommunityForm() {
     formAction(formData);
   }
 
-  console.log("form", state);
-
   useEffect(() => {
     if (formState?.ok) {
-        form.reset();
-        // todo: show success toast
+      form.reset();
+      // todo: show success toast
     }
-  }, [form, formState])
+  }, [form, formState]);
 
   return (
     <Layout>
       <LayoutBody className="max-w-4xl mx-auto">
         <div className="mb-2 flex items-center justify-between space-y-2">
           <div>
             <h2 className="text-2xl font-bold tracking-tight">
-              Complete this form to add a new entry
+              Complete this form to add a new Community
             </h2>
           </div>
         </div>

src/app/(auth)/community/page.tsx

@@ -1,14 +1,13 @@
-import { DataTable } from "@/components/organisms/users-datatable/data-table";
-import { tasks } from "@/components/organisms/users-datatable/data/tasks";
-import { columns } from "@/components/organisms/users-datatable/columns";
-
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
+import Communities from "@/components/organisms/Communities";
+import { getQueryClient } from "@/lib/get-query-client";
 
 export default function CommunityPage() {
+  const queryClient = getQueryClient()
+
   return (
-    <>
-      <div className="-mx-4 flex-1 overflow-auto px-4 py-1 lg:flex-row lg:space-x-12 lg:space-y-0">
-        <DataTable data={tasks} columns={columns} />
-      </div>
-    </>
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <Communities />
+    </HydrationBoundary>
   );
 }

src/app/(auth)/nodes/page.tsx

@@ -1,51 +1,14 @@
-import { Button } from "@/components/ui/button";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
+import { DataTable } from "@/components/organisms/nodes-datatable/data-table";
+import { tasks } from "@/components/organisms/nodes-datatable/data/tasks";
+import { columns } from "@/components/organisms/nodes-datatable/columns";
 
-interface Node {
-  id: string;
-  name: string;
-  status: "active" | "inactive";
-}
-
-const mockNodes: Node[] = [
-  { id: "1", name: "Node 1", status: "active" },
-  { id: "2", name: "Node 2", status: "inactive" },
-];
 
-export default function NodesTable() {
+export default function NodesPage() {
   return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Name</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead>Actions</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {mockNodes.map((node) => (
-          <TableRow key={node.id}>
-            <TableCell>{node.name}</TableCell>
-            <TableCell>{node.status}</TableCell>
-            <TableCell>
-              <div className="flex space-x-2">
-                <Button size="sm">View</Button>
-                <Button size="sm">Edit</Button>
-                <Button size="sm" variant="destructive">
-                  Delete
-                </Button>
-              </div>
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
+    <>
+      <div className="-mx-4 flex-1 overflow-auto px-4 py-1 lg:flex-row lg:space-x-12 lg:space-y-0">
+        <DataTable data={tasks} columns={columns} />
+      </div>
+    </>
   );
 }

src/app/ThemeProvider.tsx

@@ -1,40 +1,15 @@
 "use client";
 
 import { ThemeProvider } from "@/components/theme-provider";
+import { getQueryClient } from "@/lib/get-query-client";
 import {
+  defaultShouldDehydrateQuery,
   isServer,
   QueryClient,
   QueryClientProvider,
 } from "@tanstack/react-query";
 import { PropsWithChildren } from "react";
 
-function makeQueryClient() {
-  return new QueryClient({
-    defaultOptions: {
-      queries: {
-        // With SSR, we usually want to set some default staleTime
-        // above 0 to avoid refetching immediately on the client
-        staleTime: 60 * 1000,
-      },
-    },
-  });
-}
-
-let browserQueryClient: QueryClient | undefined = undefined;
-
-function getQueryClient() {
-  if (isServer) {
-    // Server: always make a new query client
-    return makeQueryClient();
-  } else {
-    // Browser: make a new query client if we don't already have one
-    // This is very important, so we don't re-make a new client if React
-    // suspends during the initial render. This may not be needed if we
-    // have a suspense boundary BELOW the creation of the query client
-    if (!browserQueryClient) browserQueryClient = makeQueryClient();
-    return browserQueryClient;
-  }
-}
 
 export default function ThemeContext({ children }: PropsWithChildren<{}>) {
   const queryClient = getQueryClient();

src/app/globals.scss

@@ -53,6 +53,13 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 48 96% 89%;
+    --danger: 353, 100%, 71%;
+    --danger-foreground: 4, 100%, 51%;
+    --success: 123, 100%, 83%;
+    --success-foreground: 152, 100%, 50%;
+
   }
 
   .dark {
@@ -80,6 +87,12 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+    --warning: 48 96% 89%;
+    --warning-foreground: 38 92% 50%;
+    --danger: 2, 100%, 67%;
+    --danger-foreground: 1, 100%, 58%;
+    --success: 126, 100%, 84%;
+    --success-foreground: 156, 100%, 50%;
   }
 }
 

src/components/organisms/Communities.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { listCommunitiesQuery } from "@/lib/api";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { LoaderCircleIcon } from "lucide-react";
+import { DataTable } from "./community-datatable/data-table";
+import { columns } from "./community-datatable/columns";
+
+export default function Communities() {
+  const { data , isLoading } =
+    useSuspenseQuery(listCommunitiesQuery);
+
+  return (
+    <>
+      <div className="-mx-4 flex-1 overflow-auto px-4 py-1 lg:flex-row lg:space-x-12 lg:space-y-0">
+        {isLoading ? (
+          <div className="">
+            <LoaderCircleIcon className="w-18 h-18" />
+          </div>
+        ) : (
+          <DataTable data={data?.data ?? []} columns={columns} />
+        )}
+      </div>
+    </>
+  );
+}