New goals page. Upgraded prisma.

src/components/hooks/index.ts

@@ -3,8 +3,10 @@ export * from './queries/useActiveUsersQuery';
 export * from './queries/useEventDataEventsQuery';
 export * from './queries/useEventDataPropertiesQuery';
 export * from './queries/useEventDataValuesQuery';
+export * from './queries/useGoalsQuery';
 export * from './queries/useLoginQuery';
 export * from './queries/useRealtimeQuery';
+export * from './queries/useResultQuery';
 export * from './queries/useReportQuery';
 export * from './queries/useReportsQuery';
 export * from './queries/useRetentionQuery';

src/components/hooks/queries/useDeleteQuery.ts

@@ -0,0 +1,11 @@
+import { useApi, useModified } from '@/components/hooks';
+
+export function useDeleteQuery(path: string, params?: { [key: string]: any }) {
+  const { del, useMutation } = useApi();
+  const { mutate, isPending, error } = useMutation({
+    mutationFn: () => del(path, params),
+  });
+  const { touch } = useModified();
+
+  return { mutate, isPending, error, touch };
+}

src/components/hooks/queries/useGoalQuery.ts

@@ -0,0 +1,19 @@
+import { useApi } from '../useApi';
+import { usePagedQuery } from '../usePagedQuery';
+
+export function useGoalQuery(
+  { websiteId, reportId }: { websiteId: string; reportId: string },
+  params?: { [key: string]: string | number },
+) {
+  const { post } = useApi();
+
+  return usePagedQuery({
+    queryKey: ['goal', { websiteId, reportId, ...params }],
+    queryFn: (data: any) => {
+      return post(`/reports/goals`, {
+        ...data,
+        ...params,
+      });
+    },
+  });
+}

src/components/hooks/queries/useGoalsQuery.ts

@@ -0,0 +1,21 @@
+import { useApi } from '../useApi';
+import { usePagedQuery } from '../usePagedQuery';
+import { useModified } from '../useModified';
+
+export function useGoalsQuery(
+  { websiteId }: { websiteId: string },
+  params?: { [key: string]: string | number },
+) {
+  const { get } = useApi();
+  const { modified } = useModified(`goals`);
+
+  return usePagedQuery({
+    queryKey: ['goals', { websiteId, modified, ...params }],
+    queryFn: (data: any) => {
+      return get(`/websites/${websiteId}/goals`, {
+        ...data,
+        ...params,
+      });
+    },
+  });
+}

src/components/hooks/queries/useReportQuery.ts

@@ -1,94 +1,16 @@
-import { produce } from 'immer';
-import { useCallback, useEffect, useState } from 'react';
 import { useApi } from '../useApi';
-import { useTimezone } from '../useTimezone';
-import { useMessages } from '../useMessages';
-import { parseDateRange } from '@/lib/date';
+import { useModified } from '../useModified';
 
-export function useReportQuery(
-  reportId: string,
-  defaultParameters?: { type: string; parameters: { [key: string]: any } },
-) {
-  const [report, setReport] = useState(null);
-  const [isRunning, setIsRunning] = useState(false);
-  const { get, post } = useApi();
-  const { timezone } = useTimezone();
-  const { formatMessage, labels } = useMessages();
+export function useReportQuery(reportId: string) {
+  const { get, useQuery } = useApi();
+  const { modified } = useModified(`report:${reportId}`);
 
-  const baseParameters = {
-    name: formatMessage(labels.untitled),
-    description: '',
-    parameters: {},
-  };
-
-  const loadReport = async (id: string) => {
-    const data: any = await get(`/reports/${id}`);
-
-    const { dateRange } = data?.parameters || {};
-
-    data.parameters = {
-      ...defaultParameters?.parameters,
-      ...data.parameters,
-      dateRange: parseDateRange(dateRange.value),
-    };
-
-    setReport(data);
-  };
-
-  const runReport = useCallback(
-    async (parameters: { [key: string]: any }) => {
-      setIsRunning(true);
-
-      const { type } = report;
-
-      const data = await post(`/reports/${type}`, { ...parameters, timezone });
-
-      setReport(
-        produce((state: any) => {
-          state.parameters = { ...defaultParameters?.parameters, ...parameters };
-          state.data = data;
-
-          return state;
-        }),
-      );
-
-      setIsRunning(false);
+  return useQuery({
+    queryKey: ['report', { reportId, modified }],
+    queryFn: (data: any) => {
+      return get(`/reports/${reportId}`, {
+        ...data,
+      });
     },
-    [report, timezone],
-  );
-
-  const updateReport = useCallback(
-    async (data: { [x: string]: any; parameters: any }) => {
-      setReport(
-        produce((state: any) => {
-          const { parameters, ...rest } = data;
-
-          if (parameters) {
-            state.parameters = {
-              ...defaultParameters?.parameters,
-              ...state.parameters,
-              ...parameters,
-            };
-          }
-
-          for (const key in rest) {
-            state[key] = rest[key];
-          }
-
-          return state;
-        }),
-      );
-    },
-    [report],
-  );
-
-  useEffect(() => {
-    if (!reportId) {
-      setReport({ ...baseParameters, ...defaultParameters });
-    } else {
-      loadReport(reportId);
-    }
-  }, [reportId]);
-
-  return { report, runReport, updateReport, isRunning };
+  });
 }

src/components/hooks/queries/useResultQuery.ts

@@ -0,0 +1,17 @@
+import { useApi } from '@/components/hooks';
+import { UseQueryOptions, QueryKey } from '@tanstack/react-query';
+
+export function useResultQuery<T>(
+  type: string,
+  params?: { [key: string]: any },
+  options?: Omit<UseQueryOptions<T, Error, T, QueryKey>, 'queryKey' | 'queryFn'>,
+) {
+  const { post, useQuery } = useApi();
+
+  return useQuery<T>({
+    queryKey: ['reports', type, params],
+    queryFn: () => post(`/reports/${type}`, params),
+    enabled: !!type,
+    ...options,
+  });
+}