github/umami
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

More refactoring, cleaned up icons, nav buttons, add messages.

Browse Source
This commit is contained in:
Mike Cao
2023-01-27 21:53:13 -08:00
parent 4b1013c8c6
commit 5f15ad0807
68 changed files with 391 additions and 790 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
components/buttons/LanguageButton.js
View File

@@ -1,30 +1,51 @@
import { Icon, Button, PopupTrigger, Popup, Tooltip, Icons, Text } from 'react-basics';
import { useIntl } from 'react-intl';
import classNames from 'classnames';
import { languages } from 'lib/lang';
import useLocale from 'hooks/useLocale';
import MenuButton from 'components/common/MenuButton';
import Globe from 'assets/globe.svg';
import { Globe } from 'components/icons';
import { labels } from 'components/messages';
import styles from './LanguageButton.module.css';
import { Icon } from 'react-basics';
export default function LanguageButton() {
export default function LanguageButton({ tooltipPosition = 'top' }) {
const { formatMessage } = useIntl();
const { locale, saveLocale } = useLocale();
const menuOptions = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
function handleSelect(value) {
saveLocale(value);
}
return (
<MenuButton
options={menuOptions}
value={locale}
menuClassName={styles.menu}
buttonVariant="light"
onSelect={handleSelect}
hideLabel
>
<Icon>
<Globe />
</Icon>
</MenuButton>
<PopupTrigger>
<PopupTrigger action="hover">
<Button variant="quiet">
<Icon>
<Globe />
</Icon>
</Button>
<Tooltip position={tooltipPosition}>{formatMessage(labels.language)}</Tooltip>
</PopupTrigger>
<Popup position="right" alignment="end">
<div className={styles.menu}>
{items.map(({ value, label }) => {
return (
<div
key={value}
className={classNames(styles.item, { [styles.selected]: value === locale })}
onClick={handleSelect.bind(null, value)}
>
<Text>{label}</Text>
{value === locale && (
<Icon className={styles.icon}>
<Icons.Check />
</Icon>
)}
</div>
);
})}
</div>
</Popup>
</PopupTrigger>
);
}

36
components/buttons/LanguageButton.module.css
View File

@@ -1,25 +1,35 @@
.menu {
display: flex;
flex-flow: row wrap;
min-width: 560px;
min-width: 600px;
max-width: 100vw;
padding: 10px;
}
.menu div {
background: var(--base50);
z-index: var(--z-index100);
border-radius: 5px;
border: 1px solid var(--border-color);
margin-left: 10px;
}
.item {
display: flex;
align-items: center;
justify-content: space-between;
min-width: calc(100% / 3);
border-radius: 5px;
padding: 5px 10px;
}
@media only screen and (max-width: 992px) {
.menu {
min-width: 90vw;
transform: translateX(calc(40vw));
}
.item:hover {
background: var(--base75);
cursor: pointer;
}
@media only screen and (max-width: 768px) {
.menu div {
min-width: 50%;
}
.selected {
font-weight: 700;
background: var(--blue100);
}
.icon {
color: var(--primary400);
}

22
components/buttons/LogoutButton.js Normal file
View File

@@ -0,0 +1,22 @@
import { Button, Icon, Icons, PopupTrigger, Tooltip } from 'react-basics';
import Link from 'next/link';
import { labels } from 'components/messages';
import { useIntl } from 'react-intl';
export default function LogoutButton({ tooltipPosition = 'top' }) {
const { formatMessage } = useIntl();
return (
<Link href="/logout">
<a>
<PopupTrigger action="hover">
<Button variant="quiet">
<Icon>
<Icons.Logout />
</Icon>
</Button>
<Tooltip position={tooltipPosition}>{formatMessage(labels.logout)}</Tooltip>
</PopupTrigger>
</a>
</Link>
);
}

29
components/buttons/ThemeButton.js
View File

@@ -1,12 +1,14 @@
import { useTransition, animated } from 'react-spring';
import { Button, Icon, PopupTrigger, Tooltip } from 'react-basics';
import { useIntl } from 'react-intl';
import useTheme from 'hooks/useTheme';
import Sun from 'assets/sun.svg';
import Moon from 'assets/moon.svg';
import { Sun, Moon } from 'components/icons';
import { labels } from 'components/messages';
import styles from './ThemeButton.module.css';
import { Icon } from 'react-basics';
export default function ThemeButton() {
export default function ThemeButton({ tooltipPosition = 'top' }) {
const [theme, setTheme] = useTheme();
const { formatMessage } = useIntl();
const transitions = useTransition(theme, {
initial: { opacity: 1 },
@@ -14,7 +16,7 @@ export default function ThemeButton() {
opacity: 0,
transform: `translateY(${theme === 'light' ? '20px' : '-20px'}) scale(0.5)`,
},
enter: { opacity: 1, transform: 'translateY(0px) scale(1)' },
enter: { opacity: 1, transform: 'translateY(0px) scale(1.0)' },
leave: {
opacity: 0,
transform: `translateY(${theme === 'light' ? '-20px' : '20px'}) scale(0.5)`,
@@ -26,12 +28,15 @@ export default function ThemeButton() {
}
return (
<div className={styles.button} onClick={handleClick}>
{transitions((styles, item) => (
<animated.div key={item} style={styles}>
<Icon>{item === 'light' ? <Sun /> : <Moon />}</Icon>
</animated.div>
))}
</div>
<PopupTrigger action="hover" popupProps={{ position: 'top' }}>
<Button variant="quiet" className={styles.button} onClick={handleClick}>
{transitions((style, item) => (
<animated.div key={item} style={style}>
<Icon className={styles.icon}>{item === 'light' ? <Sun /> : <Moon />}</Icon>
</animated.div>
))}
</Button>
<Tooltip position={tooltipPosition}>{formatMessage(labels.theme)}</Tooltip>
</PopupTrigger>
);
}

6
components/buttons/ThemeButton.module.css
View File

@@ -5,9 +5,11 @@
justify-content: center;
align-items: center;
cursor: pointer;
padding-bottom: 3px;
}
.button svg {
.button > div {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}

12
components/common/Calendar.js
View File

@@ -16,13 +16,11 @@ import {
isBefore,
isAfter,
} from 'date-fns';
import { Button, Icon } from 'react-basics';
import { Button, Icon, Icons } from 'react-basics';
import { chunkArray } from 'next-basics';
import useLocale from 'hooks/useLocale';
import { dateFormat } from 'lib/date';
import { getDateLocale } from 'lib/lang';
import Chevron from 'assets/chevron-down.svg';
import Cross from 'assets/times.svg';
import styles from './Calendar.module.css';
export default function Calendar({ date, minDate, maxDate, onChange }) {
@@ -61,7 +59,7 @@ export default function Calendar({ date, minDate, maxDate, onChange }) {
>
{month}
<Icon className={styles.icon} size="small">
{selectMonth ? <Cross /> : <Chevron />}
{selectMonth ? <Icons.Close /> : <Icons.ChevronDown />}
</Icon>
</div>
<div
@@ -70,7 +68,7 @@ export default function Calendar({ date, minDate, maxDate, onChange }) {
>
{year}
<Icon className={styles.icon} size="small">
{selectMonth ? <Cross /> : <Chevron />}
{selectMonth ? <Icons.Close /> : <Icons.ChevronDown />}
</Icon>
</div>
</div>
@@ -239,7 +237,7 @@ const YearSelector = ({ date, minDate, maxDate, onSelect }) => {
variant="light"
>
<Icon>
<Chevron />
<Icons.ChevronDown />
</Icon>
</Button>
</div>
@@ -273,7 +271,7 @@ const YearSelector = ({ date, minDate, maxDate, onSelect }) => {
variant="light"
>
<Icon>
<Chevron />
<Icons.ChevronDown />
</Icon>
</Button>
</div>

4
components/common/EmptyPlaceholder.js
View File

@@ -1,13 +1,13 @@
import { Icon, Text, Flexbox } from 'react-basics';
import Logo from 'assets/logo.svg';
function EmptyPlaceholder({ msg, children }) {
function EmptyPlaceholder({ message, children }) {
return (
<Flexbox direction="column" alignItems="center" justifyContent="center" gap={60} height={600}>
<Icon size="xl">
<Logo />
</Icon>
<Text size="lg">{msg}</Text>
<Text size="lg">{message}</Text>
<div>{children}</div>
</Flexbox>
);

5
components/common/ErrorMessage.js
View File

@@ -1,13 +1,12 @@
import Exclamation from 'assets/exclamation-triangle.svg';
import { FormattedMessage } from 'react-intl';
import { Icon, Icons } from 'react-basics';
import styles from './ErrorMessage.module.css';
import { Icon } from 'react-basics';
export default function ErrorMessage() {
return (
<div className={styles.error}>
<Icon className={styles.icon} size="large">
<Exclamation />
<Icons.Alert />
</Icon>
<FormattedMessage id="message.failure" defaultMessage="Something went wrong." />
</div>

5
components/common/EventDataButton.js
View File

@@ -1,8 +1,7 @@
import List from 'assets/list-ul.svg';
import EventDataForm from 'components/metrics/EventDataForm';
import PropTypes from 'prop-types';
import { useState } from 'react';
import { Button, Icon, Modal } from 'react-basics';
import { Button, Icon, Modal, Icons } from 'react-basics';
import { FormattedMessage } from 'react-intl';
import styles from './EventDataButton.module.css';
@@ -29,7 +28,7 @@ function EventDataButton({ websiteId }) {
className={styles.button}
>
<Icon>
<List />
<Icons.More />
</Icon>
Event Data
</Button>

6
components/icons.js
View File

@@ -1,7 +1,7 @@
import Bolt from 'assets/bolt.svg';
import Calendar from 'assets/calendar.svg';
import Clock from 'assets/clock.svg';
import Dashboard from 'assets/dashboard.svg';
import Edit from 'assets/edit.svg';
import Gear from 'assets/gear.svg';
import Globe from 'assets/globe.svg';
import Lock from 'assets/lock.svg';
@@ -9,15 +9,14 @@ import Logo from 'assets/logo.svg';
import Moon from 'assets/moon.svg';
import Profile from 'assets/profile.svg';
import Sun from 'assets/sun.svg';
import Trash from 'assets/trash.svg';
import User from 'assets/user.svg';
import Users from 'assets/users.svg';
export {
Bolt,
Calendar,
Clock,
Dashboard,
Edit,
Gear,
Globe,
Lock,
@@ -25,7 +24,6 @@ export {
Moon,
Profile,
Sun,
Trash,
User,
Users,
};

48
components/layout/NavBar.js
View File

@@ -1,29 +1,32 @@
import { useState } from 'react';
import { useIntl } from 'react-intl';
import { Icon, Text, Icons } from 'react-basics';
import classNames from 'classnames';
import { Dashboard, Logo, Profile, User, Users, Clock, Globe } from 'components/icons';
import ThemeButton from '../buttons/ThemeButton';
import LanguageButton from 'components/buttons/LanguageButton';
import LogoutButton from 'components/buttons/LogoutButton';
import { labels } from 'components/messages';
import NavGroup from './NavGroup';
import styles from './NavBar.module.css';
import ThemeButton from '../buttons/ThemeButton';
import LanguageButton from '../buttons/LanguageButton';
const { ChevronDown, Search } = Icons;
const analytics = [
{ label: 'Dashboard', url: '/dashboard', icon: <Dashboard /> },
{ label: 'Realtime', url: '/realtime', icon: <Clock /> },
{ label: 'Queries', url: '/queries', icon: <Search /> },
];
const settings = [
{ label: 'Websites', url: '/settings/websites', icon: <Globe /> },
{ label: 'Users', url: '/settings/users', icon: <User /> },
{ label: 'Teams', url: '/settings/teams', icon: <Users /> },
{ label: 'Profile', url: '/settings/profile', icon: <Profile /> },
];
export default function NavBar() {
const { formatMessage } = useIntl();
const [minimized, setMinimized] = useState(false);
const tooltipPosition = minimized ? 'right' : 'top';
const analytics = [
{ label: formatMessage(labels.dashboard), url: '/dashboard', icon: <Dashboard /> },
{ label: formatMessage(labels.realtime), url: '/realtime', icon: <Clock /> },
{ label: formatMessage(labels.queries), url: '/queries', icon: <Icons.Search /> },
];
const settings = [
{ label: formatMessage(labels.websites), url: '/settings/websites', icon: <Globe /> },
{ label: formatMessage(labels.users), url: '/settings/users', icon: <User /> },
{ label: formatMessage(labels.teams), url: '/settings/teams', icon: <Users /> },
{ label: formatMessage(labels.profile), url: '/settings/profile', icon: <Profile /> },
];
const handleMinimize = () => setMinimized(state => !state);
@@ -35,15 +38,16 @@ export default function NavBar() {
</Icon>
<Text className={styles.text}>umami</Text>
<Icon size="sm" rotate={minimized ? -90 : 90} className={styles.icon}>
<ChevronDown />
<Icons.ChevronDown />
</Icon>
</div>
<NavGroup title="Analytics" items={analytics} minimized={minimized} />
<NavGroup title="Settings" items={settings} minimized={minimized} />
<NavGroup title={formatMessage(labels.analytics)} items={analytics} minimized={minimized} />
<NavGroup title={formatMessage(labels.settings)} items={settings} minimized={minimized} />
<div className={styles.footer}>
<div className={styles.buttons}>
<ThemeButton />
<LanguageButton />
<ThemeButton tooltipPosition={tooltipPosition} />
<LanguageButton tooltipPosition={tooltipPosition} />
<LogoutButton tooltipPosition={tooltipPosition} />
</div>
</div>
</div>

4
components/layout/NavBar.module.css
View File

@@ -51,3 +51,7 @@
align-items: center;
justify-content: center;
}
.minimized .buttons {
flex-direction: column;
}

4
components/layout/NavGroup.js
View File

@@ -5,8 +5,6 @@ import { useRouter } from 'next/router';
import Link from 'next/link';
import styles from './NavGroup.module.css';
const { ChevronDown } = Icons;
export default function NavGroup({
title,
items,
@@ -30,7 +28,7 @@ export default function NavGroup({
<div className={styles.header} onClick={allowExpand ? handleExpand : undefined}>
<Text>{title}</Text>
<Icon size="sm" rotate={expanded ? 0 : -90}>
<ChevronDown />
<Icons.ChevronDown />
</Icon>
</div>
)}

19
components/messages.js
View File

@@ -52,17 +52,24 @@ export const labels = defineMessages({
language: { id: 'label.language', defaultMessage: 'Language' },
theme: { id: 'label.theme', defaultMessage: 'Theme' },
profile: { id: 'label.profile', defaultMessage: 'Profile' },
dashboard: { id: 'label.dashboard', defaultMessage: 'Dashboard' },
more: { id: 'label.more', defaultMessage: 'More' },
realtime: { id: 'label.realtime', defaultMessage: 'Realtime' },
queries: { id: 'label.queries', defaultMessage: 'Queries' },
teams: { id: 'label.teams', defaultMessage: 'Teams' },
analytics: { id: 'label.analytics', defaultMessage: 'Analytics' },
logout: { id: 'label.logout', defaultMessage: 'Logout' },
});
export const messages = defineMessages({
error: { id: 'message.error', defaultMessage: 'Something went wrong.' },
saved: { id: 'message.saved', defaultMessage: 'Saved successfully.' },
saved: { id: 'message.saved', defaultMessage: 'Saved.' },
noUsers: { id: 'message.no-users', defaultMessage: 'There are no users.' },
userDeleted: { id: 'message.user-deleted', defaultMessage: 'User deleted successfully.' },
userDeleted: { id: 'message.user-deleted', defaultMessage: 'User deleted.' },
noData: { id: 'message.no-data', defaultMessage: 'No data available.' },
deleteUserWarning: {
id: 'message.delete-user-warning',
defaultMessage: 'Are you sure you want to delete {username}?',
defaultMessage: 'Are you sure you want to delete the user {username}?',
},
minPasswordLength: {
id: 'message.min-password-length',
@@ -79,7 +86,7 @@ export const messages = defineMessages({
trackingCode: {
id: 'message.tracking-code',
defaultMessage:
'To track stats for this website, place the following code in the <head> section of your HTML.',
'To track stats for this website, place the following code in the <head>...</head> section of your HTML.',
},
deleteWebsite: {
id: 'message.delete-website',
@@ -107,6 +114,10 @@ export const messages = defineMessages({
defaultMessage: 'You do not have any websites configured.',
},
noMatchPassword: { id: 'message.no-match-password', defaultMessage: 'Passwords do not match.' },
goToSettings: {
id: 'message.go-to-settings',
defaultMessage: 'Go to settings',
},
});
export const devices = defineMessages({

5
components/metrics/FilterTags.js
View File

@@ -1,7 +1,6 @@
import classNames from 'classnames';
import { safeDecodeURI } from 'next-basics';
import { Button, Icon } from 'react-basics';
import Times from 'assets/times.svg';
import { Button, Icon, Icons } from 'react-basics';
import styles from './FilterTags.module.css';
export default function FilterTags({ className, params, onClick }) {
@@ -19,7 +18,7 @@ export default function FilterTags({ className, params, onClick }) {
<Button onClick={() => onClick(key)} variant="action" iconRight>
{`${key}: ${safeDecodeURI(params[key])}`}
<Icon>
<Times />
<Icons.Close />
</Icon>
</Button>
</div>

65
components/pages/dashboard/Dashboard.js
View File

@@ -1,53 +1,62 @@
import { useState } from 'react';
import { Button, Loading } from 'react-basics';
import { defineMessages, useIntl } from 'react-intl';
import { Button, Icon, Icons, Text, Flexbox } from 'react-basics';
import { useIntl } from 'react-intl';
import Link from 'next/link';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import WebsiteChartList from 'components/pages/websites/WebsiteChartList';
import DashboardSettingsButton from 'components/pages/dashboard/DashboardSettingsButton';
import DashboardEdit from 'components/pages/dashboard/DashboardEdit';
import styles from 'components/pages/websites/WebsiteList.module.css';
import useUser from 'hooks/useUser';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import useApi from 'hooks/useApi';
import { labels, messages } from 'components/messages';
import useDashboard from 'store/dashboard';
const messages = defineMessages({
dashboard: { id: 'label.dashboard', defaultMessage: 'Dashboard' },
more: { id: 'label.more', defaultMessage: 'More' },
});
export default function Dashboard({ userId }) {
const { user } = useUser();
const dashboard = useDashboard();
const { showCharts, limit, editing } = dashboard;
const [max, setMax] = useState(limit);
const { get, useQuery } = useApi();
const { data, isLoading } = useQuery(['websites'], () => get('/websites', { userId }));
const { data, isLoading, error } = useQuery(['websites'], () => get('/websites', { userId }));
const { formatMessage } = useIntl();
const hasData = data && data.length !== 0;
function handleMore() {
setMax(max + limit);
}
if (!user || isLoading) {
return <Loading />;
}
if (!data) {
return null;
}
return (
<Page>
<PageHeader title={formatMessage(messages.dashboard)}>
{!editing && <DashboardSettingsButton />}
<Page loading={isLoading} error={error}>
<PageHeader title={formatMessage(labels.dashboard)}>
{!editing && hasData && <DashboardSettingsButton />}
</PageHeader>
{editing && <DashboardEdit websites={data} />}
{!editing && <WebsiteChartList websites={data} showCharts={showCharts} limit={max} />}
{max < data.length && (
<Button className={styles.button} onClick={handleMore}>
{formatMessage(messages.more)}
</Button>
{!hasData && (
<EmptyPlaceholder message={formatMessage(messages.noWebsites)}>
<Link href="/settings/websites">
<Button>
<Icon>
<Icons.ArrowRight />
</Icon>
<Text>{formatMessage(messages.goToSettings)}</Text>
</Button>
</Link>
</EmptyPlaceholder>
)}
{hasData && (
<>
{editing && <DashboardEdit websites={data} />}
{!editing && <WebsiteChartList websites={data} showCharts={showCharts} limit={max} />}
{max < data.length && (
<Flexbox justifyContent="center">
<Button onClick={handleMore}>
<Icon>
<Icons.More />
</Icon>
<Text>{formatMessage(labels.more)}</Text>
</Button>
</Flexbox>
)}
</>
)}
</Page>
);

69
components/pages/settings/account/AccountDetails.js
View File

@@ -1,69 +0,0 @@
import { Button, Modal, useToast, Icon, Tabs, Item } from 'react-basics';
import { useEffect, useState } from 'react';
import useApi from 'hooks/useApi';
import PasswordEditForm from 'components/pages/settings/account/PasswordEditForm';
import PageHeader from 'components/layout/PageHeader';
import AccountEditForm from 'components/pages/settings/account/AccountEditForm';
import Lock from 'assets/lock.svg';
import Page from 'components/layout/Page';
import ApiKeysList from 'components/pages/settings/account/ApiKeysList';
import useUser from 'hooks/useUser';
export default function AccountDetails() {
const { user } = useUser();
const [values, setValues] = useState(null);
const [tab, setTab] = useState('detail');
const [showForm, setShowForm] = useState(false);
const { get, useQuery } = useApi();
const { data, isLoading } = useQuery(['account'], () => get(`/accounts/${user.id}`), {
cacheTime: 0,
});
const { toast, showToast } = useToast();
const handleChangePassword = () => setShowForm(true);
const handleClose = () => {
setShowForm(false);
};
const handleSave = data => {
setValues(data);
showToast({ message: 'Saved successfully.', variant: 'success' });
};
const handlePasswordSave = () => {
setShowForm(false);
showToast({ message: 'Password successfully changed', variant: 'success' });
};
useEffect(() => {
if (data) {
setValues(data);
}
}, [data]);
return (
<Page loading={isLoading || !values}>
{toast}
<PageHeader title="Account">
<Button onClick={handleChangePassword}>
<Icon>
<Lock />
</Icon>
Change password
</Button>
</PageHeader>
<Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
<Item key="detail">Details</Item>
<Item key="apiKey">API Keys</Item>
</Tabs>
{tab === 'detail' && <AccountEditForm data={values} onSave={handleSave} />}
{tab === 'apiKey' && <ApiKeysList />}
{data && showForm && (
<Modal title="Change password" onClose={handleClose} style={{ fontWeight: 'bold' }}>
{close => <PasswordEditForm onSave={handlePasswordSave} onClose={close} />}
</Modal>
)}
</Page>
);
}

39
components/pages/settings/account/AccountEditForm.js
View File

@@ -1,39 +0,0 @@
import { Form, FormRow, FormButtons, FormInput, TextField, SubmitButton } from 'react-basics';
import { useRef } from 'react';
import useApi from 'hooks/useApi';
export default function AccountEditForm({ data, onSave }) {
const { id } = data;
const { post, useMutation } = useApi();
const { mutate, error } = useMutation(({ name }) => post(`/accounts/${id}`, { name }));
const ref = useRef(null);
const handleSubmit = async data => {
mutate(data, {
onSuccess: async () => {
onSave(data);
ref.current.reset(data);
},
});
};
return (
<>
<Form key={id} ref={ref} onSubmit={handleSubmit} error={error} values={data}>
<FormRow label="Name">
<FormInput name="name">
<TextField autoComplete="off" />
</FormInput>
</FormRow>
<FormRow label="Email">
<FormInput name="email">
<TextField readOnly />
</FormInput>
</FormRow>
<FormButtons>
<SubmitButton variant="primary">Save</SubmitButton>
</FormButtons>
</Form>
</>
);
}

29
components/pages/settings/account/ApiKeyDeleteForm.js
View File

@@ -1,29 +0,0 @@
import useApi from 'hooks/useApi';
import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
export default function ApiKeyDeleteForm({ apiKeyId, onSave, onClose }) {
const { del, useMutation } = useApi();
const { mutate, error, isLoading } = useMutation(data => del(`/api-key/${apiKeyId}`, data));
const handleSubmit = async data => {
mutate(data, {
onSuccess: async () => {
onSave();
},
});
};
return (
<Form onSubmit={handleSubmit} error={error}>
<div>Are you sure you want to delete this API KEY?</div>
<FormButtons flex>
<SubmitButton variant="primary" disabled={isLoading}>
Delete
</SubmitButton>
<Button disabled={isLoading} onClick={onClose}>
Cancel
</Button>
</FormButtons>
</Form>
);
}

46
components/pages/settings/account/ApiKeysList.js
View File

@@ -1,46 +0,0 @@
import { Text, Icon, useToast, Banner, LoadingButton, Loading } from 'react-basics';
import useApi from 'hooks/useApi';
import ApiKeysTable from 'components/pages/settings/account/ApiKeysTable';
export default function ApiKeysList() {
const { toast, showToast } = useToast();
const { get, post, useQuery, useMutation } = useApi();
const { mutate, isLoading: isUpdating } = useMutation(data => post('/api-key', data));
const { data, refetch, isLoading, error } = useQuery(['api-key'], () => get(`/api-key`));
const hasData = data && data.length !== 0;
const handleCreate = () => {
mutate(
{},
{
onSuccess: async () => {
showToast({ message: 'API key saved.', variant: 'success' });
await handleSave();
},
},
);
};
const handleSave = async () => {
await refetch();
};
if (error) {
return <Banner variant="error">Something went wrong.</Banner>;
}
if (isLoading) {
return <Loading icon="dots" position="block" />;
}
return (
<>
{toast}
<LoadingButton loading={isUpdating} onClick={handleCreate}>
<Icon icon="plus" /> Create key
</LoadingButton>
{hasData && <ApiKeysTable data={data} onSave={handleSave} />}
{!hasData && <Text>You don&apos;t have any API keys.</Text>}
</>
);
}

100
components/pages/settings/account/ApiKeysTable.js
View File

@@ -1,100 +0,0 @@
import { formatDistance } from 'date-fns';
import { useState } from 'react';
import {
Button,
Icon,
Modal,
PasswordField,
Table,
TableBody,
TableCell,
TableColumn,
TableHeader,
TableRow,
Text,
} from 'react-basics';
import ApiKeyDeleteForm from 'components/pages/settings/account/ApiKeyDeleteForm';
import Trash from 'assets/trash.svg';
import styles from './ApiKeysTable.module.css';
const columns = [
{ name: 'apiKey', label: 'Key', style: { flex: 3 } },
{ name: 'created', label: 'Created', style: { flex: 1 } },
{ name: 'action', label: ' ', style: { flex: 1 } },
];
export default function ApiKeysTable({ data = [], onSave }) {
const [apiKeyId, setApiKeyId] = useState(null);
const handleSave = () => {
setApiKeyId(null);
onSave();
};
const handleClose = () => {
setApiKeyId(null);
};
const handleDelete = id => {
setApiKeyId(id);
};
return (
<>
<Table className={styles.table} columns={columns} rows={data}>
<TableHeader>
{(column, index) => {
return (
<TableColumn key={index} className={styles.header} style={{ ...column.style }}>
{column.label}
</TableColumn>
);
}}
</TableHeader>
<TableBody>
{(row, keys, rowIndex) => {
row.apiKey = <PasswordField className={styles.input} value={row.key} readOnly={true} />;
row.created = formatDistance(new Date(row.createdAt), new Date(), {
addSuffix: true,
});
row.action = (
<div className={styles.actions}>
<a target="_blank">
<Button onClick={() => handleDelete(row.id)}>
<Icon>
<Trash />
</Icon>
<Text>Delete</Text>
</Button>
</a>
</div>
);
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>
);
}}
</TableRow>
);
}}
</TableBody>
</Table>
{apiKeyId && (
<Modal title="Delete API key" onClose={handleClose}>
{close => <ApiKeyDeleteForm apiKeyId={apiKeyId} onSave={handleSave} onClose={close} />}
</Modal>
)}
</>
);
}

31
components/pages/settings/account/ApiKeysTable.module.css
View File

@@ -1,31 +0,0 @@
.table th,
.table td {
flex: 2;
}
.cell {
display: flex;
align-items: center;
}
.header:first-child,
.cell:first-child {
min-width: 320px;
}
.input {
flex: 2;
}
.cell:last-child {
justify-content: flex-end;
}
.actions {
display: flex;
gap: 12px;
}
.empty {
min-height: 300px;
}

67
components/pages/settings/account/PasswordEditForm.js
View File

@@ -1,67 +0,0 @@
import { useRef } from 'react';
import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
import useApi from 'hooks/useApi';
import useUser from 'hooks/useUser';
export default function PasswordEditForm({ onSave, onClose }) {
const { post, useMutation } = useApi();
const { user } = useUser();
const { mutate, error, isLoading } = useMutation(data =>
post(`/accounts/${user.id}/change-password`, data),
);
const ref = useRef(null);
const handleSubmit = async data => {
mutate(data, {
onSuccess: async () => {
onSave();
},
});
};
const samePassword = value => {
if (value !== ref?.current?.getValues('newPassword')) {
return "Passwords don't match";
}
return true;
};
return (
<Form ref={ref} onSubmit={handleSubmit} error={error}>
<FormRow label="Current password">
<FormInput name="currentPassword" rules={{ required: 'Required' }}>
<PasswordField autoComplete="off" />
</FormInput>
</FormRow>
<FormRow label="New password">
<FormInput
name="newPassword"
rules={{
required: 'Required',
minLength: { value: 8, message: 'Minimum length 8 characters' },
}}
>
<PasswordField autoComplete="off" />
</FormInput>
</FormRow>
<FormRow label="Confirm password">
<FormInput
name="confirmPassword"
rules={{
required: 'Required',
minLength: { value: 8, message: 'Minimum length 8 characters' },
validate: samePassword,
}}
>
<PasswordField autoComplete="off" />
</FormInput>
</FormRow>
<FormButtons flex>
<Button type="submit" variant="primary" disabled={isLoading}>
Save
</Button>
<Button onClick={onClose}>Cancel</Button>
</FormButtons>
</Form>
);
}

50
components/pages/settings/account/PasswordResetForm.js
View File

@@ -1,50 +0,0 @@
import { useRef } from 'react';
import { Form, FormRow, FormInput, FormButtons, PasswordField, SubmitButton } from 'react-basics';
import useApi from 'hooks/useApi';
export default function PasswordResetForm({ token, onSave }) {
const { post, useMutation } = useApi();
const { mutate, error } = useMutation(data =>
post('/accounts/reset-password', { ...data, token }),
);
const ref = useRef(null);
const handleSubmit = async data => {
mutate(data, {
onSuccess: async () => {
onSave();
},
});
};
const samePassword = value => {
if (value !== ref?.current?.getValues('newPassword')) {
return "Passwords don't match";
}
return true;
};
return (
<>
<Form ref={ref} onSubmit={handleSubmit} error={error}>
<h2>Reset your password</h2>
<FormRow label="New password">
<FormInput name="newPassword" rules={{ required: 'Required' }}>
<PasswordField autoComplete="off" />
</FormInput>
</FormRow>
<FormRow label="Confirm password">
<FormInput
name="confirmPassword"
rules={{ required: 'Required', validate: samePassword }}
>
<PasswordField autoComplete="off" />
</FormInput>
</FormRow>
<FormButtons align="center">
<SubmitButton variant="primary">Update password</SubmitButton>
</FormButtons>
</Form>
</>
);
}

4
components/pages/settings/profile/PasswordChangeButton.js
View File

@@ -1,5 +1,5 @@
import { useIntl } from 'react-intl';
import { Button, Icon, Text, useToast, ModalTrigger } from 'react-basics';
import { Button, Icon, Text, useToast, ModalTrigger, Modal } from 'react-basics';
import PasswordEditForm from 'components/pages/settings/profile/PasswordEditForm';
import { Lock } from 'components/icons';
import { labels, messages } from 'components/messages';
@@ -22,7 +22,7 @@ export default function PasswordChangeButton() {
</Icon>
<Text>{formatMessage(labels.changePassword)}</Text>
</Button>
{close => <PasswordEditForm onSave={handleSave} onClose={close} />}
<Modal>{close => <PasswordEditForm onSave={handleSave} onClose={close} />}</Modal>
</ModalTrigger>
</>
);

1
components/pages/settings/profile/PasswordEditForm.js
View File

@@ -14,6 +14,7 @@ export default function PasswordEditForm({ onSave, onClose }) {
mutate(data, {
onSuccess: async () => {
onSave();
onClose();
},
});
};

8
components/pages/settings/profile/ProfileDetails.js
View File

@@ -3,7 +3,7 @@ import { useIntl } from 'react-intl';
import TimezoneSetting from 'components/pages/settings/profile/TimezoneSetting';
import DateRangeSetting from 'components/pages/settings/profile/DateRangeSetting';
import LanguageSetting from 'components/pages/settings/profile/LanguageSetting';
import ThemeSetting from 'components/buttons/ThemeSetting';
import ThemeSetting from 'components/pages/settings/profile/ThemeSetting';
import useUser from 'hooks/useUser';
import { labels } from 'components/messages';
@@ -21,13 +21,13 @@ export default function ProfileDetails() {
<Form>
<FormRow label={formatMessage(labels.username)}>{username}</FormRow>
<FormRow label={formatMessage(labels.role)}>{role}</FormRow>
<FormRow label={formatMessage(labels.language)} inline>
<FormRow label={formatMessage(labels.language)}>
<LanguageSetting />
</FormRow>
<FormRow label={formatMessage(labels.timezone)} inline>
<FormRow label={formatMessage(labels.timezone)}>
<TimezoneSetting />
</FormRow>
<FormRow label={formatMessage(labels.dateRange)} inline>
<FormRow label={formatMessage(labels.dateRange)}>
<DateRangeSetting />
</FormRow>
<FormRow label={formatMessage(labels.theme)}>

0
components/buttons/ThemeSetting.js → components/pages/settings/profile/ThemeSetting.js
View File

0
components/buttons/ThemeSetting.module.css → components/pages/settings/profile/ThemeSetting.module.css
View File

3
components/pages/settings/teams/TeamAddForm.js
View File

@@ -22,6 +22,7 @@ export default function TeamAddForm({ onSave, onClose }) {
mutate(data, {
onSuccess: async () => {
onSave();
onClose();
},
});
};
@@ -29,7 +30,7 @@ export default function TeamAddForm({ onSave, onClose }) {
return (
<Form ref={ref} onSubmit={handleSubmit} error={error}>
<FormRow label={formatMessage(labels.name)}>
<FormInput name="name" rules={{ required: 'Required' }}>
<FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
<TextField autoComplete="off" />
</FormInput>
</FormRow>

2
components/pages/settings/teams/TeamEditForm.js
View File

@@ -47,7 +47,7 @@ export default function TeamEditForm({ teamId, data, onSave }) {
<TextField value={teamId} readOnly allowCopy />
</FormRow>
<FormRow label={formatMessage(labels.name)}>
<FormInput name="name" rules={{ required: 'Required' }}>
<FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
<TextField />
</FormInput>
</FormRow>

6
components/pages/settings/teams/TeamMembersTable.js
View File

@@ -11,11 +11,9 @@ import {
Flexbox,
Text,
} from 'react-basics';
import { useIntl } from 'react-intl';
import { ROLES } from 'lib/constants';
import { labels } from 'components/messages';
import { useIntl } from 'react-intl';
const { Close } = Icons;
export default function TeamMembersTable({ data = [] }) {
const { formatMessage } = useIntl();
@@ -48,7 +46,7 @@ export default function TeamMembersTable({ data = [] }) {
<div>
<Button>
<Icon>
<Close />
<Icons.Close />
</Icon>
<Text>{formatMessage(labels.remove)}</Text>
</Button>

2
components/pages/settings/teams/TeamWebsites.js
View File

@@ -7,7 +7,7 @@ import { messages } from 'components/messages';
export default function TeamWebsites({ teamId }) {
const { formatMessage } = useIntl();
const { get, useQuery } = useApi();
const { data, isLoading } = useQuery(['team/websites', teamId], () =>
const { data, isLoading } = useQuery(['teams/websites', teamId], () =>
get(`/teams/${teamId}/websites`),
);
const hasData = data && data.length !== 0;

47
components/pages/settings/teams/TeamsList.js
View File

@@ -1,5 +1,5 @@
import { useState } from 'react';
import { Button, Icon, Modal, useToast, Icons, Text } from 'react-basics';
import { Button, Icon, Modal, ModalTrigger, useToast, Icons, Text } from 'react-basics';
import { useIntl } from 'react-intl';
import useApi from 'hooks/useApi';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
@@ -9,58 +9,43 @@ import TeamsTable from 'components/pages/settings/teams/TeamsTable';
import Page from 'components/layout/Page';
import { labels, messages } from 'components/messages';
const { Plus } = Icons;
export default function TeamsList() {
const { formatMessage } = useIntl();
const [edit, setEdit] = useState(false);
const [update, setUpdate] = useState(0);
const { get, useQuery } = useApi();
const { data, isLoading, error } = useQuery(['teams', update], () => get(`/teams`));
const hasData = data && data.length !== 0;
const { toast, showToast } = useToast();
const handleAdd = () => {
setEdit(true);
};
const handleSave = () => {
setEdit(false);
setUpdate(state => state + 1);
showToast({ message: formatMessage(messages.saved), variant: 'success' });
};
const handleClose = () => {
setEdit(false);
};
const createButton = (
<ModalTrigger>
<Button variant="primary">
<Icon>
<Icons.Plus />
</Icon>
<Text>{formatMessage(labels.createTeam)}</Text>
</Button>
<Modal title={formatMessage(labels.createTeam)}>
{close => <TeamAddForm onSave={handleSave} onClose={close} />}
</Modal>
</ModalTrigger>
);
return (
<Page loading={isLoading} error={error}>
{toast}
<PageHeader title={formatMessage(labels.team)}>
<Button variant="primary" onClick={handleAdd}>
<Icon>
<Plus />
</Icon>
<Text>{formatMessage(labels.createTeam)}</Text>
</Button>
</PageHeader>
<PageHeader title={formatMessage(labels.team)}>{createButton}</PageHeader>
{hasData && <TeamsTable data={data} />}
{!hasData && (
<EmptyPlaceholder message={formatMessage(messages.noTeams)}>
<Button variant="primary" onClick={handleAdd}>
<Icon>
<Plus />
</Icon>
<Text>{formatMessage(labels.createTeam)}</Text>
</Button>
{createButton}
</EmptyPlaceholder>
)}
{edit && (
<Modal title={formatMessage(labels.createTeam)} onClose={handleClose}>
{close => <TeamAddForm onSave={handleSave} onClose={close} />}
</Modal>
)}
</Page>
);
}

4
components/pages/settings/teams/TeamsTable.js
View File

@@ -15,8 +15,6 @@ import {
import { useIntl } from 'react-intl';
import { labels } from 'components/messages';
const { ArrowRight } = Icons;
export default function TeamsTable({ data = [] }) {
const { formatMessage } = useIntl();
@@ -46,7 +44,7 @@ export default function TeamsTable({ data = [] }) {
<a>
<Button>
<Icon>
<ArrowRight />
<Icons.ArrowRight />
</Icon>
<Text>{formatMessage(labels.settings)}</Text>
</Button>

36
components/pages/settings/users/UserAddButton.js
View File

@@ -1,44 +1,26 @@
import { useState } from 'react';
import { useIntl } from 'react-intl';
import { Button, Icon, Text, Modal, useToast, Icons } from 'react-basics';
import { Button, Icon, Text, Modal, Icons, ModalTrigger } from 'react-basics';
import UserAddForm from './UserAddForm';
import { labels, messages } from 'components/messages';
const { Plus } = Icons;
import { labels } from 'components/messages';
export default function UserAddButton({ onSave }) {
const { formatMessage } = useIntl();
const [edit, setEdit] = useState(false);
const { toast, showToast } = useToast();
const handleSave = () => {
showToast({ message: formatMessage(messages.saved), variant: 'success' });
setEdit(false);
onSave();
};
const handleAdd = () => {
setEdit(true);
};
const handleClose = () => {
setEdit(false);
};
return (
<>
{toast}
<Button variant="primary" onClick={handleAdd}>
<ModalTrigger>
<Button variant="primary">
<Icon>
<Plus />
<Icons.Plus />
</Icon>
<Text>{formatMessage(labels.createUser)}</Text>
</Button>
{edit && (
<Modal title={formatMessage(labels.createUser)} onClose={handleClose}>
<UserAddForm onSave={handleSave} onClose={handleClose} />
</Modal>
)}
</>
<Modal title={formatMessage(labels.createUser)}>
{close => <UserAddForm onSave={handleSave} onClose={close} />}
</Modal>
</ModalTrigger>
);
}

1
components/pages/settings/users/UserAddForm.js
View File

@@ -24,6 +24,7 @@ export default function UserAddForm({ onSave, onClose }) {
mutate(data, {
onSuccess: async () => {
onSave(data);
onClose();
},
});
};

11
components/pages/settings/users/UserDeleteForm.js
View File

@@ -1,7 +1,7 @@
import { useMutation } from '@tanstack/react-query';
import useApi from 'hooks/useApi';
import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
import { useIntl } from 'react-intl';
import { useIntl, FormattedMessage } from 'react-intl';
import { labels, messages } from 'components/messages';
export default function UserDeleteForm({ userId, username, onSave, onClose }) {
@@ -20,9 +20,14 @@ export default function UserDeleteForm({ userId, username, onSave, onClose }) {
return (
<Form onSubmit={handleSubmit} error={error}>
<p>{formatMessage(messages.deleteUserWarning, { username })}</p>
<p>
<FormattedMessage
{...messages.deleteUserWarning}
values={{ username: <b>{username}</b> }}
/>
</p>
<FormButtons flex>
<SubmitButton variant="primary" disabled={isLoading}>
<SubmitButton variant="danger" disabled={isLoading}>
{formatMessage(labels.delete)}
</SubmitButton>
<Button disabled={isLoading} onClick={onClose}>

2
components/pages/settings/users/UsersList.js
View File

@@ -22,7 +22,7 @@ export default function UsersList() {
const handleSave = () => refetch();
const handleDelete = () =>
showToast({ message: formatMessage(messages.deleted), variant: 'success' });
showToast({ message: formatMessage(messages.userDeleted), variant: 'success' });
return (
<Page loading={isLoading} error={error}>

26
components/pages/settings/users/UsersTable.js
View File

@@ -11,18 +11,16 @@ import {
Flexbox,
Icons,
ModalTrigger,
Modal,
} from 'react-basics';
import { useIntl } from 'react-intl';
import { formatDistance } from 'date-fns';
import Link from 'next/link';
import { Edit } from 'components/icons';
import useUser from 'hooks/useUser';
import UserDeleteForm from './UserDeleteForm';
import { labels } from 'components/messages';
import { ROLES } from 'lib/constants';
const { Trash } = Icons;
export default function UsersTable({ data = [], onDelete }) {
const { formatMessage } = useIntl();
const { user } = useUser();
@@ -60,7 +58,7 @@ export default function UsersTable({ data = [], onDelete }) {
<Link href={`/settings/users/${row.id}`}>
<Button>
<Icon>
<Edit />
<Icons.Edit />
</Icon>
<Text>{formatMessage(labels.edit)}</Text>
</Button>
@@ -68,18 +66,20 @@ export default function UsersTable({ data = [], onDelete }) {
<ModalTrigger disabled={row.id === user.id}>
<Button disabled={row.id === user.id}>
<Icon>
<Trash />
<Icons.Trash />
</Icon>
<Text>{formatMessage(labels.delete)}</Text>
</Button>
{close => (
<UserDeleteForm
userId={row.id}
username={row.username}
onSave={onDelete}
onClose={close}
/>
)}
<Modal>
{close => (
<UserDeleteForm
userId={row.id}
username={row.username}
onSave={onDelete}
onClose={close}
/>
)}
</Modal>
</ModalTrigger>
</>
),

1
components/pages/settings/websites/WebsiteAddForm.js
View File

@@ -25,6 +25,7 @@ export default function WebsiteAddForm({ onSave, onClose }) {
mutate(data, {
onSuccess: async () => {
onSave();
onClose();
},
});
};

1
components/pages/settings/websites/WebsiteDeleteForm.js
View File

@@ -22,6 +22,7 @@ export default function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
mutate(data, {
onSuccess: async () => {
onSave();
onClose();
},
});
};

44
components/pages/settings/websites/WebsiteReset.js
View File

@@ -1,6 +1,4 @@
import { useRouter } from 'next/router';
import { useState } from 'react';
import { Button, Form, FormRow, Modal } from 'react-basics';
import { Button, Form, FormRow, Modal, ModalTrigger } from 'react-basics';
import { useIntl } from 'react-intl';
import WebsiteDeleteForm from 'components/pages/settings/websites/WebsiteDeleteForm';
import WebsiteResetForm from 'components/pages/settings/websites/WebsiteResetForm';
@@ -8,43 +6,39 @@ import { labels, messages } from 'components/messages';
export default function WebsiteReset({ websiteId, onSave }) {
const { formatMessage } = useIntl();
const [modal, setModal] = useState(null);
const router = useRouter();
const handleReset = async () => {
setModal(null);
onSave();
onSave('reset');
};
const handleDelete = async () => {
onSave();
await router.push('/websites');
onSave('delete');
};
const handleClose = () => setModal(null);
return (
<Form>
<FormRow label={formatMessage(labels.resetWebsite)}>
<p>{formatMessage(messages.resetWebsiteWarning)}</p>
<Button onClick={() => setModal('reset')}>{formatMessage(labels.reset)}</Button>
<ModalTrigger>
<Button>{formatMessage(labels.reset)}</Button>
<Modal title={formatMessage(labels.resetWebsite)}>
{close => (
<WebsiteResetForm websiteId={websiteId} onSave={handleReset} onClose={close} />
)}
</Modal>
</ModalTrigger>
</FormRow>
<FormRow label={formatMessage(labels.deleteWebsite)}>
<p>{formatMessage(messages.deleteWebsiteWarning)}</p>
<Button onClick={() => setModal('delete')}>Delete</Button>
<ModalTrigger>
<Button>Delete</Button>
<Modal title={formatMessage(labels.deleteWebsite)}>
{close => (
<WebsiteDeleteForm websiteId={websiteId} onSave={handleDelete} onClose={close} />
)}
</Modal>
</ModalTrigger>
</FormRow>
{modal === 'reset' && (
<Modal title={formatMessage(labels.resetWebsite)} onClose={handleClose}>
{close => <WebsiteResetForm websiteId={websiteId} onSave={handleReset} onClose={close} />}
</Modal>
)}
{modal === 'delete' && (
<Modal title={formatMessage(labels.deleteWebsite)} onClose={handleClose}>
{close => (
<WebsiteDeleteForm websiteId={websiteId} onSave={handleDelete} onClose={close} />
)}
</Modal>
)}
</Form>
);
}

1
components/pages/settings/websites/WebsiteResetForm.js
View File

@@ -22,6 +22,7 @@ export default function WebsiteResetForm({ websiteId, onSave, onClose }) {
mutate(data, {
onSuccess: async () => {
onSave();
onClose();
},
});
};

14
components/pages/settings/websites/WebsiteSettings.js
View File

@@ -1,6 +1,7 @@
import { useEffect, useState } from 'react';
import { Breadcrumbs, Item, Tabs, useToast, Button, Text, Icon, Icons } from 'react-basics';
import { useIntl } from 'react-intl';
import { useRouter } from 'next/router';
import Link from 'next/link';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
@@ -11,9 +12,8 @@ import ShareUrl from 'components/pages/settings/websites/ShareUrl';
import useApi from 'hooks/useApi';
import { labels, messages } from 'components/messages';
const { External } = Icons;
export default function WebsiteSettings({ websiteId }) {
const router = useRouter();
const { formatMessage } = useIntl();
const [values, setValues] = useState(null);
const [tab, setTab] = useState('details');
@@ -34,6 +34,12 @@ export default function WebsiteSettings({ websiteId }) {
setValues(state => ({ ...state, ...data }));
};
const handleReset = async value => {
if (value === 'delete') {
await router.push('/websites');
}
};
useEffect(() => {
if (data) {
setValues(data);
@@ -54,7 +60,7 @@ export default function WebsiteSettings({ websiteId }) {
<a>
<Button variant="primary">
<Icon>
<External />
<Icons.External />
</Icon>
<Text>{formatMessage(labels.view)}</Text>
</Button>
@@ -72,7 +78,7 @@ export default function WebsiteSettings({ websiteId }) {
)}
{tab === 'tracking' && <TrackingCode websiteId={websiteId} data={values} />}
{tab === 'share' && <ShareUrl websiteId={websiteId} data={values} onSave={handleSave} />}
{tab === 'data' && <WebsiteReset websiteId={websiteId} onSave={handleSave} />}
{tab === 'data' && <WebsiteReset websiteId={websiteId} onSave={handleReset} />}
</Page>
);
}

33
components/pages/settings/websites/WebsitesList.js
View File

@@ -1,5 +1,4 @@
import { useState } from 'react';
import { Button, Icon, Text, Modal, 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 PageHeader from 'components/layout/PageHeader';
@@ -10,10 +9,7 @@ import useApi from 'hooks/useApi';
import useUser from 'hooks/useUser';
import { labels, messages } from 'components/messages';
const { Plus } = Icons;
export default function WebsitesList() {
const [edit, setEdit] = useState(false);
const { user } = useUser();
const { get, useQuery } = useApi();
const { data, isLoading, error, refetch } = useQuery(
@@ -27,21 +23,21 @@ export default function WebsitesList() {
const handleSave = async () => {
await refetch();
setEdit(false);
showToast({ message: formatMessage(messages.saved), variant: 'success' });
};
const handleAdd = () => setEdit(true);
const handleClose = () => setEdit(false);
const addButton = (
<Button variant="primary" onClick={handleAdd}>
<Icon>
<Plus />
</Icon>
<Text>{formatMessage(labels.addWebsite)}</Text>
</Button>
<ModalTrigger>
<Button variant="primary">
<Icon>
<Icons.Plus />
</Icon>
<Text>{formatMessage(labels.addWebsite)}</Text>
</Button>
<Modal title={formatMessage(labels.addWebsite)}>
{close => <WebsiteAddForm onSave={handleSave} onClose={close} />}
</Modal>
</ModalTrigger>
);
return (
@@ -54,11 +50,6 @@ export default function WebsitesList() {
{addButton}
</EmptyPlaceholder>
)}
{edit && (
<Modal title={formatMessage(labels.addWebsite)} onClose={handleClose}>
{close => <WebsiteAddForm onSave={handleSave} onClose={close} />}
</Modal>
)}
</Page>
);
}

6
components/pages/settings/websites/WebsitesTable.js
View File

@@ -13,8 +13,6 @@ import {
} from 'react-basics';
import { defineMessages, useIntl } from 'react-intl';
const { ArrowRight, External } = Icons;
const messages = defineMessages({
name: { id: 'label.name', defaultMessage: 'Name' },
domain: { id: 'label.domain', defaultMessage: 'Domain' },
@@ -50,7 +48,7 @@ export default function WebsitesTable({ data = [] }) {
<a>
<Button>
<Icon>
<ArrowRight />
<Icons.ArrowRight />
</Icon>
Settings
</Button>
@@ -60,7 +58,7 @@ export default function WebsitesTable({ data = [] }) {
<a>
<Button>
<Icon>
<External />
<Icons.External />
</Icon>
View
</Button>

29
components/pages/websites/WebsiteChartList.js
View File

@@ -1,28 +1,11 @@
import { defineMessages, useIntl } from 'react-intl';
import Link from 'components/common/Link';
import WebsiteChart from 'components/metrics/WebsiteChart';
import Page from 'components/layout/Page';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import Arrow from 'assets/arrow-right.svg';
import styles from './WebsiteList.module.css';
import useDashboard from 'store/dashboard';
import { useMemo } from 'react';
import { firstBy } from 'thenby';
const messages = defineMessages({
noWebsites: {
id: 'message.no-websites-configured',
defaultMessage: "You don't have any websites configured.",
},
goToSettngs: {
id: 'message.go-to-buttons',
defaultMessage: 'Go to buttons',
},
});
export default function WebsiteList({ websites, showCharts, limit }) {
const { websiteOrder } = useDashboard();
const { formatMessage } = useIntl();
const ordered = useMemo(
() =>
@@ -32,18 +15,6 @@ export default function WebsiteList({ websites, showCharts, limit }) {
[websites, websiteOrder],
);
if (websites.length === 0) {
return (
<Page>
<EmptyPlaceholder msg={formatMessage(messages.noWebsites)}>
<Link href="/websites" icon={<Arrow />} iconRight>
{formatMessage(messages.goToSettngs)}
</Link>
</EmptyPlaceholder>
</Page>
);
}
return (
<div>
{ordered.map(({ id, name, domain }, index) =>