watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-04 04:37:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Refactored website ordering feature.

Browse source
This commit is contained in:
Mike Cao 2022-08-04 03:56:30 -07:00
parent 62dce0a8d1
commit 1d4aa7c535
96 changed files with 518 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

99
components/pages/WebsiteList.js
View file

@ -1,4 +1,3 @@
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
import { FormattedMessage } from 'react-intl';
import Link from 'components/common/Link';
import WebsiteChart from 'components/metrics/WebsiteChart';
@ -6,37 +5,14 @@ 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 { orderByWebsiteMap } from 'lib/format';
import { useMemo } from 'react';
import useStore, { setDashboard } from 'store/app';
const selector = state => state.dashboard;
export default function WebsiteList({ data, showCharts, limit }) {
const { websiteOrder } = useDashboard();
export default function WebsiteList({ websites, showCharts, limit }) {
const store = useStore(selector);
const { websiteOrdering, changeOrderMode } = store;
const ordered = useMemo(
() => orderByWebsiteMap(websites, websiteOrdering),
[websites, websiteOrdering],
);
const dragId = 'dashboard-website-ordering';
function handleWebsiteDrag({ destination, source }) {
if (!destination || destination.index === source.index) return;
const orderedWebsites = [...ordered];
const [removed] = orderedWebsites.splice(source.index, 1);
orderedWebsites.splice(destination.index, 0, removed);
setDashboard({
...store,
websiteOrdering: orderedWebsites
.map((i, k) => ({ [i.website_uuid]: k }))
.reduce((a, b) => ({ ...a, ...b })),
});
}
const websites = useMemo(() => orderByWebsiteMap(data, websiteOrder), [data, websiteOrder]);
if (websites.length === 0) {
return (
@ -58,60 +34,19 @@ export default function WebsiteList({ websites, showCharts, limit }) {
}
return (
<div className={changeOrderMode && styles.websiteDragActive}>
{changeOrderMode ? (
<DragDropContext onDragEnd={handleWebsiteDrag}>
<Droppable droppableId={dragId}>
{(provided, snapshot) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
style={{ marginBottom: snapshot.isDraggingOver ? 260 : null }}
>
{ordered.map(({ website_id, name, domain }, index) =>
index < limit ? (
<Draggable
key={website_id}
draggableId={`${dragId}-${website_id}`}
index={index}
>
{provided => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
className={styles.website}
>
<WebsiteChart
websiteId={website_id}
title={name}
domain={domain}
showChart={changeOrderMode ? false : showCharts}
showLink
/>
</div>
)}
</Draggable>
) : null,
)}
</div>
)}
</Droppable>
</DragDropContext>
) : (
ordered.map(({ website_id, name, domain }, index) =>
index < limit ? (
<div key={website_id} className={styles.website}>
<WebsiteChart
websiteId={website_id}
title={name}
domain={domain}
showChart={showCharts}
showLink
/>
</div>
) : null,
)
<div>
{websites.map(({ website_id, name, domain }, index) =>
index < limit ? (
<div key={website_id} className={styles.website}>
<WebsiteChart
websiteId={website_id}
title={name}
domain={domain}
showChart={showCharts}
showLink
/>
</div>
) : null,
)}
</div>
);