@@ -61,37 +75,45 @@ export default function WebsiteDetails({ websiteId }) {
render: BackButton,
},
{
- label:
,
+ label: formatMessage(messages.pages),
value: resolve({ view: 'url' }),
},
{
- label:
,
+ label: formatMessage(messages.referrers),
value: resolve({ view: 'referrer' }),
},
{
- label:
,
+ label: formatMessage(messages.browsers),
value: resolve({ view: 'browser' }),
},
{
- label:
,
+ label: formatMessage(messages.os),
value: resolve({ view: 'os' }),
},
{
- label:
,
+ label: formatMessage(messages.devices),
value: resolve({ view: 'device' }),
},
{
- label:
,
+ label: formatMessage(messages.countries),
value: resolve({ view: 'country' }),
},
{
- label:
,
+ label: formatMessage(messages.languages),
value: resolve({ view: 'language' }),
},
{
- label:
,
+ label: formatMessage(messages.screens),
+ value: resolve({ view: 'screen' }),
+ },
+ {
+ label: formatMessage(messages.events),
value: resolve({ view: 'event' }),
},
+ {
+ label: formatMessage(messages.query),
+ value: resolve({ view: 'query' }),
+ },
];
const tableProps = {
diff --git a/components/pages/WebsiteList.js b/components/pages/WebsiteList.js
index a5acc063..4de8d05d 100644
--- a/components/pages/WebsiteList.js
+++ b/components/pages/WebsiteList.js
@@ -1,36 +1,42 @@
-import React, { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
+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 Button from 'components/common/Button';
-import useFetch from 'hooks/useFetch';
import Arrow from 'assets/arrow-right.svg';
-import Chart from 'assets/chart-bar.svg';
import styles from './WebsiteList.module.css';
+import useDashboard from 'store/dashboard';
+import { sortArrayByMap } from 'lib/array';
+import { useMemo } from 'react';
-export default function WebsiteList({ userId }) {
- const { data } = useFetch('/api/websites', { params: { user_id: userId } });
- const [showCharts, setShowCharts] = useState(true);
+const messages = defineMessages({
+ noWebsites: {
+ id: 'message.no-websites-configured',
+ defaultMessage: "You don't have any websites configured.",
+ },
+ goToSettngs: {
+ id: 'message.go-to-settings',
+ defaultMessage: 'Go to settings',
+ },
+});
- if (!data) {
- return null;
- }
+export default function WebsiteList({ websites, showCharts, limit }) {
+ const { websiteOrder } = useDashboard();
+ const { formatMessage } = useIntl();
- if (data.length === 0) {
+ console.log({ websiteOrder });
+
+ const ordered = useMemo(
+ () => sortArrayByMap(websites, websiteOrder, 'website_id'),
+ [websites, websiteOrder],
+ );
+
+ if (websites.length === 0) {
return (
-
- }
- >
+
} iconRight>
-
+ {formatMessage(messages.goToSettngs)}
@@ -38,25 +44,20 @@ export default function WebsiteList({ userId }) {
}
return (
-
-
- }
- icon={}
- onClick={() => setShowCharts(!showCharts)}
- />
-
- {data.map(({ website_id, name, domain }) => (
-
-
-
- ))}
-
+
+ {ordered.map(({ website_id, name, domain }, index) =>
+ index < limit ? (
+
+
+
+ ) : null,
+ )}
+
);
}
diff --git a/components/pages/WebsiteList.module.css b/components/pages/WebsiteList.module.css
index 4c2952d6..fc6a94c2 100644
--- a/components/pages/WebsiteList.module.css
+++ b/components/pages/WebsiteList.module.css
@@ -7,12 +7,5 @@
.website:last-child {
border-bottom: 0;
- margin-bottom: 0;
-}
-
-.menubar {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- padding-top: 10px;
+ margin-bottom: 20px;
}
diff --git a/components/settings/AccountSettings.js b/components/settings/AccountSettings.js
index 46629587..967492db 100644
--- a/components/settings/AccountSettings.js
+++ b/components/settings/AccountSettings.js
@@ -25,7 +25,7 @@ export default function AccountSettings() {
const [deleteAccount, setDeleteAccount] = useState();
const [saved, setSaved] = useState(0);
const [message, setMessage] = useState();
- const { data } = useFetch(`/api/accounts`, {}, [saved]);
+ const { data } = useFetch(`/accounts`, {}, [saved]);
const Checkmark = ({ is_admin }) => (is_admin ?
} size="medium" /> : null);
@@ -37,39 +37,40 @@ export default function AccountSettings() {
);
- const Buttons = row =>
- row.username !== 'admin' ? (
-
- } size="small" onClick={() => setEditAccount(row)}>
-
-
+ const Buttons = row => (
+
+ } size="small" onClick={() => setEditAccount(row)}>
+
+
+ {!row.is_admin && (
} size="small" onClick={() => setDeleteAccount(row)}>
-
- ) : null;
+ )}
+
+ );
const columns = [
{
key: 'username',
label:
,
- className: 'col-4 col-md-3',
+ className: 'col-12 col-lg-4',
},
{
key: 'is_admin',
label:
,
- className: 'col-4 col-md-3',
+ className: 'col-12 col-lg-3',
render: Checkmark,
},
{
key: 'dashboard',
label:
,
- className: 'col-4 col-md-3',
+ className: 'col-12 col-lg-3',
render: DashboardLink,
},
{
key: 'actions',
- className: classNames(styles.buttons, 'col-12 col-md-3 pt-2 pt-md-0'),
+ className: classNames(styles.buttons, 'col-12 col-lg-2 pt-2 pt-md-0'),
render: Buttons,
},
];
diff --git a/components/settings/DashboardSettingsButton.js b/components/settings/DashboardSettingsButton.js
new file mode 100644
index 00000000..15611d0e
--- /dev/null
+++ b/components/settings/DashboardSettingsButton.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import MenuButton from 'components/common/MenuButton';
+import Gear from 'assets/gear.svg';
+import { saveDashboard } from 'store/dashboard';
+
+const messages = defineMessages({
+ toggleCharts: { id: 'message.toggle-charts', defaultMessage: 'Toggle charts' },
+ editDashboard: { id: 'message.edit-dashboard', defaultMessage: 'Edit dashboard' },
+});
+
+export default function DashboardSettingsButton() {
+ const { formatMessage } = useIntl();
+
+ const menuOptions = [
+ {
+ label: formatMessage(messages.toggleCharts),
+ value: 'charts',
+ },
+ {
+ label: formatMessage(messages.editDashboard),
+ value: 'order',
+ },
+ ];
+
+ function handleSelect(value) {
+ if (value === 'charts') {
+ saveDashboard(state => ({ showCharts: !state.showCharts }));
+ }
+ if (value === 'order') {
+ saveDashboard({ editing: true });
+ }
+ }
+
+ return
} options={menuOptions} onSelect={handleSelect} hideLabel />;
+}
diff --git a/components/settings/DashboardSettingsButton.module.css b/components/settings/DashboardSettingsButton.module.css
new file mode 100644
index 00000000..6e0d19c2
--- /dev/null
+++ b/components/settings/DashboardSettingsButton.module.css
@@ -0,0 +1,5 @@
+.buttonGroup {
+ display: flex;
+ place-items: center;
+ gap: 10px;
+}
diff --git a/components/settings/DateRangeSetting.js b/components/settings/DateRangeSetting.js
index 53dfe983..9c59d3ea 100644
--- a/components/settings/DateRangeSetting.js
+++ b/components/settings/DateRangeSetting.js
@@ -4,18 +4,19 @@ import DateFilter, { filterOptions } from 'components/common/DateFilter';
import Button from 'components/common/Button';
import useDateRange from 'hooks/useDateRange';
import { DEFAULT_DATE_RANGE } from 'lib/constants';
-import { getDateRange } from 'lib/date';
import styles from './DateRangeSetting.module.css';
-import useLocale from 'hooks/useLocale';
export default function DateRangeSetting() {
- const { locale } = useLocale();
const [dateRange, setDateRange] = useDateRange();
const { startDate, endDate, value } = dateRange;
const options = filterOptions.filter(e => e.value !== 'all');
+ function handleChange(value) {
+ setDateRange(value);
+ }
+
function handleReset() {
- setDateRange(getDateRange(DEFAULT_DATE_RANGE, locale));
+ setDateRange(DEFAULT_DATE_RANGE);
}
return (
@@ -25,7 +26,7 @@ export default function DateRangeSetting() {
value={value}
startDate={startDate}
endDate={endDate}
- onChange={setDateRange}
+ onChange={handleChange}
/>