m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-11-22 01:46:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://github.com/umami-software/umami into dev

Browse Source
This commit is contained in:
Brian Cao 2023-12-03 19:52:46 -08:00
commit 260f03cda4
183 changed files with 1136 additions and 708 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
next.config.js
View File

@ -9,38 +9,21 @@ const contentSecurityPolicy = [
`script-src 'self' 'unsafe-eval' 'unsafe-inline'`,
`style-src 'self' 'unsafe-inline'`,
`connect-src 'self' api.umami.is`,
`frame-src *`,
`frame-ancestors 'self' ${process.env.ALLOWED_FRAME_URLS || ''}`,
];
const cspHeader = (values = []) => ({
key: 'Content-Security-Policy',
value: values
.join(';')
.replace(/\s{2,}/g, ' ')
.trim(),
});
const headers = [
{
key: 'X-DNS-Prefetch-Control',
value: 'on',
},
{
key: 'X-Frame-Options',
value: 'SAMEORIGIN',
key: 'Content-Security-Policy',
value: contentSecurityPolicy
.join(';')
.replace(/\s{2,}/g, ' ')
.trim(),
},
cspHeader(contentSecurityPolicy),
];
const shareHeaders = [
{
key: 'X-DNS-Prefetch-Control',
value: 'on',
},
cspHeader([
...contentSecurityPolicy,
`frame-ancestors 'self' ${process.env.ALLOWED_FRAME_URLS || ''}`,
]),
];
if (process.env.FORCE_SSL) {
@ -142,10 +125,6 @@ const config = {
source: '/:path*',
headers,
},
{
source: '/share/:path*',
headers: shareHeaders,
},
];
},
async rewrites() {

10
package.json
View File

@ -66,7 +66,7 @@
"@prisma/client": "5.6.0",
"@prisma/extension-read-replicas": "^0.3.0",
"@react-spring/web": "^9.7.3",
"@tanstack/react-query": "^4.33.0",
"@tanstack/react-query": "^5.12.2",
"@umami/prisma-client": "^0.8.0",
"@umami/redis-client": "^0.18.0",
"chalk": "^4.1.1",
@ -94,12 +94,12 @@
"maxmind": "^4.3.6",
"moment-timezone": "^0.5.35",
"next": "13.5.6",
"next-basics": "^0.37.0",
"next-basics": "^0.39.0",
"node-fetch": "^3.2.8",
"npm-run-all": "^4.1.5",
"prisma": "5.6.0",
"react": "^18.2.0",
"react-basics": "^0.109.0",
"react-basics": "^0.114.0",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^18.2.0",
"react-error-boundary": "^4.0.4",
@ -127,8 +127,8 @@
"@svgr/rollup": "^8.1.0",
"@svgr/webpack": "^8.1.0",
"@types/node": "^20.9.0",
"@types/react": "^18.2.37",
"@types/react-dom": "^18.2.15",
"@types/react": "^18.2.41",
"@types/react-dom": "^18.2.17",
"@typescript-eslint/eslint-plugin": "^6.7.3",
"@typescript-eslint/parser": "^6.7.3",
"cross-env": "^7.0.3",

0
src/app/(main)/NavBar.js → src/app/(main)/NavBar.tsx
View File

0
src/app/(main)/UpdateNotice.js → src/app/(main)/UpdateNotice.tsx
View File

37
src/app/(main)/console/TestConsole.js → src/app/(main)/console/TestConsole.tsx
View File

@ -1,30 +1,33 @@
'use client';
import { Button } from 'react-basics';
import Head from 'next/head';
import Link from 'next/link';
import Script from 'next/script';
import WebsiteSelect from 'components/input/WebsiteSelect';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import EventsChart from 'components/metrics/EventsChart';
import WebsiteChart from '../../(main)/websites/[id]/WebsiteChart';
import WebsiteChart from 'app/(main)/websites/[id]/WebsiteChart';
import useApi from 'components/hooks/useApi';
import Head from 'next/head';
import Link from 'next/link';
import useNavigation from 'components/hooks/useNavigation';
import Script from 'next/script';
import { Button } from 'react-basics';
import styles from './TestConsole.module.css';
export function TestConsole({ websiteId }) {
export function TestConsole({ websiteId }: { websiteId: string }) {
const { get, useQuery } = useApi();
const { data, isLoading, error } = useQuery(['websites:me'], () => get('/me/websites'));
const { data, isLoading, error } = useQuery({
queryKey: ['websites:me'],
queryFn: () => get('/me/websites'),
});
const { router } = useNavigation();
function handleChange(value) {
function handleChange(value: string) {
router.push(`/console/${value}`);
}
function handleClick() {
window.umami.track({ url: '/page-view', referrer: 'https://www.google.com' });
window.umami.track('track-event-no-data');
window.umami.track('track-event-with-data', {
window['umami'].track({ url: '/page-view', referrer: 'https://www.google.com' });
window['umami'].track('track-event-no-data');
window['umami'].track('track-event-with-data', {
test: 'test-data',
boolean: true,
booleanError: 'true',
@ -44,7 +47,7 @@ export function TestConsole({ websiteId }) {
}
function handleIdentifyClick() {
window.umami.identify({
window['umami'].identify({
userId: 123,
name: 'brian',
number: Math.random() * 100,
@ -71,7 +74,7 @@ export function TestConsole({ websiteId }) {
const website = data?.data.find(({ id }) => websiteId === id);
return (
<Page loading={isLoading} error={error}>
<Page isLoading={isLoading} error={error}>
<Head>
<title>{website ? `${website.name} | Umami Console` : 'Umami Console'}</title>
</Head>
@ -113,7 +116,7 @@ export function TestConsole({ websiteId }) {
</div>
<div>
<div className={styles.header}>Click events</div>
<Button id="send-event-button" data-umami-event="button-click" variant="action">
<Button id="send-event-button" data-umami-event="button-click" variant="primary">
Send event
</Button>
<p />
@ -122,18 +125,18 @@ export function TestConsole({ websiteId }) {
data-umami-event="button-click"
data-umami-event-name="bob"
data-umami-event-id="123"
variant="action"
variant="primary"
>
Send event with data
</Button>
</div>
<div>
<div className={styles.header}>Javascript events</div>
<Button id="manual-button" variant="action" onClick={handleClick}>
<Button id="manual-button" variant="primary" onClick={handleClick}>
Run script
</Button>
<p />
<Button id="manual-button" variant="action" onClick={handleIdentifyClick}>
<Button id="manual-button" variant="primary" onClick={handleIdentifyClick}>
Run identify
</Button>
</div>

27
src/app/(main)/dashboard/Dashboard.js → src/app/(main)/dashboard/Dashboard.tsx
View File

@ -11,22 +11,31 @@ import useApi from 'components/hooks/useApi';
import useDashboard from 'store/dashboard';
import useMessages from 'components/hooks/useMessages';
import useLocale from 'components/hooks/useLocale';
import useApiFilter from 'components/hooks/useApiFilter';
import useFilterQuery from 'components/hooks/useFilterQuery';
export function Dashboard() {
const { formatMessage, labels, messages } = useMessages();
const { showCharts, editing } = useDashboard();
const { dir } = useLocale();
const { get, useQuery } = useApi();
const { page, handlePageChange } = useApiFilter();
const { get } = useApi();
const pageSize = 10;
const { data: result, isLoading } = useQuery(['websites', page, pageSize], () =>
get('/websites', { includeTeams: 1, page, pageSize }),
);
const { data, count } = result || {};
const hasData = data && data?.length !== 0;
if (isLoading) {
const { query, params, setParams, result } = useFilterQuery({
queryKey: ['dashboard:websites'],
queryFn: (params: any) => {
return get(`/websites`, { ...params, includeTeams: true, pageSize });
},
});
const handlePageChange = (page: number) => {
setParams({ ...params, page });
};
const { data, count } = result || {};
const hasData = !!(data as any)?.length;
const { page } = params;
if (query.isLoading) {
return <Loading size="lg" />;
}

11
src/app/(main)/dashboard/DashboardEdit.js → src/app/(main)/dashboard/DashboardEdit.tsx
View File

@ -17,7 +17,10 @@ export function DashboardEdit() {
const { formatMessage, labels } = useMessages();
const [order, setOrder] = useState(websiteOrder || []);
const { get, useQuery } = useApi();
const { data: result } = useQuery(['websites'], () => get('/websites', { includeTeams: 1 }));
const { data: result } = useQuery({
queryKey: ['websites'],
queryFn: () => get('/websites', { includeTeams: 1 }),
});
const { data: websites } = result || {};
const ordered = useMemo(() => {
@ -57,13 +60,13 @@ export function DashboardEdit() {
return (
<>
<div className={styles.buttons}>
<Button onClick={handleSave} variant="action" size="small">
<Button onClick={handleSave} variant="primary" size="sm">
{formatMessage(labels.save)}
</Button>
<Button onClick={handleCancel} size="small">
<Button onClick={handleCancel} size="sm">
{formatMessage(labels.cancel)}
</Button>
<Button onClick={handleReset} size="small">
<Button onClick={handleReset} size="sm">
{formatMessage(labels.reset)}
</Button>
</div>

0
src/app/(main)/dashboard/DashboardSettingsButton.js → src/app/(main)/dashboard/DashboardSettingsButton.tsx
View File

14
src/app/(main)/reports/ReportDeleteButton.js → src/app/(main)/reports/ReportDeleteButton.tsx
View File

@ -3,13 +3,21 @@ import ConfirmDeleteForm from 'components/common/ConfirmDeleteForm';
import { useApi, useMessages } from 'components/hooks';
import { setValue } from 'store/cache';
export function ReportDeleteButton({ reportId, reportName, onDelete }) {
export function ReportDeleteButton({
reportId,
reportName,
onDelete,
}: {
reportId: string;
reportName: string;
onDelete?: () => void;
}) {
const { formatMessage, labels } = useMessages();
const { del, useMutation } = useApi();
const { mutate } = useMutation(reportId => del(`/reports/${reportId}`));
const handleConfirm = close => {
mutate(reportId, {
const handleConfirm = (close: () => void) => {
mutate(reportId as any, {
onSuccess: () => {
setValue('reports', Date.now());
onDelete?.();

10
src/app/(main)/reports/ReportsDataTable.tsx
View File

@ -1,16 +1,10 @@
'use client';
import { useApi } from 'components/hooks';
import { useReports } from 'components/hooks';
import ReportsTable from './ReportsTable';
import useFilterQuery from 'components/hooks/useFilterQuery';
import DataTable from 'components/common/DataTable';
import useCache from 'store/cache';
export default function ReportsDataTable({ websiteId }: { websiteId?: string }) {
const { get } = useApi();
const modified = useCache(state => (state as any)?.reports);
const queryResult = useFilterQuery(['reports', { websiteId, modified }], params =>
get(websiteId ? `/websites/${websiteId}/reports` : `/reports`, params),
);
const queryResult = useReports(websiteId);
return (
<DataTable queryResult={queryResult}>

0
src/app/(main)/reports/ReportsHeader.js → src/app/(main)/reports/ReportsHeader.tsx
View File

2
src/app/(main)/reports/ReportsTable.js → src/app/(main)/reports/ReportsTable.tsx
View File

@ -5,7 +5,7 @@ import useUser from 'components/hooks/useUser';
import { REPORT_TYPES } from 'lib/constants';
import ReportDeleteButton from './ReportDeleteButton';
export function ReportsTable({ data = [], showDomain }) {
export function ReportsTable({ data = [], showDomain }: { data: any[]; showDomain?: boolean }) {
const { formatMessage, labels } = useMessages();
const { user } = useUser();
const breakpoint = useBreakpoint();

13
src/app/(main)/reports/[id]/BaseParameters.js → src/app/(main)/reports/[id]/BaseParameters.tsx
View File

@ -6,12 +6,19 @@ import WebsiteSelect from 'components/input/WebsiteSelect';
import { useMessages } from 'components/hooks';
import { ReportContext } from './Report';
export interface BaseParametersProps {
showWebsiteSelect?: boolean;
allowWebsiteSelect?: boolean;
showDateSelect?: boolean;
allowDateSelect?: boolean;
}
export function BaseParameters({
showWebsiteSelect = true,
allowWebsiteSelect = true,
showDateSelect = true,
allowDateSelect = true,
}) {
}: BaseParametersProps) {
const { report, updateReport } = useContext(ReportContext);
const { formatMessage, labels } = useMessages();
@ -19,11 +26,11 @@ export function BaseParameters({
const { websiteId, dateRange } = parameters || {};
const { value, startDate, endDate } = dateRange || {};
const handleWebsiteSelect = websiteId => {
const handleWebsiteSelect = (websiteId: string) => {
updateReport({ websiteId, parameters: { websiteId } });
};
const handleDateChange = value => {
const handleDateChange = (value: string) => {
updateReport({ parameters: { dateRange: { ...parseDateRange(value) } } });
};

18
src/app/(main)/reports/[id]/FieldAddForm.js → src/app/(main)/reports/[id]/FieldAddForm.tsx
View File

@ -7,10 +7,20 @@ import FieldAggregateForm from './FieldAggregateForm';
import FieldFilterForm from './FieldFilterForm';
import styles from './FieldAddForm.module.css';
export function FieldAddForm({ fields = [], group, onAdd, onClose }) {
const [selected, setSelected] = useState();
export function FieldAddForm({
fields = [],
group,
onAdd,
onClose,
}: {
fields?: any[];
group: string;
onAdd: (group: string, value: string) => void;
onClose: () => void;
}) {
const [selected, setSelected] = useState<{ name: string; type: string; value: string }>();
const handleSelect = value => {
const handleSelect = (value: any) => {
const { type } = value;
if (group === REPORT_PARAMETERS.groups || type === 'array' || type === 'boolean') {
@ -22,7 +32,7 @@ export function FieldAddForm({ fields = [], group, onAdd, onClose }) {
setSelected(value);
};
const handleSave = value => {
const handleSave = (value: any) => {
onAdd(group, value);
onClose();
};

12
src/app/(main)/reports/[id]/FieldAggregateForm.js → src/app/(main)/reports/[id]/FieldAggregateForm.tsx
View File

@ -1,7 +1,15 @@
import { Form, FormRow, Menu, Item } from 'react-basics';
import { useMessages } from 'components/hooks';
export default function FieldAggregateForm({ name, type, onSelect }) {
export default function FieldAggregateForm({
name,
type,
onSelect,
}: {
name: string;
type: string;
onSelect: (key: any) => void;
}) {
const { formatMessage, labels } = useMessages();
const options = {
@ -27,7 +35,7 @@ export default function FieldAggregateForm({ name, type, onSelect }) {
const items = options[type];
const handleSelect = value => {
const handleSelect = (value: any) => {
onSelect({ name, type, value });
};

19
src/app/(main)/reports/[id]/FieldFilterForm.js → src/app/(main)/reports/[id]/FieldFilterForm.tsx
View File

@ -3,6 +3,15 @@ import { Form, FormRow, Item, Flexbox, Dropdown, Button } from 'react-basics';
import { useMessages, useFilters, useFormat, useLocale } from 'components/hooks';
import styles from './FieldFilterForm.module.css';
export interface FieldFilterFormProps {
name: string;
label?: string;
type: string;
values?: any[];
onSelect?: (key: any) => void;
allowFilterSelect?: boolean;
}
export default function FieldFilterForm({
name,
label,
@ -10,7 +19,7 @@ export default function FieldFilterForm({
values,
onSelect,
allowFilterSelect = true,
}) {
}: FieldFilterFormProps) {
const { formatMessage, labels } = useMessages();
const [filter, setFilter] = useState('eq');
const [value, setValue] = useState();
@ -21,7 +30,7 @@ export default function FieldFilterForm({
const formattedValues = useMemo(() => {
const formatted = {};
const format = val => {
const format = (val: string) => {
formatted[val] = formatValue(val, name);
return formatted[val];
};
@ -56,7 +65,7 @@ export default function FieldFilterForm({
items={filters}
value={filter}
renderValue={renderFilterValue}
onChange={setFilter}
onChange={(key: any) => setFilter(key)}
>
{({ value, label }) => {
return <Item key={value}>{label}</Item>;
@ -69,12 +78,12 @@ export default function FieldFilterForm({
items={values}
value={value}
renderValue={renderValue}
onChange={setValue}
onChange={(key: any) => setValue(key)}
style={{
minWidth: '250px',
}}
>
{value => {
{(value: string) => {
return <Item key={value}>{formattedValues[value]}</Item>;
}}
</Dropdown>

17
src/app/(main)/reports/[id]/FieldSelectForm.js → src/app/(main)/reports/[id]/FieldSelectForm.tsx
View File

@ -1,15 +1,26 @@
import { Menu, Item, Form, FormRow } from 'react-basics';
import { useMessages } from 'components/hooks';
import styles from './FieldSelectForm.module.css';
import { Key } from 'react';
export default function FieldSelectForm({ items, onSelect, showType = true }) {
export interface FieldSelectFormProps {
fields?: any[];
onSelect?: (key: any) => void;
showType?: boolean;
}
export default function FieldSelectForm({
fields = [],
onSelect,
showType = true,
}: FieldSelectFormProps) {
const { formatMessage, labels } = useMessages();
return (
<Form>
<FormRow label={formatMessage(labels.fields)}>
<Menu className={styles.menu} onSelect={key => onSelect(items[key])}>
{items.map(({ name, label, type }, index) => {
<Menu className={styles.menu} onSelect={key => onSelect(fields[key as any])}>
{fields.map(({ name, label, type }: any, index: Key) => {
return (
<Item key={index} className={styles.item}>
<div>{label || name}</div>

30
src/app/(main)/reports/[id]/FilterSelectForm.js → src/app/(main)/reports/[id]/FilterSelectForm.tsx
View File

@ -5,29 +5,41 @@ import FieldSelectForm from './FieldSelectForm';
import FieldFilterForm from './FieldFilterForm';
import { useApi } from 'components/hooks';
function useValues(websiteId, type) {
function useValues(websiteId: string, type: string) {
const now = Date.now();
const { get, useQuery } = useApi();
const { data, error, isLoading } = useQuery(
['websites:values', websiteId, type],
() =>
const { data, error, isLoading } = useQuery({
queryKey: ['websites:values', websiteId, type],
queryFn: () =>
get(`/websites/${websiteId}/values`, {
type,
startAt: +subDays(now, 90),
endAt: now,
}),
{ enabled: !!(websiteId && type) },
);
enabled: !!(websiteId && type),
});
return { data, error, isLoading };
}
export default function FilterSelectForm({ websiteId, items, onSelect, allowFilterSelect }) {
const [field, setField] = useState();
export interface FilterSelectFormProps {
websiteId: string;
items: any[];
onSelect?: (key: any) => void;
allowFilterSelect?: boolean;
}
export default function FilterSelectForm({
websiteId,
items,
onSelect,
allowFilterSelect,
}: FilterSelectFormProps) {
const [field, setField] = useState<{ name: string; label: string; type: string }>();
const { data, isLoading } = useValues(websiteId, field?.name);
if (!field) {
return <FieldSelectForm items={items} onSelect={setField} showType={false} />;
return <FieldSelectForm fields={items} onSelect={setField} showType={false} />;
}
if (isLoading) {

9
src/app/(main)/reports/[id]/ParameterList.js → src/app/(main)/reports/[id]/ParameterList.tsx
View File

@ -1,10 +1,17 @@
import { ReactNode } from 'react';
import { Icon, TooltipPopup } from 'react-basics';
import Icons from 'components/icons';
import Empty from 'components/common/Empty';
import { useMessages } from 'components/hooks';
import styles from './ParameterList.module.css';
export function ParameterList({ items = [], children, onRemove }) {
export interface ParameterListProps {
items: any[];
children?: ReactNode | ((item: any) => ReactNode);
onRemove: (index: number, e: any) => void;
}
export function ParameterList({ items = [], children, onRemove }: ParameterListProps) {
const { formatMessage, labels } = useMessages();
return (

11
src/app/(main)/reports/[id]/PopupForm.js → src/app/(main)/reports/[id]/PopupForm.tsx
View File

@ -1,7 +1,16 @@
import { CSSProperties, ReactNode } from 'react';
import classNames from 'classnames';
import styles from './PopupForm.module.css';
export function PopupForm({ className, style, children }) {
export function PopupForm({
className,
style,
children,
}: {
className?: string;
style?: CSSProperties;
children: ReactNode;
}) {
return (
<div
className={classNames(styles.form, className)}

16
src/app/(main)/reports/[id]/Report.js → src/app/(main)/reports/[id]/Report.tsx
View File

@ -1,11 +1,19 @@
'use client';
import { createContext } from 'react';
import { createContext, ReactNode } from 'react';
import { useReport } from 'components/hooks';
import styles from './Report.module.css';
import classNames from 'classnames';
export const ReportContext = createContext(null);
export function Report({ reportId, defaultParameters, children, ...props }) {
export interface ReportProps {
reportId: string;
defaultParameters: { [key: string]: any };
children: ReactNode;
className?: string;
}
export function Report({ reportId, defaultParameters, children, className }: ReportProps) {
const report = useReport(reportId, defaultParameters);
if (!report) {
@ -14,9 +22,7 @@ export function Report({ reportId, defaultParameters, children, ...props }) {
return (
<ReportContext.Provider value={{ ...report }}>
<div {...props} className={styles.container}>
{children}
</div>
<div className={classNames(styles.container, className)}>{children}</div>
</ReportContext.Provider>
);
}

0
src/app/(main)/reports/[id]/ReportBody.js → src/app/(main)/reports/[id]/ReportBody.tsx
View File

7
src/app/(main)/reports/[id]/ReportDetails.js → src/app/(main)/reports/[id]/ReportDetails.tsx
View File

@ -12,9 +12,12 @@ const reports = {
retention: RetentionReport,
};
export default function ReportDetails({ reportId }) {
export default function ReportDetails({ reportId }: { reportId: string }) {
const { get, useQuery } = useApi();
const { data: report } = useQuery(['reports', reportId], () => get(`/reports/${reportId}`));
const { data: report } = useQuery({
queryKey: ['reports', reportId],
queryFn: () => get(`/reports/${reportId}`),
});
if (!report) {
return null;

12
src/app/(main)/reports/[id]/ReportHeader.js → src/app/(main)/reports/[id]/ReportHeader.tsx
View File

@ -12,8 +12,10 @@ export function ReportHeader({ icon }) {
const { showToast } = useToasts();
const { post, useMutation } = useApi();
const router = useRouter();
const { mutate: create, isLoading: isCreating } = useMutation(data => post(`/reports`, data));
const { mutate: update, isLoading: isUpdating } = useMutation(data =>
const { mutate: create, isLoading: isCreating } = useMutation((data: any) =>
post(`/reports`, data),
);
const { mutate: update, isLoading: isUpdating } = useMutation((data: any) =>
post(`/reports/${data.id}`, data),
);
@ -26,7 +28,7 @@ export function ReportHeader({ icon }) {
create(report, {
onSuccess: async ({ id }) => {
showToast({ message: formatMessage(messages.saved), variant: 'success' });
router.push(`/reports/${id}`, null, { shallow: true });
router.push(`/reports/${id}`);
},
});
} else {
@ -38,11 +40,11 @@ export function ReportHeader({ icon }) {
}
};
const handleNameChange = name => {
const handleNameChange = (name: string) => {
updateReport({ name: name || defaultName });
};
const handleDescriptionChange = description => {
const handleDescriptionChange = (description: string) => {
updateReport({ description });
};

0
src/app/(main)/reports/[id]/ReportMenu.js → src/app/(main)/reports/[id]/ReportMenu.tsx
View File

0
src/app/(main)/reports/create/ReportTemplates.js → src/app/(main)/reports/create/ReportTemplates.tsx
View File

27
src/app/(main)/reports/event-data/EventDataParameters.js → src/app/(main)/reports/event-data/EventDataParameters.tsx
View File

@ -1,4 +1,4 @@
import { useContext, useRef } from 'react';
import { useContext } from 'react';
import { Form, FormRow, FormButtons, SubmitButton, PopupTrigger, Icon, Popup } from 'react-basics';
import Empty from 'components/common/Empty';
import Icons from 'components/icons';
@ -12,16 +12,16 @@ import styles from './EventDataParameters.module.css';
function useFields(websiteId, startDate, endDate) {
const { get, useQuery } = useApi();
const { data, error, isLoading } = useQuery(
['fields', websiteId, startDate, endDate],
() =>
const { data, error, isLoading } = useQuery({
queryKey: ['fields', websiteId, startDate, endDate],
queryFn: () =>
get('/reports/event-data', {
websiteId,
startAt: +startDate,
endAt: +endDate,
}),
{ enabled: !!(websiteId && startDate && endDate) },
);
enabled: !!(websiteId && startDate && endDate),
});
return { data, error, isLoading };
}
@ -29,7 +29,6 @@ function useFields(websiteId, startDate, endDate) {
export function EventDataParameters() {
const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
const { formatMessage, labels, messages } = useMessages();
const ref = useRef(null);
const { parameters } = report || {};
const { websiteId, dateRange, fields, filters, groups } = parameters || {};
const { startDate, endDate } = dateRange || {};
@ -53,28 +52,28 @@ export function EventDataParameters() {
runReport(values);
};
const handleAdd = (group, value) => {
const handleAdd = (group: string, value: any) => {
const data = parameterData[group];
if (!data.find(({ name }) => name === value.name)) {
if (!data.find(({ name }) => name === value?.name)) {
updateReport({ parameters: { [group]: data.concat(value) } });
}
};
const handleRemove = (group, index) => {
const handleRemove = (group: string, index: number) => {
const data = [...parameterData[group]];
data.splice(index, 1);
updateReport({ parameters: { [group]: data } });
};
const AddButton = ({ group }) => {
const AddButton = ({ group, onAdd }) => {
return (
<PopupTrigger>
<Icon>
<Icons.Plus />
</Icon>
<Popup position="bottom" alignment="start">
{close => {
{(close: () => void) => {
return (
<FieldAddForm
fields={data.map(({ eventKey, eventDataType }) => ({
@ -82,7 +81,7 @@ export function EventDataParameters() {
type: DATA_TYPES[eventDataType],
}))}
group={group}
onAdd={handleAdd}
onAdd={onAdd}
onClose={close}
/>
);
@ -93,7 +92,7 @@ export function EventDataParameters() {
};
return (
<Form ref={ref} values={parameters} error={error} onSubmit={handleSubmit}>
<Form values={parameters} error={error} onSubmit={handleSubmit}>
<BaseParameters />
{!hasData && <Empty message={formatMessage(messages.noEventData)} />}
{parametersSelected &&

2
src/app/(main)/reports/event-data/EventDataReport.js → src/app/(main)/reports/event-data/EventDataReport.tsx
View File

@ -11,7 +11,7 @@ const defaultParameters = {
parameters: { fields: [], filters: [] },
};
export default function EventDataReport({ reportId }) {
export default function EventDataReport({ reportId }: { reportId: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Nodes />} />

0
src/app/(main)/reports/event-data/EventDataTable.js → src/app/(main)/reports/event-data/EventDataTable.tsx
View File

61
src/app/(main)/reports/funnel/FunnelChart.js → src/app/(main)/reports/funnel/FunnelChart.tsx
View File

@ -1,13 +1,18 @@
import { useCallback, useContext, useMemo } from 'react';
import { JSX, useCallback, useContext, useMemo } from 'react';
import { Loading, StatusLight } from 'react-basics';
import useMessages from 'components/hooks/useMessages';
import useTheme from 'components/hooks/useTheme';
import BarChart from 'components/metrics/BarChart';
import { formatLongNumber } from 'lib/format';
import styles from './FunnelChart.module.css';
import { ReportContext } from '../[id]/Report';
import styles from './FunnelChart.module.css';
export function FunnelChart({ className, loading }) {
export interface FunnelChartProps {
className?: string;
isLoading?: boolean;
}
export function FunnelChart({ className, isLoading }: FunnelChartProps) {
const { report } = useContext(ReportContext);
const { formatMessage, labels } = useMessages();
const { colors } = useTheme();
@ -15,33 +20,39 @@ export function FunnelChart({ className, loading }) {
const { parameters, data } = report || {};
const renderXLabel = useCallback(
(label, index) => {
(label: string, index: number) => {
return parameters.urls[index];
},
[parameters],
);
const renderTooltipPopup = useCallback((setTooltipPopup, model) => {
const { opacity, labelColors, dataPoints } = model.tooltip;
const renderTooltipPopup = useCallback(
(
setTooltipPopup: (arg0: JSX.Element) => void,
model: { tooltip: { opacity: any; labelColors: any; dataPoints: any } },
) => {
const { opacity, labelColors, dataPoints } = model.tooltip;
if (!dataPoints?.length || !opacity) {
setTooltipPopup(null);
return;
}
if (!dataPoints?.length || !opacity) {
setTooltipPopup(null);
return;
}
setTooltipPopup(
<>
<div>
{formatLongNumber(dataPoints[0].raw.y)} {formatMessage(labels.visitors)}
</div>
<div>
<StatusLight color={labelColors?.[0]?.backgroundColor}>
{formatLongNumber(dataPoints[0].raw.z)}% {formatMessage(labels.dropoff)}
</StatusLight>
</div>
</>,
);
}, []);
setTooltipPopup(
<>
<div>
{formatLongNumber(dataPoints[0].raw.y)} {formatMessage(labels.visitors)}
</div>
<div>
<StatusLight color={labelColors?.[0]?.backgroundColor}>
{formatLongNumber(dataPoints[0].raw.z)}% {formatMessage(labels.dropoff)}
</StatusLight>
</div>
</>,
);
},
[],
);
const datasets = useMemo(() => {
return [
@ -54,7 +65,7 @@ export function FunnelChart({ className, loading }) {
];
}, [data, colors, formatMessage, labels]);
if (loading) {
if (isLoading) {
return <Loading icon="dots" className={styles.loading} />;
}
@ -63,7 +74,7 @@ export function FunnelChart({ className, loading }) {
className={className}
datasets={datasets}
unit="day"
loading={loading}
isLoading={isLoading}
renderXLabel={renderXLabel}
renderTooltipPopup={renderTooltipPopup}
XAxisType="category"

16
src/app/(main)/reports/funnel/FunnelParameters.js → src/app/(main)/reports/funnel/FunnelParameters.tsx
View File

@ -1,4 +1,4 @@
import { useContext, useRef } from 'react';
import { useContext } from 'react';
import { useMessages } from 'components/hooks';
import {
Icon,
@ -21,13 +21,12 @@ import PopupForm from '../[id]/PopupForm';
export function FunnelParameters() {
const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
const { formatMessage, labels } = useMessages();
const ref = useRef(null);
const { parameters } = report || {};
const { websiteId, dateRange, urls } = parameters || {};
const queryDisabled = !websiteId || !dateRange || urls?.length < 2;
const handleSubmit = (data, e) => {
const handleSubmit = (data: any, e: any) => {
e.stopPropagation();
e.preventDefault();
if (!queryDisabled) {
@ -35,11 +34,11 @@ export function FunnelParameters() {
}
};
const handleAddUrl = url => {
const handleAddUrl = (url: string) => {
updateReport({ parameters: { urls: parameters.urls.concat(url) } });
};
const handleRemoveUrl = (index, e) => {
const handleRemoveUrl = (index: number, e: any) => {
e.stopPropagation();
const urls = [...parameters.urls];
urls.splice(index, 1);
@ -62,7 +61,7 @@ export function FunnelParameters() {
};
return (
<Form ref={ref} values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
<Form values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
<BaseParameters />
<FormRow label={formatMessage(labels.window)}>
<FormInput
@ -73,7 +72,10 @@ export function FunnelParameters() {
</FormInput>
</FormRow>
<FormRow label={formatMessage(labels.urls)} action={<AddUrlButton />}>
<ParameterList items={urls} onRemove={handleRemoveUrl} />
<ParameterList
items={urls}
onRemove={(index: number, e: any) => handleRemoveUrl(index, e)}
/>
</FormRow>
<FormButtons>
<SubmitButton variant="primary" disabled={queryDisabled} isLoading={isRunning}>

0
src/app/(main)/reports/funnel/FunnelReport.js → src/app/(main)/reports/funnel/FunnelReport.tsx
View File

0
src/app/(main)/reports/funnel/FunnelTable.js → src/app/(main)/reports/funnel/FunnelTable.tsx
View File

7
src/app/(main)/reports/funnel/UrlAddForm.js → src/app/(main)/reports/funnel/UrlAddForm.tsx
View File

@ -3,7 +3,12 @@ import { useMessages } from 'components/hooks';
import { Button, Form, FormRow, TextField, Flexbox } from 'react-basics';
import styles from './UrlAddForm.module.css';
export function UrlAddForm({ defaultValue = '', onAdd }) {
export interface UrlAddFormProps {
defaultValue?: string;
onAdd?: (url: string) => void;
}
export function UrlAddForm({ defaultValue = '', onAdd }: UrlAddFormProps) {
const [url, setUrl] = useState(defaultValue);
const { formatMessage, labels } = useMessages();

13
src/app/(main)/reports/insights/InsightsParameters.js → src/app/(main)/reports/insights/InsightsParameters.tsx
View File

@ -1,4 +1,4 @@
import { useContext, useRef } from 'react';
import { useContext } from 'react';
import { useFormat, useMessages, useFilters } from 'components/hooks';
import {
Form,
@ -24,7 +24,6 @@ export function InsightsParameters() {
const { formatMessage, labels } = useMessages();
const { formatValue } = useFormat();
const { filterLabels } = useFilters();
const ref = useRef(null);
const { parameters } = report || {};
const { websiteId, dateRange, fields, filters } = parameters || {};
const { startDate, endDate } = dateRange || {};
@ -72,7 +71,7 @@ export function InsightsParameters() {
updateReport({ parameters: { [id]: data } });
};
const AddButton = ({ id }) => {
const AddButton = ({ id, onAdd }) => {
return (
<PopupTrigger>
<TooltipPopup label={formatMessage(labels.add)} position="top">
@ -84,8 +83,8 @@ export function InsightsParameters() {
<PopupForm>
{id === 'fields' && (
<FieldSelectForm
items={fieldOptions}
onSelect={handleAdd.bind(null, id)}
fields={fieldOptions}
onSelect={onAdd.bind(null, id)}
showType={false}
/>
)}
@ -93,7 +92,7 @@ export function InsightsParameters() {
<FilterSelectForm
websiteId={websiteId}
items={fieldOptions}
onSelect={handleAdd.bind(null, id)}
onSelect={onAdd.bind(null, id)}
/>
)}
</PopupForm>
@ -103,7 +102,7 @@ export function InsightsParameters() {
};
return (
<Form ref={ref} values={parameters} onSubmit={handleSubmit}>
<Form values={parameters} onSubmit={handleSubmit}>
<BaseParameters />
{parametersSelected &&
parameterGroups.map(({ id, label }) => {

2
src/app/(main)/reports/insights/InsightsReport.js → src/app/(main)/reports/insights/InsightsReport.tsx
View File

@ -13,7 +13,7 @@ const defaultParameters = {
parameters: { fields: [], filters: [] },
};
export default function InsightsReport({ reportId }) {
export default function InsightsReport({ reportId }: { reportId: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Lightbulb />} />

6
src/app/(main)/reports/insights/InsightsTable.js → src/app/(main)/reports/insights/InsightsTable.tsx
View File

@ -5,7 +5,7 @@ import { ReportContext } from '../[id]/Report';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
export function InsightsTable() {
const [fields, setFields] = useState();
const [fields, setFields] = useState([]);
const { report } = useContext(ReportContext);
const { formatMessage, labels } = useMessages();
const { formatValue } = useFormat();
@ -37,10 +37,10 @@ export function InsightsTable() {
width="100px"
alignment="end"
>
{row => row.visitors.toLocaleString()}
{row => row?.visitors?.toLocaleString()}
</GridColumn>
<GridColumn name="views" label={formatMessage(labels.views)} width="100px" alignment="end">
{row => row.views.toLocaleString()}
{row => row?.views?.toLocaleString()}
</GridColumn>
</GridTable>
);

7
src/app/(main)/reports/retention/RetentionParameters.js → src/app/(main)/reports/retention/RetentionParameters.tsx
View File

@ -1,4 +1,4 @@
import { useContext, useRef } from 'react';
import { useContext } from 'react';
import { useMessages } from 'components/hooks';
import { Form, FormButtons, FormRow, SubmitButton } from 'react-basics';
import { ReportContext } from '../[id]/Report';
@ -9,14 +9,13 @@ import { parseDateRange } from 'lib/date';
export function RetentionParameters() {
const { report, runReport, isRunning, updateReport } = useContext(ReportContext);
const { formatMessage, labels } = useMessages();
const ref = useRef(null);
const { parameters } = report || {};
const { websiteId, dateRange } = parameters || {};
const { startDate } = dateRange || {};
const queryDisabled = !websiteId || !dateRange;
const handleSubmit = (data, e) => {
const handleSubmit = (data: any, e: any) => {
e.stopPropagation();
e.preventDefault();
@ -30,7 +29,7 @@ export function RetentionParameters() {
};
return (
<Form ref={ref} values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
<Form values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
<BaseParameters showDateSelect={false} />
<FormRow label={formatMessage(labels.date)}>
<MonthSelect date={startDate} onChange={handleDateChange} />

2
src/app/(main)/reports/retention/RetentionReport.js → src/app/(main)/reports/retention/RetentionReport.tsx
View File

@ -19,7 +19,7 @@ const defaultParameters = {
},
};
export default function RetentionReport({ reportId }) {
export default function RetentionReport({ reportId }: { reportId: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Magnet />} />

2
src/app/(main)/reports/retention/RetentionTable.js → src/app/(main)/reports/retention/RetentionTable.tsx
View File

@ -18,7 +18,7 @@ export function RetentionTable({ days = DAYS }) {
return <EmptyPlaceholder />;
}
const rows = data.reduce((arr, row) => {
const rows = data.reduce((arr: any[], row: { date: any; visitors: any; day: any }) => {
const { date, visitors, day } = row;
if (day === 0) {
return arr.concat({

0
src/app/(main)/settings/profile/DateRangeSetting.js → src/app/(main)/settings/profile/DateRangeSetting.tsx
View File

0
src/app/(main)/settings/profile/LanguageSetting.js → src/app/(main)/settings/profile/LanguageSetting.tsx
View File

0
src/app/(main)/settings/profile/PasswordChangeButton.js → src/app/(main)/settings/profile/PasswordChangeButton.tsx
View File

6
src/app/(main)/settings/profile/PasswordEditForm.js → src/app/(main)/settings/profile/PasswordEditForm.tsx
View File

@ -6,10 +6,10 @@ import useMessages from 'components/hooks/useMessages';
export function PasswordEditForm({ onSave, onClose }) {
const { formatMessage, labels, messages } = useMessages();
const { post, useMutation } = useApi();
const { mutate, error, isLoading } = useMutation(data => post('/me/password', data));
const { mutate, error, isLoading } = useMutation((data: any) => post('/me/password', data));
const ref = useRef(null);
const handleSubmit = async data => {
const handleSubmit = async (data: any) => {
mutate(data, {
onSuccess: async () => {
onSave();
@ -18,7 +18,7 @@ export function PasswordEditForm({ onSave, onClose }) {
});
};
const samePassword = value => {
const samePassword = (value: string) => {
if (value !== ref?.current?.getValues('newPassword')) {
return formatMessage(messages.noMatchPassword);
}

0
src/app/(main)/settings/profile/ProfileHeader.js → src/app/(main)/settings/profile/ProfileHeader.tsx
View File

0
src/app/(main)/settings/profile/ProfileSettings.js → src/app/(main)/settings/profile/ProfileSettings.tsx
View File

0
src/app/(main)/settings/profile/ThemeSetting.js → src/app/(main)/settings/profile/ThemeSetting.tsx
View File

0
src/app/(main)/settings/profile/TimezoneSetting.js → src/app/(main)/settings/profile/TimezoneSetting.tsx
View File

14
src/app/(main)/settings/teams/TeamAddForm.js → src/app/(main)/settings/teams/TeamAddForm.tsx
View File

@ -1,4 +1,3 @@
import { useRef } from 'react';
import {
Form,
FormRow,
@ -12,11 +11,12 @@ import { setValue } from 'store/cache';
import useApi from 'components/hooks/useApi';
import useMessages from 'components/hooks/useMessages';
export function TeamAddForm({ onSave, onClose }) {
export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
const { formatMessage, labels } = useMessages();
const { post, useMutation } = useApi();
const { mutate, error, isLoading } = useMutation(data => post('/teams', data));
const ref = useRef(null);
const { mutate, error, isPending } = useMutation({
mutationFn: (data: any) => post('/teams', data),
});
const handleSubmit = async data => {
mutate(data, {
@ -29,17 +29,17 @@ export function TeamAddForm({ onSave, onClose }) {
};
return (
<Form ref={ref} onSubmit={handleSubmit} error={error}>
<Form onSubmit={handleSubmit} error={error}>
<FormRow label={formatMessage(labels.name)}>
<FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
<TextField autoComplete="off" />
</FormInput>
</FormRow>
<FormButtons flex>
<SubmitButton variant="primary" disabled={isLoading}>
<SubmitButton variant="primary" disabled={isPending}>
{formatMessage(labels.save)}
</SubmitButton>
<Button disabled={isLoading} onClick={onClose}>
<Button disabled={isPending} onClick={onClose}>
{formatMessage(labels.cancel)}
</Button>
</FormButtons>

12
src/app/(main)/settings/teams/TeamDeleteButton.js → src/app/(main)/settings/teams/TeamDeleteButton.tsx
View File

@ -2,7 +2,15 @@ import { Button, Icon, Icons, Modal, ModalTrigger, Text } from 'react-basics';
import useMessages from 'components/hooks/useMessages';
import TeamDeleteForm from './TeamDeleteForm';
export function TeamDeleteButton({ teamId, teamName, onDelete }) {
export function TeamDeleteButton({
teamId,
teamName,
onDelete,
}: {
teamId: string;
teamName: string;
onDelete?: () => void;
}) {
const { formatMessage, labels } = useMessages();
return (
@ -14,7 +22,7 @@ export function TeamDeleteButton({ teamId, teamName, onDelete }) {
<Text>{formatMessage(labels.delete)}</Text>
</Button>
<Modal title={formatMessage(labels.deleteTeam)}>
{close => (
{(close: any) => (
<TeamDeleteForm teamId={teamId} teamName={teamName} onSave={onDelete} onClose={close} />
)}
</Modal>

18
src/app/(main)/settings/teams/TeamDeleteForm.js → src/app/(main)/settings/teams/TeamDeleteForm.tsx
View File

@ -3,10 +3,22 @@ import useApi from 'components/hooks/useApi';
import useMessages from 'components/hooks/useMessages';
import { setValue } from 'store/cache';
export function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
export function TeamDeleteForm({
teamId,
teamName,
onSave,
onClose,
}: {
teamId: string;
teamName: string;
onSave: () => void;
onClose: () => void;
}) {
const { formatMessage, labels, messages, FormattedMessage } = useMessages();
const { del, useMutation } = useApi();
const { mutate, error, isLoading } = useMutation(data => del(`/teams/${teamId}`, data));
const { mutate, error, isPending } = useMutation({
mutationFn: (data: any) => del(`/teams/${teamId}`, data),
});
const handleSubmit = async data => {
mutate(data, {
@ -24,7 +36,7 @@ export function TeamDeleteForm({ teamId, teamName, onSave, onClose }) {
<FormattedMessage {...messages.confirmDelete} values={{ target: <b>{teamName}</b> }} />
</p>
<FormButtons flex>
<SubmitButton variant="danger" disabled={isLoading}>
<SubmitButton variant="danger" disabled={isPending}>
{formatMessage(labels.delete)}
</SubmitButton>
<Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>

4
src/app/(main)/settings/teams/TeamJoinForm.js → src/app/(main)/settings/teams/TeamJoinForm.tsx
View File

@ -12,10 +12,10 @@ import useApi from 'components/hooks/useApi';
import useMessages from 'components/hooks/useMessages';
import { setValue } from 'store/cache';
export function TeamJoinForm({ onSave, onClose }) {
export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose: () => void }) {
const { formatMessage, labels, getMessage } = useMessages();
const { post, useMutation } = useApi();
const { mutate, error } = useMutation(data => post('/teams/join', data));
const { mutate, error } = useMutation({ mutationFn: (data: any) => post('/teams/join', data) });
const ref = useRef(null);
const handleSubmit = async data => {

10
src/app/(main)/settings/teams/TeamLeaveButton.js → src/app/(main)/settings/teams/TeamLeaveButton.tsx
View File

@ -4,7 +4,15 @@ import useLocale from 'components/hooks/useLocale';
import useUser from 'components/hooks/useUser';
import TeamDeleteForm from './TeamLeaveForm';
export function TeamLeaveButton({ teamId, teamName, onLeave }) {
export function TeamLeaveButton({
teamId,
teamName,
onLeave,
}: {
teamId: string;
teamName: string;
onLeave?: () => void;
}) {
const { formatMessage, labels } = useMessages();
const { dir } = useLocale();
const { user } = useUser();

35
src/app/(main)/settings/teams/TeamLeaveForm.js → src/app/(main)/settings/teams/TeamLeaveForm.tsx
View File

@ -3,22 +3,33 @@ import useApi from 'components/hooks/useApi';
import useMessages from 'components/hooks/useMessages';
import { setValue } from 'store/cache';
export function TeamLeaveForm({ teamId, userId, teamName, onSave, onClose }) {
export function TeamLeaveForm({
teamId,
userId,
teamName,
onSave,
onClose,
}: {
teamId: string;
userId: string;
teamName: string;
onSave: () => void;
onClose: () => void;
}) {
const { formatMessage, labels, messages, FormattedMessage } = useMessages();
const { del, useMutation } = useApi();
const { mutate, error, isLoading } = useMutation(() => del(`/teams/${teamId}/users/${userId}`));
const { mutate, error, isPending } = useMutation({
mutationFn: () => del(`/teams/${teamId}/users/${userId}`),
});
const handleSubmit = async () => {
mutate(
{},
{
onSuccess: async () => {
setValue('team:members', Date.now());
onSave();
onClose();
},
mutate(null, {
onSuccess: async () => {
setValue('team:members', Date.now());
onSave();
onClose();
},
);
});
};
return (
@ -27,7 +38,7 @@ export function TeamLeaveForm({ teamId, userId, teamName, onSave, onClose }) {
<FormattedMessage {...messages.confirmDelete} values={{ target: <b>{teamName}</b> }} />
</p>
<FormButtons flex>
<SubmitButton variant="danger" disabled={isLoading}>
<SubmitButton variant="danger" disabled={isPending}>
{formatMessage(labels.leave)}
</SubmitButton>
<Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>

4
src/app/(main)/settings/teams/TeamsAddButton.js → src/app/(main)/settings/teams/TeamsAddButton.tsx
View File

@ -3,7 +3,7 @@ import Icons from 'components/icons';
import useMessages from 'components/hooks/useMessages';
import TeamAddForm from './TeamAddForm';
export function TeamsAddButton({ onAdd }) {
export function TeamsAddButton({ onAdd }: { onAdd?: () => void }) {
const { formatMessage, labels } = useMessages();
return (
@ -15,7 +15,7 @@ export function TeamsAddButton({ onAdd }) {
<Text>{formatMessage(labels.createTeam)}</Text>
</Button>
<Modal title={formatMessage(labels.createTeam)}>
{close => <TeamAddForm onSave={onAdd} onClose={close} />}
{(close: () => void) => <TeamAddForm onSave={onAdd} onClose={close} />}
</Modal>
</ModalTrigger>
);

13
src/app/(main)/settings/teams/TeamsDataTable.js → src/app/(main)/settings/teams/TeamsDataTable.tsx
View File

@ -7,11 +7,14 @@ import useCache from 'store/cache';
export function TeamsDataTable() {
const { get } = useApi();
const modified = useCache(state => state?.teams);
const queryResult = useFilterQuery(['teams', { modified }], params => {
return get(`/teams`, {
...params,
});
const modified = useCache((state: any) => state?.teams);
const queryResult = useFilterQuery({
queryKey: ['teams', { modified }],
queryFn: (params: any) => {
return get(`/teams`, {
...params,
});
},
});
return (

0
src/app/(main)/settings/teams/TeamsHeader.js → src/app/(main)/settings/teams/TeamsHeader.tsx
View File

0
src/app/(main)/settings/teams/TeamsJoinButton.js → src/app/(main)/settings/teams/TeamsJoinButton.tsx
View File

2
src/app/(main)/settings/teams/TeamsTable.js → src/app/(main)/settings/teams/TeamsTable.tsx
View File

@ -7,7 +7,7 @@ import { Button, GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from
import TeamDeleteButton from './TeamDeleteButton';
import TeamLeaveButton from './TeamLeaveButton';
export function TeamsTable({ data = [] }) {
export function TeamsTable({ data = [] }: { data: any[] }) {
const { formatMessage, labels } = useMessages();
const { user } = useUser();
const breakpoint = useBreakpoint();

10
src/app/(main)/settings/teams/WebsiteTags.js → src/app/(main)/settings/teams/WebsiteTags.tsx
View File

@ -1,7 +1,15 @@
import { Button, Icon, Icons, Text } from 'react-basics';
import styles from './WebsiteTags.module.css';
export function WebsiteTags({ items = [], websites = [], onClick }) {
export function WebsiteTags({
items = [],
websites = [],
onClick,
}: {
items: any[];
websites: any[];
onClick: (e: Event) => void;
}) {
if (websites.length === 0) {
return null;
}

0
src/app/(main)/settings/teams/[id]/TeamEditForm.js → src/app/(main)/settings/teams/[id]/TeamEditForm.tsx
View File

31
src/app/(main)/settings/teams/[id]/TeamMemberRemoveButton.js → src/app/(main)/settings/teams/[id]/TeamMemberRemoveButton.tsx
View File

@ -3,28 +3,37 @@ import useMessages from 'components/hooks/useMessages';
import { Icon, Icons, LoadingButton, Text } from 'react-basics';
import { setValue } from 'store/cache';
export function TeamMemberRemoveButton({ teamId, userId, disabled, onSave }) {
export function TeamMemberRemoveButton({
teamId,
userId,
disabled,
onSave,
}: {
teamId: string;
userId: string;
disabled?: boolean;
onSave?: () => void;
}) {
const { formatMessage, labels } = useMessages();
const { del, useMutation } = useApi();
const { mutate, isLoading } = useMutation(() => del(`/teams/${teamId}/users/${userId}`));
const { mutate, isPending } = useMutation({
mutationFn: () => del(`/teams/${teamId}/users/${userId}`),
});
const handleRemoveTeamMember = () => {
mutate(
{},
{
onSuccess: () => {
setValue('team:members', Date.now());
onSave?.();
},
mutate(null, {
onSuccess: () => {
setValue('team:members', Date.now());
onSave?.();
},
);
});
};
return (
<LoadingButton
onClick={() => handleRemoveTeamMember()}
disabled={disabled}
isLoading={isLoading}
isLoading={isPending}
>
<Icon>
<Icons.Close />

12
src/app/(main)/settings/teams/[id]/TeamMembers.js → src/app/(main)/settings/teams/[id]/TeamMembers.tsx
View File

@ -4,18 +4,18 @@ import useFilterQuery from 'components/hooks/useFilterQuery';
import DataTable from 'components/common/DataTable';
import useCache from 'store/cache';
export function TeamMembers({ teamId, readOnly }) {
export function TeamMembers({ teamId, readOnly }: { teamId: string; readOnly: boolean }) {
const { get } = useApi();
const modified = useCache(state => state?.['team:members']);
const queryResult = useFilterQuery(
['team:members', { teamId, modified }],
params => {
const queryResult = useFilterQuery({
queryKey: ['team:members', { teamId, modified }],
queryFn: params => {
return get(`/teams/${teamId}/users`, {
...params,
});
},
{ enabled: !!teamId },
);
enabled: !!teamId,
});
return (
<>

10
src/app/(main)/settings/teams/[id]/TeamMembersTable.js → src/app/(main)/settings/teams/[id]/TeamMembersTable.tsx
View File

@ -4,7 +4,15 @@ import useUser from 'components/hooks/useUser';
import { ROLES } from 'lib/constants';
import TeamMemberRemoveButton from './TeamMemberRemoveButton';
export function TeamMembersTable({ data = [], teamId, readOnly }) {
export function TeamMembersTable({
data = [],
teamId,
readOnly,
}: {
data: any[];
teamId: string;
readOnly: boolean;
}) {
const { formatMessage, labels } = useMessages();
const { user } = useUser();
const breakpoint = useBreakpoint();

14
src/app/(main)/settings/teams/[id]/TeamSettings.js → src/app/(main)/settings/teams/[id]/TeamSettings.tsx
View File

@ -10,22 +10,22 @@ import TeamEditForm from './TeamEditForm';
import TeamMembers from './TeamMembers';
import TeamWebsites from './TeamWebsites';
export function TeamSettings({ teamId }) {
export function TeamSettings({ teamId }: { teamId: string }) {
const { formatMessage, labels, messages } = useMessages();
const { user } = useUser();
const [values, setValues] = useState(null);
const [tab, setTab] = useState('details');
const { get, useQuery } = useApi();
const { showToast } = useToasts();
const { data, isLoading } = useQuery(
['team', teamId],
() => {
const { data, isLoading } = useQuery({
queryKey: ['team', teamId],
queryFn: () => {
if (teamId) {
return get(`/teams/${teamId}`);
}
},
{ cacheTime: 0 },
);
gcTime: 0,
});
const canEdit = data?.teamUser?.find(
({ userId, role }) => role === ROLES.teamOwner && userId === user.id,
);
@ -48,7 +48,7 @@ export function TeamSettings({ teamId }) {
return (
<Flexbox direction="column">
<PageHeader title={values?.name} />
<Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
<Tabs selectedKey={tab} onSelect={(value: any) => setTab(value)} style={{ marginBottom: 30 }}>
<Item key="details">{formatMessage(labels.details)}</Item>
<Item key="members">{formatMessage(labels.members)}</Item>
<Item key="websites">{formatMessage(labels.websites)}</Item>

21
src/app/(main)/settings/teams/[id]/TeamWebsiteAddForm.js → src/app/(main)/settings/teams/[id]/TeamWebsiteAddForm.tsx
View File

@ -7,12 +7,25 @@ import Empty from 'components/common/Empty';
import { setValue } from 'store/cache';
import { useUser } from 'components/hooks';
export function TeamWebsiteAddForm({ teamId, onSave, onClose }) {
export function TeamWebsiteAddForm({
teamId,
onSave,
onClose,
}: {
teamId: string;
onSave: () => void;
onClose: () => void;
}) {
const { user } = useUser();
const { formatMessage, labels } = useMessages();
const { get, post, useQuery, useMutation } = useApi();
const { mutate, error } = useMutation(data => post(`/teams/${teamId}/websites`, data));
const { data: websites, isLoading } = useQuery(['websites'], () => get('/websites'));
const { mutate, error } = useMutation({
mutationFn: (data: any) => post(`/teams/${teamId}/websites`, data),
});
const { data: websites, isLoading } = useQuery({
queryKey: ['websites'],
queryFn: () => get('/websites'),
});
const [selected, setSelected] = useState([]);
const hasData = websites && websites.data.length > 0;
@ -39,7 +52,7 @@ export function TeamWebsiteAddForm({ teamId, onSave, onClose }) {
{!isLoading && !hasData && <Empty />}
{hasData && (
<Form onSubmit={handleSubmit} error={error}>
<WebsitesDataTable userId={user.id} showHeader={false} showActions={false}>
<WebsitesDataTable userId={user.id} showActions={false}>
<GridColumn name="select" label={formatMessage(labels.selectWebsite)} alignment="end">
{row => (
<Toggle

0
src/app/(main)/settings/teams/[id]/TeamWebsiteRemoveButton.js → src/app/(main)/settings/teams/[id]/TeamWebsiteRemoveButton.tsx
View File

18
src/app/(main)/settings/teams/[id]/TeamWebsites.js → src/app/(main)/settings/teams/[id]/TeamWebsites.tsx
View File

@ -8,23 +8,23 @@ import useFilterQuery from 'components/hooks/useFilterQuery';
import DataTable from 'components/common/DataTable';
import useCache from 'store/cache';
export function TeamWebsites({ teamId }) {
export function TeamWebsites({ teamId, readOnly }: { teamId: string; readOnly: boolean }) {
const { formatMessage, labels, messages } = useMessages();
const { user } = useUser();
const { get } = useApi();
const modified = useCache(state => state?.['team:websites']);
const queryResult = useFilterQuery(
['team:websites', { teamId, modified }],
params => {
const queryResult = useFilterQuery({
queryKey: ['team:websites', { teamId, modified }],
queryFn: params => {
return get(`/teams/${teamId}/websites`, {
...params,
});
},
{ enabled: !!user },
);
enabled: !!user,
});
const handleChange = () => {
queryResult.refetch();
queryResult.query.refetch();
};
return (
@ -43,7 +43,9 @@ export function TeamWebsites({ teamId }) {
</ModalTrigger>
</ActionForm>
<DataTable queryResult={queryResult}>
{({ data }) => <TeamWebsitesTable data={data} onRemove={handleChange} />}
{({ data }) => (
<TeamWebsitesTable data={data} onRemove={handleChange} readOnly={readOnly} />
)}
</DataTable>
</>
);

12
src/app/(main)/settings/teams/[id]/TeamWebsitesTable.js → src/app/(main)/settings/teams/[id]/TeamWebsitesTable.tsx
View File

@ -4,7 +4,15 @@ import useMessages from 'components/hooks/useMessages';
import useUser from 'components/hooks/useUser';
import TeamWebsiteRemoveButton from './TeamWebsiteRemoveButton';
export function TeamWebsitesTable({ data = [], onRemove }) {
export function TeamWebsitesTable({
data = [],
readOnly,
onRemove,
}: {
data: any[];
readOnly: boolean;
onRemove: () => void;
}) {
const { formatMessage, labels } = useMessages();
const { user } = useUser();
@ -17,7 +25,7 @@ export function TeamWebsitesTable({ data = [], onRemove }) {
const { id: teamId, teamUser } = row.teamWebsite[0].team;
const { id: websiteId, userId } = row;
const owner = teamUser[0];
const canRemove = user.id === userId || user.id === owner.userId;
const canRemove = !readOnly && (user.id === userId || user.id === owner.userId);
return (
<>
{canRemove && (

0
src/app/(main)/settings/teams/[id]/page.js → src/app/(main)/settings/teams/[id]/page.tsx
View File

2
src/app/(main)/settings/users/UserAddButton.js → src/app/(main)/settings/users/UserAddButton.tsx
View File

@ -3,7 +3,7 @@ import UserAddForm from './UserAddForm';
import useMessages from 'components/hooks/useMessages';
import { setValue } from 'store/cache';
export function UserAddButton({ onSave }) {
export function UserAddButton({ onSave }: { onSave?: () => void }) {
const { formatMessage, labels, messages } = useMessages();
const { showToast } = useToasts();

6
src/app/(main)/settings/users/UserAddForm.js → src/app/(main)/settings/users/UserAddForm.tsx
View File

@ -16,7 +16,9 @@ import useMessages from 'components/hooks/useMessages';
export function UserAddForm({ onSave, onClose }) {
const { post, useMutation } = useApi();
const { mutate, error, isLoading } = useMutation(data => post(`/users`, data));
const { mutate, error, isPending } = useMutation({
mutationFn: (data: any) => post(`/users`, data),
});
const { formatMessage, labels } = useMessages();
const handleSubmit = async data => {
@ -65,7 +67,7 @@ export function UserAddForm({ onSave, onClose }) {
<SubmitButton variant="primary" disabled={false}>
{formatMessage(labels.save)}
</SubmitButton>
<Button disabled={isLoading} onClick={onClose}>
<Button disabled={isPending} onClick={onClose}>
{formatMessage(labels.cancel)}
</Button>
</FormButtons>

10
src/app/(main)/settings/users/UserDeleteButton.js → src/app/(main)/settings/users/UserDeleteButton.tsx
View File

@ -3,7 +3,15 @@ import useMessages from 'components/hooks/useMessages';
import useUser from 'components/hooks/useUser';
import UserDeleteForm from './UserDeleteForm';
export function UserDeleteButton({ userId, username, onDelete }) {
export function UserDeleteButton({
userId,
username,
onDelete,
}: {
userId: string;
username: string;
onDelete?: () => void;
}) {
const { formatMessage, labels } = useMessages();
const { user } = useUser();

11
src/app/(main)/settings/users/UserDeleteForm.js → src/app/(main)/settings/users/UserDeleteForm.tsx
View File

@ -1,14 +1,13 @@
import { useMutation } from '@tanstack/react-query';
import { Button, Form, FormButtons, SubmitButton } from 'react-basics';
import useApi from 'components/hooks/useApi';
import useMessages from 'components/hooks/useMessages';
export function UserDeleteForm({ userId, username, onSave, onClose }) {
const { formatMessage, FormattedMessage, labels, messages } = useMessages();
const { del } = useApi();
const { mutate, error, isLoading } = useMutation(() => del(`/users/${userId}`));
const { del, useMutation } = useApi();
const { mutate, error, isPending } = useMutation({ mutationFn: () => del(`/users/${userId}`) });
const handleSubmit = async data => {
const handleSubmit = async (data: any) => {
mutate(data, {
onSuccess: async () => {
onSave();
@ -23,10 +22,10 @@ export function UserDeleteForm({ userId, username, onSave, onClose }) {
<FormattedMessage {...messages.confirmDelete} values={{ target: <b>{username}</b> }} />
</p>
<FormButtons flex>
<SubmitButton variant="danger" disabled={isLoading}>
<SubmitButton variant="danger" disabled={isPending}>
{formatMessage(labels.delete)}
</SubmitButton>
<Button disabled={isLoading} onClick={onClose}>
<Button disabled={isPending} onClick={onClose}>
{formatMessage(labels.cancel)}
</Button>
</FormButtons>

26
src/app/(main)/settings/users/UserEditForm.js → src/app/(main)/settings/users/UserEditForm.tsx
View File

@ -13,14 +13,30 @@ import useApi from 'components/hooks/useApi';
import { ROLES } from 'lib/constants';
import useMessages from 'components/hooks/useMessages';
export function UserEditForm({ userId, data, onSave }) {
export function UserEditForm({
userId,
data,
onSave,
}: {
userId: string;
data: any[];
onSave: (data: any) => void;
}) {
const { formatMessage, labels, messages } = useMessages();
const { post, useMutation } = useApi();
const { mutate, error } = useMutation(({ username, password, role }) =>
post(`/users/${userId}`, { username, password, role }),
);
const { mutate, error } = useMutation({
mutationFn: ({
username,
password,
role,
}: {
username: string;
password: string;
role: string;
}) => post(`/users/${userId}`, { username, password, role }),
});
const handleSubmit = async data => {
const handleSubmit = async (data: any) => {
mutate(data, {
onSuccess: async () => {
onSave(data);

36
src/app/(main)/settings/users/UserWebsites.js
View File

@ -1,36 +0,0 @@
import Page from 'components/layout/Page';
import useApi from 'components/hooks/useApi';
import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
import useApiFilter from 'components/hooks/useApiFilter';
export function UserWebsites({ userId }) {
const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
useApiFilter();
const { get, useQuery } = useApi();
const { data, isLoading, error } = useQuery(
['user:websites', userId, filter, page, pageSize],
() =>
get(`/users/${userId}/websites`, {
filter,
page,
pageSize,
}),
);
const hasData = data && data.length !== 0;
return (
<Page loading={isLoading} error={error}>
{hasData && (
<WebsitesTable
data={data.data}
onFilterChange={handleFilterChange}
onPageChange={handlePageChange}
onPageSizeChange={handlePageSizeChange}
filterValue={filter}
/>
)}
</Page>
);
}
export default UserWebsites;

26
src/app/(main)/settings/users/UserWebsites.tsx Normal file
View File

@ -0,0 +1,26 @@
import Page from 'components/layout/Page';
import useApi from 'components/hooks/useApi';
import WebsitesTable from 'app/(main)/settings/websites/WebsitesTable';
import useFilterQuery from 'components/hooks/useFilterQuery';
import DataTable from 'components/common/DataTable';
export function UserWebsites({ userId }) {
const { get } = useApi();
const queryResult = useFilterQuery({
queryKey: ['user:websites', userId],
queryFn: (params: any) => get(`/users/${userId}/websites`, params),
});
const hasData = queryResult.result && queryResult.result.data.length !== 0;
return (
<Page isLoading={queryResult.query.isLoading} error={queryResult.query.error}>
{hasData && (
<DataTable queryResult={queryResult}>
{({ data }) => <WebsitesTable data={data} />}
</DataTable>
)}
</Page>
);
}
export default UserWebsites;

9
src/app/(main)/settings/users/UsersDataTable.js → src/app/(main)/settings/users/UsersDataTable.tsx
View File

@ -8,11 +8,10 @@ import useCache from 'store/cache';
export function UsersDataTable() {
const { get } = useApi();
const modified = useCache(state => state?.users);
const queryResult = useFilterQuery(['users', { modified }], params => {
return get(`/users`, {
...params,
});
const modified = useCache((state: any) => state?.users);
const queryResult = useFilterQuery({
queryKey: ['users', { modified }],
queryFn: (params: { [key: string]: any }) => get(`/users`, params),
});
return (

2
src/app/(main)/settings/users/UsersHeader.js → src/app/(main)/settings/users/UsersHeader.tsx
View File

@ -3,7 +3,7 @@ import PageHeader from 'components/layout/PageHeader';
import useMessages from 'components/hooks/useMessages';
import UserAddButton from './UserAddButton';
export function UsersHeader({ onAdd }) {
export function UsersHeader({ onAdd }: { onAdd?: () => void }) {
const { formatMessage, labels } = useMessages();
return (

2
src/app/(main)/settings/users/UsersTable.js → src/app/(main)/settings/users/UsersTable.tsx
View File

@ -6,7 +6,7 @@ import useMessages from 'components/hooks/useMessages';
import useLocale from 'components/hooks/useLocale';
import UserDeleteButton from './UserDeleteButton';
export function UsersTable({ data = [] }) {
export function UsersTable({ data = [] }: { data: any[] }) {
const { formatMessage, labels } = useMessages();
const { dateLocale } = useLocale();
const breakpoint = useBreakpoint();

10
src/app/(main)/settings/users/[id]/UserSettings.js
View File

@ -14,15 +14,15 @@ export function UserSettings({ userId }) {
const [tab, setTab] = useState('details');
const { get, useQuery } = useApi();
const { showToast } = useToasts();
const { data, isLoading } = useQuery(
['user', userId],
() => {
const { data, isLoading } = useQuery({
queryKey: ['user', userId],
queryFn: () => {
if (userId) {
return get(`/users/${userId}`);
}
},
{ cacheTime: 0 },
);
gcTime: 0,
});
const handleSave = data => {
showToast({ message: formatMessage(messages.saved), variant: 'success' });

0
src/app/(main)/settings/users/[id]/page.js → src/app/(main)/settings/users/[id]/page.tsx
View File

2
src/app/(main)/settings/websites/WebsiteAddButton.js → src/app/(main)/settings/websites/WebsiteAddButton.tsx
View File

@ -3,7 +3,7 @@ import WebsiteAddForm from './WebsiteAddForm';
import useMessages from 'components/hooks/useMessages';
import { setValue } from 'store/cache';
export function WebsiteAddButton({ onSave }) {
export function WebsiteAddButton({ onSave }: { onSave?: () => void }) {
const { formatMessage, labels, messages } = useMessages();
const { showToast } = useToasts();

8
src/app/(main)/settings/websites/WebsiteAddForm.tsx
View File

@ -14,7 +14,9 @@ import useMessages from 'components/hooks/useMessages';
export function WebsiteAddForm({ onSave, onClose }: { onSave?: () => void; onClose?: () => void }) {
const { formatMessage, labels, messages } = useMessages();
const { post, useMutation } = useApi();
const { mutate, error, isLoading } = useMutation(data => post('/websites', data));
const { mutate, error, isPending } = useMutation({
mutationFn: (data: any) => post('/websites', data),
});
const handleSubmit = async (data: any) => {
mutate(data, {
@ -26,7 +28,7 @@ export function WebsiteAddForm({ onSave, onClose }: { onSave?: () => void; onClo
};
return (
<Form onSubmit={handleSubmit} error={error as string}>
<Form onSubmit={handleSubmit} error={error}>
<FormRow label={formatMessage(labels.name)}>
<FormInput name="name" rules={{ required: formatMessage(labels.required) }}>
<TextField autoComplete="off" />
@ -48,7 +50,7 @@ export function WebsiteAddForm({ onSave, onClose }: { onSave?: () => void; onClo
{formatMessage(labels.save)}
</SubmitButton>
{onClose && (
<Button disabled={isLoading} onClick={onClose}>
<Button disabled={isPending} onClick={onClose}>
{formatMessage(labels.cancel)}
</Button>
)}

12
src/app/(main)/settings/websites/WebsiteSettings.js
View File

@ -1,6 +1,6 @@
'use client';
import { useEffect, useState } from 'react';
import { Item, Tabs, useToasts, Button, Text, Icon, Icons } from 'react-basics';
import { Item, Tabs, useToasts, Button, Text, Icon, Icons, Loading } from 'react-basics';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import PageHeader from 'components/layout/PageHeader';
@ -16,9 +16,11 @@ export function WebsiteSettings({ websiteId, openExternal = false, analyticsUrl
const { formatMessage, labels, messages } = useMessages();
const { get, useQuery } = useApi();
const { showToast } = useToasts();
const { data } = useQuery(['website', websiteId], () => get(`/websites/${websiteId}`), {
const { data, isLoading } = useQuery({
queryKey: ['website', websiteId],
queryFn: () => get(`/websites/${websiteId}`),
enabled: !!websiteId,
cacheTime: 0,
gcTime: 0,
});
const [values, setValues] = useState(null);
const [tab, setTab] = useState('details');
@ -46,6 +48,10 @@ export function WebsiteSettings({ websiteId, openExternal = false, analyticsUrl
}
}, [data]);
if (isLoading || !values) {
return <Loading />;
}
return (
<>
<PageHeader title={values?.name}>

10
src/app/(main)/settings/websites/WebsitesDataTable.tsx
View File

@ -21,17 +21,17 @@ function useWebsites(userId: string, { includeTeams, onlyTeams }) {
const { get } = useApi();
const modified = useCache((state: any) => state?.websites);
return useFilterQuery(
['websites', { includeTeams, onlyTeams, modified }],
(params: any) => {
return useFilterQuery({
queryKey: ['websites', { includeTeams, onlyTeams, modified }],
queryFn: (params: any) => {
return get(`/users/${userId}/websites`, {
includeTeams,
onlyTeams,
...params,
});
},
{ enabled: !!userId },
);
enabled: !!userId,
});
}
export function WebsitesDataTable({

0
src/app/(main)/settings/websites/WebsitesHeader.js → src/app/(main)/settings/websites/WebsitesHeader.tsx
View File

12
src/app/(main)/settings/websites/WebsitesTable.js → src/app/(main)/settings/websites/WebsitesTable.tsx
View File

@ -1,8 +1,18 @@
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/useMessages';
import useUser from 'components/hooks/useUser';
export interface WebsitesTableProps {
data: any[];
showTeam?: boolean;
showActions?: boolean;
allowEdit?: boolean;
allowView?: boolean;
children?: ReactNode;
}
export function WebsitesTable({
data = [],
showTeam,
@ -10,7 +20,7 @@ export function WebsitesTable({
allowEdit,
allowView,
children,
}) {
}: WebsitesTableProps) {
const { formatMessage, labels } = useMessages();
const { user } = useUser();
const breakpoint = useBreakpoint();

10
src/app/(main)/settings/websites/[id]/ShareUrl.js → src/app/(main)/settings/websites/[id]/ShareUrl.tsx
View File

@ -20,9 +20,9 @@ export function ShareUrl({ websiteId, data, analyticsUrl, onSave }) {
const { name, shareId } = data;
const [id, setId] = useState(shareId);
const { post, useMutation } = useApi();
const { mutate, error } = useMutation(({ shareId }) =>
post(`/websites/${websiteId}`, { shareId }),
);
const { mutate, error } = useMutation({
mutationFn: (data: any) => post(`/websites/${websiteId}`, data),
});
const ref = useRef(null);
const url = useMemo(
() =>
@ -32,7 +32,7 @@ export function ShareUrl({ websiteId, data, analyticsUrl, onSave }) {
[id, name],
);
const handleSubmit = async data => {
const handleSubmit = async (data: any) => {
mutate(data, {
onSuccess: async () => {
onSave(data);
@ -50,7 +50,7 @@ export function ShareUrl({ websiteId, data, analyticsUrl, onSave }) {
setId(id);
};
const handleCheck = checked => {
const handleCheck = (checked: boolean) => {
const data = { shareId: checked ? generateId() : null };
mutate(data, {
onSuccess: async () => {

8
src/app/(main)/settings/websites/[id]/TrackingCode.js → src/app/(main)/settings/websites/[id]/TrackingCode.tsx
View File

@ -2,7 +2,13 @@ import { TextArea } from 'react-basics';
import useMessages from 'components/hooks/useMessages';
import useConfig from 'components/hooks/useConfig';
export function TrackingCode({ websiteId, analyticsUrl }) {
export function TrackingCode({
websiteId,
analyticsUrl,
}: {
websiteId: string;
analyticsUrl: string;
}) {
const { formatMessage, messages } = useMessages();
const config = useConfig();

8
src/app/(main)/settings/websites/[id]/WebsiteData.js → src/app/(main)/settings/websites/[id]/WebsiteData.tsx
View File

@ -3,7 +3,13 @@ import WebsiteDeleteForm from './WebsiteDeleteForm';
import WebsiteResetForm from './WebsiteResetForm';
import useMessages from 'components/hooks/useMessages';
export function WebsiteData({ websiteId, onSave }) {
export function WebsiteData({
websiteId,
onSave,
}: {
websiteId: string;
onSave?: (value: string) => void;
}) {
const { formatMessage, labels, messages } = useMessages();
const handleReset = async () => {

14
src/app/(main)/settings/websites/[id]/WebsiteDeleteForm.js → src/app/(main)/settings/websites/[id]/WebsiteDeleteForm.tsx
View File

@ -12,10 +12,20 @@ import useMessages from 'components/hooks/useMessages';
const CONFIRM_VALUE = 'DELETE';
export function WebsiteDeleteForm({ websiteId, onSave, onClose }) {
export function WebsiteDeleteForm({
websiteId,
onSave,
onClose,
}: {
websiteId: string;
onSave?: () => void;
onClose?: () => void;
}) {
const { formatMessage, labels, messages, FormattedMessage } = useMessages();
const { del, useMutation } = useApi();
const { mutate, error } = useMutation(data => del(`/websites/${websiteId}`, data));
const { mutate, error } = useMutation({
mutationFn: (data: any) => del(`/websites/${websiteId}`, data),
});
const handleSubmit = async data => {
mutate(data, {

14
src/app/(main)/settings/websites/[id]/WebsiteEditForm.js → src/app/(main)/settings/websites/[id]/WebsiteEditForm.tsx
View File

@ -4,10 +4,20 @@ import useApi from 'components/hooks/useApi';
import { DOMAIN_REGEX } from 'lib/constants';
import useMessages from 'components/hooks/useMessages';
export function WebsiteEditForm({ websiteId, data, onSave }) {
export function WebsiteEditForm({
websiteId,
data,
onSave,
}: {
websiteId: string;
data: any[];
onSave?: (data: any) => void;
}) {
const { formatMessage, labels, messages } = useMessages();
const { post, useMutation } = useApi();
const { mutate, error } = useMutation(data => post(`/websites/${websiteId}`, data));
const { mutate, error } = useMutation({
mutationFn: (data: any) => post(`/websites/${websiteId}`, data),
});
const ref = useRef(null);
const handleSubmit = async data => {

16
src/app/(main)/settings/websites/[id]/WebsiteResetForm.js → src/app/(main)/settings/websites/[id]/WebsiteResetForm.tsx
View File

@ -12,12 +12,22 @@ import useMessages from 'components/hooks/useMessages';
const CONFIRM_VALUE = 'RESET';
export function WebsiteResetForm({ websiteId, onSave, onClose }) {
export function WebsiteResetForm({
websiteId,
onSave,
onClose,
}: {
websiteId: string;
onSave?: () => void;
onClose?: () => void;
}) {
const { formatMessage, labels, messages, FormattedMessage } = useMessages();
const { post, useMutation } = useApi();
const { mutate, error } = useMutation(data => post(`/websites/${websiteId}/reset`, data));
const { mutate, error } = useMutation({
mutationFn: (data: any) => post(`/websites/${websiteId}/reset`, data),
});
const handleSubmit = async data => {
const handleSubmit = async (data: any) => {
mutate(data, {
onSuccess: async () => {
onSave();

0
src/app/(main)/settings/websites/[id]/page.js → src/app/(main)/settings/websites/[id]/page.tsx
View File

2
src/app/(main)/websites/WebsitesBrowse.js → src/app/(main)/websites/WebsitesBrowse.tsx
View File

@ -17,7 +17,7 @@ export function WebsitesBrowse() {
return (
<>
<Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
<Tabs selectedKey={tab} onSelect={(tab: any) => setTab(tab)} style={{ marginBottom: 30 }}>
<Item key={TABS.myWebsites}>{formatMessage(labels.myWebsites)}</Item>
<Item key={TABS.teamWebsites}>{formatMessage(labels.teamWebsites)}</Item>
</Tabs>

12
src/app/(main)/websites/[id]/WebsiteChart.js → src/app/(main)/websites/[id]/WebsiteChart.tsx
View File

@ -3,7 +3,7 @@ import PageviewsChart from 'components/metrics/PageviewsChart';
import { useApi, useDateRange, useTimezone, useNavigation } from 'components/hooks';
import { getDateArray } from 'lib/date';
export function WebsiteChart({ websiteId }) {
export function WebsiteChart({ websiteId }: { websiteId: string }) {
const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, unit, modified } = dateRange;
const [timezone] = useTimezone();
@ -12,12 +12,12 @@ export function WebsiteChart({ websiteId }) {
} = useNavigation();
const { get, useQuery } = useApi();
const { data, isLoading } = useQuery(
[
const { data, isLoading } = useQuery({
queryKey: [
'websites:pageviews',
{ websiteId, modified, url, referrer, os, browser, device, country, region, city, title },
],
() =>
queryFn: () =>
get(`/websites/${websiteId}/pageviews`, {
startAt: +startDate,
endAt: +endDate,
@ -33,7 +33,7 @@ export function WebsiteChart({ websiteId }) {
city,
title,
}),
);
});
const chartData = useMemo(() => {
if (data) {
@ -45,7 +45,7 @@ export function WebsiteChart({ websiteId }) {
return { pageviews: [], sessions: [] };
}, [data, startDate, endDate, unit]);
return <PageviewsChart websiteId={websiteId} data={chartData} unit={unit} loading={isLoading} />;
return <PageviewsChart data={chartData} unit={unit} isLoading={isLoading} />;
}
export default WebsiteChart;

10
src/app/(main)/websites/[id]/WebsiteChartList.js → src/app/(main)/websites/[id]/WebsiteChartList.tsx
View File

@ -8,7 +8,15 @@ import WebsiteHeader from './WebsiteHeader';
import { WebsiteMetricsBar } from './WebsiteMetricsBar';
import { useMessages, useLocale } from 'components/hooks';
export default function WebsiteChartList({ websites, showCharts, limit }) {
export default function WebsiteChartList({
websites,
showCharts,
limit,
}: {
websites: any[];
showCharts?: boolean;
limit?: number;
}) {
const { formatMessage, labels } = useMessages();
const { websiteOrder } = useDashboard();
const { dir } = useLocale();

7
src/app/(main)/websites/[id]/WebsiteDetails.js → src/app/(main)/websites/[id]/WebsiteDetails.tsx
View File

@ -11,7 +11,7 @@ import WebsiteHeader from './WebsiteHeader';
import WebsiteMetricsBar from './WebsiteMetricsBar';
import WebsiteTableView from './WebsiteTableView';
export default function WebsiteDetails({ websiteId }) {
export default function WebsiteDetails({ websiteId }: { websiteId: string }) {
const { data: website, isLoading, error } = useWebsite(websiteId);
const pathname = usePathname();
const showLinks = !pathname.includes('/share/');
@ -27,10 +27,7 @@ export default function WebsiteDetails({ websiteId }) {
return (
<>
<WebsiteHeader websiteId={websiteId} showLinks={showLinks} />
<FilterTags
websiteId={websiteId}
params={{ url, referrer, os, browser, device, country, region, city, title }}
/>
<FilterTags params={{ url, referrer, os, browser, device, country, region, city, title }} />
<WebsiteMetricsBar websiteId={websiteId} sticky={true} />
<WebsiteChart websiteId={websiteId} />
{!website && <Loading icon="dots" style={{ minHeight: 300 }} />}

12
src/app/(main)/websites/[id]/WebsiteFilterButton.js → src/app/(main)/websites/[id]/WebsiteFilterButton.tsx
View File

@ -3,7 +3,13 @@ import PopupForm from 'app/(main)/reports/[id]/PopupForm';
import FilterSelectForm from 'app/(main)/reports/[id]/FilterSelectForm';
import { useMessages, useNavigation } from 'components/hooks';
export function WebsiteFilterButton({ websiteId, className }) {
export function WebsiteFilterButton({
websiteId,
className,
}: {
websiteId: string;
className?: string;
}) {
const { formatMessage, labels } = useMessages();
const { makeUrl, router } = useNavigation();
@ -31,9 +37,9 @@ export function WebsiteFilterButton({ websiteId, className }) {
<Text>{formatMessage(labels.filter)}</Text>
</Button>
<Popup position="bottom" alignment="start">
{close => {
{(close: () => void) => {
return (
<PopupForm onClose={close}>
<PopupForm>
<FilterSelectForm
websiteId={websiteId}
items={fieldOptions}

Some files were not shown because too many files have changed in this diff Show More