Fixed default date range handling. Added header to share page.

This commit is contained in:
Mike Cao 2025-10-05 16:02:23 -07:00
parent c5994e5eb6
commit caf04015bb
6 changed files with 28 additions and 16 deletions

View file

@ -14,7 +14,10 @@ export function DateRangeSetting() {
setDate(value); setDate(value);
}; };
const handleReset = () => setItem(DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE_VALUE); const handleReset = () => {
setItem(DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE_VALUE);
setDate(DEFAULT_DATE_RANGE_VALUE);
};
return ( return (
<Row gap="3"> <Row gap="3">

View file

@ -7,7 +7,7 @@ import { WebsiteShareForm } from '@/app/(main)/websites/[websiteId]/settings/Web
import { useMessages, useNavigation, useWebsite } from '@/components/hooks'; import { useMessages, useNavigation, useWebsite } from '@/components/hooks';
import { LinkButton } from '@/components/common/LinkButton'; import { LinkButton } from '@/components/common/LinkButton';
export function WebsiteHeader() { export function WebsiteHeader({ showActions }: { showActions?: boolean }) {
const website = useWebsite(); const website = useWebsite();
const { renderUrl, pathname } = useNavigation(); const { renderUrl, pathname } = useNavigation();
const isSettings = pathname.endsWith('/settings'); const isSettings = pathname.endsWith('/settings');
@ -20,15 +20,18 @@ export function WebsiteHeader() {
<PageHeader title={website.name} icon={<Favicon domain={website.domain} />} marginBottom="3"> <PageHeader title={website.name} icon={<Favicon domain={website.domain} />} marginBottom="3">
<Row alignItems="center" gap="6"> <Row alignItems="center" gap="6">
<ActiveUsers websiteId={website.id} /> <ActiveUsers websiteId={website.id} />
<Row alignItems="center" gap>
<ShareButton websiteId={website.id} shareId={website.shareId} /> {showActions && (
<LinkButton href={renderUrl(`/websites/${website.id}/settings`, false)}> <Row alignItems="center" gap>
<Icon> <ShareButton websiteId={website.id} shareId={website.shareId} />
<Edit /> <LinkButton href={renderUrl(`/websites/${website.id}/settings`, false)}>
</Icon> <Icon>
<Text>Edit</Text> <Edit />
</LinkButton> </Icon>
</Row> <Text>Edit</Text>
</LinkButton>
</Row>
)}
</Row> </Row>
</PageHeader> </PageHeader>
); );

View file

@ -21,7 +21,7 @@ export function WebsiteLayout({ websiteId, children }: { websiteId: string; chil
</Column> </Column>
)} )}
<PageBody gap> <PageBody gap>
<WebsiteHeader /> <WebsiteHeader showActions />
<Column>{children}</Column> <Column>{children}</Column>
</PageBody> </PageBody>
</Grid> </Grid>

View file

@ -6,6 +6,7 @@ import { useShareTokenQuery } from '@/components/hooks';
import { PageBody } from '@/components/common/PageBody'; import { PageBody } from '@/components/common/PageBody';
import { Header } from './Header'; import { Header } from './Header';
import { Footer } from './Footer'; import { Footer } from './Footer';
import { WebsiteHeader } from '@/app/(main)/websites/[websiteId]/WebsiteHeader';
export function SharePage({ shareId }) { export function SharePage({ shareId }) {
const { shareToken, isLoading } = useShareTokenQuery(shareId); const { shareToken, isLoading } = useShareTokenQuery(shareId);
@ -19,6 +20,7 @@ export function SharePage({ shareId }) {
<PageBody gap> <PageBody gap>
<Header /> <Header />
<WebsiteProvider websiteId={shareToken.websiteId}> <WebsiteProvider websiteId={shareToken.websiteId}>
<WebsiteHeader showActions={false} />
<WebsitePage websiteId={shareToken.websiteId} /> <WebsitePage websiteId={shareToken.websiteId} />
</WebsiteProvider> </WebsiteProvider>
<Footer /> <Footer />

View file

@ -2,16 +2,20 @@ import { useNavigation } from '@/components/hooks/useNavigation';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { getCompareDate, getOffsetDateRange, parseDateRange } from '@/lib/date'; import { getCompareDate, getOffsetDateRange, parseDateRange } from '@/lib/date';
import { useLocale } from '@/components/hooks/useLocale'; import { useLocale } from '@/components/hooks/useLocale';
import { DEFAULT_DATE_RANGE_VALUE } from '@/lib/constants'; import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE_VALUE } from '@/lib/constants';
import { getItem } from '@/lib/storage';
export function useDateRange(options: { ignoreOffset?: boolean } = {}) { export function useDateRange(options: { ignoreOffset?: boolean } = {}) {
const { const {
query: { date = DEFAULT_DATE_RANGE_VALUE, offset = 0, compare = 'prev' }, query: { date = '', offset = 0, compare = 'prev' },
} = useNavigation(); } = useNavigation();
const { locale } = useLocale(); const { locale } = useLocale();
const dateRange = useMemo(() => { const dateRange = useMemo(() => {
const dateRangeObject = parseDateRange(date, locale); const dateRangeObject = parseDateRange(
date || getItem(DATE_RANGE_CONFIG) || DEFAULT_DATE_RANGE_VALUE,
locale,
);
return !options.ignoreOffset && offset return !options.ignoreOffset && offset
? getOffsetDateRange(dateRangeObject, +offset) ? getOffsetDateRange(dateRangeObject, +offset)

View file

@ -3,7 +3,7 @@ body {
font-family: var(--font-family), sans-serif; font-family: var(--font-family), sans-serif;
color: var(--font-color); color: var(--font-color);
font-size: var(--font-size); font-size: var(--font-size);
background-color: var(--background-color); background-color: var(--base-color-2);
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
} }