github/umami
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Renamed query hooks. Fixed conversion bugs.

Browse Source
This commit is contained in:
Mike Cao
2025-03-22 03:48:18 -07:00
parent adca3c36d0
commit 7886c3f393
110 changed files with 423 additions and 489 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/(main)/reports/ReportsDataTable.tsx
View File

@@ -1,5 +1,5 @@
import { ReactNode } from 'react';
import { useReports } from '@/components/hooks';
import { useReportsQuery } from '@/components/hooks';
import { DataGrid } from '@/components/common/DataGrid';
import { ReportsTable } from './ReportsTable';
@@ -12,7 +12,7 @@ export function ReportsDataTable({
teamId?: string;
children?: ReactNode;
}) {
const queryResult = useReports({ websiteId, teamId });
const queryResult = useReportsQuery({ websiteId, teamId });
return (
<DataGrid queryResult={queryResult} renderEmpty={() => children}>

6
src/app/(main)/reports/ReportsHeader.tsx
View File

@@ -1,13 +1,13 @@
import { PageHeader } from '@/components/layout/PageHeader';
import { Icon, Icons, Text } from '@umami/react-zen';
import { useLogin, useMessages, useTeamUrl } from '@/components/hooks';
import { useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
import { LinkButton } from '@/components/common/LinkButton';
import { ROLES } from '@/lib/constants';
export function ReportsHeader() {
const { formatMessage, labels } = useMessages();
const { renderTeamUrl } = useTeamUrl();
const { user } = useLogin();
const { renderTeamUrl } = useNavigation();
const { user } = useLoginQuery();
const canEdit = user.role !== ROLES.viewOnly;
return (

4
src/app/(main)/reports/ReportsPage.tsx
View File

@@ -2,10 +2,10 @@
import { Metadata } from 'next';
import { ReportsHeader } from './ReportsHeader';
import { ReportsDataTable } from './ReportsDataTable';
import { useTeamUrl } from '@/components/hooks';
import { useNavigation } from '@/components/hooks';
export function ReportsPage() {
const { teamId } = useTeamUrl();
const { teamId } = useNavigation();
return (
<>

6
src/app/(main)/reports/ReportsTable.tsx
View File

@@ -1,13 +1,13 @@
import { Icon, Icons, Text, DataTable, DataColumn, Row } from '@umami/react-zen';
import { LinkButton } from '@/components/common/LinkButton';
import { useMessages, useLogin, useTeamUrl } from '@/components/hooks';
import { useMessages, useLoginQuery, useNavigation } from '@/components/hooks';
import { REPORT_TYPES } from '@/lib/constants';
import { ReportDeleteButton } from './ReportDeleteButton';
export function ReportsTable({ data = [], showDomain }: { data: any[]; showDomain?: boolean }) {
const { formatMessage, labels } = useMessages();
const { user } = useLogin();
const { renderTeamUrl } = useTeamUrl();
const { user } = useLoginQuery();
const { renderTeamUrl } = useNavigation();
return (
<DataTable data={data}>

6
src/app/(main)/reports/[reportId]/BaseParameters.tsx
View File

@@ -3,7 +3,7 @@ import { Column, Label } from '@umami/react-zen';
import { parseDateRange } from '@/lib/date';
import { DateFilter } from '@/components/input/DateFilter';
import { WebsiteSelect } from '@/components/input/WebsiteSelect';
import { useMessages, useTeamUrl, useWebsite } from '@/components/hooks';
import { useMessages, useNavigation, useWebsiteQuery } from '@/components/hooks';
import { ReportContext } from './Report';
import styles from './BaseParameters.module.css';
@@ -22,11 +22,11 @@ export function BaseParameters({
}: BaseParametersProps) {
const { report, updateReport } = useContext(ReportContext);
const { formatMessage, labels } = useMessages();
const { teamId } = useTeamUrl();
const { teamId } = useNavigation();
const { parameters } = report || {};
const { websiteId, dateRange } = parameters || {};
const { value, startDate, endDate } = dateRange || {};
const { data: website } = useWebsite(websiteId);
const { data: website } = useWebsiteQuery(websiteId);
const { name } = website || {};
const handleWebsiteSelect = (websiteId: string) => {

4
src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx
View File

@@ -1,5 +1,5 @@
import { useMemo, useState } from 'react';
import { useFilters, useFormat, useMessages, useWebsiteValues } from '@/components/hooks';
import { useFilters, useFormat, useMessages, useWebsiteValuesQuery } from '@/components/hooks';
import { OPERATORS } from '@/lib/constants';
import { isEqualsOperator } from '@/lib/params';
import {
@@ -62,7 +62,7 @@ export function FieldFilterEditForm({
data: values = [],
isLoading,
refetch,
} = useWebsiteValues({
} = useWebsiteValuesQuery({
websiteId,
type: name,
startDate,

4
src/app/(main)/reports/[reportId]/Report.tsx
View File

@@ -1,7 +1,7 @@
import { createContext, ReactNode } from 'react';
import { Loading } from '@umami/react-zen';
import classNames from 'classnames';
import { useReport } from '@/components/hooks';
import { useReportQuery } from '@/components/hooks';
import styles from './Report.module.css';
export const ReportContext = createContext(null);
@@ -17,7 +17,7 @@ export function Report({
children: ReactNode;
className?: string;
}) {
const report = useReport(reportId, defaultParameters);
const report = useReportQuery(reportId, defaultParameters);
if (!report) {
return reportId ? <Loading position="page" /> : null;

5
src/app/(main)/reports/[reportId]/ReportHeader.tsx
View File

@@ -1,6 +1,6 @@
import { useContext } from 'react';
import { Icon, LoadingButton, InlineEditField, useToast } from '@umami/react-zen';
import { useMessages, useApi, useNavigation, useTeamUrl } from '@/components/hooks';
import { useMessages, useApi, useNavigation } from '@/components/hooks';
import { ReportContext } from './Report';
import styles from './ReportHeader.module.css';
import { REPORT_TYPES } from '@/lib/constants';
@@ -10,8 +10,7 @@ export function ReportHeader({ icon }) {
const { report, updateReport } = useContext(ReportContext);
const { formatMessage, labels, messages } = useMessages();
const { toast } = useToast();
const { router } = useNavigation();
const { renderTeamUrl } = useTeamUrl();
const { router, renderTeamUrl } = useNavigation();
const { post, useMutation } = useApi();
const { mutate: create, isPending: isCreating } = useMutation({

4
src/app/(main)/reports/[reportId]/ReportPage.tsx
View File

@@ -1,5 +1,5 @@
'use client';
import { useReport } from '@/components/hooks';
import { useReportQuery } from '@/components/hooks';
import { EventDataReport } from '../event-data/EventDataReport';
import { FunnelReport } from '../funnel/FunnelReport';
import { GoalsReport } from '../goals/GoalsReport';
@@ -21,7 +21,7 @@ const reports = {
};
export function ReportPage({ reportId }: { reportId: string }) {
const { report } = useReport(reportId);
const { report } = useReportQuery(reportId);
if (!report) {
return null;

4
src/app/(main)/reports/create/ReportTemplates.tsx
View File

@@ -1,12 +1,12 @@
import { Icon, Text, Row, Column, Grid } from '@umami/react-zen';
import { useMessages, useTeamUrl } from '@/components/hooks';
import { useMessages, useNavigation } from '@/components/hooks';
import { Icons } from '@/components/icons';
import { PageHeader } from '@/components/layout/PageHeader';
import { LinkButton } from '@/components/common/LinkButton';
export function ReportTemplates({ showHeader = true }: { showHeader?: boolean }) {
const { formatMessage, labels } = useMessages();
const { renderTeamUrl } = useTeamUrl();
const { renderTeamUrl } = useNavigation();
const reports = [
{

12
src/app/(main)/reports/event-data/EventDataTable.tsx
View File

@@ -1,5 +1,5 @@
import { useContext } from 'react';
import { GridTable, GridColumn } from '@umami/react-zen';
import { DataTable, DataColumn } from '@umami/react-zen';
import { useMessages } from '@/components/hooks';
import { ReportContext } from '../[reportId]/Report';
@@ -8,10 +8,10 @@ export function EventDataTable() {
const { formatMessage, labels } = useMessages();
return (
<GridTable data={report?.data || []}>
<GridColumn name="field" label={formatMessage(labels.field)} />
<GridColumn name="value" label={formatMessage(labels.value)} />
<GridColumn name="total" label={formatMessage(labels.total)} />
</GridTable>
<DataTable data={report?.data || []}>
<DataColumn id="field" label={formatMessage(labels.field)} />
<DataColumn id="value" label={formatMessage(labels.value)} />
<DataColumn id="total" label={formatMessage(labels.total)} />
</DataTable>
);
}

19
src/app/(main)/reports/journey/JourneyView.tsx
View File

@@ -1,5 +1,5 @@
import { useContext, useMemo, useState } from 'react';
import { TextOverflow, TooltipPopup } from '@umami/react-zen';
import { TooltipTrigger, Tooltip, Focusable } from '@umami/react-zen';
import { firstBy } from 'thenby';
import classNames from 'classnames';
import { useEscapeKey, useMessages } from '@/components/hooks';
@@ -192,13 +192,18 @@ export function JourneyView() {
onClick={() => handleClick(name, columnIndex, paths)}
>
<div className={styles.name} title={name}>
<TextOverflow> {name}</TextOverflow>
{name}
</div>
<TooltipPopup label={dropOffPercent} isDisabled={!selected}>
<div className={styles.count} title={nodeCount}>
{formatLongNumber(nodeCount)}
</div>
</TooltipPopup>
<TooltipTrigger isDisabled={!selected}>
<Focusable>
<div>{dropOffPercent}</div>
</Focusable>
<Tooltip>
<div className={styles.count} title={nodeCount}>
{formatLongNumber(nodeCount)}
</div>
</Tooltip>
</TooltipTrigger>
{columnIndex < columns.length &&
lines.map(([fromIndex, nodeIndex], i) => {
const height =

6
src/app/(main)/reports/revenue/RevenueParameters.tsx
View File

@@ -1,5 +1,5 @@
import { useMessages } from '@/components/hooks';
import { useRevenueValues } from '@/components/hooks/queries/useRevenueValues';
import { useRevenueValuesQuery } from '@/components/hooks/queries/useRevenueValuesQuery';
import { useContext } from 'react';
import { Select, Form, FormButtons, FormField, ListItem, FormSubmitButton } from '@umami/react-zen';
import { BaseParameters } from '../[reportId]/BaseParameters';
@@ -11,7 +11,7 @@ export function RevenueParameters() {
const { id, parameters } = report || {};
const { websiteId, dateRange } = parameters || {};
const queryEnabled = websiteId && dateRange;
const { data: values = [] } = useRevenueValues(
const { data: values = [] } = useRevenueValuesQuery(
websiteId,
dateRange?.startDate,
dateRange?.endDate,
@@ -34,7 +34,7 @@ export function RevenueParameters() {
rules={{ required: formatMessage(labels.required) }}
>
<Select items={values.map(item => item.currency)}>
{item => <ListItem key={item}>{item}</ListItem>}
{(item: any) => <ListItem key={item}>{item}</ListItem>}
</Select>
</FormField>
<FormButtons>

36
src/app/(main)/reports/revenue/RevenueTable.tsx
View File

@@ -1,7 +1,7 @@
import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
import { useMessages } from '@/components/hooks';
import { useContext } from 'react';
import { GridColumn, GridTable } from '@umami/react-zen';
import { DataColumn, DataTable } from '@umami/react-zen';
import { ReportContext } from '../[reportId]/Report';
import { formatLongCurrency } from '@/lib/format';
@@ -15,22 +15,22 @@ export function RevenueTable() {
}
return (
<GridTable data={data.table || []}>
<GridColumn name="currency" label={formatMessage(labels.currency)} alignment="end">
{row => row.currency}
</GridColumn>
<GridColumn name="currency" label={formatMessage(labels.total)} width="300px" alignment="end">
{row => formatLongCurrency(row.sum, row.currency)}
</GridColumn>
<GridColumn name="currency" label={formatMessage(labels.average)} alignment="end">
{row => formatLongCurrency(row.count ? row.sum / row.count : 0, row.currency)}
</GridColumn>
<GridColumn name="currency" label={formatMessage(labels.transactions)} alignment="end">
{row => row.count}
</GridColumn>
<GridColumn name="currency" label={formatMessage(labels.uniqueCustomers)} alignment="end">
{row => row.unique_count}
</GridColumn>
</GridTable>
<DataTable data={data.table || []}>
<DataColumn id="currency" label={formatMessage(labels.currency)} align="end">
{(row: any) => row.currency}
</DataColumn>
<DataColumn id="currency" label={formatMessage(labels.total)} align="end">
{(row: any) => formatLongCurrency(row.sum, row.currency)}
</DataColumn>
<DataColumn id="currency" label={formatMessage(labels.average)} align="end">
{(row: any) => formatLongCurrency(row.count ? row.sum / row.count : 0, row.currency)}
</DataColumn>
<DataColumn id="currency" label={formatMessage(labels.transactions)} align="end">
{(row: any) => row.count}
</DataColumn>
<DataColumn id="currency" label={formatMessage(labels.uniqueCustomers)} align="end">
{(row: any) => row.unique_count}
</DataColumn>
</DataTable>
);
}