watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-13 17:15:37 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Updated query hooks for teams and websites.

Browse source
This commit is contained in:
Mike Cao 2024-01-29 01:32:05 -08:00
parent 9448aa3ab5
commit 2fa50892d8
61 changed files with 508 additions and 539 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/app/(main)/settings/websites/WebsiteSettings.tsx
View file

@ -1,5 +1,5 @@
'use client';
import { useContext, useEffect, useState, Key } from 'react';
import { useState, Key } from 'react';
import { Item, Tabs, useToasts, Button, Text, Icon, Icons, Loading } from 'react-basics';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
@ -8,56 +8,42 @@ import WebsiteEditForm from './[id]/WebsiteEditForm';
import WebsiteData from './[id]/WebsiteData';
import TrackingCode from './[id]/TrackingCode';
import ShareUrl from './[id]/ShareUrl';
import { useApi } from 'components/hooks';
import { useMessages } from 'components/hooks';
import SettingsContext from '../SettingsContext';
import { useWebsite, useMessages } from 'components/hooks';
import { touch } from 'store/cache';
export function WebsiteSettings({ websiteId, openExternal = false }) {
const router = useRouter();
const { formatMessage, labels, messages } = useMessages();
const { get, useQuery } = useApi();
const { showToast } = useToasts();
const { websitesUrl, websitesPath, settingsPath } = useContext(SettingsContext);
const { data, isLoading } = useQuery({
queryKey: ['website', websiteId],
queryFn: () => get(`${websitesUrl}/${websiteId}`),
enabled: !!websiteId,
gcTime: 0,
});
const [values, setValues] = useState(null);
const { data: website, isLoading } = useWebsite(websiteId, { gcTime: 0 });
const [tab, setTab] = useState<Key>('details');
const showSuccess = () => {
showToast({ message: formatMessage(messages.saved), variant: 'success' });
};
const handleSave = (data: any) => {
const handleSave = () => {
showSuccess();
setValues((state: any) => ({ ...state, ...data }));
touch('websites');
};
const handleReset = async (value: string) => {
if (value === 'delete') {
router.push(settingsPath);
router.push('/settings/websites');
} else if (value === 'reset') {
showSuccess();
}
};
useEffect(() => {
if (data) {
setValues(data);
}
}, [data]);
if (isLoading || !values) {
if (isLoading) {
return <Loading position="page" />;
}
return (
<>
<PageHeader title={values?.name}>
<Link href={`${websitesPath}/${websiteId}`} target={openExternal ? '_blank' : null}>
<PageHeader title={website?.name}>
<Link href={`/websites/${websiteId}`} target={openExternal ? '_blank' : null}>
<Button variant="primary">
<Icon>
<Icons.External />
@ -73,10 +59,10 @@ export function WebsiteSettings({ websiteId, openExternal = false }) {
<Item key="data">{formatMessage(labels.data)}</Item>
</Tabs>
{tab === 'details' && (
<WebsiteEditForm websiteId={websiteId} data={values} onSave={handleSave} />
<WebsiteEditForm websiteId={websiteId} data={website} onSave={handleSave} />
)}
{tab === 'tracking' && <TrackingCode websiteId={websiteId} />}
{tab === 'share' && <ShareUrl websiteId={websiteId} data={values} onSave={handleSave} />}
{tab === 'share' && <ShareUrl websiteId={websiteId} data={website} onSave={handleSave} />}
{tab === 'data' && <WebsiteData websiteId={websiteId} onSave={handleReset} />}
</>
);

4
src/app/(main)/settings/websites/Websites.tsx
View file

@ -1,10 +1,10 @@
'use client';
import { useUser } from 'components/hooks';
import { useLogin } from 'components/hooks';
import WebsitesDataTable from './WebsitesDataTable';
import WebsitesHeader from './WebsitesHeader';
export default function Websites() {
const { user } = useUser();
const { user } = useLogin();
return (
<>
<WebsitesHeader showActions={user.role !== 'view-only'} />

12
src/app/(main)/settings/websites/WebsitesTable.tsx
View file

@ -1,8 +1,7 @@
import { ReactNode } from 'react';
import Link from 'next/link';
import { Button, Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
import { useMessages } from 'components/hooks';
import { useUser } from 'components/hooks';
import { useMessages, useLogin } from 'components/hooks';
export interface WebsitesTableProps {
data: any[];
@ -22,7 +21,7 @@ export function WebsitesTable({
children,
}: WebsitesTableProps) {
const { formatMessage, labels } = useMessages();
const { user } = useUser();
const { user } = useLogin();
const breakpoint = useBreakpoint();
return (
@ -32,13 +31,12 @@ export function WebsitesTable({
{showActions && (
<GridColumn name="action" label=" " alignment="end">
{row => {
const { id } = row;
const isOwner = row.userId === user.id || row.teamId === teamId;
const { id, userId } = row;
return (
<>
{allowEdit && isOwner && (
<Link href={`/settings/${id}`}>
{allowEdit && !teamId && user.id === userId && (
<Link href={`/settings/websites/${id}`}>
<Button>
<Icon>
<Icons.Edit />

7
src/app/(main)/settings/websites/[id]/ShareUrl.tsx
View file

@ -10,21 +10,20 @@ import {
} from 'react-basics';
import { useContext, useEffect, useMemo, useRef, useState } from 'react';
import { getRandomChars } from 'next-basics';
import { useApi } from 'components/hooks';
import { useMessages } from 'components/hooks';
import { useApi, useMessages } from 'components/hooks';
import SettingsContext from '../../SettingsContext';
const generateId = () => getRandomChars(16);
export function ShareUrl({ websiteId, data, onSave }) {
const ref = useRef(null);
const { shareUrl, websitesUrl } = useContext(SettingsContext);
const { shareUrl } = useContext(SettingsContext);
const { formatMessage, labels, messages } = useMessages();
const { name, shareId } = data;
const [id, setId] = useState(shareId);
const { post, useMutation } = useApi();
const { mutate, error } = useMutation({
mutationFn: (data: any) => post(`${websitesUrl}/${websiteId}`, data),
mutationFn: (data: any) => post(`/websites/${websiteId}`, data),
});
const url = useMemo(
() => `${shareUrl}${process.env.basePath}/share/${id}/${encodeURIComponent(name)}`,

3
src/app/(main)/settings/websites/[id]/TrackingCode.tsx
View file

@ -1,6 +1,5 @@
import { TextArea } from 'react-basics';
import { useMessages } from 'components/hooks';
import { useConfig } from 'components/hooks';
import { useMessages, useConfig } from 'components/hooks';
import { useContext } from 'react';
import SettingsContext from '../../SettingsContext';

51
src/app/(main)/settings/websites/[id]/WebsiteDeleteForm.tsx
View file

@ -1,16 +1,7 @@
import {
Button,
Form,
FormRow,
FormButtons,
FormInput,
SubmitButton,
TextField,
} from 'react-basics';
import { useApi } from 'components/hooks';
import { useMessages } from 'components/hooks';
import { useApi, useMessages } from 'components/hooks';
import { useContext } from 'react';
import SettingsContext from '../../SettingsContext';
import TypeConfirmationForm from 'components/common/TypeConfirmationForm';
const CONFIRM_VALUE = 'DELETE';
@ -23,40 +14,32 @@ export function WebsiteDeleteForm({
onSave?: () => void;
onClose?: () => void;
}) {
const { formatMessage, labels, messages, FormattedMessage } = useMessages();
const { formatMessage, labels } = useMessages();
const { websitesUrl } = useContext(SettingsContext);
const { del, useMutation } = useApi();
const { mutate, error } = useMutation({
const { mutate, isPending, error } = useMutation({
mutationFn: (data: any) => del(`${websitesUrl}/${websiteId}`, data),
});
const handleSubmit = async (data: any) => {
mutate(data, {
const handleConfirm = async () => {
mutate(null, {
onSuccess: async () => {
onSave();
onClose();
onSave?.();
onClose?.();
},
});
};
return (
<Form onSubmit={handleSubmit} error={error}>
<p>
<FormattedMessage
{...messages.actionConfirmation}
values={{ confirmation: <b>{CONFIRM_VALUE}</b> }}
/>
</p>
<FormRow label={formatMessage(labels.confirm)}>
<FormInput name="confirmation" rules={{ validate: value => value === CONFIRM_VALUE }}>
<TextField autoComplete="off" />
</FormInput>
</FormRow>
<FormButtons flex>
<SubmitButton variant="danger">{formatMessage(labels.delete)}</SubmitButton>
<Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
</FormButtons>
</Form>
<TypeConfirmationForm
confirmationValue={CONFIRM_VALUE}
onConfirm={handleConfirm}
onClose={onClose}
isLoading={isPending}
error={error}
buttonLabel={formatMessage(labels.delete)}
buttonVariant="danger"
/>
);
}

55
src/app/(main)/settings/websites/[id]/WebsiteResetForm.tsx
View file

@ -1,16 +1,5 @@
import {
Button,
Form,
FormRow,
FormButtons,
FormInput,
SubmitButton,
TextField,
} from 'react-basics';
import { useApi } from 'components/hooks';
import { useMessages } from 'components/hooks';
import { useContext } from 'react';
import SettingsContext from '../../SettingsContext';
import { useApi, useMessages } from 'components/hooks';
import TypeConfirmationForm from 'components/common/TypeConfirmationForm';
const CONFIRM_VALUE = 'RESET';
@ -23,40 +12,30 @@ export function WebsiteResetForm({
onSave?: () => void;
onClose?: () => void;
}) {
const { formatMessage, labels, messages, FormattedMessage } = useMessages();
const { websitesUrl } = useContext(SettingsContext);
const { formatMessage, labels } = useMessages();
const { post, useMutation } = useApi();
const { mutate, error } = useMutation({
mutationFn: (data: any) => post(`${websitesUrl}/${websiteId}/reset`, data),
const { mutate, isPending, error } = useMutation({
mutationFn: (data: any) => post(`/websites/${websiteId}/reset`, data),
});
const handleSubmit = async (data: any) => {
mutate(data, {
const handleConfirm = async () => {
mutate(null, {
onSuccess: async () => {
onSave();
onClose();
onSave?.();
onClose?.();
},
});
};
return (
<Form onSubmit={handleSubmit} error={error}>
<p>
<FormattedMessage
{...messages.actionConfirmation}
values={{ confirmation: <b>{CONFIRM_VALUE}</b> }}
/>
</p>
<FormRow label={formatMessage(labels.confirm)}>
<FormInput name="confirm" rules={{ validate: value => value === CONFIRM_VALUE }}>
<TextField autoComplete="off" />
</FormInput>
</FormRow>
<FormButtons flex>
<SubmitButton variant="danger">{formatMessage(labels.reset)}</SubmitButton>
<Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
</FormButtons>
</Form>
<TypeConfirmationForm
confirmationValue={CONFIRM_VALUE}
onConfirm={handleConfirm}
onClose={onClose}
isLoading={isPending}
error={error}
buttonLabel={formatMessage(labels.reset)}
/>
);
}