Refactored website ordering feature.

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

View file

@ -1,57 +1,40 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { defineMessages, useIntl } from 'react-intl';
import MenuButton from 'components/common/MenuButton';
import Gear from 'assets/gear.svg';
import useStore, { setDashboard } from 'store/app';
import Button from 'components/common/Button';
import Check from 'assets/check.svg';
import styles from './DashboardSettingsButton.module.css';
import { saveDashboard } from 'store/dashboard';
const selector = state => state.dashboard;
const messages = defineMessages({
toggleCharts: { id: 'message.toggle-charts', defaultMessage: 'Toggle charts' },
editDashboard: { id: 'message.edit-dashboard', defaultMessage: 'Edit dashboard' },
});
export default function DashboardSettingsButton() {
const settings = useStore(selector);
const { formatMessage } = useIntl();
const menuOptions = [
{
label: <FormattedMessage id="message.toggle-charts" defaultMessage="Toggle charts" />,
label: formatMessage(messages.toggleCharts),
value: 'charts',
},
{
label: <FormattedMessage id="message.edit-dashboard" defaultMessage="Edit dashboard" />,
label: formatMessage(messages.editDashboard),
value: 'order',
},
];
function handleSelect(value) {
if (value === 'charts') {
setDashboard({ ...settings, showCharts: !settings.showCharts });
saveDashboard(state => {
const bs = { showCharts: !state.showCharts };
console.log('WTF', { state, bs });
return bs;
});
}
if (value === 'order') {
setDashboard({ ...settings, changeOrderMode: !settings.changeOrderMode });
saveDashboard({ editing: true });
}
//setDashboard(value);
}
function handleExitChangeOrderMode() {
setDashboard({ ...settings, changeOrderMode: !settings.changeOrderMode });
}
function resetWebsiteOrder() {
setDashboard({ ...settings, websiteOrdering: {} });
}
if (settings.changeOrderMode)
return (
<div className={styles.buttonGroup}>
<Button onClick={resetWebsiteOrder} size="small">
<FormattedMessage id="label.reset-order" defaultMessage="Reset order" />
</Button>
<Button onClick={handleExitChangeOrderMode} size="small" icon={<Check />}>
<FormattedMessage id="label.done" defaultMessage="Done" />
</Button>
</div>
);
return <MenuButton icon={<Gear />} options={menuOptions} onSelect={handleSelect} hideLabel />;
}