watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-12 16:45:35 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Use useMessages hook everywhere.

Browse source
This commit is contained in:
Mike Cao 2023-03-22 14:05:55 -07:00
parent f3e1f18e1b
commit 9ddb8b5d25
73 changed files with 180 additions and 275 deletions
Download patch file Download diff file Expand all files Collapse all files

5
components/metrics/ActiveUsers.js
View file

@ -1,12 +1,11 @@
import { useMemo } from 'react';
import { StatusLight } from 'react-basics';
import { useIntl } from 'react-intl';
import useApi from 'hooks/useApi';
import { messages } from 'components/messages';
import useMessages from 'hooks/useMessages';
import styles from './ActiveUsers.module.css';
export default function ActiveUsers({ websiteId, value, refetchInterval = 60000 }) {
const { formatMessage } = useIntl();
const { formatMessage, messages } = useMessages();
const { get, useQuery } = useApi();
const { data } = useQuery(
['websites:active', websiteId],

16
components/metrics/CountriesTable.js
View file

@ -1,20 +1,14 @@
import MetricsTable from './MetricsTable';
import { percentFilter } from 'lib/filters';
import { useIntl, defineMessages } from 'react-intl';
import FilterLink from 'components/common/FilterLink';
import useCountryNames from 'hooks/useCountryNames';
import useLocale from 'hooks/useLocale';
const messages = defineMessages({
unknown: { id: 'label.unknown', defaultMessage: 'Unknown' },
countries: { id: 'metrics.countries', defaultMessage: 'Countries' },
visitors: { id: 'metrics.visitors', defaultMessage: 'Visitors' },
});
import useMessages from 'hooks/useMessages';
export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
const { locale } = useLocale();
const countryNames = useCountryNames(locale);
const { formatMessage } = useIntl();
const { formatMessage, labels } = useMessages();
function renderLink({ x: code }) {
return (
@ -22,7 +16,7 @@ export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
<FilterLink
id="country"
value={code}
label={countryNames[code] ?? formatMessage(messages.unknown)}
label={countryNames[code] ?? formatMessage(labels.unknown)}
/>
</div>
);
@ -31,9 +25,9 @@ export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
return (
<MetricsTable
{...props}
title={formatMessage(messages.countries)}
title={formatMessage(labels.countries)}
type="country"
metric={formatMessage(messages.visitors)}
metric={formatMessage(labels.visitors)}
websiteId={websiteId}
onDataLoad={data => onDataLoad?.(percentFilter(data))}
renderLabel={renderLink}

7
components/metrics/DatePickerForm.js
View file

@ -1,13 +1,12 @@
import { useState } from 'react';
import { Button, ButtonGroup, Calendar } from 'react-basics';
import { useIntl } from 'react-intl';
import { isAfter, isBefore, isSameDay } from 'date-fns';
import useLocale from 'hooks/useLocale';
import { getDateRangeValues } from 'lib/date';
import { getDateLocale } from 'lib/lang';
import { labels } from 'components/messages';
import styles from './DatePickerForm.module.css';
import { FILTER_DAY, FILTER_RANGE } from 'lib/constants';
import useMessages from 'hooks/useMessages';
import styles from './DatePickerForm.module.css';
export default function DatePickerForm({
startDate: defaultStartDate,
@ -24,7 +23,7 @@ export default function DatePickerForm({
const [startDate, setStartDate] = useState(defaultStartDate);
const [endDate, setEndDate] = useState(defaultEndDate);
const { locale } = useLocale();
const { formatMessage } = useIntl();
const { formatMessage, labels } = useMessages();
const disabled =
selected === FILTER_DAY

5
components/metrics/DevicesTable.js
View file

@ -1,10 +1,9 @@
import MetricsTable from './MetricsTable';
import { useIntl } from 'react-intl';
import FilterLink from 'components/common/FilterLink';
import { labels } from 'components/messages';
import useMessages from 'hooks/useMessages';
export default function DevicesTable({ websiteId, ...props }) {
const { formatMessage } = useIntl();
const { formatMessage, labels } = useMessages();
function renderLink({ x: device }) {
return (

13
components/metrics/EventsTable.js
View file

@ -1,13 +1,8 @@
import { defineMessages, useIntl } from 'react-intl';
import MetricsTable from './MetricsTable';
const messages = defineMessages({
events: { id: 'metrics.events', defaultMessage: 'Events' },
actions: { id: 'metrics.actions', defaultMessage: 'Actions' },
});
import useMessages from 'hooks/useMessages';
export default function EventsTable({ websiteId, ...props }) {
const { formatMessage } = useIntl();
const { formatMessage, labels } = useMessages();
function handleDataLoad(data) {
props.onDataLoad?.(data);
@ -16,9 +11,9 @@ export default function EventsTable({ websiteId, ...props }) {
return (
<MetricsTable
{...props}
title={formatMessage(messages.events)}
title={formatMessage(labels.events)}
type="event"
metric={formatMessage(messages.actions)}
metric={formatMessage(labels.actions)}
websiteId={websiteId}
onDataLoad={handleDataLoad}
/>

7
components/metrics/FilterTags.js
View file

@ -1,12 +1,11 @@
import { useIntl } from 'react-intl';
import { safeDecodeURI } from 'next-basics';
import { Button, Icon, Icons, Text } from 'react-basics';
import { labels } from 'components/messages';
import usePageQuery from 'hooks/usePageQuery';
import styles from './FilterTags.module.css';
import useMessages from 'hooks/useMessages';
export default function FilterTags({ websiteId, params, onClick }) {
const { formatMessage } = useIntl();
export default function FilterTags({ websiteId, params }) {
const { formatMessage, labels } = useMessages();
const {
router,
resolveUrl,

5
components/metrics/MetricsBar.js
View file

@ -1,17 +1,16 @@
import { useState } from 'react';
import { Loading } from 'react-basics';
import { useIntl } from 'react-intl';
import ErrorMessage from 'components/common/ErrorMessage';
import useApi from 'hooks/useApi';
import useDateRange from 'hooks/useDateRange';
import usePageQuery from 'hooks/usePageQuery';
import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
import MetricCard from './MetricCard';
import { labels } from 'components/messages';
import styles from './MetricsBar.module.css';
import useMessages from 'hooks/useMessages';
export default function MetricsBar({ websiteId }) {
const { formatMessage } = useIntl();
const { formatMessage, labels } = useMessages();
const { get, useQuery } = useApi();
const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, modified } = dateRange;

10
components/metrics/MetricsTable.js
View file

@ -1,6 +1,5 @@
import { useMemo } from 'react';
import { Loading, Icon, Text, Button } from 'react-basics';
import { defineMessages, useIntl } from 'react-intl';
import Link from 'next/link';
import firstBy from 'thenby';
import classNames from 'classnames';
@ -12,12 +11,9 @@ import ErrorMessage from 'components/common/ErrorMessage';
import DataTable from './DataTable';
import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
import Icons from 'components/icons';
import useMessages from 'hooks/useMessages';
import styles from './MetricsTable.module.css';
const messages = defineMessages({
more: { id: 'label.more', defaultMessage: 'More' },
});
export default function MetricsTable({
websiteId,
type,
@ -35,7 +31,7 @@ export default function MetricsTable({
router,
query: { url, referrer, os, browser, device, country },
} = usePageQuery();
const { formatMessage } = useIntl();
const { formatMessage, labels } = useMessages();
const { get, useQuery } = useApi();
const { data, isLoading, isFetched, error } = useQuery(
@ -81,7 +77,7 @@ export default function MetricsTable({
{data && !error && limit && (
<Link href={router.pathname} as={resolveUrl({ view: type })}>
<Button variant="quiet">
<Text>{formatMessage(messages.more)}</Text>
<Text>{formatMessage(labels.more)}</Text>
<Icon size="sm">
<Icons.ArrowRight />
</Icon>

5
components/metrics/OSTable.js
View file

@ -1,10 +1,9 @@
import { useIntl } from 'react-intl';
import MetricsTable from './MetricsTable';
import FilterLink from 'components/common/FilterLink';
import { labels } from 'components/messages';
import useMessages from 'hooks/useMessages';
export default function OSTable({ websiteId, ...props }) {
const { formatMessage } = useIntl();
const { formatMessage, labels } = useMessages();
function renderLink({ x: os }) {
return <FilterLink id="os" value={os} />;

5
components/metrics/PagesTable.js
View file

@ -1,11 +1,10 @@
import { useState } from 'react';
import { useIntl } from 'react-intl';
import FilterLink from 'components/common/FilterLink';
import FilterButtons from 'components/common/FilterButtons';
import { urlFilter } from 'lib/filters';
import { labels } from 'components/messages';
import MetricsTable from './MetricsTable';
import { FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
import useMessages from 'hooks/useMessages';
const filters = {
[FILTER_RAW]: null,
@ -14,7 +13,7 @@ const filters = {
export default function PagesTable({ websiteId, showFilters, ...props }) {
const [filter, setFilter] = useState(FILTER_COMBINED);
const { formatMessage } = useIntl();
const { formatMessage, labels } = useMessages();
const buttons = [
{

9
components/metrics/PageviewsChart.js
View file

@ -1,11 +1,10 @@
import { useMemo } from 'react';
import { useVisible } from 'react-basics';
import { useIntl } from 'react-intl';
import { colord } from 'colord';
import BarChart from './BarChart';
import useTheme from 'hooks/useTheme';
import { THEME_COLORS, DEFAULT_ANIMATION_DURATION } from 'lib/constants';
import { labels } from 'components/messages';
import { useMemo } from 'react';
import useTheme from 'hooks/useTheme';
import useMessages from 'hooks/useMessages';
export default function PageviewsChart({
websiteId,
@ -17,7 +16,7 @@ export default function PageviewsChart({
animationDuration = DEFAULT_ANIMATION_DURATION,
...props
}) {
const { formatMessage } = useIntl();
const { formatMessage, labels } = useMessages();
const [theme] = useTheme();
const { ref, visible } = useVisible();

5
components/metrics/QueryParametersTable.js
View file

@ -1,12 +1,11 @@
import { useState } from 'react';
import { useIntl } from 'react-intl';
import { safeDecodeURI } from 'next-basics';
import Tag from 'components/common/Tag';
import FilterButtons from 'components/common/FilterButtons';
import { paramFilter } from 'lib/filters';
import { FILTER_RAW, FILTER_COMBINED } from 'lib/constants';
import { labels } from 'components/messages';
import MetricsTable from './MetricsTable';
import useMessages from 'hooks/useMessages';
const filters = {
[FILTER_RAW]: null,
@ -15,7 +14,7 @@ const filters = {
export default function QueryParametersTable({ websiteId, showFilters, ...props }) {
const [filter, setFilter] = useState(FILTER_COMBINED);
const { formatMessage } = useIntl();
const { formatMessage, labels } = useMessages();
const buttons = [
{

5
components/metrics/ReferrersTable.js
View file

@ -1,10 +1,9 @@
import { useIntl } from 'react-intl';
import MetricsTable from './MetricsTable';
import FilterLink from 'components/common/FilterLink';
import { labels } from 'components/messages';
import useMessages from 'hooks/useMessages';
export default function ReferrersTable({ websiteId, ...props }) {
const { formatMessage } = useIntl();
const { formatMessage, labels } = useMessages();
const renderLink = ({ w: link, x: referrer }) => {
return referrer ? (

7
components/metrics/WebsiteChart.js
View file

@ -1,5 +1,4 @@
import { useMemo } from 'react';
import { useIntl } from 'react-intl';
import { Button, Icon, Text, Row, Column } from 'react-basics';
import Link from 'next/link';
import classNames from 'classnames';
@ -16,9 +15,9 @@ import useTimezone from 'hooks/useTimezone';
import usePageQuery from 'hooks/usePageQuery';
import { getDateArray, getDateLength } from 'lib/date';
import Icons from 'components/icons';
import { labels } from 'components/messages';
import styles from './WebsiteChart.module.css';
import useSticky from '../../hooks/useSticky';
import useSticky from 'hooks/useSticky';
import useMessages from 'hooks/useMessages';
export default function WebsiteChart({
websiteId,
@ -29,7 +28,7 @@ export default function WebsiteChart({
showDetailsButton = false,
onDataLoad = () => {},
}) {
const { formatMessage } = useIntl();
const { formatMessage, labels } = useMessages();
const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, unit, value, modified } = dateRange;
const [timezone] = useTimezone();