Added new react basics provider.

This commit is contained in:
Mike Cao 2023-06-13 11:59:12 -07:00
parent 64c6d73b77
commit 6ee27affc4
13 changed files with 59 additions and 66 deletions

View file

@ -1,6 +1,6 @@
import { useContext } from 'react';
import { useRouter } from 'next/router';
import { Icon, LoadingButton, InlineEditField, useToast } from 'react-basics';
import { Icon, LoadingButton, InlineEditField, useToasts } from 'react-basics';
import PageHeader from 'components/layout/PageHeader';
import { useMessages, useApi } from 'hooks';
import { ReportContext } from './Report';
@ -10,7 +10,7 @@ import reportStyles from './reports.module.css';
export function ReportHeader({ icon }) {
const { report, updateReport } = useContext(ReportContext);
const { formatMessage, labels, messages } = useMessages();
const { toast, showToast } = useToast();
const { showToast } = useToasts();
const { post, useMutation } = useApi();
const router = useRouter();
const { mutate: create, isLoading: isCreating } = useMutation(data => post(`/reports`, data));
@ -75,7 +75,6 @@ export function ReportHeader({ icon }) {
onCommit={handleDescriptionChange}
/>
</div>
{toast}
</div>
);
}

View file

@ -1,11 +1,11 @@
import { Button, Icon, Text, useToast, ModalTrigger, Modal } from 'react-basics';
import { Button, Icon, Text, useToasts, ModalTrigger, Modal } from 'react-basics';
import PasswordEditForm from 'components/pages/settings/profile/PasswordEditForm';
import Icons from 'components/icons';
import useMessages from 'hooks/useMessages';
export function PasswordChangeButton() {
const { formatMessage, labels, messages } = useMessages();
const { toast, showToast } = useToast();
const { showToast } = useToasts();
const handleSave = () => {
showToast({ message: formatMessage(messages.saved), variant: 'success' });
@ -13,7 +13,6 @@ export function PasswordChangeButton() {
return (
<>
{toast}
<ModalTrigger>
<Button>
<Icon>

View file

@ -1,10 +1,10 @@
import { Loading, useToast } from 'react-basics';
import { Loading, useToasts } from 'react-basics';
import TeamMembersTable from 'components/pages/settings/teams/TeamMembersTable';
import useApi from 'hooks/useApi';
import useMessages from 'hooks/useMessages';
export function TeamMembers({ teamId, readOnly }) {
const { toast, showToast } = useToast();
const { showToast } = useToasts();
const { get, useQuery } = useApi();
const { formatMessage, messages } = useMessages();
const { data, isLoading, refetch } = useQuery(['teams:users', teamId], () =>
@ -22,7 +22,6 @@ export function TeamMembers({ teamId, readOnly }) {
return (
<>
{toast}
<TeamMembersTable onSave={handleSave} data={data} readOnly={readOnly} />
</>
);

View file

@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
import { Breadcrumbs, Item, Tabs, useToasts } from 'react-basics';
import Link from 'next/link';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
@ -17,7 +17,7 @@ export function TeamSettings({ teamId }) {
const [values, setValues] = useState(null);
const [tab, setTab] = useState('details');
const { get, useQuery } = useApi();
const { toast, showToast } = useToast();
const { showToast } = useToasts();
const { data, isLoading } = useQuery(
['team', teamId],
() => {
@ -44,7 +44,6 @@ export function TeamSettings({ teamId }) {
return (
<Page loading={isLoading || !values}>
{toast}
<PageHeader
title={
<Breadcrumbs>

View file

@ -7,7 +7,7 @@ import {
Modal,
ModalTrigger,
Text,
useToast,
useToasts,
} from 'react-basics';
import TeamWebsitesTable from 'components/pages/settings/teams/TeamWebsitesTable';
import TeamAddWebsiteForm from 'components/pages/settings/teams/TeamAddWebsiteForm';
@ -15,7 +15,7 @@ import useApi from 'hooks/useApi';
import useMessages from 'hooks/useMessages';
export function TeamWebsites({ teamId }) {
const { toast, showToast } = useToast();
const { showToast } = useToasts();
const { formatMessage, labels, messages } = useMessages();
const { get, useQuery } = useApi();
const { data, isLoading, refetch } = useQuery(['teams:websites', teamId], () =>
@ -48,7 +48,6 @@ export function TeamWebsites({ teamId }) {
return (
<div>
{toast}
<ActionForm description={formatMessage(messages.teamWebsitesInfo)}>{addButton}</ActionForm>
{hasData && <TeamWebsitesTable teamId={teamId} data={data} onSave={handleSave} />}
</div>

View file

@ -1,5 +1,5 @@
import { useState } from 'react';
import { Button, Icon, Modal, ModalTrigger, useToast, Text, Flexbox } from 'react-basics';
import { Button, Icon, Modal, ModalTrigger, useToasts, Text, Flexbox } from 'react-basics';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import TeamAddForm from 'components/pages/settings/teams/TeamAddForm';
import PageHeader from 'components/layout/PageHeader';
@ -16,7 +16,7 @@ export default function TeamsList() {
const { get, useQuery } = useApi();
const { data, isLoading, error } = useQuery(['teams', update], () => get(`/teams`));
const hasData = data && data.length !== 0;
const { toast, showToast } = useToast();
const { showToast } = useToasts();
const handleSave = () => {
setUpdate(state => state + 1);
@ -63,7 +63,6 @@ export default function TeamsList() {
return (
<Page loading={isLoading} error={error}>
{toast}
<PageHeader title={formatMessage(labels.teams)}>
{hasData && (
<Flexbox gap={10}>

View file

@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
import { Breadcrumbs, Item, Tabs, useToasts } from 'react-basics';
import Link from 'next/link';
import UserEditForm from 'components/pages/settings/users//UserEditForm';
import Page from 'components/layout/Page';
@ -14,7 +14,7 @@ export function UserSettings({ userId }) {
const [values, setValues] = useState(null);
const [tab, setTab] = useState('details');
const { get, useQuery } = useApi();
const { toast, showToast } = useToast();
const { showToast } = useToasts();
const { data, isLoading } = useQuery(
['user', userId],
() => {
@ -44,7 +44,6 @@ export function UserSettings({ userId }) {
return (
<Page loading={isLoading || !values}>
{toast}
<PageHeader
title={
<Breadcrumbs>

View file

@ -1,4 +1,4 @@
import { useToast } from 'react-basics';
import { useToasts } from 'react-basics';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
@ -15,7 +15,7 @@ export function UsersList() {
const { data, isLoading, error, refetch } = useQuery(['user'], () => get(`/users`), {
enabled: !!user,
});
const { toast, showToast } = useToast();
const { showToast } = useToasts();
const hasData = data && data.length !== 0;
const handleSave = () => {
@ -30,7 +30,6 @@ export function UsersList() {
return (
<Page loading={isLoading} error={error}>
{toast}
<PageHeader title={formatMessage(labels.users)}>
<UserAddButton onSave={handleSave} />
</PageHeader>

View file

@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
import { Breadcrumbs, Item, Tabs, useToast, Button, Text, Icon, Icons } from 'react-basics';
import { Breadcrumbs, Item, Tabs, useToasts, Button, Text, Icon, Icons } from 'react-basics';
import { useRouter } from 'next/router';
import Link from 'next/link';
import Page from 'components/layout/Page';
@ -17,7 +17,7 @@ export function WebsiteSettings({ websiteId }) {
const { formatMessage, labels, messages } = useMessages();
const { openExternal } = useConfig();
const { get, useQuery } = useApi();
const { toast, showToast } = useToast();
const { showToast } = useToasts();
const { data, isLoading } = useQuery(
['website', websiteId],
() => get(`/websites/${websiteId}`),
@ -51,7 +51,6 @@ export function WebsiteSettings({ websiteId }) {
return (
<Page loading={isLoading || !values}>
{toast}
<PageHeader
title={
<Breadcrumbs>

View file

@ -1,4 +1,4 @@
import { Button, Icon, Text, Modal, ModalTrigger, useToast, Icons } from 'react-basics';
import { Button, Icon, Text, Modal, ModalTrigger, useToasts, Icons } from 'react-basics';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
@ -17,7 +17,7 @@ export function WebsitesList() {
() => get(`/users/${user?.id}/websites`),
{ enabled: !!user },
);
const { toast, showToast } = useToast();
const { showToast } = useToasts();
const hasData = data && data.length !== 0;
const handleSave = async () => {
@ -41,7 +41,6 @@ export function WebsitesList() {
return (
<Page loading={isLoading} error={error}>
{toast}
<PageHeader title={formatMessage(labels.websites)}>{addButton}</PageHeader>
{hasData && <WebsitesTable data={data} />}
{!hasData && (