watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-08 14:47:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Added new react basics provider.

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

5
components/pages/reports/ReportHeader.js
View file

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

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

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

5
components/pages/settings/teams/TeamSettings.js
View file

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

5
components/pages/settings/teams/TeamWebsites.js
View file

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

5
components/pages/settings/teams/TeamsList.js
View file

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

5
components/pages/settings/users/UserSettings.js
View file

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

5
components/pages/settings/users/UsersList.js
View file

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

5
components/pages/settings/websites/WebsiteSettings.js
View file

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

5
components/pages/settings/websites/WebsitesList.js
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 Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader'; import PageHeader from 'components/layout/PageHeader';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder'; import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
@ -17,7 +17,7 @@ export function WebsitesList() {
() => get(`/users/${user?.id}/websites`), () => get(`/users/${user?.id}/websites`),
{ enabled: !!user }, { enabled: !!user },
); );
const { toast, showToast } = useToast(); const { showToast } = useToasts();
const hasData = data && data.length !== 0; const hasData = data && data.length !== 0;
const handleSave = async () => { const handleSave = async () => {
@ -41,7 +41,6 @@ export function WebsitesList() {
return ( return (
<Page loading={isLoading} error={error}> <Page loading={isLoading} error={error}>
{toast}
<PageHeader title={formatMessage(labels.websites)}>{addButton}</PageHeader> <PageHeader title={formatMessage(labels.websites)}>{addButton}</PageHeader>
{hasData && <WebsitesTable data={data} />} {hasData && <WebsitesTable data={data} />}
{!hasData && ( {!hasData && (

2
package.json
View file

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

65
pages/_app.js
View file

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

8
yarn.lock
View file

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