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,5 +1,4 @@
import { useRef } from 'react';
import { useIntl } from 'react-intl';
import {
Form,
FormRow,
@ -10,10 +9,10 @@ import {
SubmitButton,
} from 'react-basics';
import useApi from 'hooks/useApi';
import { labels, getMessage } from 'components/messages';
import useMessages from 'hooks/useMessages';
export default function TeamJoinForm({ onSave, onClose }) {
const { formatMessage } = useIntl();
const { formatMessage, labels, getMessage } = useMessages();
const { post, useMutation } = useApi();
const { mutate, error } = useMutation(data => post('/teams/join', data));
const ref = useRef(null);
@ -28,7 +27,7 @@ export default function TeamJoinForm({ onSave, onClose }) {
};
return (
<Form ref={ref} onSubmit={handleSubmit} error={error && getMessage(error, formatMessage)}>
<Form ref={ref} onSubmit={handleSubmit} error={error && getMessage(error)}>
<FormRow label={formatMessage(labels.accessCode)}>
<FormInput name="accessCode" rules={{ required: formatMessage(labels.required) }}>
<TextField autoComplete="off" />

View file

@ -1,5 +1,4 @@
import { useRef } from 'react';
import { useIntl } from 'react-intl';
import {
Form,
FormRow,
@ -10,10 +9,10 @@ import {
SubmitButton,
} from 'react-basics';
import useApi from 'hooks/useApi';
import { labels } from 'components/messages';
import useMessages from 'hooks/useMessages';
export default function TeamAddForm({ onSave, onClose }) {
const { formatMessage } = useIntl();
const { formatMessage, labels } = useMessages();
const { post, useMutation } = useApi();
const { mutate, error, isLoading } = useMutation(data => post('/teams', data));
const ref = useRef(null);

View file

@ -1,10 +1,9 @@
import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
import { useIntl, FormattedMessage } from 'react-intl';
import { labels, messages } from 'components/messages';
import useApi from 'hooks/useApi';
import useMessages from 'hooks/useMessages';
export default function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
const { formatMessage } = useIntl();
const { formatMessage, labels, messages, FormattedMessage } = useMessages();
const { del, useMutation } = useApi();
const { mutate, error, isLoading } = useMutation(data => del(`/teams/${teamId}`, data));

View file

@ -8,16 +8,15 @@ import {
Button,
Flexbox,
} from 'react-basics';
import { useIntl } from 'react-intl';
import { getRandomChars } from 'next-basics';
import { useRef, useState } from 'react';
import useApi from 'hooks/useApi';
import { labels } from 'components/messages';
import useMessages from 'hooks/useMessages';
const generateId = () => getRandomChars(16);
export default function TeamEditForm({ teamId, data, onSave, readOnly }) {
const { formatMessage } = useIntl();
const { formatMessage, labels } = useMessages();
const { post, useMutation } = useApi();
const { mutate, error } = useMutation(data => post(`/teams/${teamId}`, data));
const ref = useRef(null);

View file

@ -1,13 +1,12 @@
import { messages } from 'components/messages';
import { Loading, useToast } from 'react-basics';
import TeamMembersTable from 'components/pages/settings/teams/TeamMembersTable';
import useApi from 'hooks/useApi';
import { Loading, useToast } from 'react-basics';
import { useIntl } from 'react-intl';
import useMessages from 'hooks/useMessages';
export default function TeamMembers({ teamId, readOnly }) {
const { toast, showToast } = useToast();
const { get, useQuery } = useApi();
const { formatMessage } = useIntl();
const { formatMessage, labels } = useMessages();
const { data, isLoading, refetch } = useQuery(['teams:users', teamId], () =>
get(`/teams/${teamId}/users`),
);
@ -18,7 +17,7 @@ export default function TeamMembers({ teamId, readOnly }) {
const handleSave = async () => {
await refetch();
showToast({ message: formatMessage(messages.saved), variant: 'success' });
showToast({ message: formatMessage(labels.saved), variant: 'success' });
};
return (

View file

@ -11,14 +11,13 @@ import {
Flexbox,
Text,
} from 'react-basics';
import { useIntl } from 'react-intl';
import { ROLES } from 'lib/constants';
import { labels } from 'components/messages';
import useUser from 'hooks/useUser';
import useApi from 'hooks/useApi';
import useMessages from 'hooks/useMessages';
export default function TeamMembersTable({ data = [], onSave, readOnly }) {
const { formatMessage } = useIntl();
const { formatMessage, labels } = useMessages();
const { user } = useUser();
const { del, useMutation } = useApi();
const { mutate } = useMutation(data => del(`/teamUsers/${data.teamUserId}`));

View file

@ -1,19 +1,18 @@
import { useEffect, useState } from 'react';
import { useIntl } from 'react-intl';
import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
import Link from 'next/link';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import { labels, messages } from 'components/messages';
import { ROLES } from 'lib/constants';
import useUser from 'hooks/useUser';
import useApi from 'hooks/useApi';
import useMessages from 'hooks/useMessages';
import TeamEditForm from './TeamEditForm';
import TeamMembers from './TeamMembers';
import TeamWebsites from './TeamWebsites';
export default function TeamSettings({ teamId }) {
const { formatMessage } = useIntl();
const { formatMessage, labels, messages } = useMessages();
const { user } = useUser();
const [values, setValues] = useState(null);
const [tab, setTab] = useState('details');

View file

@ -1,7 +1,3 @@
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import { labels, messages } from 'components/messages';
import TeamWebsitesTable from 'components/pages/settings/teams/TeamWebsitesTable';
import useApi from 'hooks/useApi';
import {
ActionForm,
Button,
@ -13,12 +9,15 @@ import {
Text,
useToast,
} from 'react-basics';
import { useIntl } from 'react-intl';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import TeamWebsitesTable from 'components/pages/settings/teams/TeamWebsitesTable';
import WebsiteAddTeamForm from 'components/pages/settings/teams/WebsiteAddTeamForm';
import useApi from 'hooks/useApi';
import useMessages from 'hooks/useMessages';
export default function TeamWebsites({ teamId }) {
const { toast, showToast } = useToast();
const { formatMessage } = useIntl();
const { formatMessage, labels, messages } = useMessages();
const { get, useQuery } = useApi();
const { data, isLoading, refetch } = useQuery(['teams:websites', teamId], () =>
get(`/teams/${teamId}/websites`),

View file

@ -12,13 +12,12 @@ import {
Icons,
Flexbox,
} from 'react-basics';
import { useIntl } from 'react-intl';
import { labels } from 'components/messages';
import useUser from 'hooks/useUser';
import useApi from 'hooks/useApi';
import useMessages from 'hooks/useMessages';
export default function TeamWebsitesTable({ data = [], onSave }) {
const { formatMessage } = useIntl();
const { formatMessage, labels } = useMessages();
const { user } = useUser();
const { del, useMutation } = useApi();
const { mutate } = useMutation(({ teamWebsiteId }) => del(`/teamWebsites/${teamWebsiteId}`));

View file

@ -1,18 +1,17 @@
import { useState } from 'react';
import { Button, Icon, Modal, ModalTrigger, useToast, Text, Flexbox } from 'react-basics';
import { useIntl } from 'react-intl';
import useApi from 'hooks/useApi';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import TeamAddForm from 'components/pages/settings/teams/TeamAddForm';
import PageHeader from 'components/layout/PageHeader';
import TeamsTable from 'components/pages/settings/teams/TeamsTable';
import Page from 'components/layout/Page';
import { labels, messages } from 'components/messages';
import Icons from 'components/icons';
import TeamJoinForm from './JoinTeamForm';
import useApi from 'hooks/useApi';
import useMessages from 'hooks/useMessages';
export default function TeamsList() {
const { formatMessage } = useIntl();
const { formatMessage, labels, messages } = useMessages();
const [update, setUpdate] = useState(0);
const { get, useQuery } = useApi();
const { data, isLoading, error } = useQuery(['teams', update], () => get(`/teams`));

View file

@ -1,6 +1,3 @@
import { labels } from 'components/messages';
import useUser from 'hooks/useUser';
import { ROLES } from 'lib/constants';
import Link from 'next/link';
import {
Button,
@ -17,11 +14,13 @@ import {
TableRow,
Text,
} from 'react-basics';
import { useIntl } from 'react-intl';
import TeamDeleteForm from './TeamDeleteForm';
import useMessages from 'hooks/useMessages';
import useUser from 'hooks/useUser';
import { ROLES } from 'lib/constants';
export default function TeamsTable({ data = [], onDelete }) {
const { formatMessage } = useIntl();
const { formatMessage, labels } = useMessages();
const { user } = useUser();
const columns = [

View file

@ -1,12 +1,11 @@
import { labels } from 'components/messages';
import useApi from 'hooks/useApi';
import { useRef, useState } from 'react';
import { Button, Dropdown, Form, FormButtons, FormRow, Item, SubmitButton } from 'react-basics';
import { useIntl } from 'react-intl';
import WebsiteTags from './WebsiteTags';
import useMessages from 'hooks/useMessages';
export default function WebsiteAddTeamForm({ teamId, onSave, onClose }) {
const { formatMessage } = useIntl();
const { formatMessage, labels } = useMessages();
const { get, post, useQuery, useMutation } = useApi();
const { mutate, error } = useMutation(data => post(`/teams/${teamId}/websites`, data));
const { data: websites } = useQuery(['websites'], () => get('/websites'));