Funnel Table/Chart hooked up.

components/pages/reports/FunnelForm.js

@@ -1,12 +1,8 @@
-import { useMutation } from '@tanstack/react-query';
 import DateFilter from 'components/input/DateFilter';
 import WebsiteSelect from 'components/input/WebsiteSelect';
-import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
-import useUser from 'hooks/useUser';
 import { parseDateRange } from 'lib/date';
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import {
   Button,
   Form,
@@ -17,15 +13,15 @@ import {
   TextField,
 } from 'react-basics';
 import styles from './FunnelForm.module.css';
-import { getNextInternalQuery } from 'next/dist/server/request-meta';
 
 export function FunnelForm({ onSearch }) {
-  const { formatMessage, labels, getMessage } = useMessages();
-  const [dateRange, setDateRange] = useState(null);
-  const [startDate, setStartDate] = useState(null);
-  const [endDate, setEndDate] = useState(null);
+  const { formatMessage, labels } = useMessages();
+  const [dateRange, setDateRange] = useState('');
+  const [startAt, setStartAt] = useState();
+  const [endAt, setEndAt] = useState();
   const [urls, setUrls] = useState(['']);
   const [websiteId, setWebsiteId] = useState('');
+  const [window, setWindow] = useState(60);
 
   const handleSubmit = async data => {
     onSearch(data);
@@ -35,14 +31,16 @@ export function FunnelForm({ onSearch }) {
     const { startDate, endDate } = parseDateRange(value);
 
     setDateRange(value);
-    setStartDate(startDate);
-    setEndDate(endDate);
+    setStartAt(startDate.getTime());
+    setEndAt(endDate.getTime());
   };
 
-  const handleAddUrl = () => setUrls([...urls, 'meow']);
+  const handleAddUrl = () => setUrls([...urls, '']);
 
   const handleRemoveUrl = i => setUrls(urls.splice(i, 1));
 
+  const handleWindowChange = value => setWindow(value.target.value);
+
   const handleUrlChange = (value, i) => {
     const nextUrls = [...urls];
 
@@ -55,13 +53,14 @@ export function FunnelForm({ onSearch }) {
       <Form
         values={{
           websiteId,
-          startDate,
-          endDate,
+          startAt,
+          endAt,
           urls,
+          window,
         }}
         onSubmit={handleSubmit}
       >
-        <FormRow label="website">
+        <FormRow label={formatMessage(labels.website)}>
           <WebsiteSelect websiteId={websiteId} onSelect={value => setWebsiteId(value)} />
           <FormInput name="websiteId" rules={{ required: formatMessage(labels.required) }}>
             <TextField value={websiteId} className={styles.hiddenInput} />
@@ -73,28 +72,39 @@ export function FunnelForm({ onSearch }) {
             value={dateRange}
             alignment="start"
             onChange={handleDateChange}
+            isF
           />
           <FormInput
-            name="startDate"
+            name="startAt"
             className={styles.hiddenInput}
             rules={{ required: formatMessage(labels.required) }}
           >
-            <TextField value={startDate} />
+            <TextField value={startAt} />
           </FormInput>
-          <FormInput name="endDate" rules={{ required: formatMessage(labels.required) }}>
-            <TextField value={endDate} className={styles.hiddenInput} />
+          <FormInput name="endAt" rules={{ required: formatMessage(labels.required) }}>
+            <TextField value={endAt} className={styles.hiddenInput} />
+          </FormInput>
+        </FormRow>
+        <FormRow label="Window (minutes)">
+          <FormInput
+            name="window"
+            rules={{ required: formatMessage(labels.required), pattern: /[0-9]+/ }}
+          >
+            <TextField value={window} onChange={handleWindowChange} />
           </FormInput>
         </FormRow>
         <Button onClick={handleAddUrl}>Add URL</Button>
         {urls.map((a, i) => (
-          <FormRow key={`url${i}`} label={`URL ${i + 1}`}>
-            <Button onClick={() => handleRemoveUrl(i)}>Remove URL</Button>
+          <FormRow className={styles.urlFormRow} key={`url${i}`} label={`URL ${i + 1}`}>
             <TextField value={urls[i]} onChange={value => handleUrlChange(value, i)} />
+            <Button onClick={() => handleRemoveUrl(i)}>Remove URL</Button>
           </FormRow>
         ))}
 
         <FormButtons>
-          <SubmitButton variant="primary">Search</SubmitButton>
+          <SubmitButton variant="primary" disabled={false}>
+            Search
+          </SubmitButton>
         </FormButtons>
       </Form>
     </>