From e02b25cebd1d09ff64059032d442fdb433301bdb Mon Sep 17 00:00:00 2001
From: Ihsen Bouallegue <bouallegueihsen@gmail.com>
Date: Sun, 29 Oct 2023 14:58:22 +0100
Subject: [PATCH] use server components for settings and members

---
 .../dashboard/hubspaces/page.tsx              |  0
 .../[organizationId]}/dashboard/layout.tsx    | 13 ++-
 .../dashboard/organization/members.tsx        | 47 +++++------
 .../dashboard/organization/page.tsx           | 14 ++++
 .../dashboard/organization/role-command.tsx   |  0
 .../dashboard/organization/settings.tsx       | 57 +++++++++++++
 .../[organizationId]}/dashboard/page.tsx      |  0
 .../[organizationId]}/dashboard/plan/page.tsx |  0
 src/app/(dashboard)/dashboard/page.tsx        | 14 ++++
 src/app/dashboard/organization/page.tsx       | 12 ---
 src/app/dashboard/organization/settings.tsx   | 57 -------------
 src/components/dashboard/main-nav.tsx         | 18 ++--
 .../organization-switcher.tsx                 | 83 ++++++++++---------
 13 files changed, 163 insertions(+), 152 deletions(-)
 rename src/app/{ => (dashboard)/[organizationId]}/dashboard/hubspaces/page.tsx (100%)
 rename src/app/{ => (dashboard)/[organizationId]}/dashboard/layout.tsx (79%)
 rename src/app/{ => (dashboard)/[organizationId]}/dashboard/organization/members.tsx (66%)
 create mode 100644 src/app/(dashboard)/[organizationId]/dashboard/organization/page.tsx
 rename src/app/{ => (dashboard)/[organizationId]}/dashboard/organization/role-command.tsx (100%)
 create mode 100644 src/app/(dashboard)/[organizationId]/dashboard/organization/settings.tsx
 rename src/app/{ => (dashboard)/[organizationId]}/dashboard/page.tsx (100%)
 rename src/app/{ => (dashboard)/[organizationId]}/dashboard/plan/page.tsx (100%)
 create mode 100644 src/app/(dashboard)/dashboard/page.tsx
 delete mode 100644 src/app/dashboard/organization/page.tsx
 delete mode 100644 src/app/dashboard/organization/settings.tsx

diff --git a/src/app/dashboard/hubspaces/page.tsx b/src/app/(dashboard)/[organizationId]/dashboard/hubspaces/page.tsx
similarity index 100%
rename from src/app/dashboard/hubspaces/page.tsx
rename to src/app/(dashboard)/[organizationId]/dashboard/hubspaces/page.tsx
diff --git a/src/app/dashboard/layout.tsx b/src/app/(dashboard)/[organizationId]/dashboard/layout.tsx
similarity index 79%
rename from src/app/dashboard/layout.tsx
rename to src/app/(dashboard)/[organizationId]/dashboard/layout.tsx
index 21999376..7ae6d20f 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/(dashboard)/[organizationId]/dashboard/layout.tsx
@@ -10,7 +10,8 @@ import { ReactNode } from "react";
 
 export default async function layout({
   children,
-}: { children: ReactNode | ReactNode[] }) {
+  params,
+}: { children: ReactNode | ReactNode[]; params: { organizationId: string } }) {
   const session = await auth();
   const memberOrganizations = await db.query.organizations.findMany({
     where: eq(organizations.admin, session?.user.id ?? ""),
@@ -20,13 +21,11 @@ export default async function layout({
       <div className="hidden flex-col md:flex">
         <div className="border-b">
           <div className="flex h-16 items-center px-8">
-            <OrganizationSwitcher
-              memberOrganizations={memberOrganizations?.map((org) => ({
-                label: org.name,
-                value: org.id,
-              }))}
+            <OrganizationSwitcher memberOrganizations={memberOrganizations} />
+            <MainNav
+              className="mx-6"
+              selectedOrganization={params.organizationId}
             />
-            <MainNav className="mx-6" />
             <div className="ml-auto flex items-center space-x-4">
               <Search />
               <UserNav />
diff --git a/src/app/dashboard/organization/members.tsx b/src/app/(dashboard)/[organizationId]/dashboard/organization/members.tsx
similarity index 66%
rename from src/app/dashboard/organization/members.tsx
rename to src/app/(dashboard)/[organizationId]/dashboard/organization/members.tsx
index 132ae4b4..19bcc78b 100644
--- a/src/app/dashboard/organization/members.tsx
+++ b/src/app/(dashboard)/[organizationId]/dashboard/organization/members.tsx
@@ -1,10 +1,6 @@
-"use client";
-
 import { Icons } from "@/components/icons";
-import { useDashboardStore } from "@/lib/Store/dashboard";
-import { User } from "@/lib/schema/auth";
-import { UsersToOrganization } from "@/lib/schema/orgaizations";
-import { API_URL } from "@/lib/useQueries";
+import db from "@/lib/db";
+import { organizations, usersToOrganizations } from "@/lib/schema/orgaizations";
 import { Avatar, AvatarFallback, AvatarImage } from "@/ui/avatar";
 import { Button } from "@/ui/button";
 import {
@@ -15,27 +11,22 @@ import {
   CardTitle,
 } from "@/ui/card";
 import { Popover, PopoverContent, PopoverTrigger } from "@/ui/popover";
-import { useEffect, useState } from "react";
+import { eq } from "drizzle-orm";
 import RoleCommand from "./role-command";
 
-export default function Members() {
-  const selectedOrganizationId = useDashboardStore(
-    (state) => state.selectedOrganizationId
-  );
-  const [members, setMembers] = useState<User[]>([]);
-
-  useEffect(() => {
-    fetch(
-      `${API_URL}/organization-members/?organizationId=${selectedOrganizationId}`
-    )
-      .then((res) => res.json())
-      .then(
-        ({
-          organizationMembers,
-        }: { organizationMembers: (UsersToOrganization & { user: User })[] }) =>
-          setMembers(organizationMembers?.map((member) => member.user) ?? [])
-      );
-  }, [selectedOrganizationId]);
+export default async function Members({
+  selectedOrganizationSlug,
+}: { selectedOrganizationSlug: string }) {
+  const selectedOrgaization = await db.query.organizations.findFirst({
+    where: eq(organizations.slug, selectedOrganizationSlug),
+  });
+  if (!selectedOrgaization) return null;
+  const organizationMembers = await db.query.usersToOrganizations
+    .findMany({
+      where: eq(usersToOrganizations.organizationId, selectedOrgaization.id),
+      with: { user: true },
+    })
+    .then((res) => res.map((usersToOrganization) => usersToOrganization.user));
 
   return (
     <div className="space-y-6">
@@ -48,8 +39,8 @@ export default function Members() {
         </CardHeader>
         <CardContent className="grid gap-6">
           <div className="flex items-center justify-between space-x-4">
-            {members.map((member) => (
-              <>
+            {organizationMembers.map((member) => (
+              <div key={member.id} className="w-full flex">
                 <div className="flex items-center space-x-4">
                   <Avatar>
                     <AvatarImage src={member.image ?? undefined} />
@@ -75,7 +66,7 @@ export default function Members() {
                     <RoleCommand />
                   </PopoverContent>
                 </Popover>
-              </>
+              </div>
             ))}
           </div>
         </CardContent>
diff --git a/src/app/(dashboard)/[organizationId]/dashboard/organization/page.tsx b/src/app/(dashboard)/[organizationId]/dashboard/organization/page.tsx
new file mode 100644
index 00000000..4583c49e
--- /dev/null
+++ b/src/app/(dashboard)/[organizationId]/dashboard/organization/page.tsx
@@ -0,0 +1,14 @@
+import Members from "./members";
+import Settings from "./settings";
+
+export default async function Page({
+  params,
+}: { params: { organizationId: string } }) {
+  return (
+    <div className="max-w-screen-2xl m-auto space-y-12">
+      <h2 className="text-3xl font-bold">Organizations</h2>
+      <Members selectedOrganizationSlug={params.organizationId} />
+      <Settings selectedOrganizationSlug={params.organizationId} />
+    </div>
+  );
+}
diff --git a/src/app/dashboard/organization/role-command.tsx b/src/app/(dashboard)/[organizationId]/dashboard/organization/role-command.tsx
similarity index 100%
rename from src/app/dashboard/organization/role-command.tsx
rename to src/app/(dashboard)/[organizationId]/dashboard/organization/role-command.tsx
diff --git a/src/app/(dashboard)/[organizationId]/dashboard/organization/settings.tsx b/src/app/(dashboard)/[organizationId]/dashboard/organization/settings.tsx
new file mode 100644
index 00000000..edd32f3f
--- /dev/null
+++ b/src/app/(dashboard)/[organizationId]/dashboard/organization/settings.tsx
@@ -0,0 +1,57 @@
+import db from "@/lib/db";
+import { organizations, usersToOrganizations } from "@/lib/schema/orgaizations";
+import { Button } from "@/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/ui/card";
+import { and, eq } from "drizzle-orm";
+import { redirect } from "next/navigation";
+import { auth } from "../../../../../../auth";
+
+export default function Settings({
+  selectedOrganizationSlug,
+}: { selectedOrganizationSlug: string }) {
+  async function callAction() {
+    "use server";
+    const session = await auth();
+    if (!session) return;
+    await db
+      .delete(organizations)
+      .where(
+        and(
+          eq(organizations.slug, selectedOrganizationSlug),
+          eq(organizations.admin, session.user.id)
+        )
+      )
+      .then(
+        async () =>
+          await db
+            .delete(usersToOrganizations)
+            .where(
+              eq(usersToOrganizations.organizationId, selectedOrganizationSlug)
+            )
+      );
+    redirect("/dashboard");
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-2xl font-bold">Settings</CardTitle>
+        <CardDescription>Adjust your organization's settings.</CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-6">
+        {selectedOrganizationSlug ?? "no org"}
+        <form>
+          <Button variant="destructive" formAction={callAction}>
+            Delete
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/app/dashboard/page.tsx b/src/app/(dashboard)/[organizationId]/dashboard/page.tsx
similarity index 100%
rename from src/app/dashboard/page.tsx
rename to src/app/(dashboard)/[organizationId]/dashboard/page.tsx
diff --git a/src/app/dashboard/plan/page.tsx b/src/app/(dashboard)/[organizationId]/dashboard/plan/page.tsx
similarity index 100%
rename from src/app/dashboard/plan/page.tsx
rename to src/app/(dashboard)/[organizationId]/dashboard/plan/page.tsx
diff --git a/src/app/(dashboard)/dashboard/page.tsx b/src/app/(dashboard)/dashboard/page.tsx
new file mode 100644
index 00000000..29ec59a5
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/page.tsx
@@ -0,0 +1,14 @@
+import OrganizationSwitcher from "@/components/dashboard/organization-switcher";
+import db from "@/lib/db";
+import { organizations } from "@/lib/schema/orgaizations";
+import { auth } from "auth";
+import { eq } from "drizzle-orm";
+
+export default async function Page() {
+  const session = await auth();
+
+  const memberOrganizations = await db.query.organizations.findMany({
+    where: eq(organizations.admin, session?.user.id ?? ""),
+  });
+  return <OrganizationSwitcher memberOrganizations={memberOrganizations} />;
+}
diff --git a/src/app/dashboard/organization/page.tsx b/src/app/dashboard/organization/page.tsx
deleted file mode 100644
index 6b0ad5d8..00000000
--- a/src/app/dashboard/organization/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import Members from "./members";
-import Settings from "./settings";
-
-export default async function Page() {
-  return (
-    <div className="max-w-screen-2xl m-auto space-y-12">
-      <h2 className="text-3xl font-bold">Organizations</h2>
-      <Members />
-      <Settings />
-    </div>
-  );
-}
diff --git a/src/app/dashboard/organization/settings.tsx b/src/app/dashboard/organization/settings.tsx
deleted file mode 100644
index 8a3d969d..00000000
--- a/src/app/dashboard/organization/settings.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-"use client";
-
-import { deleteOrganization } from "@/components/dashboard/organization-switcher/organization-switcher.action";
-import { useDashboardStore } from "@/lib/Store/dashboard";
-import { Button } from "@/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/ui/card";
-import { toast } from "@/ui/use-toast";
-
-export default function Settings() {
-  const selectedOrganizationId = useDashboardStore(
-    (state) => state.selectedOrganizationId
-  );
-  const callAction = async (formData: FormData) => {
-    const { ok, error } = await deleteOrganization(formData);
-    if (ok) {
-      toast({
-        title: "Organization deleted",
-      });
-      useDashboardStore.setState({ selectedOrganizationId: undefined });
-    }
-    if (error || !ok) {
-      toast({
-        title: "Something went wrong.",
-        description: error,
-        variant: "destructive",
-      });
-    }
-  };
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="text-2xl font-bold">Settings</CardTitle>
-        <CardDescription>Adjust your organization's settings.</CardDescription>
-      </CardHeader>
-      <CardContent className="grid gap-6">
-        {selectedOrganizationId ?? "no org"}
-        <form action={callAction}>
-          <Button type="submit" variant="destructive">
-            Delete
-          </Button>
-          <input
-            type="hidden"
-            name="id"
-            defaultValue={selectedOrganizationId}
-          />
-        </form>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/src/components/dashboard/main-nav.tsx b/src/components/dashboard/main-nav.tsx
index c7974a71..8ef97112 100644
--- a/src/components/dashboard/main-nav.tsx
+++ b/src/components/dashboard/main-nav.tsx
@@ -6,19 +6,21 @@ import { cn } from "@/lib/utils";
 import { useSelectedLayoutSegment } from "next/navigation";
 
 const segments = [
-  { label: "Overview", value: null },
-  { label: "Hubspaces", value: "hubspaces" },
-  { label: "Organization", value: "organization" },
-  { label: "Plan", value: "plan" },
-  { label: "Billing", value: "billing" },
+  { label: "Overview", value: "dashboard" },
+  { label: "Hubspaces", value: "dashboard/hubspaces" },
+  { label: "Organization", value: "dashboard/organization" },
+  { label: "Plan", value: "dashboard/plan" },
+  { label: "Billing", value: "dashboard/billing" },
 ];
 
 export function MainNav({
   className,
+  selectedOrganization,
   ...props
-}: React.HTMLAttributes<HTMLElement>) {
+}: React.HTMLAttributes<HTMLElement> & {
+  selectedOrganization: string;
+}) {
   const layoutSegment = useSelectedLayoutSegment();
-
   return (
     <nav
       className={cn("flex items-center space-x-4 lg:space-x-6", className)}
@@ -26,7 +28,7 @@ export function MainNav({
     >
       {segments.map((segment) => (
         <Link
-          href={`/dashboard/${segment.value ?? ""}`}
+          href={`/${selectedOrganization}/${segment.value}`}
           key={segment.value}
           className={cn(
             "text-sm font-medium transition-colors hover:text-primary",
diff --git a/src/components/dashboard/organization-switcher/organization-switcher.tsx b/src/components/dashboard/organization-switcher/organization-switcher.tsx
index cbc8bd36..c161df26 100644
--- a/src/components/dashboard/organization-switcher/organization-switcher.tsx
+++ b/src/components/dashboard/organization-switcher/organization-switcher.tsx
@@ -3,6 +3,7 @@
 import { cn } from "@/lib/utils";
 
 import { useDashboardStore } from "@/lib/Store/dashboard";
+import { Organization } from "@/lib/schema/orgaizations";
 import { Avatar, AvatarFallback, AvatarImage } from "@/ui/avatar";
 import { Button } from "@/ui/button";
 import {
@@ -16,6 +17,7 @@ import {
 } from "@/ui/command";
 import { Dialog, DialogTrigger } from "@/ui/dialog";
 import { Popover, PopoverContent, PopoverTrigger } from "@/ui/popover";
+import Link from "next/link";
 import { useMemo, useState } from "react";
 import { Icons } from "../../icons";
 import OrganizationForm from "../organization-form";
@@ -27,8 +29,6 @@ const groups = [
   },
 ];
 
-type OrganizationCommand = { label: string; value: string };
-
 type PopoverTriggerProps = React.ComponentPropsWithoutRef<
   typeof PopoverTrigger
 >;
@@ -36,7 +36,7 @@ type PopoverTriggerProps = React.ComponentPropsWithoutRef<
 export function OrganizationSwitcher({
   className,
   memberOrganizations,
-}: PopoverTriggerProps & { memberOrganizations: OrganizationCommand[] }) {
+}: PopoverTriggerProps & { memberOrganizations: Organization[] }) {
   const [open, setOpen] = useState(false);
   const [showNewOrganizationDialog, setShowNewOrganizationDialog] =
     useState(false);
@@ -45,7 +45,7 @@ export function OrganizationSwitcher({
   );
   const selectedOrganization = useMemo(
     () =>
-      memberOrganizations.find((org) => org.value === selectedOrganizationId) ??
+      memberOrganizations.find((org) => org.id === selectedOrganizationId) ??
       memberOrganizations[0],
     [memberOrganizations, selectedOrganizationId]
   );
@@ -62,22 +62,16 @@ export function OrganizationSwitcher({
             role="combobox"
             aria-expanded={open}
             aria-label="Select an Organization"
-            className={cn("w-[220px] justify-between shadow-md", className)}
+            className={cn("w-[240px] justify-between shadow-md", className)}
           >
             {selectedOrganization && (
-              <Avatar className="mr-2 h-5 w-5">
-                <AvatarImage
-                  src={`https://avatar.vercel.sh/${selectedOrganization.value}.png`}
-                  alt={selectedOrganization.label}
-                />
-                <AvatarFallback>SC</AvatarFallback>
-              </Avatar>
+              <OrganizationAvatar organization={selectedOrganization} />
             )}
-            {selectedOrganization?.label || "Nothing Selected"}
+            {selectedOrganization?.name || "Nothing Selected"}
             <Icons.chevronsUpDown className="ml-auto h-4 w-4 shrink-0 opacity-50" />
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-[220px] p-1">
+        <PopoverContent className="w-[240px] p-1">
           <Command>
             <CommandList>
               <CommandInput placeholder="Search organization..." />
@@ -85,34 +79,31 @@ export function OrganizationSwitcher({
               {groups.map((group) => (
                 <CommandGroup key={group.label} heading={group.label}>
                   {memberOrganizations.map((organization) => (
-                    <CommandItem
-                      key={organization.value}
-                      onSelect={() => {
-                        useDashboardStore.setState({
-                          selectedOrganizationId: organization.value,
-                        });
-                        setOpen(false);
-                      }}
-                      className="text-sm"
+                    <Link
+                      href={`/${organization.slug}/dashboard`}
+                      key={organization.id}
                     >
-                      <Avatar className="mr-2 h-5 w-5">
-                        <AvatarImage
-                          src={`https://avatar.vercel.sh/${organization.value}.png`}
-                          alt={organization.label}
-                          className="grayscale"
+                      <CommandItem
+                        onSelect={() => {
+                          useDashboardStore.setState({
+                            selectedOrganizationId: organization.id,
+                          });
+                          setOpen(false);
+                        }}
+                        className="text-sm"
+                      >
+                        <OrganizationAvatar organization={organization} />
+                        {organization.name}
+                        <Icons.checkIcon
+                          className={cn(
+                            "ml-auto h-4 w-4",
+                            selectedOrganization.id === organization.id
+                              ? "opacity-100"
+                              : "opacity-0"
+                          )}
                         />
-                        <AvatarFallback>SC</AvatarFallback>
-                      </Avatar>
-                      {organization.label}
-                      <Icons.checkIcon
-                        className={cn(
-                          "ml-auto h-4 w-4",
-                          selectedOrganization.value === organization.value
-                            ? "opacity-100"
-                            : "opacity-0"
-                        )}
-                      />
-                    </CommandItem>
+                      </CommandItem>
+                    </Link>
                   ))}
                 </CommandGroup>
               ))}
@@ -142,3 +133,15 @@ export function OrganizationSwitcher({
     </Dialog>
   );
 }
+
+function OrganizationAvatar({ organization }: { organization: Organization }) {
+  return (
+    <Avatar className="mr-2 h-5 w-5">
+      <AvatarImage
+        src={`https://avatar.vercel.sh/${organization.slug}.png`}
+        alt={organization.name}
+      />
+      <AvatarFallback>SC</AvatarFallback>
+    </Avatar>
+  );
+}