Use useMessages hook everywhere.

This commit is contained in:
Mike Cao 2023-03-22 14:05:55 -07:00
parent f3e1f18e1b
commit 9ddb8b5d25
73 changed files with 180 additions and 275 deletions

View file

@ -1,6 +1,5 @@
import { useState } from 'react';
import { Button, Icon, Icons, Text, Flexbox } from 'react-basics';
import { useIntl } from 'react-intl';
import Link from 'next/link';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
@ -9,16 +8,16 @@ import DashboardSettingsButton from 'components/pages/dashboard/DashboardSetting
import DashboardEdit from 'components/pages/dashboard/DashboardEdit';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import useApi from 'hooks/useApi';
import { labels, messages } from 'components/messages';
import useDashboard from 'store/dashboard';
import useMessages from 'hooks/useMessages';
export default function Dashboard({ userId }) {
const { formatMessage, labels, messages } = useMessages();
const dashboard = useDashboard();
const { showCharts, limit, editing } = dashboard;
const [max, setMax] = useState(limit);
const { get, useQuery } = useApi();
const { data, isLoading, error } = useQuery(['websites'], () => get('/websites', { userId }));
const { formatMessage } = useIntl();
const hasData = data && data.length !== 0;
function handleMore() {

View file

@ -1,24 +1,18 @@
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 useMessages from 'hooks/useMessages';
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 { formatMessage, labels } = useMessages();
const [order, setOrder] = useState(websiteOrder || []);
const ordered = useMemo(
@ -58,13 +52,13 @@ export default function DashboardEdit({ websites }) {
<>
<div className={styles.buttons}>
<Button onClick={handleSave} variant="action" size="small">
{formatMessage(messages.save)}
{formatMessage(labels.save)}
</Button>
<Button onClick={handleCancel} size="small">
{formatMessage(messages.cancel)}
{formatMessage(labels.cancel)}
</Button>
<Button onClick={handleReset} size="small">
{formatMessage(messages.reset)}
{formatMessage(labels.reset)}
</Button>
</div>
<div className={styles.dragActive}>

View file

@ -1,24 +1,18 @@
import { defineMessages, useIntl } from 'react-intl';
import { Menu, Icon, Text, PopupTrigger, Popup, Item, Button } from 'react-basics';
import Icons from 'components/icons';
import { labels } from 'components/messages';
import { saveDashboard } from 'store/dashboard';
const messages = defineMessages({
toggleCharts: { id: 'message.toggle-charts', defaultMessage: 'Toggle charts' },
editDashboard: { id: 'message.edit-dashboard', defaultMessage: 'Edit dashboard' },
});
import useMessages from 'hooks/useMessages';
export default function DashboardSettingsButton() {
const { formatMessage } = useIntl();
const { formatMessage, labels } = useMessages();
const menuOptions = [
{
label: formatMessage(messages.toggleCharts),
label: formatMessage(labels.toggleCharts),
value: 'charts',
},
{
label: formatMessage(messages.editDashboard),
label: formatMessage(labels.editDashboard),
value: 'order',
},
];