mirror of
https://github.com/kremalicious/umami.git
synced 2024-06-28 00:37:51 +02:00
Use useMessages hook everywhere.
This commit is contained in:
parent
f3e1f18e1b
commit
9ddb8b5d25
|
@ -1,10 +1,9 @@
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { Icon, Icons, Text } from 'react-basics';
|
import { Icon, Icons, Text } from 'react-basics';
|
||||||
import { messages } from 'components/messages';
|
|
||||||
import styles from './ErrorMessage.module.css';
|
import styles from './ErrorMessage.module.css';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function ErrorMessage() {
|
export default function ErrorMessage() {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, messages } = useMessages();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.error}>
|
<div className={styles.error}>
|
||||||
|
|
|
@ -1,14 +1,13 @@
|
||||||
import { useState, useEffect, useCallback } from 'react';
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
import { useIntl } from 'react-intl';
|
import { Button, Row, Column } from 'react-basics';
|
||||||
import { Button, Banner, Row, Column, Flexbox } from 'react-basics';
|
|
||||||
import { setItem } from 'next-basics';
|
import { setItem } from 'next-basics';
|
||||||
import useStore, { checkVersion } from 'store/version';
|
import useStore, { checkVersion } from 'store/version';
|
||||||
import { REPO_URL, VERSION_CHECK } from 'lib/constants';
|
import { REPO_URL, VERSION_CHECK } from 'lib/constants';
|
||||||
import { labels, messages } from 'components/messages';
|
|
||||||
import styles from './UpdateNotice.module.css';
|
import styles from './UpdateNotice.module.css';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function UpdateNotice() {
|
export default function UpdateNotice() {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels, messages } = useMessages();
|
||||||
const { latest, checked, hasUpdate, releaseUrl } = useStore();
|
const { latest, checked, hasUpdate, releaseUrl } = useStore();
|
||||||
const [dismissed, setDismissed] = useState(false);
|
const [dismissed, setDismissed] = useState(false);
|
||||||
|
|
||||||
|
|
|
@ -1,17 +1,16 @@
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Icon, Modal, Dropdown, Item, Text, Flexbox } from 'react-basics';
|
import { Icon, Modal, Dropdown, Item, Text, Flexbox } from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { endOfYear, isSameDay } from 'date-fns';
|
import { endOfYear, isSameDay } from 'date-fns';
|
||||||
import DatePickerForm from 'components/metrics/DatePickerForm';
|
import DatePickerForm from 'components/metrics/DatePickerForm';
|
||||||
import useLocale from 'hooks/useLocale';
|
import useLocale from 'hooks/useLocale';
|
||||||
import { dateFormat, getDateRangeValues } from 'lib/date';
|
import { dateFormat, getDateRangeValues } from 'lib/date';
|
||||||
import Icons from 'components/icons';
|
import Icons from 'components/icons';
|
||||||
import { labels } from 'components/messages';
|
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import useDateRange from 'hooks/useDateRange';
|
import useDateRange from 'hooks/useDateRange';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
function DateFilter({ websiteId, value, className }) {
|
function DateFilter({ websiteId, value, className }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { get } = useApi();
|
const { get } = useApi();
|
||||||
const [dateRange, setDateRange] = useDateRange(websiteId);
|
const [dateRange, setDateRange] = useDateRange(websiteId);
|
||||||
const { startDate, endDate } = dateRange;
|
const { startDate, endDate } = dateRange;
|
||||||
|
|
|
@ -1,10 +1,9 @@
|
||||||
import { Button, Icon, Icons, Tooltip } from 'react-basics';
|
import { Button, Icon, Icons, Tooltip } from 'react-basics';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { labels } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
|
|
||||||
export default function LogoutButton({ tooltipPosition = 'top' }) {
|
export default function LogoutButton({ tooltipPosition = 'top' }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
return (
|
return (
|
||||||
<Link href="/logout">
|
<Link href="/logout">
|
||||||
<Tooltip label={formatMessage(labels.logout)} position={tooltipPosition}>
|
<Tooltip label={formatMessage(labels.logout)} position={tooltipPosition}>
|
||||||
|
|
|
@ -1,12 +1,11 @@
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { LoadingButton, Icon, Tooltip } from 'react-basics';
|
import { LoadingButton, Icon, Tooltip } from 'react-basics';
|
||||||
import { setWebsiteDateRange } from 'store/websites';
|
import { setWebsiteDateRange } from 'store/websites';
|
||||||
import useDateRange from 'hooks/useDateRange';
|
import useDateRange from 'hooks/useDateRange';
|
||||||
import Icons from 'components/icons';
|
import Icons from 'components/icons';
|
||||||
import { labels } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
function RefreshButton({ websiteId, isLoading }) {
|
function RefreshButton({ websiteId, isLoading }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const [dateRange] = useDateRange(websiteId);
|
const [dateRange] = useDateRange(websiteId);
|
||||||
|
|
||||||
function handleClick() {
|
function handleClick() {
|
||||||
|
|
|
@ -1,13 +1,12 @@
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { Button, Icon, Tooltip, PopupTrigger, Popup, Form, FormRow } from 'react-basics';
|
import { Button, Icon, Tooltip, PopupTrigger, Popup, Form, FormRow } from 'react-basics';
|
||||||
import TimezoneSetting from 'components/pages/settings/profile/TimezoneSetting';
|
import TimezoneSetting from 'components/pages/settings/profile/TimezoneSetting';
|
||||||
import DateRangeSetting from 'components/pages/settings/profile/DateRangeSetting';
|
import DateRangeSetting from 'components/pages/settings/profile/DateRangeSetting';
|
||||||
import Icons from 'components/icons';
|
import Icons from 'components/icons';
|
||||||
import { labels } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
import styles from './SettingsButton.module.css';
|
import styles from './SettingsButton.module.css';
|
||||||
|
|
||||||
export default function SettingsButton() {
|
export default function SettingsButton() {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PopupTrigger>
|
<PopupTrigger>
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import { useTransition, animated } from 'react-spring';
|
import { useTransition, animated } from 'react-spring';
|
||||||
import { Button, Icon } from 'react-basics';
|
import { Button, Icon } from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import useTheme from 'hooks/useTheme';
|
import useTheme from 'hooks/useTheme';
|
||||||
import Icons from 'components/icons';
|
import Icons from 'components/icons';
|
||||||
import styles from './ThemeButton.module.css';
|
import styles from './ThemeButton.module.css';
|
||||||
|
|
|
@ -1,10 +1,9 @@
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { Dropdown, Item } from 'react-basics';
|
import { Dropdown, Item } from 'react-basics';
|
||||||
import { labels } from 'components/messages';
|
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function WebsiteSelect({ websiteId, onSelect }) {
|
export default function WebsiteSelect({ websiteId, onSelect }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { get, useQuery } = useApi();
|
const { get, useQuery } = useApi();
|
||||||
const { data } = useQuery(['websites:me'], () => get('/me/websites'));
|
const { data } = useQuery(['websites:me'], () => get('/me/websites'));
|
||||||
|
|
||||||
|
|
|
@ -109,6 +109,8 @@ export const labels = defineMessages({
|
||||||
laptop: { id: 'label.laptop', defaultMessage: 'Laptop' },
|
laptop: { id: 'label.laptop', defaultMessage: 'Laptop' },
|
||||||
tablet: { id: 'label.tablet', defaultMessage: 'Tablet' },
|
tablet: { id: 'label.tablet', defaultMessage: 'Tablet' },
|
||||||
mobile: { id: 'label.mobile', defaultMessage: 'Mobile' },
|
mobile: { id: 'label.mobile', defaultMessage: 'Mobile' },
|
||||||
|
toggleCharts: { id: 'label.toggle-charts', defaultMessage: 'Toggle charts' },
|
||||||
|
editDashboard: { id: 'label.edit-dashboard', defaultMessage: 'Edit dashboard' },
|
||||||
});
|
});
|
||||||
|
|
||||||
export const messages = defineMessages({
|
export const messages = defineMessages({
|
||||||
|
@ -201,9 +203,3 @@ export const messages = defineMessages({
|
||||||
defaultMessage: '{event} on {url}',
|
defaultMessage: '{event} on {url}',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export function getMessage(id, formatMessage) {
|
|
||||||
const message = Object.values(messages).find(value => value.id === id);
|
|
||||||
|
|
||||||
return message ? formatMessage(message) : id;
|
|
||||||
}
|
|
||||||
|
|
|
@ -1,12 +1,11 @@
|
||||||
import { useMemo } from 'react';
|
import { useMemo } from 'react';
|
||||||
import { StatusLight } from 'react-basics';
|
import { StatusLight } from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import { messages } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
import styles from './ActiveUsers.module.css';
|
import styles from './ActiveUsers.module.css';
|
||||||
|
|
||||||
export default function ActiveUsers({ websiteId, value, refetchInterval = 60000 }) {
|
export default function ActiveUsers({ websiteId, value, refetchInterval = 60000 }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, messages } = useMessages();
|
||||||
const { get, useQuery } = useApi();
|
const { get, useQuery } = useApi();
|
||||||
const { data } = useQuery(
|
const { data } = useQuery(
|
||||||
['websites:active', websiteId],
|
['websites:active', websiteId],
|
||||||
|
|
|
@ -1,20 +1,14 @@
|
||||||
import MetricsTable from './MetricsTable';
|
import MetricsTable from './MetricsTable';
|
||||||
import { percentFilter } from 'lib/filters';
|
import { percentFilter } from 'lib/filters';
|
||||||
import { useIntl, defineMessages } from 'react-intl';
|
|
||||||
import FilterLink from 'components/common/FilterLink';
|
import FilterLink from 'components/common/FilterLink';
|
||||||
import useCountryNames from 'hooks/useCountryNames';
|
import useCountryNames from 'hooks/useCountryNames';
|
||||||
import useLocale from 'hooks/useLocale';
|
import useLocale from 'hooks/useLocale';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
const messages = defineMessages({
|
|
||||||
unknown: { id: 'label.unknown', defaultMessage: 'Unknown' },
|
|
||||||
countries: { id: 'metrics.countries', defaultMessage: 'Countries' },
|
|
||||||
visitors: { id: 'metrics.visitors', defaultMessage: 'Visitors' },
|
|
||||||
});
|
|
||||||
|
|
||||||
export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
|
export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
|
||||||
const { locale } = useLocale();
|
const { locale } = useLocale();
|
||||||
const countryNames = useCountryNames(locale);
|
const countryNames = useCountryNames(locale);
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
|
|
||||||
function renderLink({ x: code }) {
|
function renderLink({ x: code }) {
|
||||||
return (
|
return (
|
||||||
|
@ -22,7 +16,7 @@ export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
|
||||||
<FilterLink
|
<FilterLink
|
||||||
id="country"
|
id="country"
|
||||||
value={code}
|
value={code}
|
||||||
label={countryNames[code] ?? formatMessage(messages.unknown)}
|
label={countryNames[code] ?? formatMessage(labels.unknown)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -31,9 +25,9 @@ export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
|
||||||
return (
|
return (
|
||||||
<MetricsTable
|
<MetricsTable
|
||||||
{...props}
|
{...props}
|
||||||
title={formatMessage(messages.countries)}
|
title={formatMessage(labels.countries)}
|
||||||
type="country"
|
type="country"
|
||||||
metric={formatMessage(messages.visitors)}
|
metric={formatMessage(labels.visitors)}
|
||||||
websiteId={websiteId}
|
websiteId={websiteId}
|
||||||
onDataLoad={data => onDataLoad?.(percentFilter(data))}
|
onDataLoad={data => onDataLoad?.(percentFilter(data))}
|
||||||
renderLabel={renderLink}
|
renderLabel={renderLink}
|
||||||
|
|
|
@ -1,13 +1,12 @@
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Button, ButtonGroup, Calendar } from 'react-basics';
|
import { Button, ButtonGroup, Calendar } from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { isAfter, isBefore, isSameDay } from 'date-fns';
|
import { isAfter, isBefore, isSameDay } from 'date-fns';
|
||||||
import useLocale from 'hooks/useLocale';
|
import useLocale from 'hooks/useLocale';
|
||||||
import { getDateRangeValues } from 'lib/date';
|
import { getDateRangeValues } from 'lib/date';
|
||||||
import { getDateLocale } from 'lib/lang';
|
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 { FILTER_DAY, FILTER_RANGE } from 'lib/constants';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
import styles from './DatePickerForm.module.css';
|
||||||
|
|
||||||
export default function DatePickerForm({
|
export default function DatePickerForm({
|
||||||
startDate: defaultStartDate,
|
startDate: defaultStartDate,
|
||||||
|
@ -24,7 +23,7 @@ export default function DatePickerForm({
|
||||||
const [startDate, setStartDate] = useState(defaultStartDate);
|
const [startDate, setStartDate] = useState(defaultStartDate);
|
||||||
const [endDate, setEndDate] = useState(defaultEndDate);
|
const [endDate, setEndDate] = useState(defaultEndDate);
|
||||||
const { locale } = useLocale();
|
const { locale } = useLocale();
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
|
|
||||||
const disabled =
|
const disabled =
|
||||||
selected === FILTER_DAY
|
selected === FILTER_DAY
|
||||||
|
|
|
@ -1,10 +1,9 @@
|
||||||
import MetricsTable from './MetricsTable';
|
import MetricsTable from './MetricsTable';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import FilterLink from 'components/common/FilterLink';
|
import FilterLink from 'components/common/FilterLink';
|
||||||
import { labels } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function DevicesTable({ websiteId, ...props }) {
|
export default function DevicesTable({ websiteId, ...props }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
|
|
||||||
function renderLink({ x: device }) {
|
function renderLink({ x: device }) {
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,13 +1,8 @@
|
||||||
import { defineMessages, useIntl } from 'react-intl';
|
|
||||||
import MetricsTable from './MetricsTable';
|
import MetricsTable from './MetricsTable';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
const messages = defineMessages({
|
|
||||||
events: { id: 'metrics.events', defaultMessage: 'Events' },
|
|
||||||
actions: { id: 'metrics.actions', defaultMessage: 'Actions' },
|
|
||||||
});
|
|
||||||
|
|
||||||
export default function EventsTable({ websiteId, ...props }) {
|
export default function EventsTable({ websiteId, ...props }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
|
|
||||||
function handleDataLoad(data) {
|
function handleDataLoad(data) {
|
||||||
props.onDataLoad?.(data);
|
props.onDataLoad?.(data);
|
||||||
|
@ -16,9 +11,9 @@ export default function EventsTable({ websiteId, ...props }) {
|
||||||
return (
|
return (
|
||||||
<MetricsTable
|
<MetricsTable
|
||||||
{...props}
|
{...props}
|
||||||
title={formatMessage(messages.events)}
|
title={formatMessage(labels.events)}
|
||||||
type="event"
|
type="event"
|
||||||
metric={formatMessage(messages.actions)}
|
metric={formatMessage(labels.actions)}
|
||||||
websiteId={websiteId}
|
websiteId={websiteId}
|
||||||
onDataLoad={handleDataLoad}
|
onDataLoad={handleDataLoad}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -1,12 +1,11 @@
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { safeDecodeURI } from 'next-basics';
|
import { safeDecodeURI } from 'next-basics';
|
||||||
import { Button, Icon, Icons, Text } from 'react-basics';
|
import { Button, Icon, Icons, Text } from 'react-basics';
|
||||||
import { labels } from 'components/messages';
|
|
||||||
import usePageQuery from 'hooks/usePageQuery';
|
import usePageQuery from 'hooks/usePageQuery';
|
||||||
import styles from './FilterTags.module.css';
|
import styles from './FilterTags.module.css';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function FilterTags({ websiteId, params, onClick }) {
|
export default function FilterTags({ websiteId, params }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const {
|
const {
|
||||||
router,
|
router,
|
||||||
resolveUrl,
|
resolveUrl,
|
||||||
|
|
|
@ -1,17 +1,16 @@
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Loading } from 'react-basics';
|
import { Loading } from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import ErrorMessage from 'components/common/ErrorMessage';
|
import ErrorMessage from 'components/common/ErrorMessage';
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import useDateRange from 'hooks/useDateRange';
|
import useDateRange from 'hooks/useDateRange';
|
||||||
import usePageQuery from 'hooks/usePageQuery';
|
import usePageQuery from 'hooks/usePageQuery';
|
||||||
import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
|
import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
|
||||||
import MetricCard from './MetricCard';
|
import MetricCard from './MetricCard';
|
||||||
import { labels } from 'components/messages';
|
|
||||||
import styles from './MetricsBar.module.css';
|
import styles from './MetricsBar.module.css';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function MetricsBar({ websiteId }) {
|
export default function MetricsBar({ websiteId }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { get, useQuery } = useApi();
|
const { get, useQuery } = useApi();
|
||||||
const [dateRange] = useDateRange(websiteId);
|
const [dateRange] = useDateRange(websiteId);
|
||||||
const { startDate, endDate, modified } = dateRange;
|
const { startDate, endDate, modified } = dateRange;
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import { useMemo } from 'react';
|
import { useMemo } from 'react';
|
||||||
import { Loading, Icon, Text, Button } from 'react-basics';
|
import { Loading, Icon, Text, Button } from 'react-basics';
|
||||||
import { defineMessages, useIntl } from 'react-intl';
|
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import firstBy from 'thenby';
|
import firstBy from 'thenby';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
@ -12,12 +11,9 @@ import ErrorMessage from 'components/common/ErrorMessage';
|
||||||
import DataTable from './DataTable';
|
import DataTable from './DataTable';
|
||||||
import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
|
import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
|
||||||
import Icons from 'components/icons';
|
import Icons from 'components/icons';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
import styles from './MetricsTable.module.css';
|
import styles from './MetricsTable.module.css';
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
more: { id: 'label.more', defaultMessage: 'More' },
|
|
||||||
});
|
|
||||||
|
|
||||||
export default function MetricsTable({
|
export default function MetricsTable({
|
||||||
websiteId,
|
websiteId,
|
||||||
type,
|
type,
|
||||||
|
@ -35,7 +31,7 @@ export default function MetricsTable({
|
||||||
router,
|
router,
|
||||||
query: { url, referrer, os, browser, device, country },
|
query: { url, referrer, os, browser, device, country },
|
||||||
} = usePageQuery();
|
} = usePageQuery();
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { get, useQuery } = useApi();
|
const { get, useQuery } = useApi();
|
||||||
|
|
||||||
const { data, isLoading, isFetched, error } = useQuery(
|
const { data, isLoading, isFetched, error } = useQuery(
|
||||||
|
@ -81,7 +77,7 @@ export default function MetricsTable({
|
||||||
{data && !error && limit && (
|
{data && !error && limit && (
|
||||||
<Link href={router.pathname} as={resolveUrl({ view: type })}>
|
<Link href={router.pathname} as={resolveUrl({ view: type })}>
|
||||||
<Button variant="quiet">
|
<Button variant="quiet">
|
||||||
<Text>{formatMessage(messages.more)}</Text>
|
<Text>{formatMessage(labels.more)}</Text>
|
||||||
<Icon size="sm">
|
<Icon size="sm">
|
||||||
<Icons.ArrowRight />
|
<Icons.ArrowRight />
|
||||||
</Icon>
|
</Icon>
|
||||||
|
|
|
@ -1,10 +1,9 @@
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import MetricsTable from './MetricsTable';
|
import MetricsTable from './MetricsTable';
|
||||||
import FilterLink from 'components/common/FilterLink';
|
import FilterLink from 'components/common/FilterLink';
|
||||||
import { labels } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function OSTable({ websiteId, ...props }) {
|
export default function OSTable({ websiteId, ...props }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
|
|
||||||
function renderLink({ x: os }) {
|
function renderLink({ x: os }) {
|
||||||
return <FilterLink id="os" value={os} />;
|
return <FilterLink id="os" value={os} />;
|
||||||
|
|
|
@ -1,11 +1,10 @@
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import FilterLink from 'components/common/FilterLink';
|
import FilterLink from 'components/common/FilterLink';
|
||||||
import FilterButtons from 'components/common/FilterButtons';
|
import FilterButtons from 'components/common/FilterButtons';
|
||||||
import { urlFilter } from 'lib/filters';
|
import { urlFilter } from 'lib/filters';
|
||||||
import { labels } from 'components/messages';
|
|
||||||
import MetricsTable from './MetricsTable';
|
import MetricsTable from './MetricsTable';
|
||||||
import { FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
|
import { FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
const filters = {
|
const filters = {
|
||||||
[FILTER_RAW]: null,
|
[FILTER_RAW]: null,
|
||||||
|
@ -14,7 +13,7 @@ const filters = {
|
||||||
|
|
||||||
export default function PagesTable({ websiteId, showFilters, ...props }) {
|
export default function PagesTable({ websiteId, showFilters, ...props }) {
|
||||||
const [filter, setFilter] = useState(FILTER_COMBINED);
|
const [filter, setFilter] = useState(FILTER_COMBINED);
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
|
|
||||||
const buttons = [
|
const buttons = [
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,11 +1,10 @@
|
||||||
|
import { useMemo } from 'react';
|
||||||
import { useVisible } from 'react-basics';
|
import { useVisible } from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { colord } from 'colord';
|
import { colord } from 'colord';
|
||||||
import BarChart from './BarChart';
|
import BarChart from './BarChart';
|
||||||
import useTheme from 'hooks/useTheme';
|
|
||||||
import { THEME_COLORS, DEFAULT_ANIMATION_DURATION } from 'lib/constants';
|
import { THEME_COLORS, DEFAULT_ANIMATION_DURATION } from 'lib/constants';
|
||||||
import { labels } from 'components/messages';
|
import useTheme from 'hooks/useTheme';
|
||||||
import { useMemo } from 'react';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function PageviewsChart({
|
export default function PageviewsChart({
|
||||||
websiteId,
|
websiteId,
|
||||||
|
@ -17,7 +16,7 @@ export default function PageviewsChart({
|
||||||
animationDuration = DEFAULT_ANIMATION_DURATION,
|
animationDuration = DEFAULT_ANIMATION_DURATION,
|
||||||
...props
|
...props
|
||||||
}) {
|
}) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const [theme] = useTheme();
|
const [theme] = useTheme();
|
||||||
const { ref, visible } = useVisible();
|
const { ref, visible } = useVisible();
|
||||||
|
|
||||||
|
|
|
@ -1,12 +1,11 @@
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { safeDecodeURI } from 'next-basics';
|
import { safeDecodeURI } from 'next-basics';
|
||||||
import Tag from 'components/common/Tag';
|
import Tag from 'components/common/Tag';
|
||||||
import FilterButtons from 'components/common/FilterButtons';
|
import FilterButtons from 'components/common/FilterButtons';
|
||||||
import { paramFilter } from 'lib/filters';
|
import { paramFilter } from 'lib/filters';
|
||||||
import { FILTER_RAW, FILTER_COMBINED } from 'lib/constants';
|
import { FILTER_RAW, FILTER_COMBINED } from 'lib/constants';
|
||||||
import { labels } from 'components/messages';
|
|
||||||
import MetricsTable from './MetricsTable';
|
import MetricsTable from './MetricsTable';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
const filters = {
|
const filters = {
|
||||||
[FILTER_RAW]: null,
|
[FILTER_RAW]: null,
|
||||||
|
@ -15,7 +14,7 @@ const filters = {
|
||||||
|
|
||||||
export default function QueryParametersTable({ websiteId, showFilters, ...props }) {
|
export default function QueryParametersTable({ websiteId, showFilters, ...props }) {
|
||||||
const [filter, setFilter] = useState(FILTER_COMBINED);
|
const [filter, setFilter] = useState(FILTER_COMBINED);
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
|
|
||||||
const buttons = [
|
const buttons = [
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,10 +1,9 @@
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import MetricsTable from './MetricsTable';
|
import MetricsTable from './MetricsTable';
|
||||||
import FilterLink from 'components/common/FilterLink';
|
import FilterLink from 'components/common/FilterLink';
|
||||||
import { labels } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function ReferrersTable({ websiteId, ...props }) {
|
export default function ReferrersTable({ websiteId, ...props }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
|
|
||||||
const renderLink = ({ w: link, x: referrer }) => {
|
const renderLink = ({ w: link, x: referrer }) => {
|
||||||
return referrer ? (
|
return referrer ? (
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { useMemo } from 'react';
|
import { useMemo } from 'react';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { Button, Icon, Text, Row, Column } from 'react-basics';
|
import { Button, Icon, Text, Row, Column } from 'react-basics';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
@ -16,9 +15,9 @@ import useTimezone from 'hooks/useTimezone';
|
||||||
import usePageQuery from 'hooks/usePageQuery';
|
import usePageQuery from 'hooks/usePageQuery';
|
||||||
import { getDateArray, getDateLength } from 'lib/date';
|
import { getDateArray, getDateLength } from 'lib/date';
|
||||||
import Icons from 'components/icons';
|
import Icons from 'components/icons';
|
||||||
import { labels } from 'components/messages';
|
|
||||||
import styles from './WebsiteChart.module.css';
|
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({
|
export default function WebsiteChart({
|
||||||
websiteId,
|
websiteId,
|
||||||
|
@ -29,7 +28,7 @@ export default function WebsiteChart({
|
||||||
showDetailsButton = false,
|
showDetailsButton = false,
|
||||||
onDataLoad = () => {},
|
onDataLoad = () => {},
|
||||||
}) {
|
}) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const [dateRange] = useDateRange(websiteId);
|
const [dateRange] = useDateRange(websiteId);
|
||||||
const { startDate, endDate, unit, value, modified } = dateRange;
|
const { startDate, endDate, unit, value, modified } = dateRange;
|
||||||
const [timezone] = useTimezone();
|
const [timezone] = useTimezone();
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Button, Icon, Icons, Text, Flexbox } from 'react-basics';
|
import { Button, Icon, Icons, Text, Flexbox } from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import Page from 'components/layout/Page';
|
import Page from 'components/layout/Page';
|
||||||
import PageHeader from 'components/layout/PageHeader';
|
import PageHeader from 'components/layout/PageHeader';
|
||||||
|
@ -9,16 +8,16 @@ import DashboardSettingsButton from 'components/pages/dashboard/DashboardSetting
|
||||||
import DashboardEdit from 'components/pages/dashboard/DashboardEdit';
|
import DashboardEdit from 'components/pages/dashboard/DashboardEdit';
|
||||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import { labels, messages } from 'components/messages';
|
|
||||||
import useDashboard from 'store/dashboard';
|
import useDashboard from 'store/dashboard';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function Dashboard({ userId }) {
|
export default function Dashboard({ userId }) {
|
||||||
|
const { formatMessage, labels, messages } = useMessages();
|
||||||
const dashboard = useDashboard();
|
const dashboard = useDashboard();
|
||||||
const { showCharts, limit, editing } = dashboard;
|
const { showCharts, limit, editing } = dashboard;
|
||||||
const [max, setMax] = useState(limit);
|
const [max, setMax] = useState(limit);
|
||||||
const { get, useQuery } = useApi();
|
const { get, useQuery } = useApi();
|
||||||
const { data, isLoading, error } = useQuery(['websites'], () => get('/websites', { userId }));
|
const { data, isLoading, error } = useQuery(['websites'], () => get('/websites', { userId }));
|
||||||
const { formatMessage } = useIntl();
|
|
||||||
const hasData = data && data.length !== 0;
|
const hasData = data && data.length !== 0;
|
||||||
|
|
||||||
function handleMore() {
|
function handleMore() {
|
||||||
|
|
|
@ -1,24 +1,18 @@
|
||||||
import { useState, useMemo } from 'react';
|
import { useState, useMemo } from 'react';
|
||||||
import { defineMessages, useIntl } from 'react-intl';
|
|
||||||
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
|
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { Button } from 'react-basics';
|
import { Button } from 'react-basics';
|
||||||
import { firstBy } from 'thenby';
|
import { firstBy } from 'thenby';
|
||||||
import useDashboard, { saveDashboard } from 'store/dashboard';
|
import useDashboard, { saveDashboard } from 'store/dashboard';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
import styles from './DashboardEdit.module.css';
|
import styles from './DashboardEdit.module.css';
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
save: { id: 'label.save', defaultMessage: 'Save' },
|
|
||||||
reset: { id: 'label.reset', defaultMessage: 'Reset' },
|
|
||||||
cancel: { id: 'label.cancel', defaultMessage: 'Cancel' },
|
|
||||||
});
|
|
||||||
|
|
||||||
const dragId = 'dashboard-website-ordering';
|
const dragId = 'dashboard-website-ordering';
|
||||||
|
|
||||||
export default function DashboardEdit({ websites }) {
|
export default function DashboardEdit({ websites }) {
|
||||||
const settings = useDashboard();
|
const settings = useDashboard();
|
||||||
const { websiteOrder } = settings;
|
const { websiteOrder } = settings;
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const [order, setOrder] = useState(websiteOrder || []);
|
const [order, setOrder] = useState(websiteOrder || []);
|
||||||
|
|
||||||
const ordered = useMemo(
|
const ordered = useMemo(
|
||||||
|
@ -58,13 +52,13 @@ export default function DashboardEdit({ websites }) {
|
||||||
<>
|
<>
|
||||||
<div className={styles.buttons}>
|
<div className={styles.buttons}>
|
||||||
<Button onClick={handleSave} variant="action" size="small">
|
<Button onClick={handleSave} variant="action" size="small">
|
||||||
{formatMessage(messages.save)}
|
{formatMessage(labels.save)}
|
||||||
</Button>
|
</Button>
|
||||||
<Button onClick={handleCancel} size="small">
|
<Button onClick={handleCancel} size="small">
|
||||||
{formatMessage(messages.cancel)}
|
{formatMessage(labels.cancel)}
|
||||||
</Button>
|
</Button>
|
||||||
<Button onClick={handleReset} size="small">
|
<Button onClick={handleReset} size="small">
|
||||||
{formatMessage(messages.reset)}
|
{formatMessage(labels.reset)}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.dragActive}>
|
<div className={styles.dragActive}>
|
||||||
|
|
|
@ -1,24 +1,18 @@
|
||||||
import { defineMessages, useIntl } from 'react-intl';
|
|
||||||
import { Menu, Icon, Text, PopupTrigger, Popup, Item, Button } from 'react-basics';
|
import { Menu, Icon, Text, PopupTrigger, Popup, Item, Button } from 'react-basics';
|
||||||
import Icons from 'components/icons';
|
import Icons from 'components/icons';
|
||||||
import { labels } from 'components/messages';
|
|
||||||
import { saveDashboard } from 'store/dashboard';
|
import { saveDashboard } from 'store/dashboard';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
const messages = defineMessages({
|
|
||||||
toggleCharts: { id: 'message.toggle-charts', defaultMessage: 'Toggle charts' },
|
|
||||||
editDashboard: { id: 'message.edit-dashboard', defaultMessage: 'Edit dashboard' },
|
|
||||||
});
|
|
||||||
|
|
||||||
export default function DashboardSettingsButton() {
|
export default function DashboardSettingsButton() {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
|
|
||||||
const menuOptions = [
|
const menuOptions = [
|
||||||
{
|
{
|
||||||
label: formatMessage(messages.toggleCharts),
|
label: formatMessage(labels.toggleCharts),
|
||||||
value: 'charts',
|
value: 'charts',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: formatMessage(messages.editDashboard),
|
label: formatMessage(labels.editDashboard),
|
||||||
value: 'order',
|
value: 'order',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
|
@ -1,12 +1,11 @@
|
||||||
import { useCallback } from 'react';
|
import { useCallback } from 'react';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { labels } from 'components/messages';
|
|
||||||
import DataTable from 'components/metrics/DataTable';
|
import DataTable from 'components/metrics/DataTable';
|
||||||
import useLocale from 'hooks/useLocale';
|
import useLocale from 'hooks/useLocale';
|
||||||
import useCountryNames from 'hooks/useCountryNames';
|
import useCountryNames from 'hooks/useCountryNames';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function RealtimeCountries({ data }) {
|
export default function RealtimeCountries({ data }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { locale } = useLocale();
|
const { locale } = useLocale();
|
||||||
const countryNames = useCountryNames(locale);
|
const countryNames = useCountryNames(locale);
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { useState, useEffect, useMemo } from 'react';
|
import { useState, useEffect, useMemo } from 'react';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { subMinutes, startOfMinute } from 'date-fns';
|
import { subMinutes, startOfMinute } from 'date-fns';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import firstBy from 'thenby';
|
import firstBy from 'thenby';
|
||||||
|
@ -14,8 +13,8 @@ import RealtimeUrls from 'components/pages/realtime/RealtimeUrls';
|
||||||
import RealtimeCountries from 'components/pages/realtime/RealtimeCountries';
|
import RealtimeCountries from 'components/pages/realtime/RealtimeCountries';
|
||||||
import WebsiteSelect from 'components/input/WebsiteSelect';
|
import WebsiteSelect from 'components/input/WebsiteSelect';
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
import { percentFilter } from 'lib/filters';
|
import { percentFilter } from 'lib/filters';
|
||||||
import { labels } from 'components/messages';
|
|
||||||
import { REALTIME_RANGE, REALTIME_INTERVAL } from 'lib/constants';
|
import { REALTIME_RANGE, REALTIME_INTERVAL } from 'lib/constants';
|
||||||
import styles from './RealtimeDashboard.module.css';
|
import styles from './RealtimeDashboard.module.css';
|
||||||
|
|
||||||
|
@ -27,7 +26,7 @@ function mergeData(state = [], data = [], time) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function RealtimeDashboard({ websiteId }) {
|
export default function RealtimeDashboard({ websiteId }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [currentData, setCurrentData] = useState();
|
const [currentData, setCurrentData] = useState();
|
||||||
const { get, useQuery } = useApi();
|
const { get, useQuery } = useApi();
|
||||||
|
|
|
@ -1,10 +1,9 @@
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import MetricCard from 'components/metrics/MetricCard';
|
import MetricCard from 'components/metrics/MetricCard';
|
||||||
import { labels } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
import styles from './RealtimeHeader.module.css';
|
import styles from './RealtimeHeader.module.css';
|
||||||
|
|
||||||
export default function RealtimeHeader({ data = {} }) {
|
export default function RealtimeHeader({ data = {} }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { pageviews, visitors, events, countries } = data;
|
const { pageviews, visitors, events, countries } = data;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,14 +1,13 @@
|
||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import Page from 'components/layout/Page';
|
import Page from 'components/layout/Page';
|
||||||
import PageHeader from 'components/layout/PageHeader';
|
import PageHeader from 'components/layout/PageHeader';
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import { labels, messages } from 'components/messages';
|
|
||||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function RealtimeHome() {
|
export default function RealtimeHome() {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels, messages } = useMessages();
|
||||||
const { get, useQuery } = useApi();
|
const { get, useQuery } = useApi();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { data, isLoading, error } = useQuery(['websites:me'], () => get('/me/websites'));
|
const { data, isLoading, error } = useQuery(['websites:me'], () => get('/me/websites'));
|
||||||
|
|
|
@ -1,11 +1,9 @@
|
||||||
import { useMemo, useState } from 'react';
|
import { useMemo, useState } from 'react';
|
||||||
import { StatusLight, Icon, Text } from 'react-basics';
|
import { StatusLight, Icon, Text } from 'react-basics';
|
||||||
import { useIntl, FormattedMessage } from 'react-intl';
|
|
||||||
import { FixedSizeList } from 'react-window';
|
import { FixedSizeList } from 'react-window';
|
||||||
import firstBy from 'thenby';
|
import firstBy from 'thenby';
|
||||||
import FilterButtons from 'components/common/FilterButtons';
|
import FilterButtons from 'components/common/FilterButtons';
|
||||||
import NoData from 'components/common/NoData';
|
import NoData from 'components/common/NoData';
|
||||||
import { labels, messages } from 'components/messages';
|
|
||||||
import useLocale from 'hooks/useLocale';
|
import useLocale from 'hooks/useLocale';
|
||||||
import useCountryNames from 'hooks/useCountryNames';
|
import useCountryNames from 'hooks/useCountryNames';
|
||||||
import { BROWSERS } from 'lib/constants';
|
import { BROWSERS } from 'lib/constants';
|
||||||
|
@ -14,6 +12,7 @@ import { dateFormat } from 'lib/date';
|
||||||
import { safeDecodeURI } from 'next-basics';
|
import { safeDecodeURI } from 'next-basics';
|
||||||
import Icons from 'components/icons';
|
import Icons from 'components/icons';
|
||||||
import styles from './RealtimeLog.module.css';
|
import styles from './RealtimeLog.module.css';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
const TYPE_ALL = 'all';
|
const TYPE_ALL = 'all';
|
||||||
const TYPE_PAGEVIEW = 'pageview';
|
const TYPE_PAGEVIEW = 'pageview';
|
||||||
|
@ -27,7 +26,7 @@ const icons = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RealtimeLog({ data, websiteDomain }) {
|
export default function RealtimeLog({ data, websiteDomain }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels, messages, FormattedMessage } = useMessages();
|
||||||
const { locale } = useLocale();
|
const { locale } = useLocale();
|
||||||
const countryNames = useCountryNames(locale);
|
const countryNames = useCountryNames(locale);
|
||||||
const [filter, setFilter] = useState(TYPE_ALL);
|
const [filter, setFilter] = useState(TYPE_ALL);
|
||||||
|
|
|
@ -1,14 +1,13 @@
|
||||||
import { useMemo, useState } from 'react';
|
import { useMemo, useState } from 'react';
|
||||||
import { ButtonGroup, Button, Flexbox } from 'react-basics';
|
import { ButtonGroup, Button, Flexbox } from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import firstBy from 'thenby';
|
import firstBy from 'thenby';
|
||||||
import { percentFilter } from 'lib/filters';
|
import { percentFilter } from 'lib/filters';
|
||||||
import DataTable from 'components/metrics/DataTable';
|
import DataTable from 'components/metrics/DataTable';
|
||||||
import { FILTER_PAGES, FILTER_REFERRERS } from 'lib/constants';
|
import { FILTER_PAGES, FILTER_REFERRERS } from 'lib/constants';
|
||||||
import { labels } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function RealtimeUrls({ websiteDomain, data = {} }) {
|
export default function RealtimeUrls({ websiteDomain, data = {} }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { pageviews } = data;
|
const { pageviews } = data;
|
||||||
const [filter, setFilter] = useState(FILTER_REFERRERS);
|
const [filter, setFilter] = useState(FILTER_REFERRERS);
|
||||||
|
|
||||||
|
|
|
@ -1,12 +1,11 @@
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import DateFilter from 'components/input/DateFilter';
|
import DateFilter from 'components/input/DateFilter';
|
||||||
import { Button, Flexbox } from 'react-basics';
|
import { Button, Flexbox } from 'react-basics';
|
||||||
import useDateRange from 'hooks/useDateRange';
|
import useDateRange from 'hooks/useDateRange';
|
||||||
import { DEFAULT_DATE_RANGE } from 'lib/constants';
|
import { DEFAULT_DATE_RANGE } from 'lib/constants';
|
||||||
import { labels } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function DateRangeSetting() {
|
export default function DateRangeSetting() {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const [dateRange, setDateRange] = useDateRange();
|
const [dateRange, setDateRange] = useDateRange();
|
||||||
const { startDate, endDate, value } = dateRange;
|
const { startDate, endDate, value } = dateRange;
|
||||||
|
|
||||||
|
|
|
@ -1,12 +1,11 @@
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { Button, Dropdown, Item, Flexbox } from 'react-basics';
|
import { Button, Dropdown, Item, Flexbox } from 'react-basics';
|
||||||
import useLocale from 'hooks/useLocale';
|
import useLocale from 'hooks/useLocale';
|
||||||
import { DEFAULT_LOCALE } from 'lib/constants';
|
import { DEFAULT_LOCALE } from 'lib/constants';
|
||||||
import { languages } from 'lib/lang';
|
import { languages } from 'lib/lang';
|
||||||
import { labels } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function LanguageSetting() {
|
export default function LanguageSetting() {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { locale, saveLocale } = useLocale();
|
const { locale, saveLocale } = useLocale();
|
||||||
const options = Object.keys(languages);
|
const options = Object.keys(languages);
|
||||||
|
|
||||||
|
|
|
@ -1,11 +1,10 @@
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { Button, Icon, Text, useToast, ModalTrigger, Modal } from 'react-basics';
|
import { Button, Icon, Text, useToast, ModalTrigger, Modal } from 'react-basics';
|
||||||
import PasswordEditForm from 'components/pages/settings/profile/PasswordEditForm';
|
import PasswordEditForm from 'components/pages/settings/profile/PasswordEditForm';
|
||||||
import Icons from 'components/icons';
|
import Icons from 'components/icons';
|
||||||
import { labels, messages } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function PasswordChangeButton() {
|
export default function PasswordChangeButton() {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels, messages } = useMessages();
|
||||||
const { toast, showToast } = useToast();
|
const { toast, showToast } = useToast();
|
||||||
|
|
||||||
const handleSave = () => {
|
const handleSave = () => {
|
||||||
|
|
|
@ -1,11 +1,10 @@
|
||||||
import { useRef } from 'react';
|
import { useRef } from 'react';
|
||||||
import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
|
import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import { labels, messages } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function PasswordEditForm({ onSave, onClose }) {
|
export default function PasswordEditForm({ onSave, onClose }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels, messages } = useMessages();
|
||||||
const { post, useMutation } = useApi();
|
const { post, useMutation } = useApi();
|
||||||
const { mutate, error, isLoading } = useMutation(data => post('/me/password', data));
|
const { mutate, error, isLoading } = useMutation(data => post('/me/password', data));
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
|
|
|
@ -1,13 +1,12 @@
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import Page from 'components/layout/Page';
|
import Page from 'components/layout/Page';
|
||||||
import PageHeader from 'components/layout/PageHeader';
|
import PageHeader from 'components/layout/PageHeader';
|
||||||
import ProfileDetails from './ProfileDetails';
|
import ProfileDetails from './ProfileDetails';
|
||||||
import PasswordChangeButton from './PasswordChangeButton';
|
import PasswordChangeButton from './PasswordChangeButton';
|
||||||
import { labels } from 'components/messages';
|
|
||||||
import useConfig from 'hooks/useConfig';
|
import useConfig from 'hooks/useConfig';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function ProfileSettings() {
|
export default function ProfileSettings() {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { cloudMode } = useConfig();
|
const { cloudMode } = useConfig();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,12 +1,11 @@
|
||||||
import { Dropdown, Item, Button, Flexbox } from 'react-basics';
|
import { Dropdown, Item, Button, Flexbox } from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { listTimeZones } from 'timezone-support';
|
import { listTimeZones } from 'timezone-support';
|
||||||
import useTimezone from 'hooks/useTimezone';
|
import useTimezone from 'hooks/useTimezone';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
import { getTimezone } from 'lib/date';
|
import { getTimezone } from 'lib/date';
|
||||||
import { labels } from 'components/messages';
|
|
||||||
|
|
||||||
export default function TimezoneSetting() {
|
export default function TimezoneSetting() {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const [timezone, saveTimezone] = useTimezone();
|
const [timezone, saveTimezone] = useTimezone();
|
||||||
const options = listTimeZones();
|
const options = listTimeZones();
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { useRef } from 'react';
|
import { useRef } from 'react';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import {
|
import {
|
||||||
Form,
|
Form,
|
||||||
FormRow,
|
FormRow,
|
||||||
|
@ -10,10 +9,10 @@ import {
|
||||||
SubmitButton,
|
SubmitButton,
|
||||||
} from 'react-basics';
|
} from 'react-basics';
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import { labels, getMessage } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function TeamJoinForm({ onSave, onClose }) {
|
export default function TeamJoinForm({ onSave, onClose }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels, getMessage } = useMessages();
|
||||||
const { post, useMutation } = useApi();
|
const { post, useMutation } = useApi();
|
||||||
const { mutate, error } = useMutation(data => post('/teams/join', data));
|
const { mutate, error } = useMutation(data => post('/teams/join', data));
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
|
@ -28,7 +27,7 @@ export default function TeamJoinForm({ onSave, onClose }) {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form ref={ref} onSubmit={handleSubmit} error={error && getMessage(error, formatMessage)}>
|
<Form ref={ref} onSubmit={handleSubmit} error={error && getMessage(error)}>
|
||||||
<FormRow label={formatMessage(labels.accessCode)}>
|
<FormRow label={formatMessage(labels.accessCode)}>
|
||||||
<FormInput name="accessCode" rules={{ required: formatMessage(labels.required) }}>
|
<FormInput name="accessCode" rules={{ required: formatMessage(labels.required) }}>
|
||||||
<TextField autoComplete="off" />
|
<TextField autoComplete="off" />
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { useRef } from 'react';
|
import { useRef } from 'react';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import {
|
import {
|
||||||
Form,
|
Form,
|
||||||
FormRow,
|
FormRow,
|
||||||
|
@ -10,10 +9,10 @@ import {
|
||||||
SubmitButton,
|
SubmitButton,
|
||||||
} from 'react-basics';
|
} from 'react-basics';
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import { labels } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function TeamAddForm({ onSave, onClose }) {
|
export default function TeamAddForm({ onSave, onClose }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { post, useMutation } = useApi();
|
const { post, useMutation } = useApi();
|
||||||
const { mutate, error, isLoading } = useMutation(data => post('/teams', data));
|
const { mutate, error, isLoading } = useMutation(data => post('/teams', data));
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
|
|
|
@ -1,10 +1,9 @@
|
||||||
import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
|
import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
|
||||||
import { useIntl, FormattedMessage } from 'react-intl';
|
|
||||||
import { labels, messages } from 'components/messages';
|
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
|
export default function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels, messages, FormattedMessage } = useMessages();
|
||||||
const { del, useMutation } = useApi();
|
const { del, useMutation } = useApi();
|
||||||
const { mutate, error, isLoading } = useMutation(data => del(`/teams/${teamId}`, data));
|
const { mutate, error, isLoading } = useMutation(data => del(`/teams/${teamId}`, data));
|
||||||
|
|
||||||
|
|
|
@ -8,16 +8,15 @@ import {
|
||||||
Button,
|
Button,
|
||||||
Flexbox,
|
Flexbox,
|
||||||
} from 'react-basics';
|
} from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { getRandomChars } from 'next-basics';
|
import { getRandomChars } from 'next-basics';
|
||||||
import { useRef, useState } from 'react';
|
import { useRef, useState } from 'react';
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import { labels } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
const generateId = () => getRandomChars(16);
|
const generateId = () => getRandomChars(16);
|
||||||
|
|
||||||
export default function TeamEditForm({ teamId, data, onSave, readOnly }) {
|
export default function TeamEditForm({ teamId, data, onSave, readOnly }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { post, useMutation } = useApi();
|
const { post, useMutation } = useApi();
|
||||||
const { mutate, error } = useMutation(data => post(`/teams/${teamId}`, data));
|
const { mutate, error } = useMutation(data => post(`/teams/${teamId}`, data));
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
|
|
|
@ -1,13 +1,12 @@
|
||||||
import { messages } from 'components/messages';
|
import { Loading, useToast } from 'react-basics';
|
||||||
import TeamMembersTable from 'components/pages/settings/teams/TeamMembersTable';
|
import TeamMembersTable from 'components/pages/settings/teams/TeamMembersTable';
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import { Loading, useToast } from 'react-basics';
|
import useMessages from 'hooks/useMessages';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
|
|
||||||
export default function TeamMembers({ teamId, readOnly }) {
|
export default function TeamMembers({ teamId, readOnly }) {
|
||||||
const { toast, showToast } = useToast();
|
const { toast, showToast } = useToast();
|
||||||
const { get, useQuery } = useApi();
|
const { get, useQuery } = useApi();
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { data, isLoading, refetch } = useQuery(['teams:users', teamId], () =>
|
const { data, isLoading, refetch } = useQuery(['teams:users', teamId], () =>
|
||||||
get(`/teams/${teamId}/users`),
|
get(`/teams/${teamId}/users`),
|
||||||
);
|
);
|
||||||
|
@ -18,7 +17,7 @@ export default function TeamMembers({ teamId, readOnly }) {
|
||||||
|
|
||||||
const handleSave = async () => {
|
const handleSave = async () => {
|
||||||
await refetch();
|
await refetch();
|
||||||
showToast({ message: formatMessage(messages.saved), variant: 'success' });
|
showToast({ message: formatMessage(labels.saved), variant: 'success' });
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -11,14 +11,13 @@ import {
|
||||||
Flexbox,
|
Flexbox,
|
||||||
Text,
|
Text,
|
||||||
} from 'react-basics';
|
} from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { ROLES } from 'lib/constants';
|
import { ROLES } from 'lib/constants';
|
||||||
import { labels } from 'components/messages';
|
|
||||||
import useUser from 'hooks/useUser';
|
import useUser from 'hooks/useUser';
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function TeamMembersTable({ data = [], onSave, readOnly }) {
|
export default function TeamMembersTable({ data = [], onSave, readOnly }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { user } = useUser();
|
const { user } = useUser();
|
||||||
const { del, useMutation } = useApi();
|
const { del, useMutation } = useApi();
|
||||||
const { mutate } = useMutation(data => del(`/teamUsers/${data.teamUserId}`));
|
const { mutate } = useMutation(data => del(`/teamUsers/${data.teamUserId}`));
|
||||||
|
|
|
@ -1,19 +1,18 @@
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
|
import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import Page from 'components/layout/Page';
|
import Page from 'components/layout/Page';
|
||||||
import PageHeader from 'components/layout/PageHeader';
|
import PageHeader from 'components/layout/PageHeader';
|
||||||
import { labels, messages } from 'components/messages';
|
|
||||||
import { ROLES } from 'lib/constants';
|
import { ROLES } from 'lib/constants';
|
||||||
import useUser from 'hooks/useUser';
|
import useUser from 'hooks/useUser';
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
import TeamEditForm from './TeamEditForm';
|
import TeamEditForm from './TeamEditForm';
|
||||||
import TeamMembers from './TeamMembers';
|
import TeamMembers from './TeamMembers';
|
||||||
import TeamWebsites from './TeamWebsites';
|
import TeamWebsites from './TeamWebsites';
|
||||||
|
|
||||||
export default function TeamSettings({ teamId }) {
|
export default function TeamSettings({ teamId }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels, messages } = useMessages();
|
||||||
const { user } = useUser();
|
const { user } = useUser();
|
||||||
const [values, setValues] = useState(null);
|
const [values, setValues] = useState(null);
|
||||||
const [tab, setTab] = useState('details');
|
const [tab, setTab] = useState('details');
|
||||||
|
|
|
@ -1,7 +1,3 @@
|
||||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
|
||||||
import { labels, messages } from 'components/messages';
|
|
||||||
import TeamWebsitesTable from 'components/pages/settings/teams/TeamWebsitesTable';
|
|
||||||
import useApi from 'hooks/useApi';
|
|
||||||
import {
|
import {
|
||||||
ActionForm,
|
ActionForm,
|
||||||
Button,
|
Button,
|
||||||
|
@ -13,12 +9,15 @@ import {
|
||||||
Text,
|
Text,
|
||||||
useToast,
|
useToast,
|
||||||
} from 'react-basics';
|
} from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||||
|
import TeamWebsitesTable from 'components/pages/settings/teams/TeamWebsitesTable';
|
||||||
import WebsiteAddTeamForm from 'components/pages/settings/teams/WebsiteAddTeamForm';
|
import WebsiteAddTeamForm from 'components/pages/settings/teams/WebsiteAddTeamForm';
|
||||||
|
import useApi from 'hooks/useApi';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function TeamWebsites({ teamId }) {
|
export default function TeamWebsites({ teamId }) {
|
||||||
const { toast, showToast } = useToast();
|
const { toast, showToast } = useToast();
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels, messages } = useMessages();
|
||||||
const { get, useQuery } = useApi();
|
const { get, useQuery } = useApi();
|
||||||
const { data, isLoading, refetch } = useQuery(['teams:websites', teamId], () =>
|
const { data, isLoading, refetch } = useQuery(['teams:websites', teamId], () =>
|
||||||
get(`/teams/${teamId}/websites`),
|
get(`/teams/${teamId}/websites`),
|
||||||
|
|
|
@ -12,13 +12,12 @@ import {
|
||||||
Icons,
|
Icons,
|
||||||
Flexbox,
|
Flexbox,
|
||||||
} from 'react-basics';
|
} from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { labels } from 'components/messages';
|
|
||||||
import useUser from 'hooks/useUser';
|
import useUser from 'hooks/useUser';
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function TeamWebsitesTable({ data = [], onSave }) {
|
export default function TeamWebsitesTable({ data = [], onSave }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { user } = useUser();
|
const { user } = useUser();
|
||||||
const { del, useMutation } = useApi();
|
const { del, useMutation } = useApi();
|
||||||
const { mutate } = useMutation(({ teamWebsiteId }) => del(`/teamWebsites/${teamWebsiteId}`));
|
const { mutate } = useMutation(({ teamWebsiteId }) => del(`/teamWebsites/${teamWebsiteId}`));
|
||||||
|
|
|
@ -1,18 +1,17 @@
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Button, Icon, Modal, ModalTrigger, useToast, Text, Flexbox } from 'react-basics';
|
import { Button, Icon, Modal, ModalTrigger, useToast, Text, Flexbox } from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import useApi from 'hooks/useApi';
|
|
||||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||||
import TeamAddForm from 'components/pages/settings/teams/TeamAddForm';
|
import TeamAddForm from 'components/pages/settings/teams/TeamAddForm';
|
||||||
import PageHeader from 'components/layout/PageHeader';
|
import PageHeader from 'components/layout/PageHeader';
|
||||||
import TeamsTable from 'components/pages/settings/teams/TeamsTable';
|
import TeamsTable from 'components/pages/settings/teams/TeamsTable';
|
||||||
import Page from 'components/layout/Page';
|
import Page from 'components/layout/Page';
|
||||||
import { labels, messages } from 'components/messages';
|
|
||||||
import Icons from 'components/icons';
|
import Icons from 'components/icons';
|
||||||
import TeamJoinForm from './JoinTeamForm';
|
import TeamJoinForm from './JoinTeamForm';
|
||||||
|
import useApi from 'hooks/useApi';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function TeamsList() {
|
export default function TeamsList() {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels, messages } = useMessages();
|
||||||
const [update, setUpdate] = useState(0);
|
const [update, setUpdate] = useState(0);
|
||||||
const { get, useQuery } = useApi();
|
const { get, useQuery } = useApi();
|
||||||
const { data, isLoading, error } = useQuery(['teams', update], () => get(`/teams`));
|
const { data, isLoading, error } = useQuery(['teams', update], () => get(`/teams`));
|
||||||
|
|
|
@ -1,6 +1,3 @@
|
||||||
import { labels } from 'components/messages';
|
|
||||||
import useUser from 'hooks/useUser';
|
|
||||||
import { ROLES } from 'lib/constants';
|
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
|
@ -17,11 +14,13 @@ import {
|
||||||
TableRow,
|
TableRow,
|
||||||
Text,
|
Text,
|
||||||
} from 'react-basics';
|
} from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import TeamDeleteForm from './TeamDeleteForm';
|
import TeamDeleteForm from './TeamDeleteForm';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
import useUser from 'hooks/useUser';
|
||||||
|
import { ROLES } from 'lib/constants';
|
||||||
|
|
||||||
export default function TeamsTable({ data = [], onDelete }) {
|
export default function TeamsTable({ data = [], onDelete }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { user } = useUser();
|
const { user } = useUser();
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
|
|
|
@ -1,12 +1,11 @@
|
||||||
import { labels } from 'components/messages';
|
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import { useRef, useState } from 'react';
|
import { useRef, useState } from 'react';
|
||||||
import { Button, Dropdown, Form, FormButtons, FormRow, Item, SubmitButton } from 'react-basics';
|
import { Button, Dropdown, Form, FormButtons, FormRow, Item, SubmitButton } from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import WebsiteTags from './WebsiteTags';
|
import WebsiteTags from './WebsiteTags';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function WebsiteAddTeamForm({ teamId, onSave, onClose }) {
|
export default function WebsiteAddTeamForm({ teamId, onSave, onClose }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { get, post, useQuery, useMutation } = useApi();
|
const { get, post, useQuery, useMutation } = useApi();
|
||||||
const { mutate, error } = useMutation(data => post(`/teams/${teamId}/websites`, data));
|
const { mutate, error } = useMutation(data => post(`/teams/${teamId}/websites`, data));
|
||||||
const { data: websites } = useQuery(['websites'], () => get('/websites'));
|
const { data: websites } = useQuery(['websites'], () => get('/websites'));
|
||||||
|
|
|
@ -1,10 +1,9 @@
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { Button, Icon, Text, Modal, Icons, ModalTrigger } from 'react-basics';
|
import { Button, Icon, Text, Modal, Icons, ModalTrigger } from 'react-basics';
|
||||||
import UserAddForm from './UserAddForm';
|
import UserAddForm from './UserAddForm';
|
||||||
import { labels } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function UserAddButton({ onSave }) {
|
export default function UserAddButton({ onSave }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
|
|
||||||
const handleSave = () => {
|
const handleSave = () => {
|
||||||
onSave();
|
onSave();
|
||||||
|
|
|
@ -10,15 +10,14 @@ import {
|
||||||
SubmitButton,
|
SubmitButton,
|
||||||
Button,
|
Button,
|
||||||
} from 'react-basics';
|
} from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import { ROLES } from 'lib/constants';
|
import { ROLES } from 'lib/constants';
|
||||||
import { labels } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function UserAddForm({ onSave, onClose }) {
|
export default function UserAddForm({ onSave, onClose }) {
|
||||||
const { post, useMutation } = useApi();
|
const { post, useMutation } = useApi();
|
||||||
const { mutate, error, isLoading } = useMutation(data => post(`/users`, data));
|
const { mutate, error, isLoading } = useMutation(data => post(`/users`, data));
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
|
|
||||||
const handleSubmit = async data => {
|
const handleSubmit = async data => {
|
||||||
mutate(data, {
|
mutate(data, {
|
||||||
|
|
|
@ -1,11 +1,10 @@
|
||||||
import { useMutation } from '@tanstack/react-query';
|
import { useMutation } from '@tanstack/react-query';
|
||||||
import useApi from 'hooks/useApi';
|
|
||||||
import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
|
import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
|
||||||
import { useIntl, FormattedMessage } from 'react-intl';
|
import useApi from 'hooks/useApi';
|
||||||
import { labels, messages } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function UserDeleteForm({ userId, username, onSave, onClose }) {
|
export default function UserDeleteForm({ userId, username, onSave, onClose }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, FormattedMessage, labels, messages } = useMessages();
|
||||||
const { del } = useApi();
|
const { del } = useApi();
|
||||||
const { mutate, error, isLoading } = useMutation(() => del(`/users/${userId}`));
|
const { mutate, error, isLoading } = useMutation(() => del(`/users/${userId}`));
|
||||||
|
|
||||||
|
|
|
@ -9,13 +9,12 @@ import {
|
||||||
SubmitButton,
|
SubmitButton,
|
||||||
PasswordField,
|
PasswordField,
|
||||||
} from 'react-basics';
|
} from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import { ROLES } from 'lib/constants';
|
import { ROLES } from 'lib/constants';
|
||||||
import { labels, messages } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function UserEditForm({ userId, data, onSave }) {
|
export default function UserEditForm({ userId, data, onSave }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels, messages } = useMessages();
|
||||||
const { post, useMutation } = useApi();
|
const { post, useMutation } = useApi();
|
||||||
const { mutate, error } = useMutation(({ username }) => post(`/users/${userId}`, { username }));
|
const { mutate, error } = useMutation(({ username }) => post(`/users/${userId}`, { username }));
|
||||||
|
|
||||||
|
|
|
@ -1,16 +1,15 @@
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
|
import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import UserEditForm from 'components/pages/settings/users//UserEditForm';
|
import UserEditForm from 'components/pages/settings/users//UserEditForm';
|
||||||
import Page from 'components/layout/Page';
|
import Page from 'components/layout/Page';
|
||||||
import PageHeader from 'components/layout/PageHeader';
|
import PageHeader from 'components/layout/PageHeader';
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import { labels, messages } from 'components/messages';
|
|
||||||
import UserWebsites from './UserWebsites';
|
import UserWebsites from './UserWebsites';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function UserSettings({ userId }) {
|
export default function UserSettings({ userId }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels, messages } = useMessages();
|
||||||
const [edit, setEdit] = useState(false);
|
const [edit, setEdit] = useState(false);
|
||||||
const [values, setValues] = useState(null);
|
const [values, setValues] = useState(null);
|
||||||
const [tab, setTab] = useState('details');
|
const [tab, setTab] = useState('details');
|
||||||
|
|
|
@ -1,11 +1,10 @@
|
||||||
import { Loading } from 'react-basics';
|
import { Loading } from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
|
import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
|
||||||
import { messages } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function UserWebsites({ userId }) {
|
export default function UserWebsites({ userId }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, messages } = useMessages();
|
||||||
const { get, useQuery } = useApi();
|
const { get, useQuery } = useApi();
|
||||||
const { data, isLoading } = useQuery(['user:websites', userId], () =>
|
const { data, isLoading } = useQuery(['user:websites', userId], () =>
|
||||||
get(`/users/${userId}/websites`),
|
get(`/users/${userId}/websites`),
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { useIntl } from 'react-intl';
|
import { useToast } from 'react-basics';
|
||||||
import Page from 'components/layout/Page';
|
import Page from 'components/layout/Page';
|
||||||
import PageHeader from 'components/layout/PageHeader';
|
import PageHeader from 'components/layout/PageHeader';
|
||||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||||
|
@ -6,11 +6,10 @@ import UsersTable from './UsersTable';
|
||||||
import UserAddButton from './UserAddButton';
|
import UserAddButton from './UserAddButton';
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import useUser from 'hooks/useUser';
|
import useUser from 'hooks/useUser';
|
||||||
import { useToast } from 'react-basics';
|
import useMessages from 'hooks/useMessages';
|
||||||
import { labels, messages } from 'components/messages';
|
|
||||||
|
|
||||||
export default function UsersList() {
|
export default function UsersList() {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels, messages } = useMessages();
|
||||||
const { user } = useUser();
|
const { user } = useUser();
|
||||||
const { get, useQuery } = useApi();
|
const { get, useQuery } = useApi();
|
||||||
const { data, isLoading, error, refetch } = useQuery(['user'], () => get(`/users`), {
|
const { data, isLoading, error, refetch } = useQuery(['user'], () => get(`/users`), {
|
||||||
|
|
|
@ -13,16 +13,15 @@ import {
|
||||||
ModalTrigger,
|
ModalTrigger,
|
||||||
Modal,
|
Modal,
|
||||||
} from 'react-basics';
|
} from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { formatDistance } from 'date-fns';
|
import { formatDistance } from 'date-fns';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import useUser from 'hooks/useUser';
|
import useUser from 'hooks/useUser';
|
||||||
import UserDeleteForm from './UserDeleteForm';
|
import UserDeleteForm from './UserDeleteForm';
|
||||||
import { labels } from 'components/messages';
|
|
||||||
import { ROLES } from 'lib/constants';
|
import { ROLES } from 'lib/constants';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function UsersTable({ data = [], onDelete }) {
|
export default function UsersTable({ data = [], onDelete }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { user } = useUser();
|
const { user } = useUser();
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
|
|
|
@ -8,16 +8,15 @@ import {
|
||||||
Button,
|
Button,
|
||||||
Toggle,
|
Toggle,
|
||||||
} from 'react-basics';
|
} from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||||
import { getRandomChars } from 'next-basics';
|
import { getRandomChars } from 'next-basics';
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import { labels, messages } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
const generateId = () => getRandomChars(16);
|
const generateId = () => getRandomChars(16);
|
||||||
|
|
||||||
export default function ShareUrl({ websiteId, data, onSave }) {
|
export default function ShareUrl({ websiteId, data, onSave }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels, messages } = useMessages();
|
||||||
const { name, shareId } = data;
|
const { name, shareId } = data;
|
||||||
const [id, setId] = useState(shareId);
|
const [id, setId] = useState(shareId);
|
||||||
const { post, useMutation } = useApi();
|
const { post, useMutation } = useApi();
|
||||||
|
|
|
@ -1,10 +1,9 @@
|
||||||
import { TextArea } from 'react-basics';
|
import { TextArea } from 'react-basics';
|
||||||
import { TRACKER_SCRIPT_URL } from 'lib/constants';
|
import { TRACKER_SCRIPT_URL } from 'lib/constants';
|
||||||
import { messages } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
|
|
||||||
export default function TrackingCode({ websiteId }) {
|
export default function TrackingCode({ websiteId }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, messages } = useMessages();
|
||||||
const url = TRACKER_SCRIPT_URL.startsWith('http')
|
const url = TRACKER_SCRIPT_URL.startsWith('http')
|
||||||
? TRACKER_SCRIPT_URL
|
? TRACKER_SCRIPT_URL
|
||||||
: `${location.origin}${TRACKER_SCRIPT_URL}`;
|
: `${location.origin}${TRACKER_SCRIPT_URL}`;
|
||||||
|
|
|
@ -7,17 +7,12 @@ import {
|
||||||
Button,
|
Button,
|
||||||
SubmitButton,
|
SubmitButton,
|
||||||
} from 'react-basics';
|
} from 'react-basics';
|
||||||
import { defineMessages, useIntl } from 'react-intl';
|
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import { DOMAIN_REGEX } from 'lib/constants';
|
import { DOMAIN_REGEX } from 'lib/constants';
|
||||||
import { labels } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
const messages = defineMessages({
|
|
||||||
invalidDomain: { id: 'label.invalid-domain', defaultMessage: 'Invalid domain' },
|
|
||||||
});
|
|
||||||
|
|
||||||
export default function WebsiteAddForm({ onSave, onClose }) {
|
export default function WebsiteAddForm({ onSave, onClose }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { post, useMutation } = useApi();
|
const { post, useMutation } = useApi();
|
||||||
const { mutate, error, isLoading } = useMutation(data => post('/websites', data));
|
const { mutate, error, isLoading } = useMutation(data => post('/websites', data));
|
||||||
|
|
||||||
|
@ -42,7 +37,7 @@ export default function WebsiteAddForm({ onSave, onClose }) {
|
||||||
name="domain"
|
name="domain"
|
||||||
rules={{
|
rules={{
|
||||||
required: formatMessage(labels.required),
|
required: formatMessage(labels.required),
|
||||||
pattern: { value: DOMAIN_REGEX, message: formatMessage(messages.invalidDomain) },
|
pattern: { value: DOMAIN_REGEX, message: formatMessage(labels.invalidDomain) },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<TextField autoComplete="off" />
|
<TextField autoComplete="off" />
|
||||||
|
|
|
@ -1,11 +1,10 @@
|
||||||
import { Button, Modal, ModalTrigger, ActionForm } from 'react-basics';
|
import { Button, Modal, ModalTrigger, ActionForm } from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import WebsiteDeleteForm from 'components/pages/settings/websites/WebsiteDeleteForm';
|
import WebsiteDeleteForm from 'components/pages/settings/websites/WebsiteDeleteForm';
|
||||||
import WebsiteResetForm from 'components/pages/settings/websites/WebsiteResetForm';
|
import WebsiteResetForm from 'components/pages/settings/websites/WebsiteResetForm';
|
||||||
import { labels, messages } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function WebsiteData({ websiteId, onSave }) {
|
export default function WebsiteData({ websiteId, onSave }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels, messages } = useMessages();
|
||||||
|
|
||||||
const handleReset = async () => {
|
const handleReset = async () => {
|
||||||
onSave('reset');
|
onSave('reset');
|
||||||
|
|
|
@ -7,14 +7,13 @@ import {
|
||||||
SubmitButton,
|
SubmitButton,
|
||||||
TextField,
|
TextField,
|
||||||
} from 'react-basics';
|
} from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { labels, messages } from 'components/messages';
|
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
const CONFIRM_VALUE = 'DELETE';
|
const CONFIRM_VALUE = 'DELETE';
|
||||||
|
|
||||||
export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
|
export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels, messages } = useMessages();
|
||||||
const { del, useMutation } = useApi();
|
const { del, useMutation } = useApi();
|
||||||
const { mutate, error } = useMutation(data => del(`/websites/${websiteId}`, data));
|
const { mutate, error } = useMutation(data => del(`/websites/${websiteId}`, data));
|
||||||
|
|
||||||
|
|
|
@ -1,12 +1,11 @@
|
||||||
import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics';
|
import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics';
|
||||||
import { useRef } from 'react';
|
import { useRef } from 'react';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import { DOMAIN_REGEX } from 'lib/constants';
|
import { DOMAIN_REGEX } from 'lib/constants';
|
||||||
import { labels, messages } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function WebsiteEditForm({ websiteId, data, onSave }) {
|
export default function WebsiteEditForm({ websiteId, data, onSave }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels, messages } = useMessages();
|
||||||
const { post, useMutation } = useApi();
|
const { post, useMutation } = useApi();
|
||||||
const { mutate, error } = useMutation(data => post(`/websites/${websiteId}`, data));
|
const { mutate, error } = useMutation(data => post(`/websites/${websiteId}`, data));
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
|
|
|
@ -8,13 +8,12 @@ import {
|
||||||
TextField,
|
TextField,
|
||||||
} from 'react-basics';
|
} from 'react-basics';
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import { useIntl } from 'react-intl';
|
import useMessages from 'hooks/useMessages';
|
||||||
import { labels, messages } from 'components/messages';
|
|
||||||
|
|
||||||
const CONFIRM_VALUE = 'RESET';
|
const CONFIRM_VALUE = 'RESET';
|
||||||
|
|
||||||
export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
|
export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels, messages } = useMessages();
|
||||||
const { post, useMutation } = useApi();
|
const { post, useMutation } = useApi();
|
||||||
const { mutate, error } = useMutation(data => post(`/websites/${websiteId}/reset`, data));
|
const { mutate, error } = useMutation(data => post(`/websites/${websiteId}/reset`, data));
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { Breadcrumbs, Item, Tabs, useToast, Button, Text, Icon, Icons } from 'react-basics';
|
import { Breadcrumbs, Item, Tabs, useToast, Button, Text, Icon, Icons } from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import Page from 'components/layout/Page';
|
import Page from 'components/layout/Page';
|
||||||
|
@ -10,11 +9,11 @@ import WebsiteData from 'components/pages/settings/websites/WebsiteData';
|
||||||
import TrackingCode from 'components/pages/settings/websites/TrackingCode';
|
import TrackingCode from 'components/pages/settings/websites/TrackingCode';
|
||||||
import ShareUrl from 'components/pages/settings/websites/ShareUrl';
|
import ShareUrl from 'components/pages/settings/websites/ShareUrl';
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import { labels, messages } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function WebsiteSettings({ websiteId }) {
|
export default function WebsiteSettings({ websiteId }) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels, messages } = useMessages();
|
||||||
const [values, setValues] = useState(null);
|
const [values, setValues] = useState(null);
|
||||||
const [tab, setTab] = useState('details');
|
const [tab, setTab] = useState('details');
|
||||||
const { get, useQuery } = useApi();
|
const { get, useQuery } = useApi();
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { Button, Icon, Text, Modal, ModalTrigger, useToast, Icons } from 'react-basics';
|
import { Button, Icon, Text, Modal, ModalTrigger, useToast, Icons } from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import Page from 'components/layout/Page';
|
import Page from 'components/layout/Page';
|
||||||
import PageHeader from 'components/layout/PageHeader';
|
import PageHeader from 'components/layout/PageHeader';
|
||||||
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
||||||
|
@ -7,9 +6,10 @@ import WebsiteAddForm from 'components/pages/settings/websites/WebsiteAddForm';
|
||||||
import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
|
import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
|
||||||
import useApi from 'hooks/useApi';
|
import useApi from 'hooks/useApi';
|
||||||
import useUser from 'hooks/useUser';
|
import useUser from 'hooks/useUser';
|
||||||
import { labels, messages } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function WebsitesList() {
|
export default function WebsitesList() {
|
||||||
|
const { formatMessage, labels, messages } = useMessages();
|
||||||
const { user } = useUser();
|
const { user } = useUser();
|
||||||
const { get, useQuery } = useApi();
|
const { get, useQuery } = useApi();
|
||||||
const { data, isLoading, error, refetch } = useQuery(
|
const { data, isLoading, error, refetch } = useQuery(
|
||||||
|
@ -18,7 +18,6 @@ export default function WebsitesList() {
|
||||||
{ enabled: !!user },
|
{ enabled: !!user },
|
||||||
);
|
);
|
||||||
const { toast, showToast } = useToast();
|
const { toast, showToast } = useToast();
|
||||||
const { formatMessage } = useIntl();
|
|
||||||
const hasData = data && data.length !== 0;
|
const hasData = data && data.length !== 0;
|
||||||
|
|
||||||
const handleSave = async () => {
|
const handleSave = async () => {
|
||||||
|
|
|
@ -12,11 +12,10 @@ import {
|
||||||
Icons,
|
Icons,
|
||||||
Flexbox,
|
Flexbox,
|
||||||
} from 'react-basics';
|
} from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
import useMessages from 'hooks/useMessages';
|
||||||
import { labels } from 'components/messages';
|
|
||||||
|
|
||||||
export default function WebsitesTable({ data = [] }) {
|
export default function WebsitesTable({ data = [] }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{ name: 'name', label: formatMessage(labels.name), style: { flex: 2 } },
|
{ name: 'name', label: formatMessage(labels.name), style: { flex: 2 } },
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { Menu, Item, Icon, Button, Flexbox, Text } from 'react-basics';
|
import { Menu, Item, Icon, Button, Flexbox, Text } from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { GridRow, GridColumn } from 'components/layout/Grid';
|
import { GridRow, GridColumn } from 'components/layout/Grid';
|
||||||
import BrowsersTable from 'components/metrics/BrowsersTable';
|
import BrowsersTable from 'components/metrics/BrowsersTable';
|
||||||
|
@ -14,8 +13,8 @@ import ScreenTable from 'components/metrics/ScreenTable';
|
||||||
import EventsTable from 'components/metrics/EventsTable';
|
import EventsTable from 'components/metrics/EventsTable';
|
||||||
import usePageQuery from 'hooks/usePageQuery';
|
import usePageQuery from 'hooks/usePageQuery';
|
||||||
import Icons from 'components/icons';
|
import Icons from 'components/icons';
|
||||||
import { labels } from 'components/messages';
|
|
||||||
import styles from './WebsiteMenuView.module.css';
|
import styles from './WebsiteMenuView.module.css';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
const views = {
|
const views = {
|
||||||
url: PagesTable,
|
url: PagesTable,
|
||||||
|
@ -31,7 +30,7 @@ const views = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function WebsiteMenuView({ websiteId, websiteDomain }) {
|
export default function WebsiteMenuView({ websiteId, websiteDomain }) {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
const {
|
const {
|
||||||
resolveUrl,
|
resolveUrl,
|
||||||
query: { view },
|
query: { view },
|
||||||
|
|
|
@ -1,8 +1,14 @@
|
||||||
import { useIntl } from 'react-intl';
|
import { useIntl, FormattedMessage } from 'react-intl';
|
||||||
import { messages, labels } from 'components/messages';
|
import { messages, labels } from 'components/messages';
|
||||||
|
|
||||||
export default function useMessages() {
|
export default function useMessages() {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage } = useIntl();
|
||||||
|
|
||||||
return { formatMessage, messages, labels };
|
function getMessage(id) {
|
||||||
|
const message = Object.values(messages).find(value => value.id === id);
|
||||||
|
|
||||||
|
return message ? formatMessage(message) : id;
|
||||||
|
}
|
||||||
|
|
||||||
|
return { formatMessage, FormattedMessage, messages, labels, getMessage };
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,15 +1,15 @@
|
||||||
import { useState, useEffect, useRef } from 'react';
|
import { useState, useEffect, useRef } from 'react';
|
||||||
|
|
||||||
export default function useSticky({ defaultSticky = false, enabled = true }) {
|
export default function useSticky({ enabled = true, threshold = 1 }) {
|
||||||
const [isSticky, setIsSticky] = useState(defaultSticky);
|
const [isSticky, setIsSticky] = useState(false);
|
||||||
const ref = useRef(null);
|
const ref = useRef(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let observer;
|
let observer;
|
||||||
const handler = ([entry]) => setIsSticky(entry.intersectionRatio < 1);
|
const handler = ([entry]) => setIsSticky(entry.intersectionRatio < threshold);
|
||||||
|
|
||||||
if (enabled && ref.current) {
|
if (enabled && ref.current) {
|
||||||
observer = new IntersectionObserver(handler, { threshold: [1] });
|
observer = new IntersectionObserver(handler, { threshold: [threshold] });
|
||||||
observer.observe(ref.current);
|
observer.observe(ref.current);
|
||||||
}
|
}
|
||||||
return () => {
|
return () => {
|
||||||
|
@ -17,7 +17,7 @@ export default function useSticky({ defaultSticky = false, enabled = true }) {
|
||||||
observer.disconnect();
|
observer.disconnect();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}, [ref]);
|
}, [ref, enabled, threshold]);
|
||||||
|
|
||||||
return { ref, isSticky };
|
return { ref, isSticky };
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,9 @@
|
||||||
import { Row, Column, Flexbox } from 'react-basics';
|
import { Row, Column, Flexbox } from 'react-basics';
|
||||||
import { useIntl } from 'react-intl';
|
|
||||||
import AppLayout from 'components/layout/AppLayout';
|
import AppLayout from 'components/layout/AppLayout';
|
||||||
import { labels } from 'components/messages';
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
export default function Custom404() {
|
export default function Custom404() {
|
||||||
const { formatMessage } = useIntl();
|
const { formatMessage, labels } = useMessages();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppLayout>
|
<AppLayout>
|
||||||
|
|
|
@ -15,7 +15,6 @@ body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
color: var(--font-color100);
|
color: var(--font-color100);
|
||||||
background: var(--base50);
|
background: var(--base50);
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
*,
|
*,
|
||||||
|
@ -63,5 +62,4 @@ svg {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user