migrate to app dir and ssr

apps/web/src/modals/AddClient.tsx

@@ -1,25 +1,24 @@
+'use client';
+
+import { api, handleError } from '@/app/_trpc/client';
 import { ButtonContainer } from '@/components/ButtonContainer';
 import { InputWithLabel } from '@/components/forms/InputWithLabel';
+import Syntax from '@/components/Syntax';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Combobox } from '@/components/ui/combobox';
 import { Label } from '@/components/ui/label';
 import { toast } from '@/components/ui/use-toast';
-import { useOrganizationParams } from '@/hooks/useOrganizationParams';
-import { useRefetchActive } from '@/hooks/useRefetchActive';
-import { api, handleError } from '@/utils/api';
 import { clipboard } from '@/utils/clipboard';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Copy } from 'lucide-react';
-import dynamic from 'next/dynamic';
+import { useRouter } from 'next/navigation';
 import { Controller, useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 
 import { popModal } from '.';
 import { ModalContent, ModalHeader } from './Modal/Container';
 
-const Syntax = dynamic(import('@/components/Syntax'));
-
 const validator = z.object({
   name: z.string().min(1, 'Required'),
   cors: z.string().min(1, 'Required'),
@@ -28,13 +27,16 @@ const validator = z.object({
 });
 
 type IForm = z.infer<typeof validator>;
+interface AddClientProps {
+  organizationId: string;
+}
 
-export default function CreateProject() {
-  const params = useOrganizationParams();
-  const refetch = useRefetchActive();
+export default function AddClient({ organizationId }: AddClientProps) {
+  const router = useRouter();
   const query = api.project.list.useQuery({
-    organizationSlug: params.organization,
+    organizationId,
   });
+
   const mutation = api.client.create.useMutation({
     onError: handleError,
     onSuccess() {
@@ -42,9 +44,10 @@ export default function CreateProject() {
         title: 'Success',
         description: 'Client created!',
       });
-      refetch();
+      router.refresh();
     },
   });
+
   const { register, handleSubmit, formState, control } = useForm<IForm>({
     resolver: zodResolver(validator),
     defaultValues: {
@@ -128,7 +131,7 @@ export default function CreateProject() {
         onSubmit={handleSubmit((values) => {
           mutation.mutate({
             ...values,
-            organizationSlug: params.organization,
+            organizationId,
           });
         })}
       >

apps/web/src/modals/AddDashboard.tsx

@@ -1,10 +1,12 @@
+'use client';
+
+import { api, handleError } from '@/app/_trpc/client';
 import { ButtonContainer } from '@/components/ButtonContainer';
 import { InputWithLabel } from '@/components/forms/InputWithLabel';
 import { Button } from '@/components/ui/button';
 import { toast } from '@/components/ui/use-toast';
-import { useRefetchActive } from '@/hooks/useRefetchActive';
-import { api, handleError } from '@/utils/api';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -12,8 +14,7 @@ import { popModal } from '.';
 import { ModalContent, ModalHeader } from './Modal/Container';
 
 interface AddDashboardProps {
-  organizationSlug: string;
-  projectSlug: string;
+  projectId: string;
 }
 
 const validator = z.object({
@@ -22,11 +23,8 @@ const validator = z.object({
 
 type IForm = z.infer<typeof validator>;
 
-export default function AddDashboard({
-  // organizationSlug,
-  projectSlug,
-}: AddDashboardProps) {
-  const refetch = useRefetchActive();
+export default function AddDashboard({ projectId }: AddDashboardProps) {
+  const router = useRouter();
 
   const { register, handleSubmit, formState } = useForm<IForm>({
     resolver: zodResolver(validator),
@@ -38,7 +36,7 @@ export default function AddDashboard({
   const mutation = api.dashboard.create.useMutation({
     onError: handleError,
     onSuccess() {
-      refetch();
+      router.refresh();
       toast({
         title: 'Success',
         description: 'Dashboard created.',
@@ -49,13 +47,13 @@ export default function AddDashboard({
 
   return (
     <ModalContent>
-      <ModalHeader title="Edit client" />
+      <ModalHeader title="Add dashboard" />
       <form
         className="flex flex-col gap-4"
         onSubmit={handleSubmit(({ name }) => {
           mutation.mutate({
             name,
-            projectSlug,
+            projectId,
           });
         })}
       >

apps/web/src/modals/AddProject.tsx

@@ -1,11 +1,12 @@
+'use client';
+
+import { api, handleError } from '@/app/_trpc/client';
 import { ButtonContainer } from '@/components/ButtonContainer';
 import { InputWithLabel } from '@/components/forms/InputWithLabel';
 import { Button } from '@/components/ui/button';
 import { toast } from '@/components/ui/use-toast';
-import { useOrganizationParams } from '@/hooks/useOrganizationParams';
-import { useRefetchActive } from '@/hooks/useRefetchActive';
-import { api, handleError } from '@/utils/api';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -17,18 +18,19 @@ const validator = z.object({
 });
 
 type IForm = z.infer<typeof validator>;
-
-export default function AddProject() {
-  const params = useOrganizationParams();
-  const refetch = useRefetchActive();
+interface AddProjectProps {
+  organizationId: string;
+}
+export default function AddProject({ organizationId }: AddProjectProps) {
+  const router = useRouter();
   const mutation = api.project.create.useMutation({
     onError: handleError,
     onSuccess() {
+      router.refresh();
       toast({
         title: 'Success',
         description: 'Project created! Lets create a client for it 🤘',
       });
-      refetch();
       popModal();
     },
   });
@@ -46,11 +48,17 @@ export default function AddProject() {
         onSubmit={handleSubmit((values) => {
           mutation.mutate({
             ...values,
-            organizationSlug: params.organization,
+            organizationId,
           });
         })}
       >
-        <InputWithLabel label="Name" placeholder="Name" {...register('name')} />
+        <div className="flex flex-col gap-4">
+          <InputWithLabel
+            label="Name"
+            placeholder="Name"
+            {...register('name')}
+          />
+        </div>
         <ButtonContainer>
           <Button type="button" variant="outline" onClick={() => popModal()}>
             Cancel

apps/web/src/modals/Confirm.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { ButtonContainer } from '@/components/ButtonContainer';
 import { Button } from '@/components/ui/button';
 

apps/web/src/modals/EditClient.tsx

@@ -1,20 +1,20 @@
-import { useEffect } from 'react';
+'use client';
+
+import { api, handleError } from '@/app/_trpc/client';
 import { ButtonContainer } from '@/components/ButtonContainer';
 import { InputWithLabel } from '@/components/forms/InputWithLabel';
 import { Button } from '@/components/ui/button';
 import { toast } from '@/components/ui/use-toast';
-import { useRefetchActive } from '@/hooks/useRefetchActive';
-import { api, handleError } from '@/utils/api';
+import type { IClientWithProject } from '@/types';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { popModal } from '.';
 import { ModalContent, ModalHeader } from './Modal/Container';
 
-interface EditClientProps {
-  id: string;
-}
+type EditClientProps = IClientWithProject;
 
 const validator = z.object({
   id: z.string().min(1),
@@ -24,35 +24,29 @@ const validator = z.object({
 
 type IForm = z.infer<typeof validator>;
 
-export default function EditClient({ id }: EditClientProps) {
-  const refetch = useRefetchActive();
+export default function EditClient({ id, name, cors }: EditClientProps) {
+  const router = useRouter();
+  const { register, handleSubmit, reset, formState } = useForm<IForm>({
+    resolver: zodResolver(validator),
+    defaultValues: {
+      id,
+      name,
+      cors,
+    },
+  });
+
   const mutation = api.client.update.useMutation({
     onError: handleError,
     onSuccess() {
+      reset();
       toast({
         title: 'Success',
         description: 'Client updated.',
       });
       popModal();
-      refetch();
+      router.refresh();
     },
   });
-  const query = api.client.get.useQuery({ id });
-  const data = query.data;
-  const { register, handleSubmit, reset, formState } = useForm<IForm>({
-    resolver: zodResolver(validator),
-    defaultValues: {
-      id: '',
-      name: '',
-      cors: '',
-    },
-  });
-
-  useEffect(() => {
-    if (data) {
-      reset(data);
-    }
-  }, [data, reset]);
 
   return (
     <ModalContent>
@@ -67,11 +61,13 @@ export default function EditClient({ id }: EditClientProps) {
             label="Name"
             placeholder="Name"
             {...register('name')}
+            defaultValue={name}
           />
           <InputWithLabel
             label="Cors"
             placeholder="Cors"
             {...register('cors')}
+            defaultValue={cors}
           />
         </div>
         <ButtonContainer>

apps/web/src/modals/EditDashboard.tsx

@@ -1,20 +1,20 @@
-import { useEffect } from 'react';
+'use client';
+
+import { api, handleError } from '@/app/_trpc/client';
 import { ButtonContainer } from '@/components/ButtonContainer';
 import { InputWithLabel } from '@/components/forms/InputWithLabel';
 import { Button } from '@/components/ui/button';
 import { toast } from '@/components/ui/use-toast';
-import { useRefetchActive } from '@/hooks/useRefetchActive';
-import { api, handleError } from '@/utils/api';
+import type { IServiceDashboardWithProject } from '@/server/services/dashboard.service';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { popModal } from '.';
 import { ModalContent, ModalHeader } from './Modal/Container';
 
-interface EditDashboardProps {
-  id: string;
-}
+type EditDashboardProps = IServiceDashboardWithProject;
 
 const validator = z.object({
   id: z.string().min(1),
@@ -23,34 +23,28 @@ const validator = z.object({
 
 type IForm = z.infer<typeof validator>;
 
-export default function EditDashboard({ id }: EditDashboardProps) {
-  const refetch = useRefetchActive();
+export default function EditDashboard({ id, name }: EditDashboardProps) {
+  const router = useRouter();
+  const { register, handleSubmit, reset, formState } = useForm<IForm>({
+    resolver: zodResolver(validator),
+    defaultValues: {
+      id,
+      name,
+    },
+  });
+
   const mutation = api.dashboard.update.useMutation({
     onError: handleError,
     onSuccess() {
+      reset();
       toast({
         title: 'Success',
         description: 'Dashboard updated.',
       });
       popModal();
-      refetch();
+      router.refresh();
     },
   });
-  const query = api.dashboard.get.useQuery({ id });
-  const data = query.data;
-  const { register, handleSubmit, reset, formState } = useForm<IForm>({
-    resolver: zodResolver(validator),
-    defaultValues: {
-      id: '',
-      name: '',
-    },
-  });
-
-  useEffect(() => {
-    if (data) {
-      reset(data);
-    }
-  }, [data, reset]);
 
   return (
     <ModalContent>
@@ -60,7 +54,12 @@ export default function EditDashboard({ id }: EditDashboardProps) {
           mutation.mutate(values);
         })}
       >
-        <InputWithLabel label="Name" placeholder="Name" {...register('name')} />
+        <InputWithLabel
+          label="Name"
+          placeholder="Name"
+          {...register('name')}
+          defaultValue={name}
+        />
         <ButtonContainer>
           <Button type="button" variant="outline" onClick={() => popModal()}>
             Cancel

apps/web/src/modals/EditProject.tsx

@@ -1,20 +1,20 @@
-import { useEffect } from 'react';
+'use client';
+
+import { api, handleError } from '@/app/_trpc/client';
 import { ButtonContainer } from '@/components/ButtonContainer';
 import { InputWithLabel } from '@/components/forms/InputWithLabel';
 import { Button } from '@/components/ui/button';
 import { toast } from '@/components/ui/use-toast';
-import { useRefetchActive } from '@/hooks/useRefetchActive';
-import { api, handleError } from '@/utils/api';
+import type { IProject } from '@/types';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { popModal } from '.';
 import { ModalContent, ModalHeader } from './Modal/Container';
 
-interface EditProjectProps {
-  id: string;
-}
+type EditProjectProps = IProject;
 
 const validator = z.object({
   id: z.string().min(1),
@@ -23,34 +23,28 @@ const validator = z.object({
 
 type IForm = z.infer<typeof validator>;
 
-export default function EditProject({ id }: EditProjectProps) {
-  const refetch = useRefetchActive();
+export default function EditProject({ id, name }: EditProjectProps) {
+  const router = useRouter();
+  const { register, handleSubmit, reset, formState } = useForm<IForm>({
+    resolver: zodResolver(validator),
+    defaultValues: {
+      id,
+      name,
+    },
+  });
+
   const mutation = api.project.update.useMutation({
     onError: handleError,
     onSuccess() {
+      reset();
+      router.refresh();
       toast({
         title: 'Success',
         description: 'Project updated.',
       });
       popModal();
-      refetch();
     },
   });
-  const query = api.project.get.useQuery({ id });
-  const data = query.data;
-  const { register, handleSubmit, reset, formState } = useForm<IForm>({
-    resolver: zodResolver(validator),
-    defaultValues: {
-      id: '',
-      name: '',
-    },
-  });
-
-  useEffect(() => {
-    if (data) {
-      reset(data);
-    }
-  }, [data, reset]);
 
   return (
     <ModalContent>
@@ -60,7 +54,12 @@ export default function EditProject({ id }: EditProjectProps) {
           mutation.mutate(values);
         })}
       >
-        <InputWithLabel label="Name" placeholder="Name" {...register('name')} />
+        <InputWithLabel
+          label="Name"
+          placeholder="Name"
+          {...register('name')}
+          defaultValue={name}
+        />
         <ButtonContainer>
           <Button type="button" variant="outline" onClick={() => popModal()}>
             Cancel

apps/web/src/modals/EditReport.tsx

@@ -1,10 +1,8 @@
-import { useEffect } from 'react';
+'use client';
+
 import { ButtonContainer } from '@/components/ButtonContainer';
 import { InputWithLabel } from '@/components/forms/InputWithLabel';
 import { Button } from '@/components/ui/button';
-import { toast } from '@/components/ui/use-toast';
-import { useRefetchActive } from '@/hooks/useRefetchActive';
-import { api, handleError } from '@/utils/api';
 import { zodResolver } from '@hookform/resolvers/zod';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';

apps/web/src/modals/Modal/Container.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Button } from '@/components/ui/button';
 import { X } from 'lucide-react';
 
@@ -17,16 +19,23 @@ export function ModalContent({ children }: ModalContentProps) {
 
 interface ModalHeaderProps {
   title: string | React.ReactNode;
+  onClose?: (() => void) | false;
 }
 
-export function ModalHeader({ title }: ModalHeaderProps) {
+export function ModalHeader({ title, onClose }: ModalHeaderProps) {
   return (
     <div className="flex items-center justify-between mb-6">
       <div className="font-medium">{title}</div>
-      <Button variant="ghost" size="sm" onClick={() => popModal()}>
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </Button>
+      {onClose !== false && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => (onClose ? onClose() : popModal())}
+        >
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </Button>
+      )}
     </div>
   );
 }

apps/web/src/modals/SaveReport.tsx

@@ -1,17 +1,15 @@
-import { useEffect } from 'react';
+'use client';
+
+import { api, handleError } from '@/app/_trpc/client';
 import { ButtonContainer } from '@/components/ButtonContainer';
 import { InputWithLabel } from '@/components/forms/InputWithLabel';
 import { Button } from '@/components/ui/button';
 import { Combobox } from '@/components/ui/combobox';
 import { Label } from '@/components/ui/label';
 import { toast } from '@/components/ui/use-toast';
-import { useOrganizationParams } from '@/hooks/useOrganizationParams';
-import { useRefetchActive } from '@/hooks/useRefetchActive';
 import type { IChartInput } from '@/types';
-import { api, handleError } from '@/utils/api';
-import { strip } from '@/utils/object';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useRouter } from 'next/router';
+import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -32,8 +30,12 @@ type IForm = z.infer<typeof validator>;
 
 export default function SaveReport({ report }: SaveReportProps) {
   const router = useRouter();
-  const { organization, project, dashboard } = useOrganizationParams();
-  const refetch = useRefetchActive();
+  const params = useParams();
+  const organizationId = params.organizationId as string;
+  const projectId = params.projectId as string;
+  const searchParams = useSearchParams();
+  const dashboardId = searchParams.get('dashboardId') ?? undefined;
+
   const save = api.report.save.useMutation({
     onError: handleError,
     onSuccess(res) {
@@ -42,11 +44,11 @@ export default function SaveReport({ report }: SaveReportProps) {
         description: 'Report saved.',
       });
       popModal();
-      refetch();
-      router.push({
-        pathname: `/${organization}/${project}/reports/${res.id}`,
-        query: strip({ dashboard }),
-      });
+      router.push(
+        `/${organizationId}/${projectId}/reports/${
+          res.id
+        }?${searchParams.toString()}`
+      );
     },
   });
 
@@ -55,7 +57,7 @@ export default function SaveReport({ report }: SaveReportProps) {
       resolver: zodResolver(validator),
       defaultValues: {
         name: report.name,
-        dashboardId: '',
+        dashboardId,
       },
     });
 
@@ -72,7 +74,7 @@ export default function SaveReport({ report }: SaveReportProps) {
   });
 
   const dashboardQuery = api.dashboard.list.useQuery({
-    projectSlug: project,
+    projectId,
   });
 
   const dashboards = (dashboardQuery.data ?? []).map((item) => ({
@@ -80,15 +82,6 @@ export default function SaveReport({ report }: SaveReportProps) {
     label: item.name,
   }));
 
-  useEffect(() => {
-    if (dashboard && dashboardQuery.data) {
-      const match = dashboardQuery.data.find((item) => item.slug === dashboard);
-      if (match) {
-        setValue('dashboardId', match.id);
-      }
-    }
-  }, [dashboard, dashboardQuery]);
-
   return (
     <ModalContent>
       <ModalHeader title="Edit client" />
@@ -123,7 +116,7 @@ export default function SaveReport({ report }: SaveReportProps) {
                   placeholder="Select a dashboard"
                   onCreate={(value) => {
                     dashboardMutation.mutate({
-                      projectSlug: project,
+                      projectId,
                       name: value,
                     });
                   }}

apps/web/src/modals/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Suspense, useEffect, useRef, useState } from 'react';
 import { Loader } from 'lucide-react';
 import mitt from 'mitt';
@@ -7,7 +9,7 @@ import { useOnClickOutside } from 'usehooks-ts';
 import type { ConfirmProps } from './Confirm';
 
 const Loading = () => (
-  <div className="fixed top-0 z-50 flex h-screen w-screen items-center justify-center overflow-auto bg-backdrop">
+  <div className="fixed left-0 top-0 z-50 flex h-screen w-screen items-center justify-center overflow-auto bg-backdrop">
     <Loader className="mb-8 animate-spin" size={40} />
   </div>
 );
@@ -65,11 +67,11 @@ interface StateItem {
 
 interface ModalWrapperProps {
   children: React.ReactNode;
-  name: ModalRoutes;
-  isOnTop: boolean;
+  name?: ModalRoutes;
+  isOnTop?: boolean;
 }
 
-function ModalWrapper({ children, name, isOnTop }: ModalWrapperProps) {
+export function ModalWrapper({ children, name, isOnTop }: ModalWrapperProps) {
   const ref = useRef<HTMLDivElement>(null);
 
   useOnClickOutside(ref, (event) => {
@@ -79,7 +81,7 @@ function ModalWrapper({ children, name, isOnTop }: ModalWrapperProps) {
         ? !!target.closest('[data-radix-popper-content-wrapper]')
         : false;
 
-    if (isOnTop && !isPortal) {
+    if (isOnTop && !isPortal && name) {
       emitter.emit('pop', {
         name,
       });
@@ -111,6 +113,8 @@ export function ModalProvider() {
 
   useEffect(() => {
     emitter.on('push', ({ name, props }) => {
+      console.log('hej?', name, props);
+
       setState((p) => [
         ...p,
         {
@@ -154,7 +158,7 @@ export function ModalProvider() {
   return (
     <>
       {!!state.length && (
-        <div className="fixed top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.2)]"></div>
+        <div className="fixed top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.2)] z-50"></div>
       )}
       {state.map((item, index) => {
         const Modal = modals[item.name];