wip: clerk auth

apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/[dashboardId]/page.tsx

@@ -1,10 +1,10 @@
 import PageLayout from '@/app/(app)/page-layout';
-import { getSession } from '@/server/auth';
 import {
   createRecentDashboard,
   getDashboardById,
 } from '@/server/services/dashboard.service';
 import { getReportsByDashboardId } from '@/server/services/reports.service';
+import { auth } from '@clerk/nextjs';
 import { revalidateTag } from 'next/cache';
 
 import { ListReports } from './list-reports';
@@ -20,10 +20,10 @@ interface PageProps {
 export default async function Page({
   params: { organizationId, projectId, dashboardId },
 }: PageProps) {
-  const session = await getSession();
+  const { userId } = auth();
+
   const dashboard = await getDashboardById(dashboardId);
   const reports = await getReportsByDashboardId(dashboardId);
-  const userId = session?.user.id;
   if (userId && dashboard) {
     await createRecentDashboard({
       userId,
@@ -35,7 +35,7 @@ export default async function Page({
   }
 
   return (
-    <PageLayout title={dashboard.name} organizationId={organizationId}>
+    <PageLayout title={dashboard.name}>
       <ListReports reports={reports} />
     </PageLayout>
   );

apps/web/src/app/(app)/[organizationId]/[projectId]/dashboards/page.tsx

@@ -6,18 +6,15 @@ import { ListDashboards } from './list-dashboards';
 
 interface PageProps {
   params: {
-    organizationId: string;
     projectId: string;
   };
 }
 
-export default async function Page({
-  params: { organizationId, projectId },
-}: PageProps) {
+export default async function Page({ params: { projectId } }: PageProps) {
   const dashboards = await getDashboardsByProjectId(projectId);
 
   return (
-    <PageLayout title="Dashboards" organizationId={organizationId}>
+    <PageLayout title="Dashboards">
       <HeaderDashboards projectId={projectId} />
       <ListDashboards dashboards={dashboards} />
     </PageLayout>

apps/web/src/app/(app)/[organizationId]/[projectId]/events/page.tsx

@@ -4,15 +4,12 @@ import { ListEvents } from './list-events';
 
 interface PageProps {
   params: {
-    organizationId: string;
     projectId: string;
   };
 }
-export default function Page({
-  params: { organizationId, projectId },
-}: PageProps) {
+export default function Page({ params: { projectId } }: PageProps) {
   return (
-    <PageLayout title="Events" organizationId={organizationId}>
+    <PageLayout title="Events">
       <ListEvents projectId={projectId} />
     </PageLayout>
   );

apps/web/src/app/(app)/[organizationId]/[projectId]/page.tsx

@@ -2,16 +2,9 @@ import PageLayout from '@/app/(app)/page-layout';
 
 import OverviewMetrics from './overview-metrics';
 
-interface PageProps {
-  params: {
-    organizationId: string;
-    projectId: string;
-  };
-}
-
-export default function Page({ params: { organizationId } }: PageProps) {
+export default function Page() {
   return (
-    <PageLayout title="Overview" organizationId={organizationId}>
+    <PageLayout title="Overview">
       <OverviewMetrics />
     </PageLayout>
   );

apps/web/src/app/(app)/[organizationId]/[projectId]/profiles/[profileId]/page.tsx

@@ -1,7 +1,6 @@
 import PageLayout from '@/app/(app)/page-layout';
 import { ListProperties } from '@/components/events/ListProperties';
 import { ProfileAvatar } from '@/components/profiles/ProfileAvatar';
-import { Avatar } from '@/components/ui/avatar';
 import { Widget, WidgetBody, WidgetHead } from '@/components/Widget';
 import {
   getProfileById,
@@ -14,14 +13,13 @@ import ListProfileEvents from './list-profile-events';
 
 interface PageProps {
   params: {
-    organizationId: string;
     projectId: string;
     profileId: string;
   };
 }
 
 export default async function Page({
-  params: { organizationId, projectId, profileId },
+  params: { projectId, profileId },
 }: PageProps) {
   const profile = await getProfileById(profileId);
   const profiles = (
@@ -35,7 +33,6 @@ export default async function Page({
           {getProfileName(profile)}
         </div>
       }
-      organizationId={organizationId}
     >
       <div className="p-4">
         <div className="grid gap-4 grid-cols-1 md:grid-cols-2 mb-8">

apps/web/src/app/(app)/[organizationId]/[projectId]/profiles/page.tsx

@@ -12,7 +12,7 @@ export default function Page({
   params: { organizationId, projectId },
 }: PageProps) {
   return (
-    <PageLayout title="Events" organizationId={organizationId}>
+    <PageLayout title="Events">
       <ListProfiles projectId={projectId} organizationId={organizationId} />
     </PageLayout>
   );

apps/web/src/app/(app)/[organizationId]/[projectId]/reports/[reportId]/page.tsx

@@ -6,15 +6,12 @@ import ReportEditor from '../report-editor';
 
 interface PageProps {
   params: {
-    organizationId: string;
     projectId: string;
     reportId: string;
   };
 }
 
-export default async function Page({
-  params: { organizationId, reportId },
-}: PageProps) {
+export default async function Page({ params: { reportId } }: PageProps) {
   const report = await getReportById(reportId);
   return (
     <PageLayout
@@ -24,7 +21,6 @@ export default async function Page({
           <Pencil size={16} />
         </div>
       }
-      organizationId={organizationId}
     >
       <ReportEditor report={report} />
     </PageLayout>

apps/web/src/app/(app)/[organizationId]/[projectId]/reports/page.tsx

@@ -19,7 +19,6 @@ export default function Page({ params: { organizationId } }: PageProps) {
           <Pencil size={16} />
         </div>
       }
-      organizationId={organizationId}
     >
       <ReportEditor reportId={null} />
     </PageLayout>

apps/web/src/app/(app)/[organizationId]/page.tsx

@@ -1,6 +1,8 @@
 import { getProjectWithMostEvents } from '@/server/services/project.service';
 import { redirect } from 'next/navigation';
 
+import PageLayout from '../page-layout';
+
 interface PageProps {
   params: {
     organizationId: string;
@@ -14,5 +16,11 @@ export default async function Page({ params: { organizationId } }: PageProps) {
     return redirect(`/${organizationId}/${project.id}`);
   }
 
-  return null;
+  return (
+    <PageLayout title="Projects">
+      <div className="p-4">
+        <h1>Create your first project</h1>
+      </div>
+    </PageLayout>
+  );
 }

apps/web/src/app/(app)/[organizationId]/settings/clients/page.tsx

@@ -13,7 +13,7 @@ export default async function Page({ params: { organizationId } }: PageProps) {
   const clients = await getClientsByOrganizationId(organizationId);
 
   return (
-    <PageLayout title="Clients" organizationId={organizationId}>
+    <PageLayout title="Clients">
       <ListClients clients={clients} />
     </PageLayout>
   );

apps/web/src/app/(app)/[organizationId]/settings/organization/edit-organization.tsx

@@ -5,7 +5,7 @@ import { InputWithLabel } from '@/components/forms/InputWithLabel';
 import { Button } from '@/components/ui/button';
 import { toast } from '@/components/ui/use-toast';
 import { Widget, WidgetBody, WidgetHead } from '@/components/Widget';
-import type { getOrganizationById } from '@/server/services/organization.service';
+import type { getOrganizationBySlug } from '@/server/services/organization.service';
 import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
@@ -17,7 +17,7 @@ const validator = z.object({
 
 type IForm = z.infer<typeof validator>;
 interface EditOrganizationProps {
-  organization: Awaited<ReturnType<typeof getOrganizationById>>;
+  organization: Awaited<ReturnType<typeof getOrganizationBySlug>>;
 }
 export default function EditOrganization({
   organization,
@@ -64,10 +64,3 @@ export default function EditOrganization({
     </form>
   );
 }
-
-// <ContentSection
-//   title="Invite user"
-//   text="Invite users to this organization. You can invite several users with (,)"
-// >
-
-// </ContentSection>

apps/web/src/app/(app)/[organizationId]/settings/organization/page.tsx

@@ -1,6 +1,5 @@
 import PageLayout from '@/app/(app)/page-layout';
-import { getOrganizationById } from '@/server/services/organization.service';
-import { getInvitesByOrganizationId } from '@/server/services/user.service';
+import { getOrganizationBySlug } from '@/server/services/organization.service';
 
 import EditOrganization from './edit-organization';
 import InvitedUsers from './invited-users';
@@ -12,11 +11,11 @@ interface PageProps {
 }
 
 export default async function Page({ params: { organizationId } }: PageProps) {
-  const organization = await getOrganizationById(organizationId);
-  const invites = await getInvitesByOrganizationId(organizationId);
+  const organization = await getOrganizationBySlug(organizationId);
+  const invites = [];
 
   return (
-    <PageLayout title={organization.name} organizationId={organizationId}>
+    <PageLayout title={organization.name}>
       <div className="p-4 grid grid-cols-1 lg:grid-cols-2 gap-4">
         <EditOrganization organization={organization} />
         <InvitedUsers invites={invites} organizationId={organizationId} />

apps/web/src/app/(app)/[organizationId]/settings/profile/edit-profile.tsx

@@ -1,15 +1,10 @@
 'use client';
 
 import { api, handleError } from '@/app/_trpc/client';
-import { ContentHeader, ContentSection } from '@/components/Content';
-import { InputError } from '@/components/forms/InputError';
 import { InputWithLabel } from '@/components/forms/InputWithLabel';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
 import { toast } from '@/components/ui/use-toast';
 import { Widget, WidgetBody, WidgetHead } from '@/components/Widget';
-import type { getOrganizationById } from '@/server/services/organization.service';
-import type { getProfileById } from '@/server/services/profile.service';
 import type { getUserById } from '@/server/services/user.service';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/navigation';
@@ -17,7 +12,8 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 const validator = z.object({
-  name: z.string().min(2),
+  firstName: z.string().min(2),
+  lastName: z.string().min(2),
   email: z.string().email(),
 });
 
@@ -31,7 +27,8 @@ export default function EditProfile({ profile }: EditProfileProps) {
   const { register, handleSubmit, reset, formState } = useForm<IForm>({
     resolver: zodResolver(validator),
     defaultValues: {
-      name: profile.name ?? '',
+      firstName: profile.firstName ?? '',
+      lastName: profile.lastName ?? '',
       email: profile.email ?? '',
     },
   });
@@ -63,12 +60,19 @@ export default function EditProfile({ profile }: EditProfileProps) {
         </WidgetHead>
         <WidgetBody className="flex flex-col gap-4">
           <InputWithLabel
-            label="Name"
-            placeholder="Your name"
-            defaultValue={profile.name ?? ''}
-            {...register('name')}
+            label="First name"
+            placeholder="Your first name"
+            defaultValue={profile.firstName ?? ''}
+            {...register('firstName')}
           />
           <InputWithLabel
+            label="Last name"
+            placeholder="Your last name"
+            defaultValue={profile.lastName ?? ''}
+            {...register('lastName')}
+          />
+          <InputWithLabel
+            disabled
             label="Email"
             placeholder="Your email"
             defaultValue={profile.email ?? ''}

apps/web/src/app/(app)/[organizationId]/settings/profile/page.tsx

@@ -1,22 +1,16 @@
 import PageLayout from '@/app/(app)/page-layout';
-import { getSession } from '@/server/auth';
 import { getUserById } from '@/server/services/user.service';
+import { auth } from '@clerk/nextjs';
 
 import EditProfile from './edit-profile';
 import { Logout } from './logout';
 
-interface PageProps {
-  params: {
-    organizationId: string;
-  };
-}
-
-export default async function Page({ params: { organizationId } }: PageProps) {
-  const session = await getSession();
-  const profile = await getUserById(session?.user.id!);
+export default async function Page() {
+  const { userId } = auth();
+  const profile = await getUserById(userId!);
 
   return (
-    <PageLayout title={profile.name} organizationId={organizationId}>
+    <PageLayout title={profile.lastName}>
       <div className="p-4 flex flex-col gap-4">
         <EditProfile profile={profile} />
         <Logout />

apps/web/src/app/(app)/[organizationId]/settings/projects/page.tsx

@@ -1,5 +1,5 @@
 import PageLayout from '@/app/(app)/page-layout';
-import { getProjectsByOrganizationId } from '@/server/services/project.service';
+import { getProjectsByOrganizationSlug } from '@/server/services/project.service';
 
 import ListProjects from './list-projects';
 
@@ -10,10 +10,10 @@ interface PageProps {
 }
 
 export default async function Page({ params: { organizationId } }: PageProps) {
-  const projects = await getProjectsByOrganizationId(organizationId);
+  const projects = await getProjectsByOrganizationSlug(organizationId);
 
   return (
-    <PageLayout title="Projects" organizationId={organizationId}>
+    <PageLayout title="Projects">
       <ListProjects projects={projects} />
     </PageLayout>
   );

apps/web/src/app/(app)/layout-menu.tsx

@@ -134,7 +134,7 @@ export default function LayoutMenu({
                   </span>
                 </div>
               }
-              href={`/${item.organization_id}/${item.project_id}/${item.dashboard_id}`}
+              href={`/${item.organization_slug}/${item.project_id}/${item.dashboard_id}`}
             />
           ))}
         </div>

apps/web/src/app/(app)/layout-organization-selector.tsx

@@ -14,7 +14,7 @@ export default function LayoutOrganizationSelector({
   const params = useAppParams();
 
   const organization = organizations.find(
-    (item) => item.id === params.organizationId
+    (item) => item.slug === params.organizationId
   );
 
   if (!organization) {

apps/web/src/app/(app)/layout-project-selector.tsx

@@ -1,20 +1,18 @@
 'use client';
 
 import { Combobox } from '@/components/ui/combobox';
-import type { getProjectsByOrganizationId } from '@/server/services/project.service';
-import { useParams, usePathname, useRouter } from 'next/navigation';
+import { useAppParams } from '@/hooks/useAppParams';
+import type { getCurrentProjects } from '@/server/services/project.service';
+import { usePathname, useRouter } from 'next/navigation';
 
 interface LayoutProjectSelectorProps {
-  projects: Awaited<ReturnType<typeof getProjectsByOrganizationId>>;
-  organizationId: string | null;
+  projects: Awaited<ReturnType<typeof getCurrentProjects>>;
 }
 export default function LayoutProjectSelector({
   projects,
-  organizationId,
 }: LayoutProjectSelectorProps) {
   const router = useRouter();
-  const params = useParams<{ projectId: string }>();
-  const projectId = params?.projectId ? params.projectId : null;
+  const { organizationId, projectId } = useAppParams();
   const pathname = usePathname() || '';
 
   return (
@@ -27,7 +25,7 @@ export default function LayoutProjectSelector({
           // we know its safe to just replace the current projectId
           // since the rest of the url is to a static page
           // e.g. /[organizationId]/[projectId]/events
-          if (params && projectId && Object.keys(params).length === 2) {
+          if (organizationId && projectId) {
             router.push(pathname.replace(projectId, value));
           } else {
             router.push(`/${organizationId}/${value}`);

apps/web/src/app/(app)/layout-sidebar.tsx

@@ -2,7 +2,6 @@
 
 import { useEffect, useState } from 'react';
 import { Logo } from '@/components/Logo';
-import type { IServiceRecentDashboards } from '@/server/services/dashboard.service';
 import type { IServiceOrganization } from '@/server/services/organization.service';
 import { cn } from '@/utils/cn';
 import { Rotate as Hamburger } from 'hamburger-react';
@@ -13,15 +12,11 @@ import LayoutMenu from './layout-menu';
 import LayoutOrganizationSelector from './layout-organization-selector';
 
 interface LayoutSidebarProps {
-  recentDashboards: IServiceRecentDashboards;
   organizations: IServiceOrganization[];
 }
-export function LayoutSidebar({
-  organizations,
-  recentDashboards,
-}: LayoutSidebarProps) {
+export function LayoutSidebar({ organizations }: LayoutSidebarProps) {
   const [active, setActive] = useState(false);
-  const fallbackProjectId = recentDashboards[0]?.project_id ?? null;
+  const fallbackProjectId = null;
   const pathname = usePathname();
   useEffect(() => {
     setActive(false);
@@ -54,7 +49,7 @@ export function LayoutSidebar({
         </div>
         <div className="flex flex-col p-4 gap-2 flex-grow overflow-auto">
           <LayoutMenu
-            recentDashboards={recentDashboards}
+            recentDashboards={[]}
             fallbackProjectId={fallbackProjectId}
           />
           {/* Placeholder for LayoutOrganizationSelector */}

apps/web/src/app/(app)/layout.tsx

@@ -1,8 +1,5 @@
-import { getSession } from '@/server/auth';
-import { getRecentDashboardsByUserId } from '@/server/services/dashboard.service';
 import { getOrganizations } from '@/server/services/organization.service';
 
-import Auth from '../auth';
 import { LayoutSidebar } from './layout-sidebar';
 
 interface AppLayoutProps {
@@ -10,19 +7,11 @@ interface AppLayoutProps {
 }
 
 export default async function AppLayout({ children }: AppLayoutProps) {
-  const session = await getSession();
   const organizations = await getOrganizations();
-  const recentDashboards = session?.user.id
-    ? await getRecentDashboardsByUserId(session?.user.id)
-    : [];
-
-  if (!session) {
-    return <Auth />;
-  }
 
   return (
     <div id="dashboard">
-      <LayoutSidebar {...{ organizations, recentDashboards }} />
+      <LayoutSidebar {...{ organizations }} />
       <div className="lg:pl-72 transition-all">{children}</div>
     </div>
   );

apps/web/src/app/(app)/page-layout.tsx

@@ -1,32 +1,21 @@
-import { getProjectsByOrganizationId } from '@/server/services/project.service';
+import { getCurrentProjects } from '@/server/services/project.service';
 
 import LayoutProjectSelector from './layout-project-selector';
 
 interface PageLayoutProps {
   children: React.ReactNode;
   title: React.ReactNode;
-  organizationId: string | null;
 }
 
-export default async function PageLayout({
-  children,
-  title,
-  organizationId,
-}: PageLayoutProps) {
-  const projects = organizationId
-    ? await getProjectsByOrganizationId(organizationId)
-    : [];
+export default async function PageLayout({ children, title }: PageLayoutProps) {
+  const projects = await getCurrentProjects();
+
   return (
     <>
       <div className="h-16 border-b border-border flex-shrink-0 sticky top-0 bg-white px-4 flex items-center justify-between z-20 pl-12 lg:pl-4">
         <div className="text-xl font-medium">{title}</div>
 
-        {projects.length > 0 && (
-          <LayoutProjectSelector
-            projects={projects}
-            organizationId={organizationId}
-          />
-        )}
+        {projects.length > 0 && <LayoutProjectSelector projects={projects} />}
       </div>
       <div>{children}</div>
     </>

apps/web/src/app/(app)/page.tsx

@@ -1,26 +1,13 @@
-import { ModalWrapper } from '@/modals';
-import { ModalContent, ModalHeader } from '@/modals/Modal/Container';
+import { getOrganizations } from '@/server/services/organization.service';
+import { CreateOrganization } from '@clerk/nextjs';
 import { redirect } from 'next/navigation';
 
-import { db } from '@mixan/db';
-
-import { ListOrganizations } from './list-organizations';
-
 export default async function Page() {
-  const organizations = await db.organization.findMany();
+  const organizations = await getOrganizations();
 
-  if (organizations.length === 1 && organizations[0]?.id) {
-    redirect(`/${organizations[0].id}`);
+  if (organizations.length === 0) {
+    return <CreateOrganization />;
   }
 
-  return (
-    <div className="fixed top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.2)] z-50">
-      <ModalWrapper>
-        <ModalContent>
-          <ModalHeader title="Select organization" onClose={false} />
-          <ListOrganizations organizations={organizations} />
-        </ModalContent>
-      </ModalWrapper>
-    </div>
-  );
+  return redirect(`/${organizations[0]?.slug}`);
 }