Skip to content

Commit 96c2c32

Browse files
mikecaomikecao
committed
Website header updates.
1 parent 2b99274 commit 96c2c32

26 files changed

+137
-247
lines changed

Diff for: ‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
"@react-spring/web": "^9.7.5",
7979
"@tanstack/react-query": "^5.68.0",
8080
"@umami/prisma-client": "^0.16.0",
81-
"@umami/react-zen": "^0.76.0",
81+
"@umami/react-zen": "^0.77.0",
8282
"@umami/redis-client": "^0.27.0",
8383
"bcryptjs": "^2.4.3",
8484
"chalk": "^4.1.2",

Diff for: ‎pnpm-lock.yaml

+15-15
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎src/app/(main)/settings/websites/[websiteId]/WebsiteTransferForm.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export function WebsiteTransferForm({
5757
};
5858

5959
const handleChange = (key: Key) => {
60+
console.log('KEY', key);
6061
setTeamId(key as string);
6162
};
6263

@@ -73,10 +74,10 @@ export function WebsiteTransferForm({
7374
</Text>
7475
<FormField name="teamId">
7576
{!isTeamWebsite && (
76-
<Select onSelectionChange={handleChange} value={teamId}>
77+
<Select onSelectionChange={handleChange} selectedKey={teamId}>
7778
{items.map(({ id, name }) => {
7879
return (
79-
<ListItem key={id} id={id}>
80+
<ListItem key={`${id}!!!!`} id={`${id}????`}>
8081
{name}
8182
</ListItem>
8283
);

Diff for: ‎src/app/(main)/websites/[websiteId]/WebsiteCompareBar.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { Row } from '@umami/react-zen';
2+
3+
export function WebsiteCompareBar({ websiteId }: { websiteId: string }) {
4+
return <Row>compare {websiteId}</Row>;
5+
}

Diff for: ‎src/app/(main)/websites/[websiteId]/WebsiteFilterButton.module.css

-3
This file was deleted.

Diff for: ‎src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { Button, Icon, Icons, MenuTrigger, Popover, Text } from '@umami/react-ze
22
import { FilterSelectForm } from '@/app/(main)/reports/[reportId]/FilterSelectForm';
33
import { useFields, useMessages, useNavigation, useDateRange } from '@/components/hooks';
44
import { OPERATOR_PREFIXES } from '@/lib/constants';
5-
import styles from './WebsiteFilterButton.module.css';
65

76
export function WebsiteFilterButton({
87
websiteId,
@@ -28,7 +27,7 @@ export function WebsiteFilterButton({
2827

2928
return (
3029
<MenuTrigger>
31-
<Button className={styles.button} variant="quiet">
30+
<Button variant="quiet">
3231
<Icon>
3332
<Icons.Plus />
3433
</Icon>

Diff for: ‎src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx

+8-46
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,40 @@
1-
import {
2-
Column,
3-
Row,
4-
Heading,
5-
MenuTrigger,
6-
Button,
7-
Icon,
8-
Icons,
9-
Popover,
10-
Menu,
11-
MenuItem,
12-
MenuSeparator,
13-
} from '@umami/react-zen';
1+
import { Column, Row, Heading } from '@umami/react-zen';
142
import { Favicon } from '@/components/common/Favicon';
153
import { ActiveUsers } from '@/components/metrics/ActiveUsers';
164
import { WebsiteTabs } from '@/app/(main)/websites/[websiteId]/WebsiteTabs';
175
import { useWebsite } from '@/components/hooks/useWebsite';
186
import { WebsiteFilterButton } from '@/app/(main)/websites/[websiteId]/WebsiteFilterButton';
197
import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter';
208
import { FilterBar } from '@/components/metrics/FilterBar';
21-
import { useMessages } from '@/components/hooks';
9+
import { WebsiteMenu } from '@/app/(main)/websites/[websiteId]/WebsiteMenu';
10+
import { WebsiteCompareBar } from '@/app/(main)/websites/[websiteId]/WebsiteCompareBar';
2211

2312
export function WebsiteHeader({
24-
websiteId,
2513
showFilter = true,
2614
allowEdit = true,
27-
compareMode = false,
2815
}: {
29-
websiteId: string;
3016
showFilter?: boolean;
3117
allowEdit?: boolean;
3218
compareMode?: boolean;
3319
}) {
3420
const website = useWebsite();
35-
const { formatMessage, labels } = useMessages();
36-
const { name, domain } = website || {};
37-
38-
const items = [
39-
{ label: formatMessage(labels.previousPeriod), value: 'prev' },
40-
{ label: formatMessage(labels.previousYear), value: 'yoy' },
41-
];
21+
const { id: websiteId, name, domain } = website || {};
4222

4323
return (
4424
<Column marginY="6" gap="6">
4525
<Row alignItems="center" justifyContent="space-between" gap="3">
4626
<Row alignItems="center" gap="3">
4727
<Favicon domain={domain} />
48-
<Heading>
49-
{name}
50-
<ActiveUsers websiteId={websiteId} />
51-
</Heading>
28+
<Heading>{name}</Heading>
5229
</Row>
30+
<ActiveUsers websiteId={websiteId} />
5331
<Row alignItems="center" gap="3">
5432
{showFilter && <WebsiteFilterButton websiteId={websiteId} />}
5533
<WebsiteDateFilter websiteId={websiteId} />
56-
{allowEdit && (
57-
<MenuTrigger>
58-
<Button variant="quiet">
59-
<Icon>
60-
<Icons.More />
61-
</Icon>
62-
</Button>
63-
<Popover placement="bottom end">
64-
<Menu>
65-
<MenuItem>Compare dates</MenuItem>
66-
<MenuItem>Share</MenuItem>
67-
<MenuSeparator />
68-
<MenuItem>Settings</MenuItem>
69-
</Menu>
70-
</Popover>
71-
</MenuTrigger>
72-
)}
34+
{allowEdit && <WebsiteMenu websiteId={websiteId} />}
7335
</Row>
7436
</Row>
75-
{compareMode && items.map(item => <div key={item.value}>{item.label}</div>)}
37+
<WebsiteCompareBar websiteId={websiteId} />
7638
<FilterBar websiteId={websiteId} />
7739
<WebsiteTabs websiteId={websiteId} />
7840
</Column>

Diff for: ‎src/app/(main)/websites/[websiteId]/WebsiteMenu.tsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import {
2+
Button,
3+
Icon,
4+
Icons,
5+
Menu,
6+
MenuItem,
7+
MenuSeparator,
8+
MenuTrigger,
9+
Popover,
10+
Text,
11+
} from '@umami/react-zen';
12+
import { Fragment } from 'react';
13+
import { Lucide } from '@/components/icons';
14+
import { useMessages } from '@/components/hooks';
15+
16+
export function WebsiteMenu({ websiteId }: { websiteId: string }) {
17+
const { formatMessage, labels } = useMessages();
18+
19+
const menuItems = [
20+
{ label: formatMessage(labels.compare), icon: <Lucide.GitCompare /> },
21+
{ label: formatMessage(labels.share), icon: <Lucide.Share /> },
22+
{ label: formatMessage(labels.edit), icon: <Lucide.Edit />, seperator: true },
23+
];
24+
25+
return (
26+
<MenuTrigger>
27+
<Button variant="quiet">
28+
<Icon>
29+
<Icons.More />
30+
</Icon>
31+
</Button>
32+
<Popover placement="bottom end">
33+
<Menu>
34+
{menuItems.map(({ label, icon, seperator }, index) => {
35+
return (
36+
<Fragment key={index}>
37+
{seperator && <MenuSeparator />}
38+
<MenuItem>
39+
<Icon>{icon}</Icon>
40+
<Text>{label}</Text>
41+
</MenuItem>
42+
</Fragment>
43+
);
44+
})}
45+
</Menu>
46+
</Popover>
47+
</MenuTrigger>
48+
);
49+
}

Diff for: ‎src/components/hooks/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
export * from './queries/useActiveUsersQuery';
12
export * from './queries/useEventDataEventsQuery';
23
export * from './queries/useEventDataPropertiesQuery';
34
export * from './queries/useEventDataValuesQuery';

Diff for: ‎src/components/hooks/queries/useActiveUsersQuery.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { useApi } from '../useApi';
2+
import { UseQueryOptions } from '@tanstack/react-query';
3+
4+
export function useActyiveUsersQuery(
5+
websiteId: string,
6+
options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
7+
) {
8+
const { get, useQuery } = useApi();
9+
return useQuery<any>({
10+
queryKey: ['websites:active', websiteId],
11+
queryFn: () => get(`/websites/${websiteId}/active`),
12+
enabled: !!websiteId,
13+
...options,
14+
});
15+
}

Diff for: ‎src/components/hooks/useDateRange.ts

+1-6
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,7 @@ import { DateRange } from '@/lib/types';
77
import { useLocale } from './useLocale';
88
import { useApi } from './useApi';
99

10-
export function useDateRange(websiteId?: string): {
11-
dateRange: DateRange;
12-
saveDateRange: (value: string | DateRange) => void;
13-
dateCompare: string;
14-
saveDateCompare: (value: string) => void;
15-
} {
10+
export function useDateRange(websiteId?: string) {
1611
const { get } = useApi();
1712
const { locale } = useLocale();
1813
const websiteConfig = useWebsites(state => state[websiteId]?.dateRange);

Diff for: ‎src/components/hooks/useWebsite.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,5 @@ import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvide
22
import { useContext } from 'react';
33

44
export function useWebsite() {
5-
const website = useContext(WebsiteContext);
6-
7-
return website;
5+
return useContext(WebsiteContext);
86
}

Diff for: ‎src/components/input/DateFilter.module.css

-3
This file was deleted.

Diff for: ‎src/components/input/DateFilter.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -95,17 +95,15 @@ export function DateFilter({
9595
return (
9696
<>
9797
<Select
98-
value={value}
98+
selectedKey={value}
9999
placeholder={formatMessage(labels.selectDate)}
100100
onSelectionChange={handleChange}
101101
>
102102
{options.map(({ label, value, divider }: any) => {
103103
return (
104104
<Fragment key={label}>
105105
{divider && <ListSeparator />}
106-
<ListItem key={label} id={value}>
107-
{label}
108-
</ListItem>
106+
<ListItem id={value}>{label}</ListItem>
109107
</Fragment>
110108
);
111109
})}

Diff for: ‎src/components/input/MonthSelect.module.css

-22
This file was deleted.

0 commit comments

Comments
 (0)