Browse Source

Created share token hook.

master
Mike Cao 11 months ago
parent
commit
5a73c224b7
22 changed files with 90 additions and 49 deletions
  1. +5
    -2
      components/metrics/ActiveUsers.js
  2. +1
    -1
      components/metrics/BarChart.js
  3. +1
    -2
      components/metrics/BrowsersTable.js
  4. +1
    -2
      components/metrics/CountriesTable.js
  5. +1
    -2
      components/metrics/DevicesTable.js
  6. +4
    -1
      components/metrics/EventsChart.js
  7. +1
    -2
      components/metrics/EventsTable.js
  8. +6
    -3
      components/metrics/MetricsBar.js
  9. +4
    -3
      components/metrics/MetricsTable.js
  10. +2
    -3
      components/metrics/OSTable.js
  11. +1
    -2
      components/metrics/PagesTable.js
  12. +3
    -4
      components/metrics/ReferrersTable.js
  13. +6
    -4
      components/metrics/WebsiteChart.js
  14. +2
    -2
      components/metrics/WebsiteHeader.js
  15. +2
    -1
      components/pages/RealtimeDashboard.js
  16. +8
    -6
      components/pages/WebsiteDetails.js
  17. +25
    -0
      hooks/useShareToken.js
  18. +3
    -2
      lib/auth.js
  19. +1
    -0
      lib/constants.js
  20. +2
    -1
      pages/api/realtime/update.js
  21. +5
    -5
      pages/share/[...id].js
  22. +6
    -1
      redux/actions/app.js

+ 5
- 2
components/metrics/ActiveUsers.js View File

@ -3,12 +3,15 @@ import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import useFetch from 'hooks/useFetch';
import Dot from 'components/common/Dot';
import { TOKEN_HEADER } from 'lib/constants';
import useShareToken from 'hooks/useShareToken';
import styles from './ActiveUsers.module.css';
export default function ActiveUsers({ websiteId, token, className }) {
export default function ActiveUsers({ websiteId, className }) {
const shareToken = useShareToken();
const { data } = useFetch(`/api/website/${websiteId}/active`, {
params: { token },
interval: 60000,
headers: { [TOKEN_HEADER]: shareToken?.token },
});
const count = useMemo(() => {
return data?.[0]?.x || 0;


+ 1
- 1
components/metrics/BarChart.js View File

@ -65,7 +65,7 @@ export default function BarChart({
}
function renderYLabel(label) {
return +label > 1 ? formatLongNumber(label) : label;
return +label > 1000 ? formatLongNumber(label) : label;
}
function renderTooltip(model) {


+ 1
- 2
components/metrics/BrowsersTable.js View File

@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
import MetricsTable from './MetricsTable';
import { browserFilter } from 'lib/filters';
export default function BrowsersTable({ websiteId, token, ...props }) {
export default function BrowsersTable({ websiteId, ...props }) {
return (
<MetricsTable
{...props}
@ -11,7 +11,6 @@ export default function BrowsersTable({ websiteId, token, ...props }) {
type="browser"
metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
websiteId={websiteId}
token={token}
dataFilter={browserFilter}
/>
);


+ 1
- 2
components/metrics/CountriesTable.js View File

@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
import useCountryNames from 'hooks/useCountryNames';
import useLocale from 'hooks/useLocale';
export default function CountriesTable({ websiteId, token, onDataLoad, ...props }) {
export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
const [locale] = useLocale();
const countryNames = useCountryNames(locale);
@ -20,7 +20,6 @@ export default function CountriesTable({ websiteId, token, onDataLoad, ...props
type="country"
metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
websiteId={websiteId}
token={token}
onDataLoad={data => onDataLoad?.(percentFilter(data))}
renderLabel={renderLabel}
/>


+ 1
- 2
components/metrics/DevicesTable.js View File

@ -4,7 +4,7 @@ import { deviceFilter } from 'lib/filters';
import { FormattedMessage } from 'react-intl';
import { getDeviceMessage } from 'components/messages';
export default function DevicesTable({ websiteId, token, ...props }) {
export default function DevicesTable({ websiteId, ...props }) {
return (
<MetricsTable
{...props}
@ -12,7 +12,6 @@ export default function DevicesTable({ websiteId, token, ...props }) {
type="device"
metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
websiteId={websiteId}
token={token}
dataFilter={deviceFilter}
renderLabel={({ x }) => getDeviceMessage(x)}
/>


+ 4
- 1
components/metrics/EventsChart.js View File

@ -6,13 +6,15 @@ import useFetch from 'hooks/useFetch';
import useDateRange from 'hooks/useDateRange';
import useTimezone from 'hooks/useTimezone';
import usePageQuery from 'hooks/usePageQuery';
import { EVENT_COLORS } from 'lib/constants';
import useShareToken from 'hooks/useShareToken';
import { EVENT_COLORS, TOKEN_HEADER } from 'lib/constants';
export default function EventsChart({ websiteId, className, token }) {
const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, unit, modified } = dateRange;
const [timezone] = useTimezone();
const { query } = usePageQuery();
const shareToken = useShareToken();
const { data } = useFetch(
`/api/website/${websiteId}/events`,
@ -25,6 +27,7 @@ export default function EventsChart({ websiteId, className, token }) {
url: query.url,
token,
},
headers: { [TOKEN_HEADER]: shareToken?.token },
},
[modified],
);


+ 1
- 2
components/metrics/EventsTable.js View File

@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
import MetricsTable from './MetricsTable';
import Tag from 'components/common/Tag';
export default function EventsTable({ websiteId, token, ...props }) {
export default function EventsTable({ websiteId, ...props }) {
return (
<MetricsTable
{...props}
@ -11,7 +11,6 @@ export default function EventsTable({ websiteId, token, ...props }) {
type="event"
metric={<FormattedMessage id="metrics.actions" defaultMessage="Actions" />}
websiteId={websiteId}
token={token}
renderLabel={({ x }) => <Label value={x} />}
/>
);


+ 6
- 3
components/metrics/MetricsBar.js View File

@ -5,12 +5,15 @@ import Loading from 'components/common/Loading';
import ErrorMessage from 'components/common/ErrorMessage';
import useFetch from 'hooks/useFetch';
import useDateRange from 'hooks/useDateRange';
import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
import usePageQuery from 'hooks/usePageQuery';
import useShareToken from 'hooks/useShareToken';
import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
import { TOKEN_HEADER } from 'lib/constants';
import MetricCard from './MetricCard';
import styles from './MetricsBar.module.css';
export default function MetricsBar({ websiteId, token, className }) {
export default function MetricsBar({ websiteId, className }) {
const shareToken = useShareToken();
const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, modified } = dateRange;
const [format, setFormat] = useState(true);
@ -25,8 +28,8 @@ export default function MetricsBar({ websiteId, token, className }) {
start_at: +startDate,
end_at: +endDate,
url,
token,
},
headers: { [TOKEN_HEADER]: shareToken?.token },
},
[modified],
);


+ 4
- 3
components/metrics/MetricsTable.js View File

@ -8,15 +8,15 @@ import Arrow from 'assets/arrow-right.svg';
import { percentFilter } from 'lib/filters';
import useDateRange from 'hooks/useDateRange';
import usePageQuery from 'hooks/usePageQuery';
import useShareToken from 'hooks/useShareToken';
import ErrorMessage from 'components/common/ErrorMessage';
import DataTable from './DataTable';
import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
import { DEFAULT_ANIMATION_DURATION, TOKEN_HEADER } from 'lib/constants';
import styles from './MetricsTable.module.css';
export default function MetricsTable({
websiteId,
websiteDomain,
token,
title,
metric,
type,
@ -30,6 +30,7 @@ export default function MetricsTable({
onDataLoad,
...props
}) {
const shareToken = useShareToken();
const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, modified } = dateRange;
const {
@ -47,10 +48,10 @@ export default function MetricsTable({
end_at: +endDate,
domain: websiteDomain,
url,
token,
},
onDataLoad,
delay: DEFAULT_ANIMATION_DURATION,
headers: { [TOKEN_HEADER]: shareToken?.token },
},
[modified],
);


+ 2
- 3
components/metrics/OSTable.js View File

@ -3,15 +3,14 @@ import MetricsTable from './MetricsTable';
import { osFilter } from 'lib/filters';
import { FormattedMessage } from 'react-intl';
export default function OSTable({ websiteId, token, limit }) {
export default function OSTable({ websiteId, ...props }) {
return (
<MetricsTable
{...props}
title={<FormattedMessage id="metrics.operating-systems" defaultMessage="Operating system" />}
type="os"
metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
websiteId={websiteId}
token={token}
limit={limit}
dataFilter={osFilter}
/>
);


+ 1
- 2
components/metrics/PagesTable.js View File

@ -10,7 +10,7 @@ import usePageQuery from 'hooks/usePageQuery';
import MetricsTable from './MetricsTable';
import styles from './PagesTable.module.css';
export default function PagesTable({ websiteId, token, websiteDomain, showFilters, ...props }) {
export default function PagesTable({ websiteId, websiteDomain, showFilters, ...props }) {
const [filter, setFilter] = useState(FILTER_COMBINED);
const {
resolve,
@ -48,7 +48,6 @@ export default function PagesTable({ websiteId, token, websiteDomain, showFilter
type="url"
metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
websiteId={websiteId}
token={token}
dataFilter={urlFilter}
filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
renderLabel={renderLink}


+ 3
- 4
components/metrics/ReferrersTable.js View File

@ -1,12 +1,12 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import MetricsTable from './MetricsTable';
import { refFilter } from 'lib/filters';
import ButtonGroup from 'components/common/ButtonGroup';
import ButtonLayout from 'components/layout/ButtonLayout';
import { FILTER_DOMAIN_ONLY, FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
import ButtonLayout from '../layout/ButtonLayout';
import { refFilter } from 'lib/filters';
export default function ReferrersTable({ websiteId, websiteDomain, token, showFilters, ...props }) {
export default function ReferrersTable({ websiteId, websiteDomain, showFilters, ...props }) {
const [filter, setFilter] = useState(FILTER_COMBINED);
const buttons = [
@ -41,7 +41,6 @@ export default function ReferrersTable({ websiteId, websiteDomain, token, showFi
metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
websiteId={websiteId}
websiteDomain={websiteDomain}
token={token}
dataFilter={refFilter}
filterOptions={{
domain: websiteDomain,


+ 6
- 4
components/metrics/WebsiteChart.js View File

@ -14,15 +14,17 @@ import { getDateArray, getDateLength } from 'lib/date';
import Times from 'assets/times.svg';
import styles from './WebsiteChart.module.css';
import ErrorMessage from '../common/ErrorMessage';
import useShareToken from '../../hooks/useShareToken';
import { TOKEN_HEADER } from '../../lib/constants';
export default function WebsiteChart({
websiteId,
token,
title,
stickyHeader = false,
showLink = false,
onDataLoad = () => {},
}) {
const shareToken = useShareToken();
const [dateRange, setDateRange] = useDateRange(websiteId);
const { startDate, endDate, unit, value, modified } = dateRange;
const [timezone] = useTimezone();
@ -41,9 +43,9 @@ export default function WebsiteChart({
unit,
tz: timezone,
url,
token,
},
onDataLoad,
headers: { [TOKEN_HEADER]: shareToken?.token },
},
[modified],
);
@ -64,7 +66,7 @@ export default function WebsiteChart({
return (
<div className={styles.container}>
<WebsiteHeader websiteId={websiteId} token={token} title={title} showLink={showLink} />
<WebsiteHeader websiteId={websiteId} title={title} showLink={showLink} />
<div className={classNames(styles.header, 'row')}>
<StickyHeader
className={classNames(styles.metrics, 'col row')}
@ -73,7 +75,7 @@ export default function WebsiteChart({
>
{url && <PageFilter url={url} onClick={handleCloseFilter} />}
<div className="col-12 col-lg-9">
<MetricsBar websiteId={websiteId} token={token} />
<MetricsBar websiteId={websiteId} />
</div>
<div className={classNames(styles.filter, 'col-12 col-lg-3')}>
<DateFilter


+ 2
- 2
components/metrics/WebsiteHeader.js View File

@ -8,11 +8,11 @@ import ActiveUsers from './ActiveUsers';
import Arrow from 'assets/arrow-right.svg';
import styles from './WebsiteHeader.module.css';
export default function WebsiteHeader({ websiteId, token, title, showLink = false }) {
export default function WebsiteHeader({ websiteId, title, showLink = false }) {
return (
<PageHeader>
<div className={styles.title}>{title}</div>
<ActiveUsers className={styles.active} websiteId={websiteId} token={token} />
<ActiveUsers className={styles.active} websiteId={websiteId} />
<ButtonLayout align="right">
<RefreshButton websiteId={websiteId} />
{showLink && (


+ 2
- 1
components/pages/RealtimeDashboard.js View File

@ -13,6 +13,7 @@ import useFetch from 'hooks/useFetch';
import useLocale from 'hooks/useLocale';
import useCountryNames from 'hooks/useCountryNames';
import { percentFilter } from 'lib/filters';
import { TOKEN_HEADER } from 'lib/constants';
import styles from './RealtimeDashboard.module.css';
const REALTIME_RANGE = 30;
@ -39,7 +40,7 @@ export default function RealtimeDashboard() {
params: { start_at: data?.timestamp },
disabled: !init?.websites?.length || !data,
interval: REALTIME_INTERVAL,
headers: { 'x-umami-token': init?.token },
headers: { [TOKEN_HEADER]: init?.token },
});
const renderCountryName = useCallback(({ x }) => countryNames[x], []);


+ 8
- 6
components/pages/WebsiteDetails.js View File

@ -20,7 +20,8 @@ import EventsTable from '../metrics/EventsTable';
import EventsChart from '../metrics/EventsChart';
import useFetch from 'hooks/useFetch';
import usePageQuery from 'hooks/usePageQuery';
import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
import useShareToken from 'hooks/useShareToken';
import { DEFAULT_ANIMATION_DURATION, TOKEN_HEADER } from 'lib/constants';
const views = {
url: PagesTable,
@ -32,8 +33,11 @@ const views = {
event: EventsTable,
};
export default function WebsiteDetails({ websiteId, token }) {
const { data } = useFetch(`/api/website/${websiteId}`, { params: { token } });
export default function WebsiteDetails({ websiteId }) {
const shareToken = useShareToken();
const { data } = useFetch(`/api/website/${websiteId}`, {
headers: { [TOKEN_HEADER]: shareToken?.token },
});
const [chartLoaded, setChartLoaded] = useState(false);
const [countryData, setCountryData] = useState();
const [eventsData, setEventsData] = useState();
@ -93,7 +97,6 @@ export default function WebsiteDetails({ websiteId, token }) {
const tableProps = {
websiteId,
token,
websiteDomain: data?.domain,
limit: 10,
};
@ -116,7 +119,6 @@ export default function WebsiteDetails({ websiteId, token }) {
<div className={classNames(styles.chart, 'col')}>
<WebsiteChart
websiteId={websiteId}
token={token}
title={data.name}
onDataLoad={handleDataLoad}
showLink={false}
@ -159,7 +161,7 @@ export default function WebsiteDetails({ websiteId, token }) {
<EventsTable {...tableProps} onDataLoad={setEventsData} />
</GridColumn>
<GridColumn xs={12} md={12} lg={8}>
<EventsChart className={styles.eventschart} websiteId={websiteId} token={token} />
<EventsChart className={styles.eventschart} websiteId={websiteId} />
</GridColumn>
</GridRow>
</GridLayout>


+ 25
- 0
hooks/useShareToken.js View File

@ -0,0 +1,25 @@
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { get } from 'lib/web';
import { setShareToken } from 'redux/actions/app';
export default function useShareToken(shareId) {
const dispatch = useDispatch();
const shareToken = useSelector(state => state.app.shareToken);
async function loadToken(id) {
const { data } = await get(`/api/share/${id}`);
if (data) {
dispatch(setShareToken(data));
}
}
useEffect(() => {
if (shareId) {
loadToken(shareId);
}
}, [shareId]);
return shareToken;
}

+ 3
- 2
lib/auth.js View File

@ -1,6 +1,6 @@
import { parse } from 'cookie';
import { parseSecureToken, parseToken } from './crypto';
import { AUTH_COOKIE_NAME } from './constants';
import { AUTH_COOKIE_NAME, TOKEN_HEADER } from './constants';
import { getWebsiteById } from './queries';
export async function getAuthToken(req) {
@ -26,7 +26,8 @@ export async function isValidToken(token, validation) {
}
export async function allowQuery(req, skipToken) {
const { id, token } = req.query;
const { id } = req.query;
const token = req.headers[TOKEN_HEADER];
const websiteId = +id;
const website = await getWebsiteById(websiteId);


+ 1
- 0
lib/constants.js View File

@ -4,6 +4,7 @@ export const TIMEZONE_CONFIG = 'umami.timezone';
export const DATE_RANGE_CONFIG = 'umami.date-range';
export const THEME_CONFIG = 'umami.theme';
export const VERSION_CHECK = 'umami.version-check';
export const TOKEN_HEADER = 'x-umami-token';
export const THEME_COLORS = {
light: {


+ 2
- 1
pages/api/realtime/update.js View File

@ -2,6 +2,7 @@ import { useAuth } from 'lib/middleware';
import { ok, methodNotAllowed, badRequest } from 'lib/response';
import { getRealtimeData } from 'lib/queries';
import { parseToken } from 'lib/crypto';
import { TOKEN_HEADER } from 'lib/constants';
export default async (req, res) => {
await useAuth(req, res);
@ -9,7 +10,7 @@ export default async (req, res) => {
if (req.method === 'GET') {
const { start_at } = req.query;
const token = req.headers['x-umami-token'];
const token = req.headers[TOKEN_HEADER];
if (!token) {
return badRequest(res);


+ 5
- 5
pages/share/[...id].js View File

@ -2,23 +2,23 @@ import React from 'react';
import { useRouter } from 'next/router';
import Layout from 'components/layout/Layout';
import WebsiteDetails from 'components/pages/WebsiteDetails';
import useFetch from 'hooks/useFetch';
import useShareToken from 'hooks/useShareToken';
export default function SharePage() {
const router = useRouter();
const { id } = router.query;
const shareId = id?.[0];
const { data } = useFetch(`/api/share/${shareId}`, { disabled: !shareId });
const shareToken = useShareToken(shareId);
if (!data) {
if (!shareToken) {
return null;
}
const { websiteId, token } = data;
const { websiteId } = shareToken;
return (
<Layout>
<WebsiteDetails websiteId={websiteId} token={token} />
<WebsiteDetails websiteId={websiteId} />
</Layout>
);
}

+ 6
- 1
redux/actions/app.js View File

@ -19,6 +19,7 @@ const app = createSlice({
latest: null,
hasUpdate: false,
},
shareToken: null,
},
reducers: {
setLocale(state, action) {
@ -33,10 +34,14 @@ const app = createSlice({
state.versions = action.payload;
return state;
},
setShareToken(state, action) {
state.shareToken = action.payload;
return state;
},
},
});
export const { setLocale, setTheme, setVersions } = app.actions;
export const { setLocale, setTheme, setVersions, setShareToken } = app.actions;
export default app.reducer;


Loading…
Cancel
Save