import { useMutation } from '@tanstack/react-query'; import classNames from 'classnames'; import DateFilter from 'components/common/DateFilter'; import DataTable from 'components/metrics/DataTable'; import FilterTags from 'components/metrics/FilterTags'; import useApi from 'hooks/useApi'; import useDateRange from 'hooks/useDateRange'; import useTimezone from 'hooks/useTimezone'; import { useEffect, useState, useRef } from 'react'; import { Button, Dropdown, Flexbox, Form, FormButtons, FormInput, FormRow, Item, TextField, } from 'react-basics'; import { FormattedMessage } from 'react-intl'; import { FormMessage } from '../layout/FormLayout'; import styles from './EventDataForm.module.css'; export const filterOptions = [ { label: 'Count', value: 'count' }, { label: 'Average', value: 'avg' }, { label: 'Minimum', value: 'min' }, { label: 'Maximum', value: 'max' }, { label: 'Sum', value: 'sum' }, ]; export const dateOptions = [ { label: , value: '1day' }, { label: ( ), value: '24hour', }, { label: , value: '-1day', }, { label: , value: '1week', divider: true, }, { label: ( ), value: '7day', }, { label: , value: '1month', divider: true, }, { label: ( ), value: '30day', }, { label: ( ), value: '90day', }, { label: , value: '1year' }, { label: , value: 'custom', divider: true, }, ]; export default function EventDataForm({ websiteId, onClose, className }) { const { post } = useApi(); const [message, setMessage] = useState(); const { mutate } = useMutation(data => post(`/websites/${websiteId}/eventdata`, data)); const [columns, setColumns] = useState({}); const [filters, setFilters] = useState({}); const [type, setType] = useState(''); const [data, setData] = useState([]); const [dateRange, setDateRange] = useDateRange('report'); const { startDate, endDate, value } = dateRange; const [timezone] = useTimezone(); const [isValid, setIsValid] = useState(false); const columnRef = useRef(null); const filterRef = useRef(null); useEffect(() => { if (Object.keys(columns).length > 0) { setIsValid(true); } else { setIsValid(false); } }, [columns]); const handleAddTag = (value, list, setState, ref, clearDropdown) => { setState({ ...list, [`${value.field}`]: value.value }); ref.current.reset({ field: '', value: '' }); if (clearDropdown) { setType(''); } }; const handleRemoveTag = (value, list, setState) => { const newList = { ...list }; delete newList[`${value}`]; setState(newList); }; const handleSubmit = async () => { const params = { website_id: websiteId, startAt: +startDate, endAt: +endDate, timezone, columns, filters, }; mutate(params, { onSuccess: async data => { setData(data); setMessage(null); }, onError: async () => { setMessage( , ); setData([]); }, }); }; return ( <> {message}
}>
handleAddTag({ ...value, value: type }, columns, setColumns, columnRef, true) } > } > }> {({ value, label }) => {label}}
handleRemoveTag(value, columns, setColumns)} />
handleAddTag(value, filters, setFilters, filterRef)} > } > }>
handleRemoveTag(value, filters, setFilters)} />
); }