m
/
umami
mirror of https://github.com/kremalicious/umami.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Typescript refactor.

This commit is contained in:
Mike Cao 2023-12-03 03:07:03 -08:00
parent b578162cb6
commit 7c42f0da82
173 changed files with 968 additions and 549 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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.110.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

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

@ -1,18 +1,18 @@
'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({
queryKey: ['websites:me'],
@ -20,14 +20,14 @@ export function TestConsole({ websiteId }) {
});
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',
@ -47,7 +47,7 @@ export function TestConsole({ websiteId }) {
}
function handleIdentifyClick() {
window.umami.identify({
window['umami'].identify({
userId: 123,
name: 'brian',
number: Math.random() * 100,
@ -74,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>
@ -116,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 />
@ -125,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>

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

@ -11,23 +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({
queryKey: ['websites', page, pageSize],
queryFn: () => 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" />;
}

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

@ -60,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?.();

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

@ -1,18 +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({
queryKey: ['reports', { websiteId, modified }],
queryFn: (params: any) =>
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>

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

@ -5,7 +5,7 @@ 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({
@ -22,12 +22,24 @@ function useValues(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

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

@ -12,7 +12,7 @@ const reports = {
retention: RetentionReport,
};
export default function ReportDetails({ reportId }) {
export default function ReportDetails({ reportId }: { reportId: string }) {
const { get, useQuery } = useApi();
const { data: report } = useQuery({
queryKey: ['reports', reportId],

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

17
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';
@ -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 />} />

2
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();

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>
);

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

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

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 />

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

@ -4,7 +4,7 @@ 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({

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();

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

@ -10,7 +10,7 @@ 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);
@ -24,7 +24,7 @@ export function TeamSettings({ 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>

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

@ -7,11 +7,21 @@ 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 { mutate, error } = useMutation({
mutationFn: (data: any) => post(`/teams/${teamId}/websites`, data),
});
const { data: websites, isLoading } = useQuery({
queryKey: ['websites'],
queryFn: () => get('/websites'),
@ -42,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

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

@ -8,7 +8,7 @@ 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();
@ -24,7 +24,7 @@ export function TeamWebsites({ teamId }) {
});
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({
queryKey: ['user:websites', userId, filter, page, pageSize],
queryFn: () =>
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;

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

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

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

@ -21,7 +21,7 @@ export function UserSettings({ userId }) {
return get(`/users/${userId}`);
}
},
cacheTime: 0,
gcTime: 0,
});
const handleSave = data => {

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>
)}

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

@ -20,7 +20,7 @@ export function WebsiteSettings({ websiteId, openExternal = false, analyticsUrl
queryKey: ['website', websiteId],
queryFn: () => get(`/websites/${websiteId}`),
enabled: !!websiteId,
cacheTime: 0,
gcTime: 0,
});
const [values, setValues] = useState(null);
const [tab, setTab] = useState('details');

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>

4
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();
@ -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}

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

@ -1,4 +1,5 @@
'use client';
import { ReactNode } from 'react';
import classNames from 'classnames';
import { Text, Button, Icon } from 'react-basics';
import Link from 'next/link';
@ -9,7 +10,15 @@ import Icons from 'components/icons';
import { useMessages, useWebsite } from 'components/hooks';
import styles from './WebsiteHeader.module.css';
export function WebsiteHeader({ websiteId, showLinks = true, children }) {
export function WebsiteHeader({
websiteId,
showLinks = true,
children,
}: {
websiteId: string;
showLinks?: boolean;
children?: ReactNode;
}) {
const { formatMessage, labels } = useMessages();
const pathname = usePathname();
const { data: website } = useWebsite(websiteId);

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

@ -33,7 +33,13 @@ const views = {
query: QueryParametersTable,
};
export default function WebsiteMenuView({ websiteId, websiteDomain }) {
export default function WebsiteMenuView({
websiteId,
websiteDomain,
}: {
websiteId: string;
websiteDomain?: string;
}) {
const { formatMessage, labels } = useMessages();
const {
router,

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