diff --git a/components/common/MenuButton.js b/components/common/MenuButton.js index eb8d62fe..efe150f0 100644 --- a/components/common/MenuButton.js +++ b/components/common/MenuButton.js @@ -11,6 +11,7 @@ function MenuButton({ value, options, buttonClassName, + buttonVariant, menuClassName, menuPosition = 'bottom', menuAlign = 'right', @@ -43,7 +44,7 @@ function MenuButton({ icon={icon} className={classNames(styles.button, buttonClassName, { [styles.open]: showMenu })} onClick={toggleMenu} - variant="light" + variant={buttonVariant} > {!hideLabel && (
{renderValue ? renderValue(selectedOption) : value}
diff --git a/components/metrics/ActiveUsers.js b/components/metrics/ActiveUsers.js index 41ab7694..b739861b 100644 --- a/components/metrics/ActiveUsers.js +++ b/components/metrics/ActiveUsers.js @@ -9,7 +9,8 @@ import styles from './ActiveUsers.module.css'; export default function ActiveUsers({ websiteId, className, value, interval = 60000 }) { const shareToken = useShareToken(); - const { data } = useFetch(!value && `/website/${websiteId}/active`, { + const url = value !== undefined && websiteId ? `/website/${websiteId}/active` : null; + const { data } = useFetch(url, { interval, headers: { [TOKEN_HEADER]: shareToken?.token }, }); diff --git a/components/pages/Dashboard.js b/components/pages/Dashboard.js new file mode 100644 index 00000000..4ac7f85d --- /dev/null +++ b/components/pages/Dashboard.js @@ -0,0 +1,46 @@ +import { useState } from 'react'; +import { FormattedMessage } from 'react-intl'; +import { useRouter } from 'next/router'; +import Page from 'components/layout/Page'; +import PageHeader from 'components/layout/PageHeader'; +import WebsiteList from 'components/pages/WebsiteList'; +import Button from 'components/common/Button'; +import DashboardSettingsButton from 'components/settings/DashboardSettingsButton'; +import useFetch from 'hooks/useFetch'; +import useStore from 'store/app'; +import styles from './WebsiteList.module.css'; + +const selector = state => state.dashboard; + +export default function Dashboard() { + const router = useRouter(); + const { id } = router.query; + const userId = id?.[0]; + const store = useStore(selector); + const { showCharts, limit } = store; + const [max, setMax] = useState(limit); + const { data } = useFetch('/websites', { params: { user_id: userId } }); + + function handleMore() { + setMax(max + limit); + } + + if (!data) { + return null; + } + + return ( + + +
Dashboard
+ + + + {max < data.length && ( + + )} + + ); +} diff --git a/components/pages/WebsiteList.js b/components/pages/WebsiteList.js index f2094f03..e2cba6b2 100644 --- a/components/pages/WebsiteList.js +++ b/components/pages/WebsiteList.js @@ -1,32 +1,13 @@ -import React, { useState } from 'react'; import { FormattedMessage } 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 useFetch from 'hooks/useFetch'; -import DashboardSettingsButton from 'components/settings/DashboardSettingsButton'; -import Button from 'components/common/Button'; -import useStore from 'store/app'; import Arrow from 'assets/arrow-right.svg'; import styles from './WebsiteList.module.css'; -const selector = state => state.dashboard; - -export default function WebsiteList({ userId }) { - const { data } = useFetch('/websites', { params: { user_id: userId } }); - const { showCharts, limit } = useStore(selector); - const [max, setMax] = useState(limit); - - function handleMore() { - setMax(max + limit); - } - - if (!data) { - return null; - } - - if (data.length === 0) { +export default function WebsiteList({ websites, showCharts, limit }) { + if (websites.length === 0) { return ( -
- -
- {data.map(({ website_id, name, domain }, index) => - index < max ? ( +
+ {websites.map(({ website_id, name, domain }, index) => + index < limit ? (
) : null, )} - {max < data.length && ( - - )} - +
); } diff --git a/components/pages/WebsiteList.module.css b/components/pages/WebsiteList.module.css index d9899574..fc6a94c2 100644 --- a/components/pages/WebsiteList.module.css +++ b/components/pages/WebsiteList.module.css @@ -7,17 +7,5 @@ .website:last-child { border-bottom: 0; - margin-bottom: 0; -} - -.menubar { - display: flex; - align-items: center; - justify-content: flex-end; - padding-top: 10px; -} - -.button { - align-self: center; - margin-bottom: 40px; + margin-bottom: 20px; } diff --git a/components/settings/DashboardSettingsButton.js b/components/settings/DashboardSettingsButton.js index 41dc3bf2..8c04aa00 100644 --- a/components/settings/DashboardSettingsButton.js +++ b/components/settings/DashboardSettingsButton.js @@ -2,7 +2,7 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; import MenuButton from 'components/common/MenuButton'; import Gear from 'assets/gear.svg'; -import useStore, { setDashboard } from 'store/app'; +import useStore, { setDashboard, defaultDashboardConfig } from 'store/app'; const selector = state => state.dashboard; @@ -18,7 +18,7 @@ export default function DashboardSettingsButton() { function handleSelect(value) { if (value === 'charts') { - setDashboard({ showCharts: !settings.showCharts }); + setDashboard({ ...defaultDashboardConfig, showCharts: !settings.showCharts }); } //setDashboard(value); } diff --git a/components/settings/LanguageButton.js b/components/settings/LanguageButton.js index 5cce137a..8df96a20 100644 --- a/components/settings/LanguageButton.js +++ b/components/settings/LanguageButton.js @@ -19,6 +19,7 @@ export default function LanguageButton() { options={menuOptions} value={locale} menuClassName={styles.menu} + buttonVariant="light" onSelect={handleSelect} hideLabel /> diff --git a/components/settings/UserButton.js b/components/settings/UserButton.js index cba96234..27d9890c 100644 --- a/components/settings/UserButton.js +++ b/components/settings/UserButton.js @@ -43,6 +43,7 @@ export default function UserButton() { } size="large" />} value={} size="small" />} + buttonVariant="light" options={menuOptions} onSelect={handleSelect} /> diff --git a/pages/dashboard/[[...id]].js b/pages/dashboard/[[...id]].js index d3ce1301..452a425e 100644 --- a/pages/dashboard/[[...id]].js +++ b/pages/dashboard/[[...id]].js @@ -1,14 +1,10 @@ import React from 'react'; -import { useRouter } from 'next/router'; import Layout from 'components/layout/Layout'; -import WebsiteList from 'components/pages/WebsiteList'; +import Dashboard from 'components/pages/Dashboard'; import useRequireLogin from 'hooks/useRequireLogin'; export default function DashboardPage() { const { loading } = useRequireLogin(); - const router = useRouter(); - const { id } = router.query; - const userId = id?.[0]; if (loading) { return null; @@ -16,7 +12,7 @@ export default function DashboardPage() { return ( - + ); } diff --git a/store/app.js b/store/app.js index 4182abed..6aa85fa6 100644 --- a/store/app.js +++ b/store/app.js @@ -9,7 +9,7 @@ import { } from 'lib/constants'; import { getItem } from 'lib/web'; -const defaultDashboardConfig = { +export const defaultDashboardConfig = { showCharts: true, limit: DEFAULT_WEBSITE_LIMIT, };