Change dashboard websites to use ordered list

This commit is contained in:
Chris Walsh 2022-07-23 23:02:47 -07:00
parent 3926d3fe93
commit 5bd83b8127
No known key found for this signature in database
GPG Key ID: 28EE0CCA6032019E

View File

@ -5,8 +5,21 @@ import Page from 'components/layout/Page';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder'; import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import Arrow from 'assets/arrow-right.svg'; import Arrow from 'assets/arrow-right.svg';
import styles from './WebsiteList.module.css'; import styles from './WebsiteList.module.css';
import { orderByWebsiteMap } from 'lib/format';
import { useMemo } from 'react';
import useStore from 'store/app';
const selector = state => state.dashboard;
export default function WebsiteList({ websites, showCharts, limit }) { export default function WebsiteList({ websites, showCharts, limit }) {
const store = useStore(selector);
const { websiteOrdering } = store;
const ordered = useMemo(
() => orderByWebsiteMap(websites, websiteOrdering),
[websites, websiteOrdering],
);
if (websites.length === 0) { if (websites.length === 0) {
return ( return (
<Page> <Page>
@ -28,7 +41,7 @@ export default function WebsiteList({ websites, showCharts, limit }) {
return ( return (
<div> <div>
{websites.map(({ website_id, name, domain }, index) => {ordered.map(({ website_id, name, domain }, index) =>
index < limit ? ( index < limit ? (
<div key={website_id} className={styles.website}> <div key={website_id} className={styles.website}>
<WebsiteChart <WebsiteChart