make tracker script smaller and general improvement for web

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

@@ -1,14 +1,15 @@
 'use client';
 
-import { api, handleError, handleErrorToastOptions } from '@/app/_trpc/client';
+import { api, handleErrorToastOptions } from '@/app/_trpc/client';
 import { Card, CardActions, CardActionsItem } from '@/components/Card';
 import { ToastAction } from '@/components/ui/toast';
 import { toast } from '@/components/ui/use-toast';
+import { useAppParams } from '@/hooks/useAppParams';
 import { pushModal } from '@/modals';
 import type { getDashboardsByProjectId } from '@/server/services/dashboard.service';
-import { Pencil, Plus, Trash } from 'lucide-react';
+import { Pencil, Trash } from 'lucide-react';
 import Link from 'next/link';
-import { useParams, useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 
 interface ListDashboardsProps {
   dashboards: Awaited<ReturnType<typeof getDashboardsByProjectId>>;
@@ -16,7 +17,7 @@ interface ListDashboardsProps {
 
 export function ListDashboards({ dashboards }: ListDashboardsProps) {
   const router = useRouter();
-  const params = useParams();
+  const params = useAppParams();
   const { organizationId, projectId } = params;
   const deletion = api.dashboard.delete.useMutation({
     onError: (error, variables) => {

apps/web/src/app/(app)/[organizationId]/list-projects.tsx

@@ -1,19 +1,19 @@
 'use client';
 
 import { Card } from '@/components/Card';
+import { useAppParams } from '@/hooks/useAppParams';
 import { pushModal } from '@/modals';
 import type { getProjectsByOrganizationId } from '@/server/services/project.service';
 import { Plus } from 'lucide-react';
 import Link from 'next/link';
-import { useParams } from 'next/navigation';
 
 interface ListProjectsProps {
   projects: Awaited<ReturnType<typeof getProjectsByOrganizationId>>;
 }
 
 export function ListProjects({ projects }: ListProjectsProps) {
-  const params = useParams();
-  const organizationId = params.organizationId as string;
+  const params = useAppParams();
+  const organizationId = params.organizationId;
 
   return (
     <>

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

@@ -2,19 +2,18 @@
 
 import { StickyBelowHeader } from '@/app/(app)/layout-sticky-below-header';
 import { columns } from '@/components/clients/table';
-import { ContentHeader } from '@/components/Content';
 import { DataTable } from '@/components/DataTable';
 import { Button } from '@/components/ui/button';
+import { useAppParams } from '@/hooks/useAppParams';
 import { pushModal } from '@/modals';
 import type { getClientsByOrganizationId } from '@/server/services/clients.service';
-import { KeySquareIcon, PlusIcon } from 'lucide-react';
-import { useParams } from 'next/navigation';
+import { PlusIcon } from 'lucide-react';
 
 interface ListClientsProps {
   clients: Awaited<ReturnType<typeof getClientsByOrganizationId>>;
 }
 export default function ListClients({ clients }: ListClientsProps) {
-  const organizationId = useParams().organizationId as string;
+  const organizationId = useAppParams().organizationId;
 
   return (
     <>

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

@@ -4,16 +4,16 @@ import { StickyBelowHeader } from '@/app/(app)/layout-sticky-below-header';
 import { DataTable } from '@/components/DataTable';
 import { columns } from '@/components/projects/table';
 import { Button } from '@/components/ui/button';
+import { useAppParams } from '@/hooks/useAppParams';
 import { pushModal } from '@/modals';
 import type { getProjectsByOrganizationId } from '@/server/services/project.service';
-import { PlusIcon, WarehouseIcon } from 'lucide-react';
-import { useParams } from 'next/navigation';
+import { PlusIcon } from 'lucide-react';
 
 interface ListProjectsProps {
   projects: Awaited<ReturnType<typeof getProjectsByOrganizationId>>;
 }
 export default function ListProjects({ projects }: ListProjectsProps) {
-  const organizationId = useParams().organizationId as string;
+  const organizationId = useAppParams().organizationId;
   return (
     <>
       <StickyBelowHeader>

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { useAppParams } from '@/hooks/useAppParams';
 import type { IServiceRecentDashboards } from '@/server/services/dashboard.service';
 import {
   BuildingIcon,
@@ -13,7 +14,7 @@ import {
 } from 'lucide-react';
 import type { LucideProps } from 'lucide-react';
 import Link from 'next/link';
-import { useParams, usePathname } from 'next/navigation';
+import { usePathname } from 'next/navigation';
 
 function LinkWithIcon({
   href,
@@ -44,12 +45,11 @@ export default function LayoutMenu({
   fallbackProjectId,
 }: LayoutMenuProps) {
   const pathname = usePathname();
-  const params = useParams();
-  const projectId = (
+  const params = useAppParams();
+  const projectId =
     !params.projectId || params.projectId === 'undefined'
       ? fallbackProjectId
-      : params.projectId
-  ) as string | null;
+      : params.projectId;
 
   return (
     <>
@@ -73,7 +73,7 @@ export default function LayoutMenu({
         label="Settings"
         href={`/${params.organizationId}/settings/organization`}
       />
-      {pathname.includes('/settings/') && (
+      {pathname?.includes('/settings/') && (
         <div className="pl-7">
           <LinkWithIcon
             icon={BuildingIcon}

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

@@ -1,8 +1,8 @@
 'use client';
 
+import { useAppParams } from '@/hooks/useAppParams';
 import type { IServiceOrganization } from '@/server/services/organization.service';
 import { Building } from 'lucide-react';
-import { useParams } from 'next/navigation';
 
 interface LayoutOrganizationSelectorProps {
   organizations: IServiceOrganization[];
@@ -11,7 +11,7 @@ interface LayoutOrganizationSelectorProps {
 export default function LayoutOrganizationSelector({
   organizations,
 }: LayoutOrganizationSelectorProps) {
-  const params = useParams();
+  const params = useAppParams();
 
   const organization = organizations.find(
     (item) => item.id === params.organizationId

apps/web/src/components/report/PreviousDiffIndicator.tsx

@@ -17,11 +17,8 @@ export function PreviousDiffIndicator({
 }: PreviousDiffIndicatorProps) {
   const { previous } = useChartContext();
   const number = useNumber();
-  if (
-    (children === undefined && (diff === null || diff === undefined)) ||
-    previous === false
-  ) {
-    return null;
+  if (diff === null || diff === undefined || previous === false) {
+    return children ?? null;
   }
 
   return (

apps/web/src/components/report/ReportSaveButton.tsx

@@ -3,6 +3,7 @@
 import { api, handleError } from '@/app/_trpc/client';
 import { Button } from '@/components/ui/button';
 import { toast } from '@/components/ui/use-toast';
+import { useAppParams } from '@/hooks/useAppParams';
 import { pushModal } from '@/modals';
 import { useDispatch, useSelector } from '@/redux';
 import { SaveIcon } from 'lucide-react';
@@ -14,7 +15,7 @@ interface ReportSaveButtonProps {
   className?: string;
 }
 export function ReportSaveButton({ className }: ReportSaveButtonProps) {
-  const { reportId } = useParams();
+  const { reportId } = useAppParams<{ reportId: string | undefined }>();
   const dispatch = useDispatch();
   const update = api.report.update.useMutation({
     onSuccess() {
@@ -36,7 +37,7 @@ export function ReportSaveButton({ className }: ReportSaveButtonProps) {
         loading={update.isLoading}
         onClick={() => {
           update.mutate({
-            reportId: reportId as string,
+            reportId: reportId,
             report,
           });
         }}

apps/web/src/components/report/sidebar/ReportBreakdowns.tsx

@@ -3,20 +3,20 @@
 import { api } from '@/app/_trpc/client';
 import { ColorSquare } from '@/components/ColorSquare';
 import { Combobox } from '@/components/ui/combobox';
+import { useAppParams } from '@/hooks/useAppParams';
 import { useDispatch, useSelector } from '@/redux';
 import type { IChartBreakdown } from '@/types';
-import { useParams } from 'next/navigation';
 
 import { addBreakdown, changeBreakdown, removeBreakdown } from '../reportSlice';
 import { ReportBreakdownMore } from './ReportBreakdownMore';
 import type { ReportEventMoreProps } from './ReportEventMore';
 
 export function ReportBreakdowns() {
-  const params = useParams();
+  const params = useAppParams();
   const selectedBreakdowns = useSelector((state) => state.report.breakdowns);
   const dispatch = useDispatch();
   const propertiesQuery = api.chart.properties.useQuery({
-    projectId: params.projectId as string,
+    projectId: params.projectId,
   });
   const propertiesCombobox = (propertiesQuery.data ?? []).map((item) => ({
     value: item,

apps/web/src/components/report/sidebar/ReportEventFilters.tsx

@@ -14,6 +14,7 @@ import {
   CommandSeparator,
 } from '@/components/ui/command';
 import { RenderDots } from '@/components/ui/RenderDots';
+import { useAppParams } from '@/hooks/useAppParams';
 import { useMappings } from '@/hooks/useMappings';
 import { useDispatch } from '@/redux';
 import type {
@@ -38,12 +39,12 @@ export function ReportEventFilters({
   isCreating,
   setIsCreating,
 }: ReportEventFiltersProps) {
-  const params = useParams();
+  const params = useAppParams();
   const dispatch = useDispatch();
   const propertiesQuery = api.chart.properties.useQuery(
     {
       event: event.name,
-      projectId: params.projectId as string,
+      projectId: params.projectId,
     },
     {
       enabled: !!event.name,

apps/web/src/components/report/sidebar/ReportEvents.tsx

@@ -6,6 +6,7 @@ import { ColorSquare } from '@/components/ColorSquare';
 import { Dropdown } from '@/components/Dropdown';
 import { Combobox } from '@/components/ui/combobox';
 import { Input } from '@/components/ui/input';
+import { useAppParams } from '@/hooks/useAppParams';
 import { useDebounceFn } from '@/hooks/useDebounceFn';
 import { useDispatch, useSelector } from '@/redux';
 import type { IChartEvent } from '@/types';
@@ -21,9 +22,9 @@ export function ReportEvents() {
   const [isCreating, setIsCreating] = useState(false);
   const selectedEvents = useSelector((state) => state.report.events);
   const dispatch = useDispatch();
-  const params = useParams();
+  const params = useAppParams();
   const eventsQuery = api.chart.events.useQuery({
-    projectId: String(params.projectId),
+    projectId: params.projectId,
   });
   const eventsCombobox = (eventsQuery.data ?? []).map((item) => ({
     value: item.name,
@@ -157,6 +158,7 @@ export function ReportEvents() {
 
         <Combobox
           value={''}
+          searchable
           onChange={(value) => {
             dispatch(
               addEvent({

apps/web/src/modals/SaveReport.tsx

@@ -7,9 +7,10 @@ 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 { useAppParams } from '@/hooks/useAppParams';
 import type { IChartInput } from '@/types';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useParams, useRouter, useSearchParams } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { Controller, useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -30,11 +31,11 @@ type IForm = z.infer<typeof validator>;
 
 export default function SaveReport({ report }: SaveReportProps) {
   const router = useRouter();
-  const params = useParams();
-  const organizationId = params.organizationId as string;
-  const projectId = params.projectId as string;
+  const params = useAppParams();
+  const organizationId = params.organizationId;
+  const projectId = params.projectId;
   const searchParams = useSearchParams();
-  const dashboardId = searchParams.get('dashboardId') ?? undefined;
+  const dashboardId = searchParams?.get('dashboardId') ?? undefined;
 
   const save = api.report.save.useMutation({
     onError: handleError,
@@ -47,7 +48,7 @@ export default function SaveReport({ report }: SaveReportProps) {
       router.push(
         `/${organizationId}/${projectId}/reports/${
           res.id
-        }?${searchParams.toString()}`
+        }?${searchParams?.toString()}`
       );
     },
   });

apps/web/src/server/api/routers/chart.ts

@@ -45,6 +45,7 @@ export const chartRouter = createTRPCRouter({
         () =>
           db.event.findMany({
             take: 500,
+            distinct: 'name',
             where: {
               project_id: projectId,
               ...(event
@@ -124,6 +125,14 @@ export const chartRouter = createTRPCRouter({
       let diff = 0;
 
       switch (input.range) {
+        case '30min': {
+          diff = 1000 * 60 * 30;
+          break;
+        }
+        case '1h': {
+          diff = 1000 * 60 * 60;
+          break;
+        }
         case '24h':
         case 'today': {
           diff = 1000 * 60 * 60 * 24;
@@ -243,7 +252,10 @@ function getPreviousDataDiff(current: number, previous: number | undefined) {
   );
 
   return {
-    diff: Number.isNaN(diff) || !Number.isFinite(diff) ? null : diff,
+    diff:
+      Number.isNaN(diff) || !Number.isFinite(diff) || current === previous
+        ? null
+        : diff,
     state:
       current > previous
         ? 'positive'