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 && (

View File

@ -95,7 +95,7 @@
"node-fetch": "^3.2.8",
"npm-run-all": "^4.1.5",
"react": "^18.2.0",
"react-basics": "^0.83.0",
"react-basics": "^0.84.0",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^18.2.0",
"react-error-boundary": "^4.0.4",

View File

@ -1,5 +1,6 @@
import { IntlProvider } from 'react-intl';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactBasicsProvider } from 'react-basics';
import Head from 'next/head';
import Script from 'next/script';
import { useRouter } from 'next/router';
@ -42,37 +43,39 @@ export default function App({ Component, pageProps }) {
textComponent={Wrapper}
onError={() => null}
>
<ErrorBoundary>
<Head>
<link rel="icon" href={`${basePath}/favicon.ico`} />
<link
rel="apple-touch-icon"
sizes="180x180"
href={`${basePath}/apple-touch-icon.png`}
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href={`${basePath}/favicon-32x32.png`}
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href={`${basePath}/favicon-16x16.png`}
/>
<link rel="manifest" href={`${basePath}/site.webmanifest`} />
<link rel="mask-icon" href={`${basePath}/safari-pinned-tab.svg`} color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex,nofollow" />
</Head>
<Component {...pageProps} />
{!pathname.includes('/share/') && <Script src={`${basePath}/telemetry.js`} />}
</ErrorBoundary>
<ReactBasicsProvider>
<ErrorBoundary>
<Head>
<link rel="icon" href={`${basePath}/favicon.ico`} />
<link
rel="apple-touch-icon"
sizes="180x180"
href={`${basePath}/apple-touch-icon.png`}
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href={`${basePath}/favicon-32x32.png`}
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href={`${basePath}/favicon-16x16.png`}
/>
<link rel="manifest" href={`${basePath}/site.webmanifest`} />
<link rel="mask-icon" href={`${basePath}/safari-pinned-tab.svg`} color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex,nofollow" />
</Head>
<Component {...pageProps} />
{!pathname.includes('/share/') && <Script src={`${basePath}/telemetry.js`} />}
</ErrorBoundary>
</ReactBasicsProvider>
</IntlProvider>
</QueryClientProvider>
);

View File

@ -8191,10 +8191,10 @@ rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-basics@^0.83.0:
version "0.83.0"
resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.83.0.tgz#bc4a962967383ecec20a0eb49b88c004c67a7f3a"
integrity sha512-3P74I1Tp8Ih8gw3xG65mB0aTzG0oTOYg72Gpfbd3igKjg/L1wgN6stWjIwzNP7mgWFc0FQ63BB13P7pL025bNQ==
react-basics@^0.84.0:
version "0.84.0"
resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.84.0.tgz#cfea2ae6b64d9318406a0c6cf0d5d9e8a0790a28"
integrity sha512-QWnUkw7kVbBK0Z1xvvsNgrUBlUI0FzL39jQAZR5EutE83BlkAtYeisXooPZk3PJuGHZzJvY6+JzMYmvALLjqnQ==
dependencies:
classnames "^2.3.1"
date-fns "^2.29.3"