New Dashboard component.

This commit is contained in:
Mike Cao 2022-03-03 19:45:49 -08:00
parent 33c921a32f
commit 20622116a8
10 changed files with 64 additions and 57 deletions

View File

@ -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 && (
<div className={styles.text}>{renderValue ? renderValue(selectedOption) : value}</div>

View File

@ -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 },
});

View File

@ -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 (
<Page>
<PageHeader>
<div>Dashboard</div>
<DashboardSettingsButton />
</PageHeader>
<WebsiteList websites={data} showCharts={showCharts} limit={max} />
{max < data.length && (
<Button className={styles.button} onClick={handleMore}>
<FormattedMessage id="label.more" defaultMessage="More" />
</Button>
)}
</Page>
);
}

View File

@ -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 (
<Page>
<EmptyPlaceholder
@ -46,12 +27,9 @@ export default function WebsiteList({ userId }) {
}
return (
<Page>
<div className={styles.menubar}>
<DashboardSettingsButton />
</div>
{data.map(({ website_id, name, domain }, index) =>
index < max ? (
<div>
{websites.map(({ website_id, name, domain }, index) =>
index < limit ? (
<div key={website_id} className={styles.website}>
<WebsiteChart
websiteId={website_id}
@ -63,11 +41,6 @@ export default function WebsiteList({ userId }) {
</div>
) : null,
)}
{max < data.length && (
<Button className={styles.button} onClick={handleMore}>
<FormattedMessage id="label.more" defaultMessage="More" />
</Button>
)}
</Page>
</div>
);
}

View File

@ -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;
}

View File

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

View File

@ -19,6 +19,7 @@ export default function LanguageButton() {
options={menuOptions}
value={locale}
menuClassName={styles.menu}
buttonVariant="light"
onSelect={handleSelect}
hideLabel
/>

View File

@ -43,6 +43,7 @@ export default function UserButton() {
<MenuButton
icon={<Icon icon={<User />} size="large" />}
value={<Icon icon={<Chevron />} size="small" />}
buttonVariant="light"
options={menuOptions}
onSelect={handleSelect}
/>

View File

@ -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 (
<Layout>
<WebsiteList userId={userId} />
<Dashboard />
</Layout>
);
}

View File

@ -9,7 +9,7 @@ import {
} from 'lib/constants';
import { getItem } from 'lib/web';
const defaultDashboardConfig = {
export const defaultDashboardConfig = {
showCharts: true,
limit: DEFAULT_WEBSITE_LIMIT,
};