Refactored settings components.

components/pages/dashboard/Dashboard.js

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import { Button, Loading } from 'react-basics';
+import { defineMessages, useIntl } from 'react-intl';
+import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
+import WebsiteChartList from 'components/pages/websites/WebsiteChartList';
+import DashboardSettingsButton from 'components/settings/DashboardSettingsButton';
+import useApi from 'hooks/useApi';
+import useRequireLogin from 'hooks/useRequireLogin';
+import useDashboard from 'store/dashboard';
+import DashboardEdit from './DashboardEdit';
+import styles from '../websites/WebsiteList.module.css';
+
+const messages = defineMessages({
+  dashboard: { id: 'label.dashboard', defaultMessage: 'Dashboard' },
+  more: { id: 'label.more', defaultMessage: 'More' },
+});
+
+export default function Dashboard({ userId }) {
+  const { user } = useRequireLogin();
+  const dashboard = useDashboard();
+  const { showCharts, limit, editing } = dashboard;
+  const [max, setMax] = useState(limit);
+  const { get, useQuery } = useApi();
+  const { data, isLoading } = useQuery(['websites'], () => get('/websites', { userId }));
+  const { formatMessage } = useIntl();
+
+  function handleMore() {
+    setMax(max + limit);
+  }
+
+  if (!user || isLoading) {
+    return <Loading />;
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <Page>
+      <PageHeader>
+        <div>{formatMessage(messages.dashboard)}</div>
+        {!editing && <DashboardSettingsButton />}
+      </PageHeader>
+      {editing && <DashboardEdit websites={data} />}
+      {!editing && <WebsiteChartList websites={data} showCharts={showCharts} limit={max} />}
+      {max < data.length && (
+        <Button className={styles.button} onClick={handleMore}>
+          {formatMessage(messages.more)}
+        </Button>
+      )}
+    </Page>
+  );
+}

components/pages/dashboard/DashboardEdit.js

@@ -0,0 +1,106 @@
+import { useState, useMemo } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+import classNames from 'classnames';
+import { Button } from 'react-basics';
+import { firstBy } from 'thenby';
+import useDashboard, { saveDashboard } from 'store/dashboard';
+import styles from './DashboardEdit.module.css';
+
+const messages = defineMessages({
+  save: { id: 'label.save', defaultMessage: 'Save' },
+  reset: { id: 'label.reset', defaultMessage: 'Reset' },
+  cancel: { id: 'label.cancel', defaultMessage: 'Cancel' },
+});
+
+const dragId = 'dashboard-website-ordering';
+
+export default function DashboardEdit({ websites }) {
+  const settings = useDashboard();
+  const { websiteOrder } = settings;
+  const { formatMessage } = useIntl();
+  const [order, setOrder] = useState(websiteOrder || []);
+
+  const ordered = useMemo(
+    () =>
+      websites
+        .map(website => ({ ...website, order: order.indexOf(website.id) }))
+        .sort(firstBy('order')),
+    [websites, order],
+  );
+
+  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);
+
+    setOrder(orderedWebsites.map(website => website?.id || 0));
+  }
+
+  function handleSave() {
+    saveDashboard({
+      editing: false,
+      websiteOrder: order,
+    });
+  }
+
+  function handleCancel() {
+    saveDashboard({ editing: false, websiteOrder });
+  }
+
+  function handleReset() {
+    setOrder([]);
+  }
+
+  return (
+    <>
+      <div className={styles.buttons}>
+        <Button onClick={handleSave} variant="action" size="small">
+          {formatMessage(messages.save)}
+        </Button>
+        <Button onClick={handleCancel} size="small">
+          {formatMessage(messages.cancel)}
+        </Button>
+        <Button onClick={handleReset} size="small">
+          {formatMessage(messages.reset)}
+        </Button>
+      </div>
+      <div className={styles.dragActive}>
+        <DragDropContext onDragEnd={handleWebsiteDrag}>
+          <Droppable droppableId={dragId}>
+            {(provided, snapshot) => (
+              <div
+                {...provided.droppableProps}
+                ref={provided.innerRef}
+                style={{ marginBottom: snapshot.isDraggingOver ? 260 : null }}
+              >
+                {ordered.map(({ id, name, domain }, index) => (
+                  <Draggable key={id} draggableId={`${dragId}-${id}`} index={index}>
+                    {(provided, snapshot) => (
+                      <div
+                        ref={provided.innerRef}
+                        className={classNames(styles.item, {
+                          [styles.active]: snapshot.isDragging,
+                        })}
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                      >
+                        <div className={styles.text}>
+                          <h1>{name}</h1>
+                          <h2>{domain}</h2>
+                        </div>
+                      </div>
+                    )}
+                  </Draggable>
+                ))}
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
+        </DragDropContext>
+      </div>
+    </>
+  );
+}

components/pages/dashboard/DashboardEdit.module.css

@@ -0,0 +1,40 @@
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.item {
+  padding: 5px 0;
+}
+
+.item h1 {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.item h2 {
+  font-size: 14px;
+  color: var(--base700);
+}
+
+.text {
+  padding: 20px;
+  border-radius: 5px;
+  border: 1px solid var(--base400);
+  background: var(--base50);
+}
+
+.active .text {
+  border-color: var(--base600);
+  box-shadow: 4px 4px 4px var(--base100);
+}
+
+.dragActive {
+  cursor: grab;
+}
+
+.dragActive:active {
+  cursor: grabbing;
+}