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

Refactored intl messages.

Browse source
This commit is contained in:
Mike Cao 2023-01-25 07:42:46 -08:00
parent fbccf4d3af
commit 7725b5c129
44 changed files with 558 additions and 485 deletions
Download patch file Download diff file Expand all files Collapse all files

25
components/pages/settings/websites/ShareUrl.js
View file

@ -8,13 +8,16 @@ import {
Button,
Toggle,
} from 'react-basics';
import { useIntl } from 'react-intl';
import { useEffect, useMemo, useRef, useState } from 'react';
import { getRandomChars } from 'next-basics';
import useApi from 'hooks/useApi';
import { labels, messages } from 'components/messages';
const generateId = () => getRandomChars(16);
export default function ShareUrl({ websiteId, data, onSave }) {
const { formatMessage } = useIntl();
const { name, shareId } = data;
const [id, setId] = useState(shareId);
const { post, useMutation } = useApi();
@ -62,26 +65,24 @@ export default function ShareUrl({ websiteId, data, onSave }) {
}, [id, shareId]);
return (
<Form key={websiteId} ref={ref} onSubmit={handleSubmit} error={error} values={data}>
<FormRow>
<Toggle checked={Boolean(id)} onChecked={handleCheck}>
Enable share URL
</Toggle>
</FormRow>
<>
<Toggle checked={Boolean(id)} onChecked={handleCheck} style={{ marginBottom: 30 }}>
{formatMessage(labels.enableShareUrl)}
</Toggle>
{id && (
<>
<Form key={websiteId} ref={ref} onSubmit={handleSubmit} error={error} values={data}>
<FormRow>
<p>Your website stats are publically available at the following URL:</p>
<p>{formatMessage(messages.shareUrl)}</p>
<Flexbox gap={10}>
<TextField value={url} readOnly allowCopy />
<Button onClick={handleGenerate}>Regenerate URL</Button>
<Button onClick={handleGenerate}>{formatMessage(labels.regenerate)}</Button>
</Flexbox>
</FormRow>
<FormButtons>
<SubmitButton variant="primary">Save</SubmitButton>
<SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
</FormButtons>
</>
</Form>
)}
</Form>
</>
);
}

8
components/pages/settings/websites/TrackingCode.js
View file

@ -1,7 +1,10 @@
import { TextArea } from 'react-basics';
import { TRACKER_SCRIPT_URL } from 'lib/constants';
import { messages } from 'components/messages';
import { useIntl } from 'react-intl';
export default function TrackingCode({ websiteId }) {
const { formatMessage } = useIntl();
const url = TRACKER_SCRIPT_URL.startsWith('http')
? TRACKER_SCRIPT_URL
: `${location.origin}${TRACKER_SCRIPT_URL}`;
@ -10,10 +13,7 @@ export default function TrackingCode({ websiteId }) {
return (
<>
<p>
To track stats for this website, place the following code in the <code>&lt;head&gt;</code>{' '}
section of your HTML.
</p>
<p>{formatMessage(messages.trackingCode)}</p>
<TextArea rows={4} value={code} readOnly allowCopy />
</>
);

4
components/pages/settings/websites/WebsiteAddForm.js
View file

@ -31,12 +31,12 @@ export default function WebsiteAddForm({ onSave, onClose }) {
return (
<Form onSubmit={handleSubmit} error={error}>
<FormRow label="Name">
<FormRow label={formatMessage(labels.name)}>
<FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
<TextField autoComplete="off" />
</FormInput>
</FormRow>
<FormRow label="Domain">
<FormRow label={formatMessage(labels.domain)}>
<FormInput
name="domain"
rules={{

21
components/pages/settings/websites/WebsiteDeleteForm.js
View file

@ -1,4 +1,3 @@
import useApi from 'hooks/useApi';
import {
Button,
Form,
@ -8,12 +7,16 @@ import {
SubmitButton,
TextField,
} from 'react-basics';
import { useIntl } from 'react-intl';
import { labels, messages } from 'components/messages';
import useApi from 'hooks/useApi';
const CONFIRM_VALUE = 'DELETE';
export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
const { formatMessage } = useIntl();
const { del, useMutation } = useApi();
const { mutate, error, isLoading } = useMutation(data => del(`/websites/${websiteId}`, data));
const { mutate, error } = useMutation(data => del(`/websites/${websiteId}`, data));
const handleSubmit = async data => {
mutate(data, {
@ -25,21 +28,15 @@ export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
return (
<Form onSubmit={handleSubmit} error={error}>
<div>
To delete this website, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
</div>
<FormRow label="Confirm">
<p>{formatMessage(messages.deleteWebsite, { confirmation: CONFIRM_VALUE })}</p>
<FormRow label={formatMessage(labels.confirm)}>
<FormInput name="confirmation" rules={{ validate: value => value === CONFIRM_VALUE }}>
<TextField autoComplete="off" />
</FormInput>
</FormRow>
<FormButtons flex>
<SubmitButton variant="primary" disabled={isLoading}>
Save
</SubmitButton>
<Button disabled={isLoading} onClick={onClose}>
Cancel
</Button>
<SubmitButton variant="danger">{formatMessage(labels.delete)}</SubmitButton>
<Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
</FormButtons>
</Form>
);

17
components/pages/settings/websites/WebsiteEditForm.js
View file

@ -1,9 +1,12 @@
import { SubmitButton, Form, FormInput, FormRow, FormButtons, TextField } from 'react-basics';
import { useRef } from 'react';
import { useIntl } from 'react-intl';
import useApi from 'hooks/useApi';
import { DOMAIN_REGEX } from 'lib/constants';
import { labels, messages } from 'components/messages';
export default function WebsiteEditForm({ websiteId, data, onSave }) {
const { formatMessage } = useIntl();
const { post, useMutation } = useApi();
const { mutate, error } = useMutation(data => post(`/websites/${websiteId}`, data));
const ref = useRef(null);
@ -19,22 +22,22 @@ export default function WebsiteEditForm({ websiteId, data, onSave }) {
return (
<Form ref={ref} onSubmit={handleSubmit} error={error} values={data} style={{ width: 600 }}>
<FormRow label="Website ID">
<FormRow label={formatMessage(labels.websiteId)}>
<TextField value={websiteId} readOnly allowCopy />
</FormRow>
<FormRow label="Name">
<FormInput name="name" rules={{ required: 'Required' }}>
<FormRow label={formatMessage(labels.name)}>
<FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
<TextField />
</FormInput>
</FormRow>
<FormRow label="Domain">
<FormRow label={formatMessage(labels.domain)}>
<FormInput
name="domain"
rules={{
required: 'Required',
required: formatMessage(labels.required),
pattern: {
value: DOMAIN_REGEX,
message: 'Invalid domain',
message: formatMessage(messages.invalidDomain),
},
}}
>
@ -42,7 +45,7 @@ export default function WebsiteEditForm({ websiteId, data, onSave }) {
</FormInput>
</FormRow>
<FormButtons>
<SubmitButton variant="primary">Save</SubmitButton>
<SubmitButton variant="primary">{formatMessage(labels.save)}</SubmitButton>
</FormButtons>
</Form>
);

23
components/pages/settings/websites/WebsiteReset.js
View file

@ -1,10 +1,13 @@
import WebsiteDeleteForm from 'components/pages/settings/websites/WebsiteDeleteForm';
import WebsiteResetForm from 'components/pages/settings/websites/WebsiteResetForm';
import { useRouter } from 'next/router';
import { useState } from 'react';
import { Button, Form, FormRow, Modal } from 'react-basics';
import { useIntl } from 'react-intl';
import WebsiteDeleteForm from 'components/pages/settings/websites/WebsiteDeleteForm';
import WebsiteResetForm from 'components/pages/settings/websites/WebsiteResetForm';
import { labels, messages } from 'components/messages';
export default function WebsiteReset({ websiteId, onSave }) {
const { formatMessage } = useIntl();
const [modal, setModal] = useState(null);
const router = useRouter();
@ -22,23 +25,21 @@ export default function WebsiteReset({ websiteId, onSave }) {
return (
<Form>
<FormRow label="Reset website">
<p>
All statistics for this website will be deleted, but your settings will remain intact.
</p>
<Button onClick={() => setModal('reset')}>Reset</Button>
<FormRow label={formatMessage(labels.resetWebsite)}>
<p>{formatMessage(messages.resetWebsiteWarning)}</p>
<Button onClick={() => setModal('reset')}>{formatMessage(labels.reset)}</Button>
</FormRow>
<FormRow label="Delete website">
<p>All website data will be deleted.</p>
<FormRow label={formatMessage(labels.deleteWebsite)}>
<p>{formatMessage(messages.deleteWebsiteWarning)}</p>
<Button onClick={() => setModal('delete')}>Delete</Button>
</FormRow>
{modal === 'reset' && (
<Modal title="Reset website" onClose={handleClose}>
<Modal title={formatMessage(labels.resetWebsite)} onClose={handleClose}>
{close => <WebsiteResetForm websiteId={websiteId} onSave={handleReset} onClose={close} />}
</Modal>
)}
{modal === 'delete' && (
<Modal title="Delete website" onClose={handleClose}>
<Modal title={formatMessage(labels.deleteWebsite)} onClose={handleClose}>
{close => (
<WebsiteDeleteForm websiteId={websiteId} onSave={handleDelete} onClose={close} />
)}

23
components/pages/settings/websites/WebsiteResetForm.js
View file

@ -1,4 +1,3 @@
import useApi from 'hooks/useApi';
import {
Button,
Form,
@ -8,14 +7,16 @@ import {
SubmitButton,
TextField,
} from 'react-basics';
import useApi from 'hooks/useApi';
import { useIntl } from 'react-intl';
import { labels, messages } from 'components/messages';
const CONFIRM_VALUE = 'RESET';
export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
const { formatMessage } = useIntl();
const { post, useMutation } = useApi();
const { mutate, error, isLoading } = useMutation(data =>
post(`/websites/${websiteId}/reset`, data),
);
const { mutate, error } = useMutation(data => post(`/websites/${websiteId}/reset`, data));
const handleSubmit = async data => {
mutate(data, {
@ -27,21 +28,15 @@ export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
return (
<Form onSubmit={handleSubmit} error={error}>
<div>
To reset this website, type <b>{CONFIRM_VALUE}</b> in the box below to confirm.
</div>
<FormRow label="Confirmation">
<p>{formatMessage(messages.resetWebsite, { confirmation: CONFIRM_VALUE })}</p>
<FormRow label={formatMessage(labels.confirm)}>
<FormInput name="confirm" rules={{ validate: value => value === CONFIRM_VALUE }}>
<TextField autoComplete="off" />
</FormInput>
</FormRow>
<FormButtons flex>
<SubmitButton variant="primary" disabled={isLoading}>
Save
</SubmitButton>
<Button disabled={isLoading} onClick={onClose}>
Cancel
</Button>
<SubmitButton variant="danger">{formatMessage(labels.reset)}</SubmitButton>
<Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
</FormButtons>
</Form>
);

27
components/pages/settings/websites/WebsiteSettings.js
View file

@ -1,6 +1,6 @@
import { useEffect, useState } from 'react';
import { Breadcrumbs, Item, Tabs, useToast, Button, Text, Icon, Icons } from 'react-basics';
import { defineMessages, useIntl } from 'react-intl';
import { useIntl } from 'react-intl';
import Link from 'next/link';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
@ -9,19 +9,10 @@ import WebsiteReset from 'components/pages/settings/websites/WebsiteReset';
import TrackingCode from 'components/pages/settings/websites/TrackingCode';
import ShareUrl from 'components/pages/settings/websites/ShareUrl';
import useApi from 'hooks/useApi';
import { labels, messages } from 'components/messages';
const { External } = Icons;
const messages = defineMessages({
websites: { id: 'label.websites', defaultMessage: 'Websites' },
details: { id: 'label.details', defaultMessage: 'Details' },
trackingCode: { id: 'label.tracking-code', defaultMessage: 'Tracking code' },
shareUrl: { id: 'label.share-url', defaultMessage: 'Share URL' },
actions: { id: 'label.actions', defaultMessage: 'Actions' },
view: { id: 'label.view', defaultMessage: 'View' },
saved: { id: 'message.saved-successfully', defaultMessage: 'Save successfully.' },
});
export default function WebsiteSettings({ websiteId }) {
const { formatMessage } = useIntl();
const [values, setValues] = useState(null);
@ -55,7 +46,7 @@ export default function WebsiteSettings({ websiteId }) {
<PageHeader>
<Breadcrumbs>
<Item>
<Link href="/settings/websites">{formatMessage(messages.websites)}</Link>
<Link href="/settings/websites">{formatMessage(labels.websites)}</Link>
</Item>
<Item>{values?.name}</Item>
</Breadcrumbs>
@ -65,23 +56,23 @@ export default function WebsiteSettings({ websiteId }) {
<Icon>
<External />
</Icon>
<Text>{formatMessage(messages.view)}</Text>
<Text>{formatMessage(labels.view)}</Text>
</Button>
</a>
</Link>
</PageHeader>
<Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
<Item key="details">{formatMessage(messages.details)}</Item>
<Item key="tracking">{formatMessage(messages.trackingCode)}</Item>
<Item key="share">{formatMessage(messages.shareUrl)}</Item>
<Item key="actions">{formatMessage(messages.actions)}</Item>
<Item key="details">{formatMessage(labels.details)}</Item>
<Item key="tracking">{formatMessage(labels.trackingCode)}</Item>
<Item key="share">{formatMessage(labels.shareUrl)}</Item>
<Item key="data">{formatMessage(labels.data)}</Item>
</Tabs>
{tab === 'details' && (
<WebsiteEditForm websiteId={websiteId} data={values} onSave={handleSave} />
)}
{tab === 'tracking' && <TrackingCode websiteId={websiteId} data={values} />}
{tab === 'share' && <ShareUrl websiteId={websiteId} data={values} onSave={handleSave} />}
{tab === 'actions' && <WebsiteReset websiteId={websiteId} onSave={handleSave} />}
{tab === 'data' && <WebsiteReset websiteId={websiteId} onSave={handleSave} />}
</Page>
);
}

19
components/pages/settings/websites/WebsitesList.js
View file

@ -1,6 +1,6 @@
import { useState } from 'react';
import { Button, Icon, Text, Modal, useToast, Icons } from 'react-basics';
import { useIntl, defineMessages } from 'react-intl';
import { useIntl } from 'react-intl';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
@ -8,16 +8,7 @@ import WebsiteAddForm from 'components/pages/settings/websites/WebsiteAddForm';
import WebsitesTable from 'components/pages/settings/websites/WebsitesTable';
import useApi from 'hooks/useApi';
import useUser from 'hooks/useUser';
const messages = defineMessages({
saved: { id: 'messages.website-saved', defaultMessage: 'Website saved.' },
noWebsites: {
id: 'messages.no-websites',
defaultMessage: "You don't have any websites configured.",
},
websites: { id: 'label.websites', defaultMessage: 'Websites' },
addWebsite: { id: 'label.add-website', defaultMessage: 'Add website' },
});
import { labels, messages } from 'components/messages';
const { Plus } = Icons;
@ -49,14 +40,14 @@ export default function WebsitesList() {
<Icon>
<Plus />
</Icon>
<Text>{formatMessage(messages.addWebsite)}</Text>
<Text>{formatMessage(labels.addWebsite)}</Text>
</Button>
);
return (
<Page loading={isLoading} error={error}>
{toast}
<PageHeader title={formatMessage(messages.websites)}>{addButton}</PageHeader>
<PageHeader title={formatMessage(labels.websites)}>{addButton}</PageHeader>
{hasData && <WebsitesTable data={data} />}
{!hasData && (
<EmptyPlaceholder message={formatMessage(messages.noWebsites)}>
@ -64,7 +55,7 @@ export default function WebsitesList() {
</EmptyPlaceholder>
)}
{edit && (
<Modal title={formatMessage(messages.addWebsite)} onClose={handleClose}>
<Modal title={formatMessage(labels.addWebsite)} onClose={handleClose}>
{close => <WebsiteAddForm onSave={handleSave} onClose={close} />}
</Modal>
)}

36
components/pages/settings/websites/WebsitesTable.js
View file

@ -9,20 +9,28 @@ import {
Button,
Icon,
Icons,
Flexbox,
} from 'react-basics';
import styles from './WebsitesTable.module.css';
import { defineMessages, useIntl } from 'react-intl';
const { ArrowRight, External } = Icons;
const columns = [
{ name: 'name', label: 'Name', style: { flex: 2 } },
{ name: 'domain', label: 'Domain' },
{ name: 'action', label: ' ' },
];
const messages = defineMessages({
name: { id: 'label.name', defaultMessage: 'Name' },
domain: { id: 'label.domain', defaultMessage: 'Domain' },
});
export default function WebsitesTable({ data = [] }) {
const { formatMessage } = useIntl();
const columns = [
{ name: 'name', label: formatMessage(messages.name), style: { flex: 2 } },
{ name: 'domain', label: formatMessage(messages.domain) },
{ name: 'action', label: ' ' },
];
return (
<Table className={styles.table} columns={columns} rows={data}>
<Table columns={columns} rows={data}>
<TableHeader>
{(column, index) => {
return (
@ -37,7 +45,7 @@ export default function WebsitesTable({ data = [] }) {
const { id } = row;
row.action = (
<div className={styles.actions}>
<Flexbox flex={1} justifyContent="end" gap={10}>
<Link href={`/settings/websites/${id}`}>
<a>
<Button>
@ -58,19 +66,17 @@ export default function WebsitesTable({ data = [] }) {
</Button>
</a>
</Link>
</div>
</Flexbox>
);
return (
<TableRow key={rowIndex} data={row} keys={keys}>
{(data, key, colIndex) => {
return (
<TableCell
key={colIndex}
className={styles.cell}
style={{ ...columns[colIndex]?.style }}
>
{data[key]}
<TableCell key={colIndex} style={{ ...columns[colIndex]?.style }}>
<Flexbox flex={1} alignItems="center">
{data[key]}
</Flexbox>
</TableCell>
);
}}

18
components/pages/settings/websites/WebsitesTable.module.css
View file

@ -1,18 +0,0 @@
.table th,
.table td {
flex: 2;
}
.cell {
display: flex;
align-items: center;
}
.cell:last-child {
justify-content: flex-end;
}
.actions {
display: flex;
gap: 12px;
}