migrate to app dir and ssr

apps/web/src/hooks/useAppParams.ts

@@ -0,0 +1,16 @@
+import { useParams } from 'next/navigation';
+
+// eslint-disable-next-line
+type AppParams = {
+  organizationId: string;
+  projectId: string;
+};
+
+export function useAppParams<T>() {
+  const params = useParams<T & AppParams>();
+  return {
+    ...(params ?? {}),
+    organizationId: params?.organizationId,
+    projectId: params?.projectId,
+  } as T & AppParams;
+}

apps/web/src/hooks/useEventNames.ts

@@ -0,0 +1,12 @@
+import { api } from '@/app/_trpc/client';
+
+export function useEventNames(projectId: string) {
+  const filterEventsQuery = api.chart.events.useQuery({
+    projectId: projectId,
+  });
+
+  return (filterEventsQuery.data ?? []).map((item) => ({
+    value: item.name,
+    label: item.name,
+  }));
+}

apps/web/src/hooks/useOrganizationParams.ts

@@ -1,14 +0,0 @@
-import { z } from 'zod';
-
-import { useQueryParams } from './useQueryParams';
-
-export function useOrganizationParams() {
-  return useQueryParams(
-    z.object({
-      organization: z.string(),
-      project: z.string(),
-      dashboard: z.string(),
-      profileId: z.string().optional(),
-    })
-  );
-}

apps/web/src/hooks/useRechartDataModel.ts

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import type { IChartData } from '@/app/_trpc/client';
+import { alphabetIds } from '@/utils/constants';
+import { getChartColor } from '@/utils/theme';
+
+export function useRechartDataModel(data: IChartData) {
+  return useMemo(() => {
+    return (
+      data.series[0]?.data.map(({ date }) => {
+        return {
+          date,
+          ...data.series.reduce((acc, serie, idx) => {
+            return {
+              ...acc,
+              ...serie.data.reduce(
+                (acc2, item) => {
+                  if (item.date === date) {
+                    acc2[`${idx}:count`] = item.count;
+                    acc2[`${idx}:payload`] = {
+                      ...item,
+                      color: getChartColor(idx),
+                    };
+                  }
+                  return acc2;
+                },
+                {} as Record<string, any>
+              ),
+            };
+          }, {}),
+        };
+      }) ?? []
+    );
+  }, [data]);
+}

apps/web/src/hooks/useSetCookie.ts

@@ -0,0 +1,16 @@
+import { usePathname, useRouter } from 'next/navigation';
+
+export function useSetCookie() {
+  const router = useRouter();
+  const pathname = usePathname();
+  return (key: string, value: string, path?: string) => {
+    fetch(`/api/cookie?${key}=${value}`).then(() => {
+      if (path && path !== pathname) {
+        router.refresh();
+        router.replace(path);
+      } else {
+        router.refresh();
+      }
+    });
+  };
+}

apps/web/src/hooks/useVisibleSeries.ts

@@ -0,0 +1,28 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { IChartData } from '@/app/_trpc/client';
+
+export function useVisibleSeries(data: IChartData, limit?: number | undefined) {
+  const max = limit ?? 20;
+  const [visibleSeries, setVisibleSeries] = useState<string[]>([]);
+  const ref = useRef(false);
+  useEffect(() => {
+    if (!ref.current && data) {
+      setVisibleSeries(
+        data?.series?.slice(0, max).map((serie) => serie.name) ?? []
+      );
+      // ref.current = true;
+    }
+  }, [data, max]);
+
+  return useMemo(() => {
+    return {
+      series: data.series
+        .map((serie, index) => ({
+          ...serie,
+          index,
+        }))
+        .filter((serie) => visibleSeries.includes(serie.name)),
+      setVisibleSeries,
+    } as const;
+  }, [visibleSeries, data.series]);
+}