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

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

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)}>

31
components/pages/settings/profile/ThemeSetting.js Normal file
View file

@ -0,0 +1,31 @@
import classNames from 'classnames';
import { Button, Icon } from 'react-basics';
import useTheme from 'hooks/useTheme';
import Sun from 'assets/sun.svg';
import Moon from 'assets/moon.svg';
import styles from './ThemeSetting.module.css';
export default function ThemeSetting() {
const [theme, setTheme] = useTheme();
return (
<div className={styles.buttons}>
<Button
className={classNames({ [styles.active]: theme === 'light' })}
onClick={() => setTheme('light')}
>
<Icon>
<Sun />
</Icon>
</Button>
<Button
className={classNames({ [styles.active]: theme === 'dark' })}
onClick={() => setTheme('dark')}
>
<Icon>
<Moon />
</Icon>
</Button>
</div>
);
}

8
components/pages/settings/profile/ThemeSetting.module.css Normal file
View file

@ -0,0 +1,8 @@
.buttons {
display: flex;
gap: 10px;
}
.active {
border: 2px solid var(--primary400);
}

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) =>